How To Calculate Relative CSS Line Height

So you just wrapped up your website design in Photoshop and you are ready to start developing the HTML and CSS. Once you get to styling the typography, you see in your PSD file you’ve used 16px as the font size for a paragraph, with 24px as the line height. At this point you have 2 options regarding setting the line height. First, you can set the absolute line height using the pixel value, or you can convert that to a relative value of the font size.

Why Convert For Relative?

The main reason you would want to convert the absolute value to a relative value is to give you more flexibility if you have to change the font size later, as the relative line height value calculates based on the font size. If you make the font size smaller or larger, the line height ratio follows along with that change.

  • Absolute value shows “px” or “em” with the number used. For example, line-height: 24px;
  • Relative value shows only the number. For example, line-height: 1.5;

Think About It As 1 Equals 100%

Say your font size is 20px and your line height is 20px (yes that would be ugly, but go with it), the relative value of your line height would be 1. Going back to our example above with a font size of 16px and a line height of 24px, the conversion gives us a value of 1.5 for the line height.

The way you get that value is by dividing the absolute line height number by the font size number. 24 divided by 16 gives us 1.5

What About When Using EM For The Font Size

Since we are using relative values for the line height, the calculation works exactly the same regardless if you are using em or px for your font size. You still make your calculation based on the options you set when designing in Photoshop. The only difference is that you have to convert the font size too.

Helpful Tools

If you are still struggling with the concept, here are a few good resources that can help do the calculation for you:

Stay In The Loop

Social Gathering

Join our newsletter to get notified about the happenings here at J Taylor Design.