Typography could be one of the most important elements modern web design. Today I’m going to talk a bit about sizing text on the web with CSS using ems, as opposed to the often resorted to pixels.
Here are a few advantages of using ems for CSS font size:
- IE / Windows will not resize your copy if it was sized in pixels.
- All font sizes across your site are relative, making for a more coherent design and page flow.
- Makes it easy to tweak the overall font size site-wide with just one change in the stylesheet.
How to Set Font Size using Ems
We start out by determining the base font for our website. We declare this value in the body tag. The best way to do this is to use a percentage value for the font-size. This ensures that all browsers, including Internet Explorer, will render your font sizes accurately and consistently.
The default font size of every browser is set to medium. The medium font size, by default, is 16 pixels. That’s usually a bit too big for our design, so we want to scale that down by using a percentage.
[css]
body {
font-size: 75%;
}
[/css]
By setting the base font-size to 75%, we’re making it 12 pixels – a more manageable size for most web projects.
Now it’s time to apply some relative font sizes on other elements in our design using ems. Basically, em values are a multiple of the parent’s font size.
[css]
body {
font-size: 75%;
}
h2 {
font-size: 2em;
}
[/css]
Here, we have set the H2 font size to 2 ems, which equals 24 pixels (base font size of 12 multiplied by 2).
Set CSS Line Height with Ems
Since our font size is set using ems, it’s also a great idea to use ems for our line height – the space between each line of text within a paragraph.
I find that setting a line height one and a half times the font size makes for a clean and legible web copy.
[css]
body {
font-size: 75%;
}
h2 {
font-size: 2em;
}
p {
line-height: 1.5em;
}
[/css]
The code above now has our paragraph font size set to 12 pixels (inherited from the body tag) and the paragraph line height set to 18 pixels.
Ems for Paragraph Margins
The next step in creating consistent vertical web composition is to set your spacing between paragraphs and headers using ems.
[css]
body {
font-size: 75%;
}
h2 {
font-size: 2em;
}
p {
line-height: 1.5em;
margin: 0 0 1em 0;
}
[/css]
This may differ from the methods of others just a bit, but I tend to avoid using top margin and try to keep the spacing of my page flowing downward. In our example, I have set the bottom margin of paragraphs to match their font size of 12 pixels (1 em).
More Resources for Em-based Font Sizes
Em Calculators
- Px to Em – My personal favorite : )
- Riddle’s Em Calculator
- EM Calculator AIR application
Recommended Reading
- How to Size Text in CSS – A List Apart
- Em based layouts – Vertical rhythm calculator – James Whittaker
- px – em – % – pt – keyword – CSS Tricks