How to Use 'ems' to Change Webpage Font Sizes (HTML)

When you're building a web page, most professionals recommend that you size fonts (and in fact, everything) with a relative measure such as ems, exs, percentages, or pixels. This is because you really don't know all the different ways that someone might view your content. And if you use an absolute measure (inches, centimeters, millimeters, points, or picas) it might affect the display or readability of the page in different devices. And the W3C recommends that you use ems for sizes.

But How Big Is an em?

According to the W3C an em:

"is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element."

In other words, ems don't have an absolute size. They take on their size values based on where they are. For most web designers, this means that they are in a Web browser, so a font that is 1em tall is exactly the same size as the default font size for that browser.

But how tall is the default size? There is no way to be 100% certain, as customers can change their default font size in their browsers, but since most people don't you can assume that most browsers have a default font size of 16px. So most of the time 1em = 16px.

Think in Pixels, Use ems for the Measure

Once you know that the default font size is 16px, you can then use ems to allow your clients to resize the page easily but think in pixels for your font sizes. Say you have a sizing structure something like this:

• Headline 1 - 20px
• Headline 2 - 18px
• Headline 3 - 16px
• Main text - 14px
• Sub text - 12px
• Footnotes - 10px

You could define them that way using pixels for the measurement, but then anyone using IE 6 and 7 wouldn't be able to resize your page well. So you should convert the sizes to ems and this is just a matter of some math:

• Headline 1 - 1.25em (16 x 1.25 = 20)
• Headline 2 - 1.125em (16 × 1.125 = 18)
• Headline 3 - 1em (1em = 16px)
• Main text - 0.875em (16 x 0.875 = 14)
• Sub text - 0.75em (16 x 0.75 = 12)
• Footnotes - 0.625em (16 x 0.625 = 10)

Don't Forget Inheritance!

But that's not all there is to ems. The other thing you need to remember is that they take on the size of the parent. So if you have nested elements with different font sizes, you could end up with a font much smaller or larger than you expect.

For instance, you might have a style sheet like this:

This would result in fonts that are 14px and 10px for the main text and the footnotes respectively. But if you put a footnote inside a paragraph, you could end up with text that is 8.75px rather than 10px. Try it yourself, put the above CSS and the following HTML into a document:

So, when you're using ems, you need to be very aware of the sizes of the parent objects, or you'll end up with some really odd-sized elements on your page.