Bruno Abrantes

One of the most frequent hurdles (and one which I’ve ran into myself) Web Designers face is how to correctly size text using CSS. The most straightforward way to do this is by using absolute px values, but this comes at a price: IE6 users won’t be able to resize the text, and will be stuck with whatever you decide is best. If one of your users has some type of vision impairment, congratulations, you’ve just made someone’s life a little harder.

Besides px values, you probably know already that you can size text using either percentages or the em unit. Ems come from traditional typesetting, and their name derives from the fact that a capital “M” would generally be the letter with the largest width in the entire alphabet. Ems are commonly used in Web Design for a very simple reason: they scale quite nicely. If you need (and you should) your users to be able to scale text in your page, ems are probably the way to go. So let’s learn how to correctly use this unit in your stylesheets. Take a look at the following code:

html {
font-size:16px;  /* Make sure the default is always 16px */
}
 
body {
font-size:62.5%; /* 16px * 62.5% = 10px : 1em now = 10px */
}
 
p{
font-size:1.2em; /* 12px */
}

Now let’s try to understand what this actually means. Most graphical browsers today assume a base font-size of 16px, so you can pretty much take that for granted. For added safety, I included it in the styling of the html element. This means that, for a 16px base font, 1em = 16px, 2em = 32px, etc. These numbers are far from easy to deal with, so let’s try to change this proportion.

If you give the body element a percentage value of 62.5%, this means the base font-size will now be the 10 px. This now means that 1em = 10px, 2em = 20px, 1.5em = 15px. This technique is useful because you’re now able to specify sizes in ems while thinking about them in pixels, and the final size the browser renders will always be an integer value. If you didn’t use this technique, you could end up with weird final sizes such as 18.5px; displays cannot render half a pixel, so you could face some size inconsistencies when viewing your page in different browsers. This is spectacularly bad if you’re also using ems to size your containers, in order to achieve a fluid layout. The bottom line is that this technique can save you a lot of trouble, so make sure you keep it in mind when starting out a new project.

Do you have a different take on this technique or perhaps an alternate way of accomplishing this? Use the comments box and start up a fire!