Unitless CSS line-height Property

The CSS line-height property helps you control the leading of your content. In plain English, it controls the spacing between each new line of your content. That also means that it affects your Paragraph spaces so do take note of that if you’ve assigned an individual margin value to them.

I’ve been always ranting at Low Yat forums members in Arts & Designs who’d like feedback or comment of their newly inspired website design because they don’t take into consideration the line-height of their content. Most of them leave it at default and I’d go, “I think you need to increase your line-height to improve readability.”

But discovering about uniltess values in line-height is cool!

I haven’t been surfing as often and have been too occupied with projects at the moment so please forgive me if this isn’t original. But I do hope after sharing this with all the web designer or developers that they’ll find it useful and informative.

I stumbled across this from 456bereastreet and that led me to the recently published article this year from the author of a CSS book, Eric Meyer.

Eric’s article explained though how some of us implement a value to line-height is good, it isn’t exactly efficient. What he’s recommended is going unitless when initiating the line-height. The problem:

When you define a united value, like 1em, you’re setting things up to pass along the computed result to any descendants. For example, suppose the following CSS is applied to a document containing the following markup fragment:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}

	
I'm a list item with small text.

The ul element has its line-height computed to be 15px because for line-height, em-based values are calculated using the computed font-size of the element itself. I declared the font-size directly, so we know its computed size in pixels.

(Yes, yes, I know, pixel-sized text is evil and wrong, but it makes explaining how all this works a lot simpler.)

So that computed value of 15px is what’s passed on to the descendent elements. The li and small elements will inherit a line-height value of 15px. End of story. They don’t change it based on their own font sizes; in fact, they don’t change it at all. They just take that 15px and use it, exactly the same as if I’d said:

ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}

It might sound confusing at first but just remember that the 1em would be related to the first descendant.

Eric then further explained that if used a unitless value to describe our line-height, then the rest of the line height to the following structure will follow thus accordingly in a consistent mathematical equation. The example given was:

ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}

That’s something new to arm yourself with when thinking of implementing the CSS line-height property and improving readability.