Michael "lampe" Lazarski
Posted on
#css #webdev #beginners #devtips
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 to 'leading' which is a term used in typography that refers to the space between the baseline of two lines of text. line-height
works differently. It adds space above and under the text.
Usage
You can use line-height
with different values like this:
body { line-height: normal; /* default */ line-height: 2; line-height: 1em; line-height: 1rem; line-height: 200%; line-height: 20px;}
Oh boy 😧! That's a lot. Let's get through them one by one 👍.
Default value and unitless value
'normal' is the default value if you don't set it to something different. Usually, this means that it is set to 1.2
, this depends on the browser vendor. So what does just a number value without any unit mean? It is actually a multiplier. It takes the font-size
value and multiplies it by 1.2
. Let's calculate the height of one line with the following example.
body { font-size: 16px; line-height: 1.5;}
We just have to do the following calculation: 16 * 1.5 = 24px. So we now know that our text will have a minimum height of 24px. So it will add 4 pixels under the text and above it. Cool that easy 😎!
em and rem
Next one is em
and rem
. rem
is relative to the font-size
of the root element and em
is relative to the current elements font-size. Here is an example
html { font-size: 12px;}.remExample { font-size: 16px; line-height: 1.5rem; /* line-height will be 12 * 1.5 = 18px */}.emExample { font-size: 16px; line-height: 1.5em; /* line-height will be 16 * 1.5 = 24px */}
percentage
The %
value is a little bit tricky to read. 100% means multiply by 1. Again an example to make it clear.
body { font-size: 12px;}.percentage { font-size: 16px; line-height: 150%; /* line-height will be 16 * 1.5 = 24px */}
pixel (px)
The easiest also most confusing one for me is the px
value. Setting it to any pixel value will set it to exactly this value. So if your font-size
for example is 16px and you set line-height
to 12px your font will be bigger then the container it is wrapped in. In general, you should try to avoid using px
values in line-height!
body { font-size: 16px;}.pixel { line-height: 12px;}
Some best practices
In general, I would start with setting the font-size
and line-height
in the body
element to the following values.
body { font-size: 16px; line-height: 1.5;}
From this, you can build all your other stylings. I would try to avoid using anything else then unitless numbers. Also, try to use a value for the font-size
that easily divided, like 16 or 12. This will help you to keep balance in your design. You can use this in margin
s and padding
s too. It's easier to calculate 16 * 1.5 in your head then for example 13 * 1.5. You then will always know what the actual value is.
body { font-size: 16px; line-height: 1.5;}h1, h2, h3, h4, ul, ol { margin-bottom: 15rem;}button { display: inline-block; padding: 0.75rem 1.5rem;}
Of course, you can experiment with this and there will be exceptions to these rules but this is how I always start.
Resources
- http://www.indesignskills.com/tutorials/leading-typography/
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
- https://www.w3schools.com/cssref/pr_dim_line-height.asp
- https://css-tricks.com/almanac/properties/l/line-height/
- https://ux.stackexchange.com/questions/35270/is-there-an-optimal-font-size-line-height-ratio
Thanks for reading!
Top comments (20)
Subscribe
Pedro Pimenta
Pedro Pimenta
Front-end developer, graphic designer and human being.
-
Location
Barcelona
-
Joined
• Feb 6 '19
- Copy link
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?
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Feb 6 '19
- Copy link
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!
Pedro Pimenta
Pedro Pimenta
Front-end developer, graphic designer and human being.
-
Location
Barcelona
-
Joined
• Feb 6 '19
- Copy link
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%
.
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Feb 6 '19
- Copy link
I just forgot to update the CSS 🤣.
Now it should be correct!
Thanks again! appreciated it!
Kenan Berker
Kenan Berker
-
Location
London
-
Joined
• Sep 19 '19
- Copy link
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
invisibleTattoo
invisibleTattoo
-
Joined
• May 9 '20 • Edited on May 9 • Edited
- Copy link
In the example in MDN Docs, h1 element inherits line-height: 1.1em
from its parent div element; Only in such circ*mstance the computed line-height of h1 would be 1.1 * its parent element's font-size;
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Sep 19 '19
- Copy link
Please have a look here: example
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Feb 6 '19
- Copy link
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.
Jarek
Jarek
-
Location
Poland
-
Joined
• Aug 7 '20
- Copy link
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.
Damodara-Sahu
Damodara-Sahu
-
Joined
• Aug 13 '20 • Edited on Aug 14 • Edited
- Copy link
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
Ben Roberts
Ben Roberts
-
Joined
• Apr 28 '20 • Edited on Apr 28 • Edited
- Copy link
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?
helenegenry
helenegenry
-
Joined
• Jan 20 '20
- Copy link
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"?
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Jan 20 '20
- Copy link
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.
SuonerieTelefono
SuonerieTelefono
scolta e scarica suonerie per telefoni Android e iOS. Scarica la raccolta di suonerie con formati di allarme, huawei
-
Location
Roma, Italy
-
Work
Scarica suonerie gratis telefono | Suonerie portatili 2019 at italy
-
Joined
• Nov 27 '19
- Copy link
Thank you, these are helpful things to me.
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Nov 27 '19
- Copy link
Glad I could help 😊👍
Joe Beretta
Joe Beretta
I'm crazy about Nest.js, TypeORM, TypeScript and React stack
-
Email
shakhrukh.shaymardonov.97@gmail.com
-
Location
Tomsk, Russia
-
Education
Tomsk State University of Control Systems and Radioeletronics
-
Work
Junior NodeJS Developer at i-Link
-
Joined
• Feb 6 '19
- Copy link
Very helpful post 🙏
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Feb 6 '19
- Copy link
Thank you!
Have a nice week!
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Feb 15 '19
- Copy link
Yeah that happens you have to explain this to people that a browser window is not a piece of paper 👍
Gino Ramirez Berrios
Gino Ramirez Berrios
Software y otras cosas en @NuboxChile - Linux, Node, Javascript y cosas de la web
-
Location
Santiago, Chile
-
Work
Lead Fullstack Developer at Canal 13 Chile
-
Joined
• Feb 6 '19
- Copy link
👏🏻👏🏻👏🏻 Good article.
Ps: rem is relative to the root element and the root element si html tag not body tag ( html { font-size: 14px; })
Michael "lampe" Lazarski
Michael "lampe" Lazarski
I'm a full-stack web developer.I love to help people.
-
Location
Vilnius, Lithuania
-
Education
Bachelor of Computer Science
-
Work
Senior Fullstack Developer at Lampe Web Development
-
Joined
• Feb 6 '19
- Copy link
You are absolutely right. Thanks!
View full discussion (27 comments)
For further actions, you may consider blocking this person and/or reporting abuse