How CSS line-height works and best practices
Tags: css, webdev, beginners, devtips
Published: 2019-02-05 15:02:29

---
title: How CSS line-height works and best practices 
published: true
description: The `line-height` CSS property defines the space between two inline elements. The typical use is, to space-out text. Let's see how we can use it.
tags: css, webdev, beginners, devtips
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lsrnzx1hin6mkqg6fagw.png    
---

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.

![leading vs line-height](https://thepracticaldev.s3.amazonaws.com/i/lsrnzx1hin6mkqg6fagw.png)
  <figcaption>Left: Leading, Right: line-height</figcaption>

## Usage

You can use `line-height` with different values like this:

```css
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.

```css
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

```css
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.

```css
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!

```css
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.

```css
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.

```css
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!**

**Say Hallo!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment)