An Event Apart: Billboards & Novels

by Luke Wroblewski May 20, 2013

In his Billboards & Novels talk at An Event Apart in San Diego, CA 2013 Jon Tan talked about important considerations for font setting and selection on the Web. Here's my notes from his talk:

  • The Web is reading: how can we give them a better experience doing that?
  • Language is human communication through the use of written and spoke word in a structured way. Words are gestures that paint pictures in our mind.
  • A recent study found that “there are important differences between good and poor typography that appear to have little effect on reading speed and comprehension.” People are really good at making sense of even bad writing.
  • This same study though found that “good typography induces a good mood.” Putting people in a good helps them complete tasks and even underestimate how long the task took them. Basically, time flies when you are having fun. Good typography can help with that. That’s why as designers we should care about good type setting and selection.
  • The Web is a crude medium for typographers because they have to deal with a wide range of devices: different pixel density and screen sizes.
  • In addition to huge differences in the quality of screen resolutions, devices can have distinct rendering environments for type: standard smoothing, direct write, clear type, core type + core graphics, etc. This introduces variation in when fonts get anti-aliased (font size) and how they look when smoothed.
  • Often fonts have to be redrawn several times to work well on many screens.
  • A typeface is an idea. It will be redrawn for when/how it is used. For fonts that can mean different adjustments for print and for screens. For example, Matthew Carter’s Bell Centennial font was designed for high-speed printing in phone books where ink can bleed. Similarly, Abril and Siri fonts have variations that adjust for screen differences.
  • Carter also designed Verdana and fonts optimized for the screen.

Fonts for the Screen

  • Some fonts are optimized for Web. Lean towards those.
  • Check that the font you want is licensed for Web site use.
  • Test the smallest screen size first or on the most adverse screens where fonts are likely to have rendering issues.
  • Confirm language support. If you require certain languages, make sure they are available.
  • What font variants and features do you need? old style numbers, punctuation, spaces, fractions, small caps, symbols, ornaments, ligatures, etc?
  • Legibility is taking delight in the smallest things. Because the small details matter.
  • Letters within a word are recognized simultaneously. We skip along lines in saccades with pauses and fixations that allow use to understand groups of letters before reading on.
  • It's really important that people can recognize letter forms.
  • The text “agh! iIl1” is a good way to get a flavor of a font. It helps you see how legible a face is and it’s characteristics.
  • Kerning and ligatures: text-rendering and optimizeLegibility can be set on Safari and Chrome to enhance font rendering.
  • Hyphenation styling options are supported in new versions of FireFox, Safari, IE10, and hopefully more browsers soon.
  • Open Type features are coming soon but you can begin to use them in a progressive enhancement workflow. These elements allow you to turn on/off specific open type features within fonts.
  • Scan paths are how we move visually through Web pages. Hierarchy can guide people through the elements within a layout. Aim for deliberate interruptions: using position, density, space, hue, luminosity.
  • Use interruptions for meaning not just artistic flair.
  • The measure is how long a column should span in order to remain legible. A good average is 40 to 50 characters.
  • Look for interruptions in the scan path. Squint to see what catches your attention. If everything is calling for your attention, then you can't focus on anything.
  • There are no rules just good decisions. Remember there’s nuance and subtlety behind design.

Emotional Communication

  • Sometime there are no words. We recognize faces in 40ms and have an emotional reaction without consciously knowing we’ve seen a face.
  • Language can be insufficient to explain the things we are seeing and feeling.
  • There are 4.2 million colors on an advanced display but we don’t have names for all of them.
  • We communicate something emotional with the font we choose and how we set them. Language is not necessary for emotion.
  • Fonts are way-finding apps for emotions. Embedded in fonts is an idea that can communicate to people and affect their mood on a visceral level.
  • We are trying to get people to destinations. To create impact (short form text) or immersive experiences (log form text).
  • Type shapes our experience. It paints pictures in our mind.
  • “Details in typefaces are not to be seen but felt.” –Erik Spiekermann
  • It's all about emotion –use it for doing the right thing with type. “Don’t think. Feel.”