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.
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: 24px;
line-height: 1.5%; /* 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 `margin`s and `padding`s 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
- http://www.indesignskills.com/tutorials/leading-typography/
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
- https://www.w3schools.com/cssref/pr_dim_line-height.asp
- https://css-tricks.com/almanac/properties/l/line-height/
- https://ux.stackexchange.com/questions/35270/is-there-an-optimal-font-size-line-height-ratio
Thanks for reading!
