An Event Apart: Universal Typography

by December 9, 2013

At An Event Apart in San Francisco CA 2013, Tim Brown shared fundamental best practices for typography and how to make the most of them on the Web. Here's my notes from his talk Universal Typography:

  • The Web is the best place for text: it can be searched, copied, translated, printed, and more.
  • We're doing things with text that couldn't have been imagined when many typographic standards were established and thought out but that doesn't mean we don't keep doing our job. There will always be things for which designers and developers aren't prepared. The web is always changing. Think abstractly but work in the details.
  • Characters are unique characters. Glyphs are representations of these characters. Type designers don't just think about glyphs, they spend a lot of time focused on the negative spaces between letters. Drawing and spacing type are simultaneous parts of the same process.
  • Size, leading, and measure are the balance of typography. Practicing typography is changing the values in this formula and judging the results for legibility, beauty, and meeting expectations.
  • Even similar-looking typefaces can look different with changes in leading and measure.
  • Appropriateness: different fonts look better in headlines and others look better in body copy.
  • Coarse to fine is the third axis for choosing type: low resolution to high resolution fonts. Low resolution like newspaper requires different settings than retina displays.
  • On the Web we set limits and adjust behaviors to fit the environment. Typography on the Web is a continuum of conditional logics.
  • Before you start executing, think about the job of a piece of content. Is it to catch people's attention or to be read.

Setting Type

  • Set: If type is meant to be read, the default font size should stay the same across device sizes. We anchor on size, but adjust measure.
  • Always reset your stylesheets so you can make your own decisions in Web design. Always have your viewport make match your device-width.
  • How do you set font-size in CSS? Start out with body size as 100%, then use em-based values to adjust font-size up and down. This is still a best practice. If you set root font-size to something higher than 100%, media queries set in ems will not match your type sizing.
  • A modular scale allows you to make elements in a composition feel more proportionally related.
  • 45-75 characters is the best fit for the measure of a line.
  • moltenleading is a Javascript plugin that adjust line leading based on min/max limits.

Fitting Type

  • Fit: Display type on the other hand should work adjust itself to fit it's container -this is more like graphic design. We anchor on measure, but adjust size.
  • To adjust type in graphic elements, you can use a number of breakpoints or a Javascript solution like fittext or responsive measures.
  • Size is what flexes when you fit type. Make sure all characters are recognizable at that sizes you're using.
  • Line height may need to be adjusted to make sure the different lines feel like a single whole.

Containers

  • Designing grids with proportions all ow us to make meaningful design decisions.
  • Start with a mobile first design and see where the design starts to feel odd, then create adjustments.
  • Gauging reading distance and anti-aliasing features are examples of sensing: gathering information about context and serving the right text settings.
  • Type Rendering Mix allows you to apply CSS based on the text rasterizer and antialiasing.
  • How can we alleviate the pressure in out containers? Do we need different renderings, faces, optical changes, or something else.
  • The Web has changed typography but typography can help us understand the Web.