An Event Apart: The Future of Responsive Typography

by Luke Wroblewski March 30, 2014

At An Event Apart in Seattle WA 2014, Nick Sherman talked a few challenges with typography on the Web and the potential for designers to do a lot more. Here's my notes from his talk The Future of Responsive Typography:

  • There has been a lot of advancement in Web typography over the years but there's still a lot we can improve.
  • Paragraph widths: the big problem on sites today is overly long paragraph widths. Max-width: 40em is basic guideline for making text more readable.
  • Kerning: can be used to tighten/loosen fonts. Ligatures: can combine letters to make them more legible. text-rendering: optimizeLegibility is one line of code that addresses these two issues and will instantly improve typography on the Web.
  • Sub-pixel font lettering can sometimes clog up letters especially on OSX. webkit-font-smoothing: antialiased; Don't use this on small fonts.
  • If everyone picked up these three tips , the Web would be better off.

Media Query Functionality

  • Physical resolution is missing in media queries. The original spec had physical dimensions of pixels and screens.
  • The way the spec works today is built around an assumption of 96dpi. If it changes, many things already built will break.
  • How can you address the issue of physical size on the Web?
  • In Windows 8, you can query the raw DPI of a screen (the physical size) but this can only be queried by native applications.
  • When you have the physical resolution of each screen, you can render fonts at the same size across different sized screens.
  • If you know the viewing distance, physical size of a screen -you can determine the perceived size of fonts.
  • Size calculator is a tool that can help you determine perceived size of elements viewed from far away.
  • Viewing distances are important to consider when targeting different viewports. There's no way to know for sure right now.
  • There's a media query that is supposed to tell you whether something is projected, but it does not seem to be supported.

Types & Fonts

  • Font should be made for specific purposes: low quality paper and low resolution screens for example.
  • Sibling fonts within a font-family can address situations like small fonts on the Web (down to 9 pixels).
  • Large font families with lots of widths and weights provide a lot of flexibility in web they could not with only a few styles. It increases their range of expressions.
  • Sitka was a new family of fonts designed for Microsoft Word with multiple optical size masters. It changes automatically depending on the size you are using the font as: caption, display, banner, etc.
  • In Web design, a lot is done dynamically and fluidly. Type, however, has a "glass floor": there is a hierarchy that can't be adjusted without loading a full font file. Changing width or weight requires a whole new font.
  • A variable font format: would provide more of a system instead of a set of font files. Interpolating weights would reduce file sizes, download times, and more.
  • We're currently stuck with "detect and serve": understanding screen size and loading an appropriate font face.
  • Font‑To‑Width uses large type families to fit pieces of text snugly within their containers.
  • A wide range of font styles is good for responsive designs because you can swap styles to fit into variable.