UI vs Print: Contradictions in typographical practice

No matter their training or specialism, designers are united by a love of letters. Typography is often described as an art or treated as a means of expression, but at its most fundamental level, it’s a powerful tool. Whether the medium is print or digital, typography plays the most important role. It ensures a product is functional, creates hierarchy and determines legibility. Alongside all this, it makes an impact on an emotional level, conveying a sense of a brand’s character.

Type is beautiful — so far, so good… print and digital designers are all on the same page (as it were). There’s a clear line where the standards of perfection divide, however. I’m talking about line-height, or leading.

For clarity about some of the terminology to follow in this article, check out my ‘anatomy of type’ glossary. If you’re already down with the lingo, read on…

When it comes to print, the standards for legible leading are much tighter. The most long-established starting point is to ‘add two’. So if your font size is 10pt, this makes a line-height of 12pt a good fit. There are a few ways of expressing this principle and some textbooks talk about 1.2 or 120% — but the idea is the same. We’ll call this the ‘traditional model’:

“For a 10pt font the usual leading is 12pt, creating a 10/12 ratio, which is considered single spacing.” Elements of Typographic Style (2012)

For interface designers, bigger is better: if legibility is important, choose a tall line-height. Authorities in the UI community guide type practitioners towards a ratio of 1.5 or 150%. Let’s call this the ‘digital model’:

‘Once you have decided on your body copy font size, multiplying this value by 1.5 will give you the optimal line height.’ Smashing Magazine (2009)

To test the influence of these lessons, I printed a single page with two paragraphs of the same text, one set looser than the other. I showed this to designer friends from different backgrounds and asked them which was easier to read. The print designers unanimously preferred the tighter version, while most of my colleagues in UI felt strongly about the opposite.

So what’s going on? Have standards of functionality really changed, or has there been a shift in the perception of beauty? What are today’s rules, and whose authority should we listen to?

Many UX designers reference the W3C Accessibility guidelines as proof that looser line-height is more legible. Here the recommendations state that:

• Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)
• Foreground and background colors can be selected by the user.
  Width is no more than 80 characters or glyphs (40 if CJK).
• Text is not justified (aligned to both the left and the right margins).
• Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
• Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

You can’t argue with the importance of accessibility and legibility… of course interfaces need to be inclusive. But it’s interesting that these guidelines appear to ignore the distinct anatomy of different typefaces. In print, the x-height of a typeface would typically affect line-height and would, therefore, be optically optimized. Why should the rules be different for UI design?

I started analyzing the typography of popular interfaces that focus on legibility to learn more, and to see if designers are actually following the W3C advice.

Amazon Kindle for iOS☝️
Font size: 18
Line-height: 23.5
Line-height / Font size = 1.3

iBooks for iOS☝️
Font size: 18
Line-height: 22
Line-height / Font size = 1.2

Airbnb for iOS☝️
Font size: 14
Line-height: 23
Line-height / Font size = 1.65

App Store for iOS☝️
Font size: 21
Line-height: 25
Line-height / Font size = 1.23

Play Store for Android☝️
Font size: 14
Line-height: 22
Line-height / Font size = 1.8

Airbnb Website☝️
Font size: 18
Line-height: 26
Line-height / Font size = 1.4

Google Material Design Website☝️
Font size: 17
Line-height: 24
Line-height / Font size = 1.4

Medium Website☝️
Font size: 21
Line-height: 33
Line-height / Font size = 1.55

Summary Table

iBooks for iOS…………………………………Line-height / Font size = 1.2

App Store for iOS………………………….….Line-height / Font size = 1.23

Amazon Kindle for iOS………………………Line-height / Font size = 1.3

Google Material Design Website……………Line-height / Font size = 1.4

Airbnb Website……………………………….Line-height / Font size = 1.4

Medium.com Website………………………..Line-height / Font size = 1.55

Airbnb for iOS………………………………..Line-height / Font size = 1.65

Play Store for Android………………………Line-height / Font size = 1.8

The conclusions that I’d draw from this experiment suggest that when UI is typography-focused (such as e-readers and e-books), line-height follows traditional standards. The more the product is focused on technology or digital services, the more the line-height increases.

