The Thing With Lead­ing in CSS

The spacing between individual elements of a website and, in particular, the vertical spacing, has been a regular matter of debate between web designers and developers. Designers insist that what they see in the browser doesn’t look at all like the layout they originally designed. Developers respond that all the margins in the style sheets exactly match the margins in the layout. So who is right? The tricky thing is: In a way, they are both right.

Let’s take this simple example of three text blocks underneath each other:

In her design tool of choice, the designer defines a spacing of 12 and 36 pixels, respectively. But the final result in the browser looks more like this:

In case you can’t tell the difference, here is the text block overlaid over the original design.

This doesn’t look right. And indeed: When the designer measures the spacings, they appear much larger than in the original layout.

Why is that? Did the developer simply ignore the designer’s layout and approximate the margins off the top of his head?

No. Instead, the problem which – at least in my experience – many designers and developers still don’t know about, results from a difference in how many design tools and web browsers handle line-height or, to be more precise, leading.

In typography, leading is a measure for the space between adjacent lines of text. The word leading derives from lead strips that were put between set lines of metal type to increase the line spacing of a text block. That’s also why it is pronounced “ledding” and not “leeding”.

Leading Goes Digital

When computers entered the scene and freed fonts from their physical constraints, early software tools borrowed from the world printed typography. In the first version of Photoshop, for example, which was released in 1990, users could define a value for leading which would then be added to the font size.

In later years, more and more desktop publishing tools allowed people to set leading not in addition to the base font size but as an absolute value and the term leading became synonymous with the distance from one baseline to the next. Many tools also started calling it line-height. One thing remained, however: The extra space to increase the line height was still added below the lines.

Leading ≠ Leading

This was about to change early after the Web was invented in 1989. When Bert Bos and Håkon Wium Lie drafted the first proposals for CSS, they were, at first, still following the “old” ways of the print world. font-leading: 2pt, anyone? But soon they would decide to make a logical but also radical change. With the new line-height property, which they introduced with CSS level 1, the extra space added to increase the line height was not added below a line of text, but above and below the line. Thus, half-leading was born.

In his fabulous post Getting to the bottom of line height in Figma, Marcin Wichary explains as to why the creators of CSS decided to make that change:

In the world of print or early programs, a text box only needed to hold the text inside it. The web asked it to do more. “I was aware half-leading wasn’t a traditional typographic concept,” mentioned Bert Bos, who worked on CSS1 in 1995 and 1996. "But the problem I had with adding leading only below the lines was what happened to a paragraph when you put a background behind it or a border around it.”

If leading appeared only at the bottom of such a box, that box would feel bottom-heavy and would require additional work to look good. Half-leading offered a way out of this new problem.

In a way, half-leading can be regarded as a truly native feature of the Web. Just as adding leading below a line of text arose from the physicality of the printed medium, so did half-leading reflect the requirements of the new, inherently flexible medium that was the Web. Whether we like it or not, half-leading is part of the material we are working with. It is part of the Web’s Grain.

For many years, web design tools did not support half-leading, though, and as a consequence, many teams had long-winded discussions as to why layouts differed so much between the screen design and the browser. On top of that, not everyone knew about this intricate technical detail, which frequently leads to tensions between designers and developers. Because, obviously, they were both right:

Luckily, first tools like Sketch and Figma have added support for half-leading recently. So at least this controversy might soon be a thing of the past.

Yet there is another detail about how browsers handle fonts that makes vertical alignment and spacing difficult: Fonts have different base line-heights. Depending on which font you use, using a font size of, say, 2rem (32px) and the default line-height, will result in line boxes with totally different heights.

You can mitigate this effect a bit by setting the line-height to 100 %, which, in this case, means 100 % of the font size:

Yet you will still end up with different spacings if you apply equal margins at the top and bottom, for example, if you want to position a piece of text vertically in a button. This is because for each font the position of the baseline can differ. To work around this, you will have to use hacks like applying different margins at the top or bottom of the text. This, however, does in turn not work for fallback fonts which might be used if a web font doesn’t load or is blocked by the user, or if you are using a system font stack.

Leveraging the Void: Leading-trim

Challenges like this are the reason why the CSS Working Group is currently working on new CSS properties that will drastically improve control over the positioning of and spacing between lines of text. For an overview of the current efforts, watch this talk by Elika J. Etemad (aka fantasai) on “CSS Line Layout and Vertical Rhythm” from last year’s CSS Day.

One of the new properties introduced in CSS Inline Layout Module Level 3 is leading-trim. As Ethan Wang outlined in a detailed post lately, leading-trim will allow you to trim off all the extra spacing above or below your text.

And all it takes are two lines of CSS.

h1 { 
 text-edge: cap alphabetic;
 leading-trim: both;
}

With the text-edge property, we will be able to set the over and under edges of our inline box, in this case to the top of capital letters (cap) and the alphabetic baseline, which usually sits at the bottom of the “m”. With leading-trim: both, we then strip out the spacing above the cap height and below the alphabetic baseline. Now we can vertically align the text with more precision – regardless of the font and differing baselines in the respective font files.

Exciting! But also keep in mind that human perception can often not be described in (even) numbers. To place an object in the optical center, you have to place it slightly above the geometric center, for example. And, if we used a word that includes a “g” or “y” in the example above, we might have to adjust the spacing again. So always trust your eye more than you trust the measuring stick. Or, to quote Marcin Wichary again:

-

This is the 55th post of my 100 days of writing series. You can find a list of all posts here.

Images from the printing press and lead strips above are by Flickr user mitternacht, slightly color-corrected and cropped. Used under Creative Commons Attribution-NonCommercial 2.0 Generic (CC BY-NC 2.0).

~