Optimal Line-height Reconsidered (part 1)

Line height should be set in proportion to x-height, not font size. Only when writing CSS code, convert it into the value relative to font-size.

When I started learning web development a few years ago, I really struggled to set the line-height CSS property value with some reasonable logic behind. I’ve done a lot of research into line height since then. Here’s the most important lesson I’ve learned:

TL;DR

1. The larger x-height becomes, the larger line height needs to be.
2. X-height, not font size, determines how large the text appears to our eyes.
3. X-height, not font size, is the visible vertical length that should look harmonious with line height.
4. To derive the optimal line-height value, multiply x-height with some number and then convert it into the relative term to font-size.
5. The Line-height Picker app can help you derive the line-height CSS value from x-height easily.

How should I choose line-height?

When I started learning web design/development back in 2018, I wasn’t sure how to pick the value for the line-height CSS property. After doing some research on my own, I came to this conclusion: start with 1.5 and then adjust it until paragraphs look fine (see my article back then, Kudamatsu 2018, for how I reached this conclusion).

Since then, my thought has evolved over the past two years. Now my own guideline to pick line-height is this:

1. Multiply x-height with a simple number such as 1.5.
2. Adjust this multiplier, depending on the number of characters per line and the stroke width of characters.

Below I describe how I have reached this conclusion and how it can be done easily with the Line-height Picker app, a front-end webapp that I have created.

Start with x-height, not font size

Learning about typography over the past two years made me notice several typographers mention x-height as a major determinant of the appropriate line-height value. The figure below shows what lengths x-height, font-size and line-height refer to, respectively:

The comparison of x-height, font-size, and line-height. Image source: webappers.com

Testimonies from professional typographers

Answering a StackExchange question on the optimal line height (which comes as the second Google search hit for “how to choose line-height” as of July 2020), graphic designer Alan Gilbertson wrote:

“To maintain readability, typefaces with a large x-height … (e.g., Century Schoolbook or Helvetica) need more line height … than Garamond or Futura, which have smaller x-heights.” — Gilbertson (2012) (Links are added by the author.)

