The Thing With Leading in CSS Posted August 24, 2020 by Matthias Ott 258 Webmentions #browsers #css #leading #typography #web 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”. 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. 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: 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 @sami @sami Oh thanks, I’ll have a look… 👀 @matthiasott @matthiasott cool writeup :) oh BTW your webmention comments are not wrapped BTW. 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 Hyeonseok Shin ????; “The Thing With Leading in CSS” 웹;의; line-height의; 역;사;와; 왜; 다;들; 간;격;이; 안;맞;다;고; 느;끼;는;지;에; 대;한; 설;명;, 새; text-edge와; leading-trim 속;성; matthiasott.com/notes/the-thin… @matthiasott @heydon @matthiasott Such a “simple” deserved a bit of tlc. 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… 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… 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… 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… Flávio Atas Medeiros The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… ivan The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Joulse The Thing With Leading in CSS matthiasott.com/notes/the-thin… Marabesi ????;????;????; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Nikola Lazarević; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Very nice and useful read! captain.dynamite The Thing With Leading in CSS, by @m_ott 👍🏻👍🏻👍🏻matthiasott.com/notes/the-thin… Mariana Beldi Interlineado no es lo mismo que line-height: The thing with leading in #CSS by @m_ott matthiasott.com/notes/the-thin… Sara Soueidan "The Thing With Leading in CSS" — Fantastic article by ;@m_ott; well worth your time 💯 #CSS matthiasott.com/notes/the-thin… Yohan J. Rodríguez #CSS #Automated | The Thing With Leading in CSS matthiasott.com/notes/the-thin… Murat Purç The Thing With Leading in CSS. (via matthiasott.com/notes/the-thin…) #webdesign #browsers #css #leading #typography #web Front-end Bookmarks 📣 New link added: “The Thing With Leading in CSS” by @m_ott matthiasott.com/notes/the-thin… frontendbookmarks.com/css/properties… Matthias Ott 🙏 Thank you, Manuel! Manuel Matuzović; Fantastic article by @m_ott! matthiasott.com/notes/the-thin… WPbonsai The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… 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… Ezequiel Díaz Bavio Para entender por qué el interlineado del diseño nunca queda igual al del maquetado matthiasott.com/notes/the-thin… Austin Govella Great read on how leading works in browsers and why FED never matches the comps: matthiasott.com/notes/the-thin… webdesignrepo The thing with leading in CSS matthiasott.com/notes/the-thin… @m_ott #Typography #CSS #Design #Article Salil Naik ????; www.coronatracker.in Good read. matthiasott.com/notes/the-thin… Signe Schulz matthiasott.com/notes/the-thin… 全;部;入;り;HTML太;郎; line-heightに;half-leadingが;導;入;さ;れ;た;経;緯;な;ど;。;borderな;ど;ほ;か;の;CSSの;機;能;と;組;み;合;わ;せ;た;場;合;に;お;け;る;利;便;性;の;た;め;。; / The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin… Felipe ????; matthiasott.com/notes/the-thin… matthewjaestokeley@gmail.com The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Rachel Penner Fascinating! #typographyontheweb The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Friday Front-End The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Omar López The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Matej Heder The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… 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.) Rainer Klute Leading ≠ Leading. Warum die im Prototyp definierten Zeilenabstände im Code immer anders aussehen: matthiasott.com/notes/the-thin… (via @m_ott) 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… Pascal The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #browsers #css #leading #typography #web 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 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 ????;????;????;????;????;????; ????;????; ????;????;????;????;????; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Martin Puškáč; The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin… Speckyboy The Thing With Leading in #CSS matthiasott.com/notes/the-thin… jeddab abderrahim The Thing With Leading in CSS · Matthias Ott – User Experience Designer #WebDesign via twinybots.ch matthiasott.com/notes/the-thin… UX Writing Hey! The future of digital typesetting is here: 👉 The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Mazik Solutions The Thing With Leading in CSS matthiasott.com/notes/the-thin… Ann The Thing With Leading in #CSS matthiasott.com/notes/the-thin… flexfoxx The Thing With Leading in #CSS ... matthiasott.com/notes/the-thin… pixely The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Adactio Links The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin… tams sokari The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin… Marko Č;akarević; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #css #webdevelopment #webdesign #typography Baldur Bjarnason “The Thing With Leading in CSS · Matthias Ott – User Experience Designer” matthiasott.com/notes/the-thin… 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.) Art & Designs ????; The Thing With Leading in #CSS — Matthias Ott @m_ott matthiasott.com/notes/the-thin… #WebDesign #Typography alsacreations Pour mieux maîtriser le "vertical leading" typographique en CSS matthiasott.com/notes/the-thin… Martin Hahn The Thing With Leading in CSS matthiasott.com/notes/the-thin… via @m_ott 飞;平;黄; The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin… Liam Davis The Thing With Leading in CSS matthiasott.com/notes/the-thin… J.D. Bickel The Thing With Leading in CSS matthiasott.com/notes/the-thin… #uidesign #typography Frank Rausch Essential knowledge for web typographers, well-explained! Oliver Schöndorfer Thank you for bringing that up, Matthias! Well explained and brilliantly ended with a beautiful @mwichary quote. #webtypography Gerrit van Aaken Auf diesen Artikel freue ich mich. Muss ihn noch lesen. Ist 100% mein Thema: Mat Casner : Designer : Freelancer : Coach The Thing With Leading in CSS freelanceonfire matthiasott.com/notes/the-thin… Ellen Foster The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #browsers #css #leading #typography #web #webdev Rainer Klute Leading ≠ Leading https://t.co/IwQ27uffhD 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… ????;????; Simon Wuyts The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Nathan It all makes sense now.... 🤯 The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… dailydevlinks. 📝 The Thing With Leading in CSS 🔗 matthiasott.com/notes/the-thin… #html #css #javascript #webdev #dailydevlinks 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. 👊🏻🤓 ng-gunma The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin… Matthias Ott Thank you, Hidde! 🙏☺;️; Fatih Hayrioğ;lu Güzel bir makale. The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin… Stephen Hay 8 November 2022 | 17:43 @matthiasott @knaackbuilt This is something I have to explain at least once a week to designers who live in Figma. knaaaaaack 8 November 2022 | 17:58 @stephenhay @matthiasott also pt /= px conversation happens a lot. Tobias Wolf 10 November 2022 | 10:39 @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 Coding-... Matthias Ott 10 November 2022 | 11:05 @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. 🧐😁 Large Heydon Collider 19 January 2023 | 19:37 @matthiasott Fantastic post, mate! Frederic 19 January 2023 | 19:49 @matthiasott Great article! 😊 Frederic 19 January 2023 | 19:50 @matthiasott By the way, the webmentions below have escaping issues. Matthias Ott 19 January 2023 | 20:03 @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… 😅 Donnie D'Amato 19 January 2023 | 20:26 @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 Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira foranconcepts 20 January 2023 | 15:45 @matthiasott So is this an issue of CSS not aligning to the x-height? Makes sense if so, but frustrating. miunau 7 March 2023 | 12:03 @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 James Finley 7 March 2023 | 12:05 @matthiasott dude! This is incredibly cool! Great write up too! 55 Reposts ZiyaWild Apple Annie :prami: Nilesh Prajapati Charles Bauer Camron Flanders Ido Rosenthal Arunan Bramus James Finley Daniel Schwarz :toad: Caleb Maclennan Adrián Pérez jfroehlich Peter Wooley nerkles ????; Robotistry Hyeonseok Shin ????; Ada ????;️;⚧;️; hjhornbeck Charles Johnson Dawn Ahukanna Garrett LeSage dominic :verified_paw: micah Thomas Broyer mrtnvh Daniel Aleksandersen Amadeus Maximilian Josh Collinsworth cλémentd Paul vince :antiverified: i.j George Crawford Large Heydon Collider Ian K Tindale Fynn Becker Robb Frederic Mayank :verified: Graham Harper Tyler Sticka Redmer :verified: Egor Kloos Sara Joy ✨; Martin Grubinger aoe Nils Hörrmann Alexander Rutz Angie Radtke Nils Hörrmann Florian Weil Charles Bauer DevelopersDiscussion.com "You do you" is Eu-gen-ics. 27 June 2026 | 10:29 115 Likes ZiyaWild Fernando Mateus Oliver Kolombiken Diego García Scaro Sean Edevane Apple Annie :prami: Chris Price Charles Bauer Steve Workman Nilesh Prajapati Jens Oliver Meiert Tyler Sticka Seb Mike-麥;-Mai.html ????; Future Forms Fernando Mateus Roel Nieskens Manuel Matuzović; Fernando Mateus Jen Simmons Rupert Angermeier Šimon DSK Anselmi Unto Mononeon Chris May Iron Patrick Nesbitt Adrián Pérez Marius Gedminas jfroehlich Archnemysis U.N. Goldman John P. Green Robotistry Simon Eilting :spacecore: Huey Ada ????;️;⚧;️; Garrett LeSage Scott Dellinger Margy MacMillan Dawn Ahukanna dominic :verified_paw: micah Thomas Broyer Ryan DeBeasi Fernando Mateus Dave Vogt Erik Vorhes Zeronior@ruhr.social ADHDel Amadeus Maximilian Anton Andreasson Sigve Hansen Paul Martin Gude ????;♂;️; Julien vince :antiverified: Rudiger Meyer George Crawford Remco Wessels Fynn Becker Charlie Park Robb DennisL Zander :jquery: SaptakS scott f Joachim Mayank :verified: Tyler Sticka Scott Kellum :typetura: Trent Walton Binyamin Green Mike Aparicio Nowell Strite Sjoerd Visscher Wilhansen Li Miriam Suzanne Martin Grubinger Egor Kloos Jacob Rask Sara Joy ✨; James Basoo Tobias Alexander Rutz Tudor Reinhard - Entwicklungs ????; Francis Rubio :bisexual_flag: Nils Hörrmann Krzysztof Jeziorny Stephen Hay Jeff Knaack Adam Argyle Tamás Hajas Shivam Jens Oliver Meiert Hamelner SV Jonas Köpfer Alexander Christiaan Jacob Frykauf La Kosta Andrei Thomaz Sebastian Verweyen Tobias Fischer Fabian Kern Oliver Schöndorfer Julian Stahnke ????; meinetwegen ????; Gerrit van Aaken Ralf Göke Christian Walter ©️; Charles Bauer Hidde Fabian Michael 🇩🇪 𝕳𝖆𝖑𝖑𝖊𝕬𝖓𝖉𝖊𝖗𝖙 27 June 2026 | 10:27 "You do you" is Eu-gen-ics. 27 June 2026 | 10:29 ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions. Have you published a response to this? Send me a webmention by letting me know the URL. Ping! More Notes Ad Infinitum Lazy and Prompt Buckle Up At Machine Speed
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
Hyeonseok Shin ????; “The Thing With Leading in CSS” 웹;의; line-height의; 역;사;와; 왜; 다;들; 간;격;이; 안;맞;다;고; 느;끼;는;지;에; 대;한; 설;명;, 새; text-edge와; leading-trim 속;성; matthiasott.com/notes/the-thin…
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…
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…
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…
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…
Nikola Lazarević; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… Very nice and useful read!
Mariana Beldi Interlineado no es lo mismo que line-height: The thing with leading in #CSS by @m_ott matthiasott.com/notes/the-thin…
Sara Soueidan "The Thing With Leading in CSS" — Fantastic article by ;@m_ott; well worth your time 💯 #CSS matthiasott.com/notes/the-thin…
Murat Purç The Thing With Leading in CSS. (via matthiasott.com/notes/the-thin…) #webdesign #browsers #css #leading #typography #web
Front-end Bookmarks 📣 New link added: “The Thing With Leading in CSS” by @m_ott matthiasott.com/notes/the-thin… frontendbookmarks.com/css/properties…
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…
Ezequiel Díaz Bavio Para entender por qué el interlineado del diseño nunca queda igual al del maquetado matthiasott.com/notes/the-thin…
Austin Govella Great read on how leading works in browsers and why FED never matches the comps: matthiasott.com/notes/the-thin…
webdesignrepo The thing with leading in CSS matthiasott.com/notes/the-thin… @m_ott #Typography #CSS #Design #Article
全;部;入;り;HTML太;郎; line-heightに;half-leadingが;導;入;さ;れ;た;経;緯;な;ど;。;borderな;ど;ほ;か;の;CSSの;機;能;と;組;み;合;わ;せ;た;場;合;に;お;け;る;利;便;性;の;た;め;。; / The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
matthewjaestokeley@gmail.com The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Rachel Penner Fascinating! #typographyontheweb The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
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.)
Rainer Klute Leading ≠ Leading. Warum die im Prototyp definierten Zeilenabstände im Code immer anders aussehen: matthiasott.com/notes/the-thin… (via @m_ott)
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…
Pascal The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #browsers #css #leading #typography #web
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
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
????;????;????;????;????;????; ????;????; ????;????;????;????;????; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Martin Puškáč; The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
jeddab abderrahim The Thing With Leading in CSS · Matthias Ott – User Experience Designer #WebDesign via twinybots.ch matthiasott.com/notes/the-thin…
UX Writing Hey! The future of digital typesetting is here: 👉 The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
Adactio Links The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
tams sokari The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Marko Č;akarević; The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #css #webdevelopment #webdesign #typography
Baldur Bjarnason “The Thing With Leading in CSS · Matthias Ott – User Experience Designer” matthiasott.com/notes/the-thin…
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.)
Art & Designs ????; The Thing With Leading in #CSS — Matthias Ott @m_ott matthiasott.com/notes/the-thin… #WebDesign #Typography
alsacreations Pour mieux maîtriser le "vertical leading" typographique en CSS matthiasott.com/notes/the-thin…
飞;平;黄; The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Oliver Schöndorfer Thank you for bringing that up, Matthias! Well explained and brilliantly ended with a beautiful @mwichary quote. #webtypography
Mat Casner : Designer : Freelancer : Coach The Thing With Leading in CSS freelanceonfire matthiasott.com/notes/the-thin…
Ellen Foster The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin… #browsers #css #leading #typography #web #webdev
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…
Nathan It all makes sense now.... 🤯 The Thing With Leading in CSS, by @m_ott matthiasott.com/notes/the-thin…
dailydevlinks. 📝 The Thing With Leading in CSS 🔗 matthiasott.com/notes/the-thin… #html #css #javascript #webdev #dailydevlinks
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. 👊🏻🤓
ng-gunma The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Fatih Hayrioğ;lu Güzel bir makale. The Thing With Leading in CSS · Matthias Ott – User Experience Designer matthiasott.com/notes/the-thin…
Stephen Hay 8 November 2022 | 17:43 @matthiasott @knaackbuilt This is something I have to explain at least once a week to designers who live in Figma.
knaaaaaack 8 November 2022 | 17:58 @stephenhay @matthiasott also pt /= px conversation happens a lot.
Tobias Wolf 10 November 2022 | 10:39 @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 Coding-...
Matthias Ott 10 November 2022 | 11:05 @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. 🧐😁
Frederic 19 January 2023 | 19:50 @matthiasott By the way, the webmentions below have escaping issues.
Matthias Ott 19 January 2023 | 20:03 @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… 😅
Donnie D'Amato 19 January 2023 | 20:26 @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 Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira
foranconcepts 20 January 2023 | 15:45 @matthiasott So is this an issue of CSS not aligning to the x-height? Makes sense if so, but frustrating.
miunau 7 March 2023 | 12:03 @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
