Optimal Line-height Reconsidered (part 3)
Many people recommend the value around 1.5 for the best line-height CSS value, probably because it will (unexpectedly) achieve the “rule of thirds” in how the paragraphs of text appear to our eyes.
TL;DR
Top 10 Google search hits for “how to choose line-height” reveal the following:
- People’s recommendations on
line-heightcenter around the value of 1.5, for the reason not a single person ever explains. - Line-spacing is generally larger on the web than in print, possibly because paragraph width is larger on the web than in print.
- Some people get attracted to the Golden Ratio, with no reason ever mentioned.
As for the first point, the line-height value around 1.5 is popular probably because it places the baseline at one-third from the top of the lowercase x (and many other lowercase characters) to that in the subsequent line of text, achieving the “rule of thirds”.
For the third point, it doesn’t make sense to multiply font-size with the Golden Ratio. Instead, we can multiply x-height with one plus the Golden Ratio (=2.618), to obtain a “beautiful” line height.
Introduction
This article is a sequel to the following two articles where we discussed how to choose the optimal line height:
To conclude our investigation into the best line-height value, we now return our focus back on font-size. The previous two articles conclude that font-size doesn’t matter for the optimal line height. Still, many people keep fixated on font-size when they talk about line-height. We will attempt to understand why.
Recommended “line-height to font-size” ratios
Imagine you just started learning web development. One of the first questions you would face is “how to choose line-height”. So you googled this phrase, to learn what people say. You didn’t have time. So you just wanted to pick the number.
To simulate what you would be going to learn in this scenario, I google the phrase “how to choose line-height” with Google Chrome’s Incognito mode (to remove any influence of my own browsing history). Below I’ll go through the search results one by one.
Top Google Search Hit recommendation
The top search result is Clarke (2018). Google shows its “featured snippet”, which recommends 1.4 to 1.8. Reading the article itself, however, reveals that the author also mentions 1.3 to 1.5 as “conventional wisdom” in another part of the article. The entire article never mentions any rationale behind either of these two ranges of numbers.
At least 1.5 — WCAG Guideline 2.1
Coming the second in the Google search results is the StackExchange discussions on the optimal line height (Blondeau 2013). The most voted answer refers to the guideline 1.4.8 of Web Content Accessibility Guidelines (WCAG) 2.0 (Caldwell et al. 2008). The updated version, WCAG 2.1 (Kirkpatrick 2018), still recommends the same:
“Line spacing (leading) is at least space-and-a-half within paragraphs…” — Success Criterion 1.4.8 in Kirkpatrick (2018) (bold added by the author)
The phrase “space-and-a-half” is a bit ambiguous. But Accessibility Guidelines Working Group (2020a) confirms that line-height: 1.5 is the CSS declaration to meet this guideline.
The rationale behind this recommendation is supposed to be described in Accessibility Guidelines Working Group (2020b):
“People with some cognitive disabilities find it difficult to track text where the lines are close together. Providing extra space between lines … allows them to better track the next line … It is best if there are several different options, for instance, space-and-a-half and double spacing for line spacing. — Accessibility Guidelines Working Group (2020b)
Which isn’t really the rationale, however, because it doesn’t explain why the value of 1.5, not 1.4, for example, ensures people with cognitive disabilities to “better track the next line”.
1.5 for the ease of calculation
The third Google search hit is Lazarski (2019), which picks the value of 1.5 out of blue. The rationale appears to be the ease of calculation. That is very developer-centric, not user-centric.
1.5 as the most common value
The fourth Google search hit, the MDN Web Docs article on line-height (MDN Contributors 2020), refers to WCAG 2.1.
Shen (2012) is the fifth search hit, mentioning 1.5 as the most common value for line-height (without citing any data source, though).
The sixth search hit, Creger (2014), doesn’t offer any specific value.
Starting with 1.5
Williams (2019), the 7th Google search hit, recommends starting with 1.5.
The same recommendation can be seen in Kaikkonen (undated), cited by one of the answers in the StackExchange discussions mentioned above. It recommends starting with 1.5 and then adjusting it to fit with line length.
None of these authors explains why 1.5 is a good starting point, though.
Golden Ratio (1.618)
The 8th Google search hit, Elansary (2015), describes the process of his search for the best line-height value, with the Golden Ratio (1.618) as his conclusion. No reason is given for why the Golden Ratio is ideal.
This is also a conclusion reached by Pearsonified (2018–2019), whose Golden Ratio Calculator app is often linked from the articles on line-height. Pearsonified (2018–2019) is a very long article. So I may miss where the author explains why the Golden Ratio is desirable. But as far as I can tell, the use of the Golden Ratio is a conclusion without proof; the entire article is about how to use the Golden Ratio to derive the optimal line-height value, but not about why to use the Golden Ratio.
1.2 to 1.45
Matthew Butterick, a typographer-cum-lawyer, recommends 1.2 to 1.45 in Butterrick’s Practical Typography (Butterick 2010) — the 8th Google search hit.
This recommendation is significantly lower than what we have seen so far. One possible reason is that Butterick’s book mostly concerns print design rather than web design.
King (2008), another article cited in the StackExchange discussions mentioned above, points out that most web pages use far larger line-height than the standard line-height value for print typography (that is, 1.2). He speculates that the reason is much wider line lengths on the web than in print. Since longer line length dictates larger line height (as we have seen in our previous article), web designers tend to go for a larger line-height value than print designers.
Regarding this contrast between web and print design, Shoaf (2020) makes an interesting point:
“If you set a line height of 1.5 and it looks too tight, then it is probably because you are comparing your design to other websites with poor typography. Open a book and use that for a comparison instead — 1.5 may now even look a little too loose.” — Checkpoint #16 of Flawless Typography Checklist (Shoaf 2020)
The 10th Google search hit, Cope (2015), only discusses why the use of unitless numbers for line-height is recommended in CSS.
Somewhere around 1.5
We have covered the top 10 Google search hits for “how to choose line-height”. Here are some other recommendations that I personally have come across.
Truong (2019) suggests the range from 1.4 to 1.6.
A 2013 survey by Smashing Magazine (Constantin 2013) reveals that 1.46 is the average of the line-height values actually used for the surveyed websites. This article also mentions that “Classic typography books recommend 1.5”, without citing any reference.
Summary
The above survey reveals three things.
First, people’s recommendations (and the actual use cases in 2013) center around the value of 1.5, for the reason not a single person ever explains.
Second, line-spacing is generally larger on the web than in print, possibly because paragraph width is larger on the web than in printed books, magazines, and newspapers. We have to be careful if we try to learn from those typographers primarily working on print media.
Third, some people get attracted to the Golden Ratio, with no reason ever mentioned.
Below we discuss the first and third points in some detail.
Why 1.5?
Let me try to explain what no one seems to be able to explain. Why do recommended line-height values tend to be 1.5 or somewhere around it?
I propose that the values around 1.5 can actually produce a visual harmony due to the 1:2 ratio of “x-height stripes” and whitespace in between. By x-height stripes, I mean the grey rectangles in the figure below:
On average, x-height is about half of font size. For top 10 Google Fonts (according to Google Fonts Analytics data on total views), x-height as the percentage of font size is given by:
Roboto 52.8% / Open Sans 53.5% / Lato 50.7% / Oswald 57.8% / Roboto Condensed 52.8% / Montserrat 52.5% / Slabo 27px 48.1% / Source Sans Pro 48.6% / Raleway 51.9% / PT Sans 50%
Note: Percentages are obtained from dividing the os2.sxHeight value with the head.unitsPerEm value in the font metric table of each font file, extracted with Opentype.js. See Thayer (2019) for learning more about font metrics.
If line-height is 1.5 times as large as font-size, and if x-height is about half of font-size, then line-height is approximately 3 times as large as x-height. The vertical space between two consecutive baselines in a paragraph will then be split into one unit for “black ink” and two units for whitespace:
Just like placing the boundary at one-third of the frame length will often create a good-looking photography (the rule of thirds), the 1:2 ratio of ink and whitespace may appear appealing to our mind. In such a case, we enjoy reading paragraphs. Maybe web typographers unconsciously learn that the line-height value around 1.5 will achieve this sweet spot.
When to use the Golden Ratio
In my opinion, it can be a good idea to use the Golden Ratio when the design concept of your website demands the kind of beauty represented by the Golden Ratio (Ancient Greek architecture, Le Corbusier’s Modulor system, etc.).
But it doesn’t make sense to multiply the invisible length of font-size with the Golden Ratio.
The beauty of the Golden Ratio comes from the visual comparison of two lengths whose ratio is 1:1.618. If one of these two lengths is invisible as font-size, there is no beauty whatsoever.
We should instead multiply x-height with the Golden Ratio; we will then see the beauty of the two lengths in harmony created with the Golden Ratio.
Deriving line-height from multiplying x-height with the Golden Ratio can easily be done with the Line-height Picker app:
Final words: Double-spacing
The only occasion that I can think of where line-height should directly be derived from font-size is to invoke the nostalgia for the typewriter era with double-spacing:
Clarke (2018) mentions the historical origin of “double spacing”:
“Because they had fixed line height (usually 12pt per line), typewriters were mechanically incapable of offering line space options. The only way of increasing line spacing on a typewriter was to add an extra carriage return after and insert a whole empty line, doubling the line spacing. And because double-spaced lines leave more room for comments and notes, double-spacing caught on in academic, legal and industrial contexts where text can be pretty heavy.” — Clarke (2018)
Consequently, if the design concept of your website involves the feel of typewriters or academic and legal writings during those days, it can be a good idea to set line-height to be 2.0.
Updated on 22 May, 2021: I’ve found another case for double spacing: when you want to stress the background color (typically white) as the theme color. The website for Holo Shirts, a hand-made shirt tailor in Japan, uses ample line spacing for the paragraphs that introduce the shop:
This design decision makes sense: the beauty of shirts is whiteness. With white background, ample line spacing allows the background color of white to advance to the center stage.
Otherwise, we should always base our line-height decision on x-height, as discussed in our previous articles:
References
Accessibility Guidelines Working Group. (2020a) “Specifying line spacing in CSS”, Techniques for WCAG 2.1, Jul. 10, 2020.
Accessibility Guidelines Working Group. (2020b) “Understanding Success Criterion 1.4.8: Visual Presentation”, Understanding WCAG 2.1, Jul. 10, 2020.
Blondeau, Yannick. (2013) “Is there an optimal font size / line height ratio?” StackExchange: User Experience, Feb. 22, 2013.
Caldwell, Ben, Michael Cooper, Loretta Guarino Reid, and Gregg Vanderheiden. (2008) Web Content Accessibility Guidelines (WCAG) 2.0. (Dec. 11, 2008).
Clarke, Tom. (2018) “Best UX practices for line spacing”, JustinMind, Nov. 27, 2018.
Constantin, Jan. (2013) “Typographic Design Patterns And Current Practices (2013 Edition)” Smashing Magazine, May 17, 2013.
Cope, Sara. (2015) “Line-height”, CSS Tricks, May 15, 2015.
Kaikkonen, Tommi. (undated) “Line Height”, Interactive Guide to Blog Typography.
Kirkpatrick, Andrew, Joshue O Connor, Alastair Campbell, and Michael Cooper. (2018) Web Content Accessibility Guidelines (WCAG) 2.1. (Jun. 5, 2018).
King, Jeffrey D. (2008) “Optimal Line Height”, KingDesk Web Design, Oct. 11, 2008.
Lazarski, Michael. (2019) “How CSS line-height works and best practices”, Dev.to, Feb. 6, 2019.
MDN Contributors. (2020) “Line-height”, MDN Web Docs, Jul. 17, 2020.
Pearsonified. (2018–2019) “The Math Behind Golden Ratio Typography”, Golden Ratio Typography (GRT) Calculator”.
Shen, Yvette. (2012) “Line-height”, Web Typography Overview.
Shoaf, Jeremiah. (2020) Flawless Typography Checklist.
Thayer, Weston. (2019) “Intro to Font Metrics”, westonthayer.com, Feb. 11, 2019.
Williams, Shane P. (2019) “Building a design system — where to start? Part 4: Typography”, UX Collective, Jul. 13, 2019.
