DEV Community

Cover image for How CSS line-height works and best practices

How CSS line-height works and best practices

Michael "lampe" Lazarski on February 05, 2019

The line-height CSS property defines the space between two inline elements. The typical use is, to space-out text. You can see people comparing it ...
Collapse
 
bitdweller profile image
Pedro Pimenta

I think there's a mistake with the percentage definition. When you define line-height to 1.5% you don't multiply it by 1.5, you multiply it by 0.15.

Also it refers to the element it is defined, not the parent. 100% on the child would give a line-height value of 24px.

At least it's what I'm getting on Firefox. Is it different for you?

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Your are right!
It should be 150%!

Yeah while I was writing this I was thinking for some reason about witdh or height. % in line-heigh refers to the font-size of the element.

Thank you!

Collapse
 
bitdweller profile image
Pedro Pimenta

Yes and it refers to the font-size of the element itself. I think that for .child to have a line-height of 24px it should have it set to 100%.

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

I just forgot to update the CSS 🤣.

Now it should be correct!

Thanks again! appreciated it!

Collapse
 
kenanberker profile image
Kenan Berker

Thanks for the article!
One small thing I don't think is quite right. You say em is relative to the current element's font-size, but I believe it is actually the parent element's font-size. Which is why it can lead to unexpected results.

Here's a link to the example in the MDN Docs - MDN Docs Example of why to use unitless

Collapse
 
liaokaien profile image
invisibleTattoo • Edited

In the example in MDN Docs, h1 element inherits line-height: 1.1em from its parent div element; Only in such circumstance the computed line-height of h1 would be 1.1 * its parent element's font-size;

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Please have a look here: example

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

wow! for months?

Does he want it to be pixel perfect?

Web design is not paper. It will look a little bit different on each system/browser/monitor.

Even if you think of how an OS renders fonts. Linux, Windows, and OSX do have completely different implementations of how the render fonts.

So yeah it's not like paper where you print it once and it will be always the same on the same paper.

But was the client happy in the end?

I hope I changed your life for the better ;) Much appreciated.

Collapse
 
jakslonce profile image
Jarek

I try in various ways to make an interline see in a mobile browser retain relative spacing as in a PC browser. Does line spacing expressed in em, pt,%, px look good on PC and on mobile (chrome, opera) practically no line spacing. I suppose the code has to have a special style tag for mobile browsers. A request for an answer on how to maintain relative spacing (in a simple way, ie. in html code, without a css file) on mobile browsers.

Collapse
 
damodarasahu profile image
Damodara-Sahu • Edited

The hight of both leading and line-height will be same or not? How can I calculate leading? And is there any way to check line-height in chrome developer tool? I checked. I am getting value as "normal" , not in px, em or rem

Collapse
 
hotplinth profile image
Ben Roberts • Edited

Quick question / comment: Bearing in mind in print no 'leading' is added to the top line of a paragraph or text element, doesn't that mean thus that 'line-height' does in fact work the same way as leading when dealing with multiple lines in a paragraph? Won't they just end up with the equivalent amount of distance between the multiple lines as leading does?

Collapse
 
helenegenry profile image
helenegenry

Hey! Have a question. Most of design services (Adobe XD, Sketch) use "leading" and developers use "line-height" in CSS. So I'm designer and I work in Adobe XD now, which was chosen cos it gives a dev link with all the parameters etc. So my developer sees this "leading" parameter and he doesn't know how to convert it into "line-height" so he can make it pixel perfect.

Do you know how to convert "leading" into "line-height"? or how to code "leading" instead of "line-height"?

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Hey!

I can not say this for every application. It depends on the default settings of the application.

Photoshop(maybe in XD it is the same) for example:

  • If it is not set then you should set line-height: 1.2;
  • If you have it set to any other value the calculation is as follows: font-size + (leading / 2) = line-height

Also a value you should set is line-spacing: Line Spacing = (Line Height - Font Size) / 2

I hope I could help you at least a little bit.

In general pixel-perfect is hard to do. Font rendering works different on every OS and even sometimes depends on the resolution of the monitor/phone.

Collapse
 
suonerietelefono profile image
SuonerieTelefono

Thank you, these are helpful things to me.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Glad I could help 😊👍

Collapse
 
joeberetta profile image
Joe Beretta

Very helpful post 🙏

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Thank you!

Have a nice week!

 
lampewebdev profile image
Michael "lampe" Lazarski

Yeah that happens you have to explain this to people that a browser window is not a piece of paper 👍

Collapse
 
ginoramirezberrios profile image
Gino Ramirez Berrios

👏🏻👏🏻👏🏻 Good article.

Ps: rem is relative to the root element and the root element si html tag not body tag ( html { font-size: 14px; })

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

You are absolutely right. Thanks!