Skip to content

Session 4: Typography Part 1

Juliette Cezzar edited this page Feb 4, 2020 · 17 revisions

Session 4: Typography Part 1 slides

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

Lecture:

  • Why typography matters more than anything else, why are we spending so much time on it

    • Form of type: Holding your own under the stress of different form factors

    • Typesetting: Usability of information/content

    • Identity: What am I even looking at

  • Brief history of type on the web

  • Type: what’s the difference?

    • Type history and classifications

    • Serif, sans-serif, high contrast, low contrast

    • Comparing and looking at examples

  • How to choose type, type tools

    • Google Fonts

    • Typekit, Fontstand, Typewolf

    • Other tools for checking and setting type

Homework:

### Homework:
  • Create three mobile-sized screens that show three levels of typographic hierarchy by scale using given content. You can create this in relationship to your startup studio project, or use my example, which I will put at the top of the artifact sheet after class.

  • Translate that to three different type presentations, all black and white: 1) snobby 2) fun and 3) authoritative. Choose a base typeface (for paragraph content, also known as body copy) and a display typeface (for headers and titles). They can be bold and normal in the same family, or two different families. Some pointers: 1) You can use display type (type that only looks good big because it has a lot of contrast or details) only for things that are big, like headers and titles. Display type looks terrible as body copy (fonts used for paragraphs of text). 2) You can use your base typeface for body copy as display type if you are going to scale it 1.5x or 2x or more. 3) A lot of contemporary design, in part for efficiency and in part for aesthetics, will use one typeface (like Roboto, for example) but use different weights for different purposes. So, for example, using the lightest or heaviest would be bad for body copy, but pretty nice for big text.

  • Bad UX example

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.

Working with fonts in Figma:

https://help.figma.com/article/250-working-with-fonts

Font collections:

Typewolf

Fonts in Use

Fontstand

Typekit

Google Fonts

🔥🔥Font foundries:

Klim Type Foundry

Commercial Type

LineTo

Frere Jones Type

Grilli Type

Colophon

Font tools:

What the font mobile

What the font desktop

WhatFont Chrome plugin

Typecast

Tinytype

Tool-specific tools:

Custom fonts in Figma

Sketch text styles

More typography tools in Sketch