Jeremiah Shoaf is a graphic designer of the fame of Typewolf, a website from which I have learned a lot about web fonts and how they are actually used on websites. In his massive survey of web typography, Flawless Typography Checklist, he wrote (checkpoint #16):

“Typefaces with large x-heights need more line spacing; typefaces with small x-heights need less.” — Shoaf (2017–20)

Donny Truong is the author of Professional Web Typography, a web book that taught me all the basics of web typography. Using the term leading to refer to line height, he wrote:

“If the x-height is big …, you will want to increase your leading. On the contrary, if the x-height is small …, you will want to tighten up your leading.” — Truong (2019)

Why x-height matters for line-height?

So it appears to be a consensus among typographers that the bigger the x-height becomes, the larger the line height should be. Why?

I haven’t seen anyone explicitly explain why x-height matters for line height. The main reason seems to me that x-height, not font size, dictates the effective text size.

The same font-size CSS value gives a different impression of text size across fonts, due to the difference in x-height. Magalhães (2017) illustrates this point very clearly with the following examples.

With the same font size, different fonts look different in size:

Gill Sans (left) and Fira Sans (right), both set at the same font-size and line-height. Text looks bigger on the right because Fira Sans has a larger x-height than Gill Sans. Image source: Magalhães (2017)

Adelle (left) and Baskerville (right), both set at the same font-size and line-height. Text looks bigger on the left because Adelle has a larger x-height than Baskerville. Image source: Magalhães (2017)

With the same x-height, however, different fonts look similar in size:

Adelle (left) and Baskerville (right), now set at different font-size values so x-height will be the same. The two fonts now look the same in size. Image source: Magalhães (2017)

The bigger the text size appears (due to larger x-height), the larger the line height needs to be, to ensure legibility by inserting sufficient whitespace between lines. Creger (2014) paraphrases this point as follows:

“Some typefaces, like Bernhard Modern, have shorter x-heights. This gives them the appearance of using less space. On the other hand, typefaces like Helvetica Neue have taller x-heights that can make words appear more crowded. Typefaces with taller x-heights … often need more leading to make them more legible.” — Creger (2014) (The links are added by the author.)

Another reason: we see x-height, not font-size

[This section borrows heavily from what I myself have written on the Line-height Picker app website.]

Thinking of how to find the best line-height value, I myself come up with the following idea. A paragraph of text in Latin alphabets consists of stripes of x-height and whitespace. In the figure below, grey rectangles indicate what I mean by “x-height stripes”:

A paragraph is made of stripes of x-height (greyed) and whitespace (the black background in this example). Image source: line-height-picker.vercel.app

For a paragraph to be visually appealing (which should also enhance legibility), these stripes should look harmonious. And a visual harmony will be achieved if a simple ratio such as 1:2 gives the relative height of the pair of adjacent stripes, just like a photograph looks great when the main object is placed at one-third of the photo-frame length from the edge, dividing the space into the 1:2 ratio (known as the Rule of Thirds).

We do not see font-size in a paragraph of text, as the following figure clearly shows:

Unless we draw red horizontal lines at the top and the bottom, we cannot see the vertical length set with font-size. Image source: webappers.com (cropped by the author)

It is very stupid, then, to choose line height based on the size of the invisible length (i.e. font size). We should base our line-height decision on what we see, that is, x-height.

Font size matters only when we write CSS

Many people recommend optimal line height values in a relative term to font-size. This is necessary when we write up the CSS code (see McMahon 2019 for the most detailed account of this point; see also Cope 2015).

But it doesn’t mean we should derive the optimal line height value from font-size. We should take the following two-step procedure: (1) obtain the best line height by multiplying x-height with some number; (2) convert it into the relative term to font-size when we code CSS stylesheets.

How to implement

If this two-step procedure sounds tedious, it is indeed. CSS is not designed to set lengths relative to x-height. The lesser-known unit ex is supposed to play this role, but it is not reliable for two reasons: it may be set as 0.5em even when the actual x-height is not half of the font-size value; and it refers to “the first available font” (CSS Working Group 2019). Unless you use only one font on your website, the ex unit is essentially useless to set line-height.

That’s exactly why I have created the Line-height Picker app. It allows you to obtain the line-height CSS value from three inputs: font, x-height in pixel, and the ratio of x-height to line-height.

For example, select Open Sans, 10px for x-height, and 1:3 for its ratio to line height. And then the app gives you the line-height value of 1.6055 (along with the font-size value of 18.6861px). You just need to copy and paste this CSS code into your stylesheets. This example is demonstrated in the GIF below:

A demo of how to use the Line-height Picker app. Image source: the author

The magic comes from its use of the Opentype.js library to obtain the ratio of x-height to the font-size value from the meta data of a font file.

Next: Other determinants of the optimal line height

In this article, we only focus on x-height as the determinant of the optimal line height. Typographers, however, also mention a few other determinants: the number of characters per line, the user’s tempo of reading, the width of letter strokes, and word-spacing. I will discuss these factors in next article.

References

Cope, Sara. (2015) “Line-height”, CSS Tricks, May 15, 2015.

Creger, Rebecca. (2014) “6 tips for better line spacing in your typography”, 99 Designs.

CSS Working Group. (2019) “ex unit”, CSS Values and Units Module Level 3, Jun 6, 2019.

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

Kudamatsu, Masa. (2018) “The optimal line-height value for webpages”, medium.com, Aug. 7, 2018.

Magalhães, Ricardo. (2017) “To choose the right typeface, look at its x-height”, Prototypr.io, May 24, 2017.

McMahon, Kathleen. (2019) “Pixels vs. Relative Units in CSS: why it’s still a big deal”, 24 Accessibility, Dec. 23, 2019.

Shoaf, Jeremiah. (2017–20) Flawless Typography Checklist.

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