Optimal Line-height Reconsidered (part 2)

More characters per line, even if line length is the same, demand larger line height. And so does Dark Mode.

This article is a sequel to “Optimal Line-height Reconsidered (part 1)” where I discussed why and how we should set the line-height value in proportion to x-height. Now let’s see what other factors should be taken into account when we choose line height.

TL;DR

Line-height needs to be larger when

1. There are more characters per line;
2. We expect the reader to take a slow, relaxed reading experience out of our website, rather than a quick, efficient one;
3. Character strokes are wider (e.g. sans serif as opposed to serif, bold as opposed to light ones, Dark Mode as opposed to the black-on-white mode).

In addition, make sure word-spacing appears smaller than line-spacing.

Number of characters per line

Professional typographers very often point out that line height should be larger if line length is longer. Line length is often measured with the number of characters per line — called measure in typography.

Paragraphs with at least 40 characters per line vs. at most 75 characters per line. Image source: Wikimedia Commons

Testimonies from professional typographers

Answering a StackExchange question on the optimal line height, graphic designer Alan Gilbertson wrote:

“The wider the measure, in general, the more open the line height must be to maintain readability. If your measure is longer than about 70 characters …, you’ll need to increase the line height so the reader doesn’t skip or accidentally repeat a line while reading.” — Gilbertson (2012)

In his massive survey of web typography, Flawless Typography Checklist, Jeremiah Shoaf wrote:

“Longer line lengths need more line spacing; shorter line lengths need less.” — (checkpoint #16 of Shoaf 2020)

Donny Truong, the author of Professional Web Typography, uses the term leading to refer to line height, saying:

“If … your line length is long, you will want to increase your leading. On the contrary, if … your line length is short, you will want to tighten up your leading.” — Truong (2019)

Why?

I’ve never seen anyone explicitly explain why the number of characters per line matters. Apparently, when there are more characters per line, it is harder for us to spot the beginning of a new line after reading towards the end of the previous line. With larger line height, each line of text looks more distinct from each other, mitigating the difficulty of moving our eyes from the end of one line to the beginning of next line.

It’s not line length per se

Many people use the phrase “number of characters per line” interchangeably with “line length”. However, what really matters for line height is how many characters we see in each line, not the length per se.

Tim Brown, head of typography at Adobe, wrote as follows in his book Flexible Typesetting:

“[W]hen size increases but container width stays the same, the text block’s measure is effectively shortened — so line spacing needs to be tightened up a bit” — Chapter 6 of Flexible Typesetting (Brown 2018a)

The number of characters per line, or the measure, is smaller in the bottom version of the sample paragraph. Image source: Brown (2018b)

Why we need shorter line-spacing for headlines

If we know it is the number of characters per line that matters, not line length, then it is easy to understand another typography lesson on line height: headlines need smaller line height than body text (see Gilbertson 2012, Creger 2014, and Shoaf 2020):

The illustration of how a standard line height of 1.5 is way too much for headlines. Image source: Checkpoint #92 of Flawless Typography Checklist (Shoaf 2020)

This typography lesson can be confusing. Another lesson says that larger text in terms of x-height demands larger line height (see our previous article for more detail). Now we say the larger text of headlines requires smaller line height. What is going on?

I haven’t seen anyone say this, but here’s my interpretation: headlines contain fewer characters per line than body text, within the same length of text column. Then our eyes find it easy to spot the beginning of next line, even when traveling the same distance of column width. Apparently, when moving from the end of one line to the beginning of next one, our eyes are more likely to get lost if more characters come into our sight.

So it’s the number of characters per line that matters for line height, not line length per se.

Implications on web development

The dependency of the optimal line height on the number of characters per line poses a significant challenge for responsive web design. The narrower the screen, the less number of characters it can accommodate per line. We cannot reduce text size to keep the number of characters per line the same; otherwise text will be too tiny to read for the narrowest screens.

The line-height value, therefore, should decrease with the screen width. Unfortunately, the CSS is not designed to implement this easily.

CSS Lock: A solution is the technique called CSS Lock, originally proposed by Riethmuller (2015) as a way to implement what Brown (2012) proposes as Molten Leading. It sets line-height as something like this:

p {
  line-height: 1.3
}
@media only screen and (min-width: 21em) {
  p {
    line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));
  }
}
@media only screen and (min-width: 35em) {
  p {
    line-height: 1.5;
  }
}

which achieves line-height to change from 1.3 to 1.5 incrementally as the screen width changes from 21em to 35em:

A diagram explaining what CSS Lock does, using a metaphor of the lock on a canal. Image source: Figure 4.20 in Brown (2018a)

