Calculating Font Sizes

January 29, 2010

How do I figure out a font-size in pixels if I use em units in my CSS document?

It’s all relative.

As a designer, it’s easier for me to think of font-size and line-height in terms of pixels. But as a responsible Web Designer, I know it’s a best practice to use em units.

I think of it this way:

em = relative = flexible = good

pixel = absolute = not flexible = bad

An em is an em is an em.

The definitions of em units and pixel units in terms of CSS:

em

an em is equal to the font-size of the relative font

px

pixels, relative to the viewing device

How do I know what the font-size is of the relative font? I need to know that without any styles the default font-size for a standard font is 16 pixels.

So, by default, 1 em = 16 pixels.

Do the math.

By default 1 em is equal to 16 pixels for standard fonts.

Setting up a style sheet using em units for font-size.

I always start by declaring the font-size on the body tag to be 100%. This seems to keep the font-size from going wildly out of control when the text size is increased or decreased.

1. Set the body font-size to 100%.

Simply, in an external style sheet:

1. body {
2. font-size: 100%;
3. }

2. Set the containing block to the desired new font-size.

I adjust the default font-size in my page’s main content containing block, in this case, #container, because I think 16 pixels is too big for body copy set in Arial.

Instead, I’ll set it to 12px.

1. #container {
2. font: 0.75em/1.5em arial, helvetica, sans-serif; /* 12px/18px */
3. }

Assuming I have <div id="container"></div> as my containing block, the font-size for any element I add inside this div will now be 12px/18px.

To calculate line-height, I have to take 1.5 × 12px (the new font-size of my containing block), instead of 1.5em × 16px (the original default) to figure out the pixel units.

3. Adjust the headings.

I usually want my headings to stand out a little more, so I like to increase the font-size for those too.

1. h1 {
2. font: 2em/1.5em arial, helvetica, sans-serif; /* 24px/36px */
3. }
4. h2 {
5. font: 1.5em/1.5em arial, helvetica, sans-serif; /* 18px/27px */
6. }
7. h3 {
8. font: 1.333em/1.5em arial, helvetica, sans-serif; /* 16px/24px */
9. }
10. h4 {
11. font: 1.166em/1.5em arial, helvetica, sans-serif; /* 14px/21px */
12. }
13. h5 {
14. font: 1em/1.5em arial, helvetica, sans-serif; /* 12px/18px */
15. }
16. h6 {
17. font: 1em/1.5em arial, helvetica, sans-serif; /* 12px/18px */
18. }

The advantage to this approach is that you won’t have to worry about setting the font-sizes for lists, paragraphs or any other elements as long as you want those to be the new default size you set, in the above case, 12px.

For cases where you want to set the font-size above or below 12px, you’ll have to set up some additional classes or ids.

1. #side-container p {
2. font: 0.9167em/1.5em arial, helvetica, sans-serif; /* 11px/16px */
3. }

11px ÷ 12px[default] = 0.9167em

1.5em × 11px = 16px

Because relative unit font-sizes are inherited, I try not to override them more than twice. It’s a pain to calculate a % of a %.

A note about monospace fonts.

I noticed, and after some searches I found out many others have noticed too, that Safari’s default pixel size for monospace fonts is 13px, not 16px. To solve the problem, don’t include the keyword “mono or monospace” in your font declaration. For some reason, Safari will now treat the monospace font specified as normal.

1. ol.code-block li code {
2. font: 11px/14px "Monaco", "Courier";
3. }

Examples

• Example document with 14px Arial as the default.
• Example document with 16px as the default and a sample of common Web typefaces.