CSS Font Sizes Using Ems, Explained
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
The way I hear it, the only reason we use ems really is because of IE6 and prior browsers. I mean, IE7 and all other browsers support appropriate font resizing if you use points (pt) or pixels. What I dislike about ems is that they are cumulative (what you call relative), meaning if you set a container element to one em size, the inside ems are affected and you can’t think in the same terms. But with points or pixels, you know what you’re getting.
I’m thinking of sticking with points (pt) because IE6 will be leaving us soon and at least we have marginal support for IE6 at this point. The reason I don’t use pixels is because some fonts don’t look great at certain pixel ranges, and because it’s fairly easy to remember sticking with 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, and so on. Most of us are usually in the 8pt – 12pt range in our work, with an occasional 14pt or 16pt for a subheader (or perhaps a header if that’s your interest) and then 18pt or higher (skipping every 2 points) for headers.
The way I hear it, the only reason we use ems really is because of IE6 and prior browsers. I mean, IE7 and all other browsers support appropriate font resizing if you use points (pt) or pixels. What I dislike about ems is that they are cumulative (what you call relative), meaning if you set a container element to one em size, the inside ems are affected and you can’t think in the same terms. But with points or pixels, you know what you’re getting.
I’m thinking of sticking with points (pt) because IE6 will be leaving us soon and at least we have marginal support for IE6 at this point. The reason I don’t use pixels is because some fonts don’t look great at certain pixel ranges, and because it’s fairly easy to remember sticking with 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, and so on. Most of us are usually in the 8pt – 12pt range in our work, with an occasional 14pt or 16pt for a subheader (or perhaps a header if that’s your interest) and then 18pt or higher (skipping every 2 points) for headers.
@Volomike – Thanks for your comments. All good points (no pun intended).
What I like about sticking to ems (most of the time) is from a design standpoint, the heirarchy of font-sizes remain somewhat balanced. For example, I tend to keep line-heights at 1.5em (1.5 x the base font size). I often like page headers to be twice the size of paragraph text (2em). Etc.
Of course, you could keep these proportions using any of the font-size methods, but I find ems makes the math easier (for me at least).
@Volomike – Thanks for your comments. All good points (no pun intended).
What I like about sticking to ems (most of the time) is from a design standpoint, the heirarchy of font-sizes remain somewhat balanced. For example, I tend to keep line-heights at 1.5em (1.5 x the base font size). I often like page headers to be twice the size of paragraph text (2em). Etc.
Of course, you could keep these proportions using any of the font-size methods, but I find ems makes the math easier (for me at least).