See Brown (2016) for why the above line of code achieves the incremental changes in line-height.

The minimum and maximum numbers of line-height (1.3 and 1.5 in the above example) can be obtained with the x-height based method of deriving the optimal line-height value (as discussed in our previous article) for each of the threshold screen sizes. See Chapter 4 of Brown (2018a) for how to obtain the threshold screen sizes.

Incremental vs stepwise changes in line-height: In my personal opinion, however, incremental changes in line-height may not be the best answer in response to changes in the screen width. If a simple ratio of x-height to line-height such as 1:3 or 2:5 assures a visual harmony of text paragraphs, then we should change line-height stepwise in response to screen width changes.

In the above example, suppose x-height is half of font-size. So line-height: 1.3 and line-height: 1.5 correspond to 2.6 and 3.0 times as large as x-height, respectively. Then we could increase this multiplier by 0.1 for every 5em of the screen width (i.e. 2.7 up to 26em, 2.8 up to 31em, 2.9 up to 35em). An incremental change in line-height will give us values like 2.783 and 2.921 for some screen widths, which are unlikely to produce a visual harmony between x-height stripes and whitespace in between.

Target the maximum line-height only: If this all gets too complicated, a simpler solution is to give up responsive design on line-height. Instead, set line-height optimally with the widest paragraph width.

Of course, line height will then be too loose on narrow screens. But too loose line-spacing does not affect the readability of paragraphs. It just compromises the appearance of a paragraph as a single unit of information. After all, back in those typewriter days, people would read the paragraphs of text with double spacing (i.e. line-height: 2.0 in CSS terms):

An example of double-spaced documents, popular in academic and legal papers during the typewriter era. Image source: Butterick (2010)

I myself use this simple approach to set line-height for the paragraphs of text in the Line-height Picker app.

The maximum width of paragraphs is set to be 33em, over which I find line length too long to read easily, even though the number 33em is mechanically derived: 66 is the “ideal” number of characters per line (Bringhurst 1992, p. 26) and the width of one character is on average 0.5em (Rutter 2017).

With this line length, setting the line height to be 2.5 times as large as x-height makes the paragraphs of text look decent enough:

Paragraphs of text from the Line-height Picker app at the maximum line length (left) and at the minimum line length on the iPhone 5 screen (right). The line-height value is 1.365 for both. Image source: the author.

For narrower screens, the same line-height value does not look too loose, actually, partly because font-size is reduced for screens narrower than 728px (following the breakpoint used by Medium.com; I have chosen font-size to match the x-height of text on Medium.com).

The number of characters per line is one of the two major determinants of the optimal line height, along with x-height, very often discussed by typographers. There are a few more, lesser-known, determinants of the optimal line height, however.

Expected reading speed

Another factor that influences the optimal line-height value is the expected reading speed, or what Highsmith (2012) calls tempo.

People read news articles quickly, just to learn what is going on in the world. To have some good time, however, people read novels and funny stories more slowly.

Highsmith (2012) argues that quick reading requires shorter line widths and shorter line heights while relaxed reading demands longer line widths and longer line heights.

Indeed, the print edition of newspapers features very narrow columns of text while the print edition of novels spreads the paragraphs of text across the entire page.

Newspapers use short text columns, to help the reader quickly read through articles. Image source: New York Times

Novels usually feature a page-wide column of text. Notice larger line-spacing than in the newspaper example above. Image source: 99designs

This idea can certainly be applied to web design. If your website’s content is similar to news, go for narrow lines and short line height to encourage a quick reading experience. If your website features a long story to enjoy reading while sitting on a couch, then go for wider lines and large line height to offer a relaxed reading experience.

Stroke width

Yet another factor that influences the optimal line height is the width of letter strokes: the thicker the letter stroke, the larger line height needs to be. This point is rarely mentioned in a usual discussion of line height, but it is an important one in the age of Dark Mode.

Testimonies from typographers

Alan Gilbertson points out the stroke width as the third factor of the optimal line height, after x-height and measure:

“Sans serifs tend to have much thicker strokes, relative to their size, than serif typefaces. Setting them too tightly (small line height) makes paragraphs and pages look very heavy and dark, and can make them very hard to read. Opening up the leading … improves the look of the text considerably. A serif face with a relatively small x-height, like Garamond, can be set with much less line height.” — Gilbertson (2012)

TotallyType, an online course on typography, refers to the bold typefaces as demanding larger line-spacing, in addition to the serif vs. sans-serif comparison:

“Typefaces with … thicker stokes, like a boldface, require more line-spacing to avoid heavy dark blocks of text. … Because sans-serifs typically have thicker strokes than serifs, line-spacing will often need to be increased.” — Forbes (2015a).