iOS Dynamic Type Analysis

Apple is an interesting study as the leading follows a more traditional model. In 2013, the company addressed Accessibility by introducing a technology called ‘Dynamic Type Scaling’ for iOS, designed to meet the needs of individuals with visual impairments. The tool allows users to scale font sizes up or down across all apps built by Apple and is open to anyone designing and building apps for iOS. As you can imagine, it’s been heavily promoted.

Here’s how it works:

By default, iOS has 11 typestyles.

Dynamic Type allows users to change the scale of all text styles, choosing one of seven scales from xSmall to xxxLarge.

In addition to these seven scales, there are five extra-large scales that focus on Accessibility.

If you look closely at font size and line-height, on the seven standard scales, font size gradually increases by either one point (with the smaller options) or by two (at the larger end). You can see that with smaller font styles, such as captions, behaviour is much more customised.

Now let’s take a look at the Accessible sizes. Here it becomes obvious that Apple have put in enormous work to optimise each visual element depending on the purpose of the typestyle. It’s impossible to identify a rule because everything is customised.

Let’s repeat the same exercise with line-height, looking at the ratio of font size in relation to line-height.

Font size / Line height = Value

Here there’s much greater consistency and it’s interesting that the Title styles and Caption styles are tighter than the body sizes. This makes sense because titles and captions typically contain only one or two lines of text, and the function of leading is to hold the lines together.

On the Accessible scales we have even greater consistency:

Apple’s use of font, therefore, combines the best of both worlds; it’s functional and beautiful. Behind the scenes, this is determined by a strict and complicated system.

Google’s Multidimensional Approach

Google’s UI sits at the other end of the spectrum when it comes to fonts (and other things too) with much greater flexibility of application and… much looser line-height. This is no coincidence.

I’m a huge fan of projects like Google Fonts, which explore and champion free and inclusive typography. Google’s Noto typeface, for example, is an attempt to create one font that supports all languages and character sets, from Armenian to Japanese. This is a universal approach that reflects Google’s values and vision and it requires what I like to think of as ‘multidimensional design’.

Say you’re designing a button. You want it to say ‘Hello’ in every language, at the same time. This creates constraints for the design of the button — it must accommodate phrases that are long and short, in a range of different character sets. The designer must adopt a ‘multidimensional approach’ that makes the button fit for purpose in English and German, as well as Arabic and Korean.

A Google platform will use the same font for all languages, and a looser line-height helps it to achieve ‘multidimensional’ performance without sacrificing legibility. This approach is extremely functional, stepping away from traditional standards to set new standards for design.

If we compare Apple and Google, while both approaches adhere to the legal requirements for Accessibility, Apple’s Dynamic Type Scaling is much less inclusive. First, it’s only available to designers working with iOS apps. Secondly, it’s optimized for Apple’s default San Francisco typeface, and it can be tricky to implement with customs fonts and custom UI components.

If you’re designing a website, building your own dynamic type system would be a very time-consuming process, and will require a large investment. Without this support, designers needing to make quick decisions about how to apply typography in a way that will scale effectively (and universally), will find it easier to stick to a large line-height, looking first, perhaps, to the W3C guidelines.

Conclusion

When it comes to rules, therefore, I’m afraid the answer isn’t straight-forward. As with print-based typography, there are many optical judgments to be made, depending on the properties and personality of the font. Then there are considerations of time and budget to consider too. With new technology developing every week, the complexities of digital typesetting may increase before contradictions are resolved.

Digital typography must be multidimensional because accessibility and legibility are valued highly in our globally connected modern world. Apple’s Dynamic Type Scaling is very impressive, but it needs to become more accessible, while Google’s universal solution has aesthetic flaws. For now, generous leading offers the best solution because the rules are easy to understand and apply.

This is a compromise, but it’s a solution that’s been embraced. And because we see looser leading everywhere, it’s become the visual norm. An approach that was formed by function has — ironically — become an aesthetic trend, associated with the modern technological world, and distanced from the formality and exclusivity of print. As with all trends, who know what’s next.