Saffron Stroke - Your Web Design Resource » ex http://www.saffronstroke.com Design Blog Wed, 11 Jan 2012 06:36:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Unitless Line Heights in CSS http://www.saffronstroke.com/2009/06/16/unitless-line-heights-in-css/ http://www.saffronstroke.com/2009/06/16/unitless-line-heights-in-css/#comments Tue, 16 Jun 2009 09:30:19 +0000 Minal http://saffronstroke.com/?p=551


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.

]]> http://www.saffronstroke.com/2009/06/16/unitless-line-heights-in-css/feed/ 2 Difference between 'em' and 'ex' units http://www.saffronstroke.com/2009/04/25/difference-between-em-and-ex-units/ http://www.saffronstroke.com/2009/04/25/difference-between-em-and-ex-units/#comments Sat, 25 Apr 2009 12:54:59 +0000 Minal http://saffronstroke.com/?p=463


‘em’ and ‘ex’ units are both relative units; viz. they are measured in relation to other values.

In CSS, one ‘em’ is defined to be the value of font-size of a given element. For example, if the font-size of a paragraph element is 12 pixels then 1em = 12 px.

But as I already mentioned ‘em’ value depends on the element with which it is used. Consider following example.

p {font-size: 12px; padding-left: 1em;}

h1 {font-size: 22px; padding-left: 1em;}

The output would be: 

em_padding

This is because; the value of ‘em’ is relative to its parent. So the left padding for the paragraph was 12px whereas left padding for Heading 1 was 22px.

‘ex’ on the other hand refers to the height of the lowercase letter ‘x’ in the font that is assigned for a given element. Different fonts have different heights for ‘x’ even if their font-size is same. Hence the value of ‘ex’ differs from font to font. Take a look at these fonts:

ex_sizes

]]> http://www.saffronstroke.com/2009/04/25/difference-between-em-and-ex-units/feed/ 3