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%;
}