Session 5: Typography Part 2

Session 5: Typography Part 2 slides

Objective: Practice basic design principles for typography across different form factors and scales

Lecture:

• Basic typesetting rules

  • Choose appropriate type

  • Things that go together should be closer to each other than they are to other things

  • No lonely things, and no misfits

  • Don’t make the smallest things too small to read

  • More important things should be bigger than less important things

  • Bigness is not negotiated with size

  • Respect the reader’s rhythm and pace

• Mobile/product specific considerations

  • Flow to different form factors

  • Understanding things proportionally rather than in absolute terms

  • What is an em, how does this all get coded

  • Typesetting and accessibility

Some reading and watching:

Jürg Lehni, Typeface as Programme: A nice connection of programming and type design. Jürg's brother Urs Lehni designed the Circular typeface from LineTo.

Paul Ford, The Sixth Stage of Grief is Retro-Computing: Networks without Networks: Not strictly about type, more about history, but he does get to talking about type and Apple interfaces and how that all came to be.

Tobias Frère-Jones, In Letters We Trust: Tobias is one of the best type designers and type historians on earth. This is a great talk on the history of type and security, also about tools.

Homework: Due by 9am Tuesday, February 12

• Take one of the typographic hierarchies you did (a set of three with the same font choices) in the last class and copy and paste it into a new Figma file. Extend it to a vertical tablet screen and and desktop screen (you should have 9 artboards). Follow all of the rules that we covered, and increase contrast as you scale up. Keep everything black and white.

• Copy the whole set of nine and make another version that uses other methods like color and transparency to indicate hierarchy.

• Hit the play button and share the prototype into the artifact sheet.

Some things to think about:

If you look at the examples in the slides, you will see that the scale of type as expressed in a ratio to be different.

So, on a larger screen, the biggest type might be 3 or 4 times as large as the smallest type on the screen. This is because on a bigger surface, the smaller things can be a lot smaller than the bigger things and everything can still stay legible.

On a smaller screen, you’ll find that the ratio drops. There are constraints on a smaller screen: small type can only go so small before it’s illegible, and large type can only go so large before you have to break it up with hyphens (or it takes over the whole screen).

This is why when you look at a site on mobile, it’s not just the big thing shrunk down, with all the proportions the same.

• Bad UX example