Better Type on Screens (Part 2)
Posted by julian on Oct. 13, 2016, 2:57 p.m.
In the first part of this series, I looked at the constraints imposed by screens and how those can impact the UX of reading. This time, I’ll look at what we can do better when we plan out a type system. I’ll skip over the valuable, but often repeated warnings about scale, adequate color contrast, etc., and instead look at some best practices for choosing fonts that are well suited to screens. I’ll enumerate some common characteristics that screen fonts share, provide some pointers on how to spot potential issues and touch on a few emerging practices for setting type that works well across both high and low DPI screens.
Scale and stroke contrast
Typefaces with relatively uniform stroke weights in which there is little differentiation between thick and thin strokes are often the safest choice. Sans-serif typefaces with simple features and low stroke contrast are ubiquitous as interface fonts for good reason. It should be noted, however, that the role of serifs remains poorly understood, and it's not entirely clear what we give up when we choose a sans serif typeface for long form text . If set at sufficiently large size they can provide a compelling, immersive reading experience. If you do choose to use a serifed typeface, be particularly careful to avoid excessive contrast between thick and thin strokes, especially if you intend to use it at body copy sizes. Print design workhorses such as didones, old–style, and transitional faces are often poorly suited to anything but the largest scale applications on low resolution screens.
In addition to point size, there’s another critical aspect of a typeface’s design that will help define its perceived scale: x-height. This measure (the height of a lowercase "x" glyph) determines the overall proportions of the typeface.
Taller x-heights can provide a significant boost to legibility without requiring a larger point size. By making the x-height features of each letterform more generous it becomes easier to discern unique characteristics of each. Unfortunately this type design technique does have its limits. As the x-height inches closer to the "cap height", ascenders become less effective tools for differentiating between similar letters. This makes it harder to distinguish between characters that depend on ascenders for uniqueness such as "a" and "d".This brings us to another consideration: readily identifiable letterforms.
In the Helvetica sample below the "i" and "l" characters remain tough to pick apart, even at larger sizes:
Typefaces that have been designed for interfaces will often take care to ensure that similar characters are well differentiated from one another. This doesn’t mean that we should look for garish, exaggerated differences between letters. Typefaces are collections of shared components: bowls, stems, ascenders and descenders that are repeated throughout a design to create each glyph. Longform readability depends on this familiarity, and aggressive concessions to uniqueness can easily come at the expense of a harmonious, unified set of characters. In the context of a UI however, this priority can take a backseat to rapid and unambiguous letter shapes.
Typefaces with open apertures (the partially enclosed interiors within some letters) are often great options on screen. Apertures on glyphs like "C", "3", and "B" can easily collapse when used at small sizes, making it difficult to distinguish these characters from similar siblings. In the below example the relatively closed aperture on the terminals on the "c" and "o" shown in the Helvetica Neue and Akzidenz Grotesk samples become problematic at small sizes.
In contrast the Futura sample employs a more open aperture that retains its shape.
Don’t use synthetic weights and styles
This one might be obvious, but warrants repeating: don’t fake weights and styles. If a weight or style is specified in CSS and no associated font file is defined, browsers will synthesize (fake) that weight or style. Italics, bold weights, and small-caps will be generated by simply scaling, skewing, or padding the existing letterforms. These should be avoided at all costs; they are a far cry from their authentic counterparts in terms of legibility and quality. These can often slip through QA (particularly if local copies of missing font files are in use in the designer or front end developers’ local environment). The computed tab in Chrome’s dev tools is a quick way to check that the correct characters are being rendered.
Do Use OpenType features
Advanced typographic controls offered by OpenType can boost legibility. When considering a particular typeface be sure to verify that it offers the right set of features for your needs. If your font file has OpenType options (proper kerning, lowercase/oldstyle numbers, real small-caps, ligatures, etc.) These can make a subtle but significant difference to the reading experience. If you’re not going to make use of these features, be sure to subset the font to disable them; doing so will reduce file size and improve performance, another key aspect of good UX! Browser support is generally strong, and these features are generally good candidates for a progressively enhanced approach – (if readers don’t see proper oldstyle numerals or custom fraction glyphs, for example, they’ll still be able to read your content).
Use size-specific weights
Choosing the right weight for a given context is essential. More complete font families often include purpose-built display weights intended for use in large-scale applications, usually labeled “display”, “titling”, or “fine”. These weights offer high stroke contrast and details that are impractical at smaller sizes. In the sample of Okay Type’s “Harriet” below, the elegant ball terminal in the display weight disappears, and overall stroke contrast is reduced. In Hoefler & Co’s Surveyor, the adjustments to the Fine grade are even more pronounced, with the entire figure becoming more compact to suit a densely-packed heading.
Similarly, some font families include “micro” weights, variants that are intended for use at small sizes and designed for high legibility at very small sizes:
Taking this approach to its logical extreme are font families that have been optimized for use at specific point sizes. This approach is uncommon on the web, but is worth considering in contexts where brand guidelines or aesthetic considerations demand challenging styles. In Hoefler & Co’s Didot below, the sample shows the same typeface in a range of weights optimized for use across the size spectrum.
This approach allows for granular control over the appearance of type, providing a unified and highly legible font family that works across a dramatic range of sizes. Unfortunately, each weight resides in a separate font file, often rendering this approach impractical from a performance perspective.
Variable type: a promising new solution
The recent announcement of OpenType Variable Fonts offers to an exciting new set of solutions to these challenges. From the announcement:
An OpenType variable font is one in which the equivalent of multiple individual fonts can be compactly packaged within a single font file. This is done by defining variations within the font, which constitute a single- or multi-axis design space within which many font instances can be interpolated. A variable font is a single font file that behaves like multiple fonts.
This approach promises the best of all worlds: the precise typographic control of optically mastered fonts without the performance overhead. These might for instance allow us to set heading type in a hairline weight on high DPI devices and fall back to a thicker weight on low DPI screens, or tweak the weight of heading text when it’s reversed-out. While these features as well as their technical requirements are well defined in the published OpenType 1.8 spec and offer a clear path forward for type designers, they still need to be adopted by type foundries, built out, and integrated into front-end workflows. The good news is that the standard enjoys broad support. It’s currently backed by Adobe, Microsoft, Apple, and Google.
Robert Bringhurst, 2014 4th Edition
In addition to being a valuable reference text, this classic type book provides thorough background on when and why to use various OpenType features
Code samples for front-end developers looking to get started with DPI-based media queries
Tim Ahrens and Shoko Mugikura (2014)
An exhaustive exploration of size-specific type design considerations. Aimed primarily at type designers, but full of practical insights for anyone working with type.
Karen Cheng (2006)
Cheng's excellent reference text takes a careful, glyph-by-glyph look at letterform design.
Legendary type designer Tobias Frere Jones' discussion of the issues and prospective solutions posed by text on screens. Contains some valuable insight into the history of optically sized type.