Unitless Line Heights in CSS

One of my fellow designers asked me the other day, what are unitless line-heights and how do they work. And I remembered what Eric Meyer’s post on ‘Unitless line-heights’. I was new to designing then and used the old methods of specifying line height in pixels or percentages. Well that was until I came across that post. Then I tried it and found it was a genius option as the output would not be affected by browsers. This article explains how line-height can be unitless. Let us first understand the different values line-height property can take.

The line-height property refers to the distance between the baselines of lines of text. In other words it is the vertical space between lines of text. The image below would help you understand the property in a better way.

 overlap

neat 

Line height could be specified using absolute or relative values.

Absolute values such as pixels (px), points (pt), picas (pc), percentage (%), inches (in), centimeters (cm) and millimeters (mm). Relative values could be em and ex. Line height defined in px, pt, pc, in, cm and mm set a fixed distance between the lines. % on the other hand sets the distance as a % of the current font-size. For example,

<p style=”font-size: 20px; line-height: 100 %;”> Some Text</p> will set the line-height equal to its font-size 20px.

Where ‘em’ is defined to be the value of font-size given, ‘ex’ refers to the height of the lowercase x in the font used. For more details on ‘em and ex’ read Difference between ’em’ and ‘ex’ units

If a line-height is defined without a unit, that a ‘Unitless’ height. Simple, isn’t it. See this example;

<p style=”font-size: 20px; line-height: 1 ;”> Some Text</p>

The value for line-height will be interpreted as it current font size. It is calculated by multiplying the current font-size with the numerical value of line-height. So the line height would now be 20px. Yes yes I know what your next question is; what is the difference between the percentage and unitless value since their result is the same. Consider this example:

body { font-size: 20px; line-height: 100%;}

p { font-size: 15px; }

small { font-size: 10px}

<body>

                <p>This is a para with <small> text </small></p>

</body>

The line-height for body is 100% of 20px = 20px. This is interpreted as line-height: 20px. This computed value is inherited by <p> and <small>. Hence the line-height for all three elements would be same. And now consider following example:

body { font-size: 20px; line-height: 1;}

p { font-size: 15px; }

small { font-size: 10px}

<body>

                <p>This is a para with <small> text </small></p>

</body>

In this case the line-height computed for <body> is 20px, but the line-height value that is inherited is 1 and not the computed value. Hence when the value 1 is inherited by <p> the line-height for paragraph is 15px and for <small> will be 10px.

Filed Under: CSS Hacks, Tips and Tricks

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (2)

Leave a Reply | Trackback URL

  1. Viren says:

    Good one..

Leave a Reply