Why?

I haven’t seen anyone explicitly explain why letter strokes matter. I speculate that thicker letter strokes make text appear larger (without changing the number of characters per line). So the effect of letter stroke width is similar to that of x-height: the larger the text (due to thicker stroke or larger x-height), the larger line-spacing needs to be, for improving legibility by inserting sufficient whitespace between lines.

Dark Mode

A related issue is Dark Mode, where white (or light-colored) letters are shown against the black (or dark-colored) background. In a rare piece of advice, Creger (2014) recommends a larger value of line-height for Dark Mode, with all other factors equal.

Line height is set larger (and a thinner weight of the font is chosen) on the dark mode (right) than the black-on-white mode (left). Image source: Creger (2014)

This recommendation puzzled me at first. But the following account from TotallyType has convinced me:

“On screen, the white pixels are illuminated whereas the pixels that make up the black (background) are turned off. … The glowing text is spreading into the black background … This makes the text appear heavier … A larger size and looser spacing helps prevent light bleeding.” — Forbes (2015b)

In a nutshell, Dark Mode makes letter strokes appear wider to our eyes. Then we can apply the same typography lesson on letter strokes: the wider the letter strokes (due to Dark Mode), the larger line-spacing needs to be.

Word spacing

Another set of factors dictates the minimum of acceptable line-height values. These factors are relevant when you go for tight line-spacing, say, because you want to provide a quick reading experience (as discussed above).

One obvious factor is whether one line overlaps next line, which, of course, severely hinders the legibility of paragraphs.

Another lesser-known factor is word-spacing. As Brown (2018a: chapter 4) discusses, whitespace between lines should be larger than whitespace between words on the same line. Otherwise, our eyes see a word form a group with the words above in the previous line and below in the next line, rather than the words before and after in the same line. This vertically-fractured appearance of a paragraph will make it more nerve-racking for our eyes to follow the same line horizontally.

Line-spacing is too tight relative to word-spacing, creating an impression of the one big block of text rather than several horizontal lines of text. Image source: Figure 4.17 in Brown (2018a)

Summary: what determines the optimal line height

Summarising this article and the previous one, we conclude that line height needs to be larger when

1. X-height is larger;
2. There are more characters per line;
3. We expect the reader to take a slower, more relaxed reading experience out of our website, rather than a quick, more efficient one;
4. Letter strokes are wider (e.g. sans serif as opposed to serif, bold typefaces as opposed to light ones, Dark Mode as opposed to the black-on-white mode).

In addition, make sure word-spacing appears smaller than line-spacing.

Next: The line-height to font-size ratio

The above summary makes it clear that font-size is essentially irrelevant when we choose the optimal line-height value. Still, a large number of discussions on line-height are preoccupied with the relative size of line-height to font-size.

In next article, I’ll overview these font-size-based discussions on line-height. We will learn that (1) the number 1.5 is somehow a focal point in these discussions; (2) web design tends to go for a larger line-height value than print design; (3) the number 1.5 is popular probably because it ensures that line-height will be roughly 3 times as large as x-height.

References

Bringhurst, Robert. (1992) The Elements of Typographic Style. Hartley & Marks.

Brown, Tim. (2012) “Molten leading (or, fluid line-height)”, Nice Web Type, Feb 3, 2012.

Brown, Tim. (2016) “Flexible typography with CSS locks”, Adobe Typekit Blog, Aug. 17, 2016.

Brown, Tim. (2018a) Flexible Typesetting. A Book Apart.

Brown, Tim. (2018b) “Text feels weak or dull — typesetting pressure pattern”, CodePen.

Butterick, Matthew. (2010) “Research Papers”, Butterick’s Practical Typography, 2nd edition.

Forbes, Rhett A. (2015a) “The Core Rules of Line-Spacing”, TotallyType.

Forbes, Rhett A. (2015b) “Reversed Type”, TotallyType.

Gilbertson, Alan. (2012) “An answer to ‘Optimum line height in relation to font size’”, StackExchange: Graphic Design, Aug. 27, 2012.

Highsmith, Cyrus. (2012) Inside Paragraphs: Typographic Fundamentals. Font Bureau.

Riethmuller, Mike. (2015) “Precise control over responsive typography”, MadeByMike, Mar. 17, 2015.

Rutter, Richard. (2017) “2.1.2 — Choose a comfortable measure”, The Elements of Typographic Style Applied to the Web.

Shoaf, Jeremiah. (2020) Flawless Typography Checklist.

Truong, Donny. (2019) “Setting Type in the Browser”, Professional Web Typography, 2nd edition.