Line Height for All

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.