The Thing With Leading 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:

Leading Spacing 01@2X

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:

Leading Spacing 02@2X

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

Leading Spacing 03@2X

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

Leading Spacing 04@2X

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”.

Double Page
Lead Strips

When typography was typeset by hand, lead strips were used to increase the line spacing.

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.

Leading In Photoshop 1@2X

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 Spacing 05@2X

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.

Half Leading 01@2X
Half Leading 02@2X

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:

Leading Spacing 06@2X

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.

Base Line Height@2X

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

Line Height 100 Percent@2X

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.

Line Height 100 Percent Baseline@2X

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.

Leading Trim 01@2X

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.

Leading Trim 02@2X

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:

Type is aligned when it feels aligned, not when it actually is aligned.

Marcin Wichary

-

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).

~

257 Webmentions

Photo of Fatih Hayrioğ;lu
Fatih Hayrioğ;lu
Güzel bir makale. The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Photo of ng-gunma
ng-gunma
The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Photo of Christian Walter ©️;
Christian Walter ©️;
The thing most Web Designers and Web Developers don't know about and why spacings are always wrong and right at the same time. @m_ott tells you why. 👊;🏻;🤓;
Photo of Nathan
Nathan
It all makes sense now.... 🤯; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of Josh ✨;
Josh ✨;
You know that thing where the design tool says there’s 24px of spacing between text blocks, so you add 24px margin, but it still looks wrong? This awesome article by @m_ott shares how this can be, and the interesting historical context behind leading: matthiasott.com/notes/the-thin…
Photo of Ellen Foster
Ellen Foster
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #browsers #css #leading #typography #web #webdev
Photo of Gerrit van Aaken
Gerrit van Aaken
Auf diesen Artikel freue ich mich. Muss ihn noch lesen. Ist 100% mein Thema:
Photo of Oliver Schöndorfer
Oliver Schöndorfer
Thank you for bringing that up, Matthias! Well explained and brilliantly ended with a beautiful @mwichary quote. #webtypography
Photo of Frank Rausch
Frank Rausch
Essential knowledge for web typographers, well-explained!
Photo of J.D. Bickel
J.D. Bickel
The Thing With Leading in CSS matthiasott.com/notes/the-thin… #uidesign #typography
Photo of Liam Davis
Liam Davis
The Thing With Leading in CSS matthiasott.com/notes/the-thin…
Photo of 飞;平;黄;
飞;平;黄;
The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Photo of Martin Hahn
Martin Hahn
The Thing With Leading in CSS matthiasott.com/notes/the-thin… via @m_ott
Photo of alsacreations
alsacreations
Pour mieux maîtriser le "vertical leading" typographique en CSS matthiasott.com/notes/the-thin…
Photo of Art & Designs ????;
Art & Designs ????;
The Thing With Leading in #CSS — Matthias Ott @m_ott matthiasott.com/notes/the-thin… #WebDesign #Typography
Photo of Jeremy Keith
Jeremy Keith
The Thing With Leading in CSS · Matthias Ott – User Experience Designer August 28th, 2020 An excellent explanation of the new leading-trim and text-edge properties in CSS, complete with an in-depth history of leading in typography. (I’m very happy to finally have a permanent link to point to about this, rather than a post on Ev’s blog.)
Photo of Baldur Bjarnason
Baldur Bjarnason
“The Thing With Leading in CSS · Matthias Ott – User Experience Designer” matthiasott.com/notes/the-thin…
Photo of Marko Č;akarević;
Marko Č;akarević;
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #css #webdevelopment #webdesign #typography
Photo of tams sokari
tams sokari
The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Photo of Adactio Links
Adactio Links
The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Photo of pixely
pixely
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of flexfoxx
flexfoxx
The Thing With Leading in #CSS ... matthiasott.com/notes/the-thin…
Photo of Mazik Solutions
Mazik Solutions
The Thing With Leading in CSS matthiasott.com/notes/the-thin…
Photo of UX Writing
UX Writing
Hey! The future of digital typesetting is here: 👉; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of jeddab abderrahim
jeddab abderrahim
The Thing With Leading in CSS · Matthias Ott – User Experience Designer #WebDesign via twinybots.ch matthiasott.com/notes/the-thin…
Photo of Speckyboy
Speckyboy
The Thing With Leading in #CSS matthiasott.com/notes/the-thin…
Photo of Martin Puškáč;
Martin Puškáč;
The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Photo of Justin
Justin
Finally! Both #designers and #developers will be able to get along in harmony when it comes to leading (aka line-height) on the web! A simple, two-line CSS solution is currently proposed that will save the day in the near future. matthiasott.com/notes/the-thin… via @m_ott #UX #webdesign
Photo of Mark Bult
Mark Bult
Really good summary of the state of leading in CSS and the future to come, by @m_ott matthiasott.com/notes/the-thin… / #CSS #CSS3 #Web #webdevelopment #WebDeveloper #webdesigner #typography
Photo of Pascal
Pascal
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #browsers #css #leading #typography #web
Photo of Bastien Calou
Bastien Calou
Comment le web a brisé une règle typographique de base (en bien !), et pourquoi les développeurs ont souffert jusqu'à Sketch & Figma matthiasott.com/notes/the-thin…
Photo of Rainer Klute
Rainer Klute
Leading ≠ Leading. Warum die im Prototyp definierten Zeilenabstände im Code immer anders aussehen: matthiasott.com/notes/the-thin… (via @m_ott)
Photo of Madhu Menon
Madhu Menon
The Thing With Leading in CSS matthiasott.com/notes/the-thin… Great piece explaining something that frustrated the hell out of me. #ux #design ("Leading" is space between lines, at least the traditional print design definition of it.)
Photo of Matej Heder
Matej Heder
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of Omar López
Omar López
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of Friday Front-End
Friday Front-End
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of Rachel Penner
Rachel Penner
Fascinating! #typographyontheweb The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of 全;部;入;り;HTML太;郎;
全;部;入;り;HTML太;郎;
line-heightに;half-leadingが;導;入;さ;れ;た;経;緯;な;ど;。;borderな;ど;ほ;か;の;CSSの;機;能;と;組;み;合;わ;せ;た;場;合;に;お;け;る;利;便;性;の;た;め;。; / The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Photo of webdesignrepo
webdesignrepo
The thing with leading in CSS matthiasott.com/notes/the-thin… @m_ott #Typography #CSS #Design #Article
Photo of Austin Govella
Austin Govella
Great read on how leading works in browsers and why FED never matches the comps: matthiasott.com/notes/the-thin…
Photo of Ezequiel Díaz Bavio
Ezequiel Díaz Bavio
Para entender por qué el interlineado del diseño nunca queda igual al del maquetado matthiasott.com/notes/the-thin…
Photo of Austin Govella
Austin Govella
Detailed read on how leading/line-height actually works in browsers and why the FED often looks different from the comps: matthiasott.com/notes/the-thin…
Photo of WPbonsai
WPbonsai
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of Front-end Bookmarks
Front-end Bookmarks
📣; New link added: “The Thing With Leading in CSS” by @m_ott matthiasott.com/notes/the-thin… frontendbookmarks.com/css/properties…
Photo of Murat Purç
Murat Purç
The Thing With Leading in CSS. (via matthiasott.com/notes/the-thin…) #webdesign #browsers #css #leading #typography #web
Photo of Yohan J. Rodríguez
Yohan J. Rodríguez
#CSS #Automated | The Thing With Leading in CSS matthiasott.com/notes/the-thin…
Photo of Sara Soueidan
Sara Soueidan
"The Thing With Leading in CSS" — Fantastic article by ⁦;@m_ott⁩; well worth your time 💯; #CSS matthiasott.com/notes/the-thin…
Photo of Mariana Beldi
Mariana Beldi
Interlineado no es lo mismo que line-height: The thing with leading in #CSS by @m_ott matthiasott.com/notes/the-thin…
Photo of captain.dynamite
captain.dynamite
The Thing With Leading in CSS, by @m_ott 👍;🏻;👍;🏻;👍;🏻;matthiasott.com/notes/the-thin…
Photo of Nikola Lazarević;
Nikola Lazarević;
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Very nice and useful read!
Photo of Joulse
Joulse
The Thing With Leading in CSS matthiasott.com/notes/the-thin…
Photo of ivan
ivan
The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Photo of Eco Web Hosting
Eco Web Hosting
How do you get leading to work? Why do the margins not look the same on the website, even though the stylesheet and the layout both have the same numbers? @m_ott explains: matthiasott.com/notes/the-thin…
Photo of Ignacio Díaz-Roncero
Ignacio Díaz-Roncero
El problema del line-height / leading en #CSS y por qué todo el mundo tiene razón y se equivoca al mismo tiempo. Excelente post. #design #Webdesign matthiasott.com/notes/the-thin…
Photo of Gunnar Bittersmann
Gunnar Bittersmann
“Type is aligned when it feels aligned, not when it actually is aligned.” —@mwichary, quoted by @m_ott in The Thing With Leading in CSS matthiasott.com/notes/the-thin…
Photo of Mariana Beldi
Mariana Beldi
A very interesting article about leading and how line-height works differently in browsers and in design tools, by @m_ott matthiasott.com/notes/the-thin…
Photo of @knaackbuilt
@knaackbuilt
@matthiasott @knaackbuilt This is something I have to explain at least once a week to designers who live in Figma.
Photo of @matthiasott
@matthiasott
@stephenhay @matthiasott also pt /= px conversation happens a lot.
Photo of @tobias
@tobias
@tobias Yes, both properties are still being specified and not yet available in browsers AFAIK. So it’s a look into a (better) future. 😉; Thanks for sharing your code snippet! That Iooks interesting. 🧐;😁;
Photo of @matthiasott
@matthiasott
@matthiasott I have never heard of text-edge and leading-trim. Thanks for sharing from your archives. I recently implemented the following to get the spacing between text (capital letters) and other elements right. I should rename the class to .a-leading-trim. https://github.com/tobiasfabian/Coding-Design-Guidlines/blob/fe22ca29260106e6401958ece31a56bdacca8655/blueprint/develop/scss/components/_a-typo.scss ...
Photo of @matthiasott
@matthiasott
@heydon @matthiasott Such a “simple” deserved a bit of tlc.
Photo of @matthiasott
@matthiasott
@matthiasott By the way, the webmentions below have escaping issues.
Photo of @frederic
@frederic
@frederic Yes. 🙈;😬; The site is still running on Craft 2 which doesn’t support MySQL databases with utf8mb4 collation. I’m currently working on an upgrade and the site is already running on Craft 4 locally now. But my Webmention plugin isn’t working with Craft 4, so that’s the next thing on the list… 😅;
Photo of @matthiasott
@matthiasott
@matthiasott Great post! Reminds me about this gem from a few years ago. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
Photo of Hyeonseok Shin ????;
Hyeonseok Shin ????;
“The Thing With Leading in CSS” 웹;의; line-height의; 역;사;와; 왜; 다;들; 간;격;이; 안;맞;다;고; 느;끼;는;지;에; 대;한; 설;명;, 새; text-edge와; leading-trim 속;성; matthiasott.com/notes/the-thin…
Photo of @matthiasott
@matthiasott
@matthiasott So is this an issue of CSS not aligning to the x-height? Makes sense if so, but frustrating.
Photo of Dennis Lembrée
Dennis Lembrée
The Thing With Leading in CSS (vertical spacing/line height) matthiasott.com/notes/the-thin… by @matthiasott@mastodon.social #webdesign #css #leading #typography
Photo of @matthiasott
@matthiasott
@matthiasott by this point i'm way too used to not having any proper spacing. i turn off all margins for all elements and encapsulate in grid w/ padding and gap
Photo of @matthiasott
@matthiasott
@matthiasott dude! This is incredibly cool! Great write up too!
Photo of @matthiasott
@matthiasott
@matthiasott cool writeup :) oh BTW your webmention comments are not wrapped BTW.
Photo of @sami
@sami
@sami Oh thanks, I’ll have a look… 👀

Likes

Reposts