How CSS line-height works and best practices

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.

Left: Leading, Right: line-height

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 margins and paddings 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

Thanks for reading!

Say Hallo! Instagram | Twitter | LinkedIn | Medium

Blog