Using Em for Font Sizes
Is Em a Size? Not Exactly
You realized some time ago that you have no control over the width of your user's monitor and exactly how your site will look in their browser but are you ready to completely give up control of your font sizes. You already have if the user's brower is FireFox, Safari or any of the recent browsers. When the user zooms your page the text already gets bigger unless they are using IE7 or a lower version. That is because px resizes in all browsers except earlier versions of Internet Explorer.
With Ems you can insure that your text will resize proportionately. The added benifit to you 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 text size on the web.
- One em is equal to the the vertical space of the specified font .
- Em sizes are relative, based on the font size of the parent.
- Ems allow all of your text to be resized proportionately.
- Ems adapt to the users screen in all browsers.
- Ems allow all of the text to resize correctly and proportionately when it is zoomed.
- Em allows you to change the size of all fonts by one CSS adjustment.
- Em allows the text to be resize in all recent browsers. Earlier versions of browsers in particular IE do not resize pixels.
Chart Showing Conversion from Pixels to Ems
Chart created Andy Ford, Aloe Studios
From Pixels to Ems Chart
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.
Although the user can change the default size most do not. For those that do your text will be larger or smaller than you originally anticipated but at least it will all change size proportionately.
We 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.
Browser set to 16px You can either set the size to pixels
or percentages.
body{
font-size: 100%
}
h1 heading is the equivent to 24px
h1{
font-size: 1.50em;
}
h2 heading is the equivent to 20px
h2{
font-size: 1.25em;
}
blockquote is the equivent to 10px
blockquote{
font-size: .63em;
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%;
}
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%;
}
Users Change the Font Size
Some users set the size for the font in their browsers. Ems also allows for all of the text to either increase or decrease proportionately. This will also work when the user zooms in or out.
Using Ems for Other Elements
You can use em for margin and padding sizes but padding on the box increases the size and margins increase the space between elements so even though theorically the overall space should stay the same (within the overall percentage width) sometimes it does not appear to and if you have any floating columns or images they can be pushed down below the rest of the content..
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
