join: new@juude



get alerts for new articles






CLOSE WINDOW

join: new@juude



get alerts for new articles






CLOSE WINDOW
em

Em for Font-Size



When using em for font-size you will insure that your text will resize proportionately. Older IEs do not resize pixels.

The added benifit is that if you state the size in pixels in the body (CSS) and use ems for all of other text sizes (h1, h2, blockquotes, strong, classes etc) you can change the sizes of all of your text proportionately just by changing the body size.

What is an Em

  • An em is a  relative measurement used for sizes on the web.

  • One em is based on the height of the specified font
    not to be confused with the em that was based on the width of a capitol M.

  • Em sizes are relative, based on the size of the parent.

  • Em allows all of your text to be resized by just changing the size of the body font

  • Em allows all of the text to resize correctly and proportionately when it is zoomed.

  • Em allows the text to be resize in all recent browsers. Earlier versions of browsers in particular IE do not resize pixels.

Setting up your Fonts with Ems


You need to set up the base font size in your CSS. The default font on most browsers is set to medium which is 16px.

We can now specify a font-size of 100% in the body and can assume that the base size will be 16px for the majority of users. Or use the font size of 16px as I am using in the example below. All other font-sizes need to be stated in em.

One em is equal to whatever font-size you have in the body.


body{
font-size: 16px;
}
For the rest of the sizes I will use ems. One em is equal to 16px;

For a h1 heading to be equivent to 24px
h1{
font-size: 1.50em;
}

h2 heading is the equivent to 20px
h2{
font-size: 1.25em;
}

Changing the Base Size

If you prefer your base font to be a different size, 14px for instance then you can just change the  percentage in the body.

 

If you want your base font to be 14px

And 100% is 16px

14 / 16 * 100 = 87.5% round to 88%
Just change your body font-size

body{
font-size: 88%; or 14px;
}

IE inheritance problems


There are some inheritance problems with earlier versions of Internet Explorer, these can be fixed by adding the font-size of 100% to the html.

html{
font-size: 100%;
}


Base 16px


pixel to em
10px - 0.63em
11px - 0.689em
12px - 0.750em
13px - 0.814em
14px - 0.875em
15px - 0.938em
16px - 1em
17px - 1.064em
18px - 1.125em
19px - 188em
20px - 1.250em
21px - 1.313em
22px - 1.375em
23px - 1.438em
24px - 1.500em
25px - 1.563em
26px - 0.625em
27px - 1.688em
28px - 1.750em
29px - 1.813em
30px - 1.75em

 

Chart created Andy Ford, Aloe Studios
From Pixels to Ems Chart