Using ‘EM’s For Clean Text Sizing Using CSS

This applies to wordpress, but it really just applies to any CSS-based page where the text is governed by CSS.

If you come to a CSS file from a theme you downloaded, you may see a lot of things like this:

font-size: 1.1em;

The way em’s work is that they are a percentage of the default font size, which is 12px. So if the font size is listed as 1em, it’s 100% of the default size.

But that’s not all …

If one element is contained within another, and both have an ‘em’ font size, then the font size of the contained element is magnified.

For example, using this code:

body {font-size: 1em;}
h2 {font-size: 1.2em;}


The body font size it the default, which is 12px, since it’s determined at 1em. And the h2 header tag is going to be 1.2em, 120% of the default, which is 1em. No extra magnification since the default size is not larger than normal.

However, in this example:

body {font-size: 1.1em;}
h2 {font-size: 1.2em;}


The default font size is 1.1em, which is 110%. So larger than normal. Then, since the h2 tag is 1.2em, it’s not 120% larger than normal, it’s 120% larger than the default, which is 110%. So the font size of h2 is actually 110% x 120% = 132% or 1.32em.

Sorry if all this is too technical, it’s really just math. If you have any questions or comments feel free to post a comment on this post.

Posted in CSS, Typeface, Wordpress | Be the first to comment »