Line height is one of the small things that can make or break your design. A little detail that is often overlooked or not properly massaged to perfection. This is going to be a short-and-sweet post outlining the best method for declaring line-heights, and there is a group discussion question at the end!
Kill All The Units
The line-height property controls the vertical rhythm of typography on the web. The property accepts values with several type of units, including:
- Number. A number without an appended unit.
- Percent. Percent multiplies the font-size by the defined percent.
- Value. A number can be added to the line-height appended with a unit, such as px, pt, cm, and more.
In the past you may have done something like this:
p {
font-size: 14px;
line-height: 20px;
}
And that will work, but if you decide to change something simple like the font-size to 22px (get on the big font trend!) then suddenly stuff starts to look wonky!

That’s why I always say go with unitless line-height declarations. We can take the same example, but instead of using a pixel base line-height, make the styles awesome and future proof by using unitless inputs, like this:
p {
font-size: 14px;
line-height: 1.4;
}
Looks good right, not much different than than the earlier example. But let’s see what happens if we change the font-size. Unitless declarations are awesome because they are relative to the element instead of specifically declaring the line-height with pixels. So even if we bump the font-size way up the vertical rhythm of our typography still looks great!

So I hope we can all agree that Unitless line-height values are the best way to go, right? Friends don’t let friends use pixel line-heights, and if I find out you are I’ll kick your puppy. There, nuff said.
Is This A Good Idea?
So, I seriously am asking a question here, and diverging from a lesson to turn this into a request. The easiest way to handle line-height throughout a website and ensure consistency for all elements is to apply a global line-height to the body, like this:
body {
line-height: 1.4;
}
This ensures the line-height of all paragraphs, buttons, input fields, even text people forget to wrap in a tag all have a consistent line-height applied. My one concern with this method is I typically try to stay away from any one thing that affects the entirety of my site build (except border-box) so in a way I’m torn. Honestly, it feels so right I don’t care if it’s wrong.
But I really do care, so if you have any input please leave a comment or tweet me at @calebsylvest.
I like the idea of unitless line-heights, but prefer the eric myer solution which is to use line-height: 1 for the body as a multiplier. Then, you can adjust throughout as necessary since more than likely <p> will be the only element that matters being spaced larger in the overall picture.
Basically the same thought. Just numerical differences I suppose?
Here is his article:
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
Thanks for the comment and link! I see what you mean by setting a base of 1 to the body and then modifying line-height on elements that require it, like the <p> tag, that makes a lot of sense.
Didn’t know about this but noticed that the mozilla dev guide actually suggests the unitless use of line-height as preferable (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). So I’m all on board.
Great post! I also try to avoid using styles that affect the whole document. But I like @caseybaggz suggestion too. This technique of using unitless line heights is also great for when users increase their font size from the browser!
Good point about users changing the font size, either with custom settings or zoom!