Difference between 'em' and 'ex' units

‘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

Filed Under: Expression Web

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 (3)

Leave a Reply | Trackback URL

  1. Elcorin says:

    Onload of page my antivirus put alert, check pls.
    Thanks

  2. […] 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 […]

  3. […] more here: Difference between 'em' and 'ex' units : Saffron Stroke – Your Web … information, social, […]

Leave a Reply