MA Web Design + Content Planning materials for applied art for the web • major project

Typography for the web

Web Design is 95% Typography.

This article was published in 2006, and caused such reaction that a follow-up article was published. I would highly recommend you read them both, plenty of food for thought.

Though this is a bold statement which you might, or might not, agree with – there is no doubt that carefully crafted typography will not only ensure good legibility of text and therefore accessibility but also greatly enhance the design and impact of any given website.

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Oliver Reichenstein, ia.net

Webdesign is all about typography. Period.

Oliver Reichenstein, ia.net
type illustration

typography for the web

This is a look back at the early days of type on the web. While we're now spoilt for choice, it's important to understand how web type works, and which options we have to use fonts on the web.

video course

This course on Pluralsight is a fitting addition to this week's topic - though I do not agree with all of the views expressed, the videos cover plenty of good basics.
Typography for the Web by Susan Simkins

If you are very new to typography it will be well worth your time to read up on some of the basic design principles involved in both type design and typography for the web. While there is much to read online, it used to be more difficult to find the right resource for those new to the subject.

But no longer — I am proud to present to you this brilliant site to help you get to grips with all the basics and more: Typelab.co.uk
Created as major project by our very own Hannah (who graduated 2016) – thanks, Hannah :)

typelablogo

This is the celebrated new miscellany of
Mr. Simon Collison A.K.A Colly

This is version 4 of the site of designer, author, speaker and event organiser Simon Collison. His website has since had a major update but luckily Simon is keeping this version online for our enjoyment :)
Let's have a look at this little gem of webdesign.

screnshot of v4 website, Simon Collison

This is one of my absolute favourite sites of all time with its very British charm, its beautiful content and delightful design. Best of all, it really does perfectly reflect Simon — one of our 'peple of the web'.

His eye for detail and the rich typography are something to aspire to. This is a perfect example how fine-tuned typesetting will add to the feel of a website.

Links

learn by playing ;)

Created by Mark MacKay, this is a beautiful way to train your eye. Even if you've never before considered the details of typesetting, or kerning in this case, this little game will will one way to focus on the spacing of letters.
Play Kerntype

more type games - for later!

Play Kerntype

kerntype game screenshot
Kerntype a kerning game

expressive typography

I hope you found “A Designer’s Code of Ethics” by Mike Monteiro as brilliant a read as I did?

Today's session task is to experiment with typesetting and your newly learnt CSS skills :) Use this article as source text and experiment.

Please feel free to use any other text of your choosing but bear in mind that this could take you longer than you'd like. This is a short-burst exercise only so time's of the essence.

  1. select a small section of the given text
    (download source files)
  2. work on layout to express the message of your chosen text

download source files

side note:
My examples may give you an idea of what your experiments might look like. They are primarily demos of layout with colour variation - but also serve an example of using light font weights.

Personally, I am very fond of setting type quite light. However, this is only advisable when used for large sizes, not for the main copy - as is evident on my index as well as the examples themselves.

Web Typography

Richard Rutter is a designer, author and speaker and one of the co-founders of Clearleft - and yep, you guessed it, one of our people of the web.

Around 2005 (i.e. before web fonts arrived), Richard published a site aiming to translate the principles covered in the famous typographer's "bible", Robert Bringhurst’s book The Elements of Typographic Style, to web typography. This site is still online, now open sourced and open to contributions on GitHub, too. In 2017, Richard wrote the book on web typography which I'd very highly recommend.

book cover

view slides

Richard is a bit of a font geek - and this talk certainly reflects this, you will learn a lot about the intricacies of setting type for onscreen display.

Tim Brown describes himself as "a designer, author, speaker, and maker of tools" (quoted from his site). He is Head of Typography at Adobe, has written a book on Flexible Typesetting and has created a few tools which can help you learn more about setting type for the web.

While there is much to read about type design and setting, it can be difficult to envisage how this might look in a browser on whichever device or screensize. It is easiest and most efficient to experiment with this using your own content and CSS ~ but while you are learning, this is easier said than done.

Please do watch the video and take on board Tim's advice. Don't be shy to experiment and play, break things to see what's wrong and then work towards finding the right approach.

screenshot

Go ahead, have a look and try it for yourself :)
Typesetting demo

book cover

Tim has published a nice little handbook for combining typefaces - now available as free PDF download. More and more resources change or go offline and so—while the link is still on the now old Typekit blogo—I've downloaded it and added it to our resources here, just in case :)

profile project

Quick reminder: the brief asks for a single page profile design.
Double-check project briefs for details and examples from students in the previous years.

CHECK LIST #2

  1. mark up your text in a fitting structure and begin to experiment with typesetting
  2. focus on clear hierarchy and put relevant emphasis on each content type
  3. put together a fitting font-stack with a minimum of 5 fonts

27/10/2021 group feedback on part #2

feedback to continue

And here's our weekly reshuffle. I've taken the list of your names and put this through a generator to form 4 teams, even numbers this time. Please do carry on with sharing your work with your group, or with us all ~ slack or whimsical whichever suits.

Do bear in mind how important collaboration is in our field. All aspects, from the visual design to the final build, will yield better results with more than one pair of eyes. Getting used to giving and receiving feedback will help us grow our skills ツ

speechbubble + hello

feedback groups, reshuffled

group 1
  1. Barbara
  2. Crystal
  3. Vishnu
  4. Anoop
  5. Carla
  6. Anna
group 2
  1. Jahnavi
  2. Vishnu AK
  3. Anto
  4. Dennis
  5. Katherine
  6. Maya
  7. Shreya
group 3
  1. Julija
  2. Mary
  3. Qu
  4. Yinka
  5. Jyothisha
  6. Jenny
  7. Caspar
group 4
  1. Vishnu VV
  2. Nikki
  3. Emily
  4. Alasdair
  5. Sara
  6. Peterson

Andy Clarke

Typography Can Be As Exciting As Illustration And Photography

Andy is a a designer, speaker, and writer - and one of my favourite web people :) He's a designer who codes and his talks and articles are always full of inspiration. He is currently writing a series—which I would highly recommend—of design-focused articles on Smashing Magazine.

typelablogo
U&lc (Uppercase and lowercase) magazine by Herb Lubalin.

Expressive typography needn’t need fancy fonts.

This particular article is the eighth issue and Andy introduces designs by American graphic designer and typographer Herb Lubalin which lead him to explore some very engaging approaches to designing with type. You'll find lovely example of designing with type as well as some CSS code insights.