Add line height to body
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.
Feel free to poke holes in it, but give it a try first.