Add line height to body

1 min read
6653 views

If you’ve been adding line height to each textual element separately, e.g., <h*>, <p>, etc., this is a helpful tip that you’ll want to try: add line height to the body selector instead.

body {
  line-height: 1.5;
}

Now all textual elements will have a consistent line height that is inherited from the body. This gives text a more uniform display on the page.

Unitless line height

Always specify the line height as a unitless number, e.g., line-height: 1.5;. That way descendent elements that specify a different font size will inherit that number rather than a fixed line height.

See the Pen Add line-height to Body by Matt Smith (@AllThingsSmitty) on CodePen.

Feel free to poke holes in it, but give it a try first.