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.
If you are still struggling with the concept, here is a good resource that can help do the calculation for you: