Notes: 4 Ways to Use Type on a Page

These notes are based on a talk given by Robby Ingebretsen (@ingebretsen on Twitter, Nerd Plus Art on the Web) in November 2011 at ØreDev. If you’re a font or design nerd, you can and should watch it on Vimeo. His talk can be broken down a number of ways. This is one.

  • Shape – reading personality, pairing
  • Layout – hierarchy, space, harmony
  • Technology – fonts, rendering, tools

Really, the emphasis is on two areas: body text and display text (with a healthy dose of layout and design throughout the presentation.

Body Text

The text we read. Usually comes in sentences and paragraphs.

  • Legibility – Are the glyphs readable and understandable?
  • Readability – Can I read this comfortably and for a long time?

When type gets small it’s hard to make it legible and even harder to make it readable. A phonebook provides an example of type that is meant to be legible without needing to be readable.

A Great Body in 5 Steps

  1. Bigger x-height – the height from the base to the top of a lowercase “x”
  2. Less stroke contrast – the width of the vertical strokes versus horizontal strokes.
  3. Glyph support
  4. Nothing weird
  5. Trust the classics

Best advice for body type legibility and readability? Read it yourself.

Display Text

Type used at large sizes. Some typefaces are designed for use solely at display sizes.

  • Serifs seem a little more fancy
  • Serifs with contrasting stroke widths seem even more fancy
  • Narrow or condensed typefaces feel deliberate and down to business
  • Extended or wide fonts give the impression of having something important to convey

Displaying characters to convey meaning

The Basics

Use fewer fonts (no more than three). Look first for contrast, then harmony. Not everyone can be a star

  1. One family, many weights
  2. Pair a serif with a sans serif
  3. Pair a strong typeface for the display with neutral typeface for the body

Type is a beautiful group of letters, not a group of beautiful letters. —Matthew Carter

Three levels of hierarchy may make it easier for the reader to understand. Laying out type in a grid also helps bring order to help the reader.

Typography is 10 percent letter management and 90 percent space management. —Alex White, “The Elements of Design”

A brief history of rendering text

  1. Printing press
  2. Offset press
  3. Digital press
  4. Digital display

Progression of font types

  1. Bitmap
  2. Postscript (vector-based)
  3. TrueType
  4. OpenType
  5. WOFF – an exciting new font format for the web

Rendering depends on three layers

  1. Typeface design
  2. Font technology
  3. Rasterization