Dave Woods - Freelance Web Design Warwickshire

Using em’s for font sizing

Many web designers still use pixels for sizing their fonts within a web page, however this presents an accessibility problem on devices and browsers (namely Internet Explorer) which don’t allow pixels to be resized. The solution is to use ems or percentages to size the font so that they’re relative to the base font size set within the browser and it’s really not as difficult as a lot of people might think.

What is an em?

Firstly for anyone that hasn’t used ems before, here’s the definition:

An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital “M” in a particular typeface. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points.

Using ems to set the font size

There’s many ways that you can use ems. Personally, I prefer to set the font size so that all HTML elements within the page are consistent and use 10px throughout a website using the following code:

body, select, input, textarea {
font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;
}

This is just the starting point though to reset the font size to a consistent level. The 1.4 sets the line-height and following on from that is the font-family which will change depending on the project but the one thing that is consistent is the 0.625em regardless of the website I’m working with.

By doing this, it allows me to easily set font sizes for other elements and containers within the site. For example, if I want to set a font size to 12px then I can do so by declaring an em size of 1.2em; If I want 9px, then it’s 0.9em and so on.

As you can see from the following CSS code, creating font sizes using em values is actually just as easy as using pixels but with the advantage that they can scale regardless of the device or web browser being used:

#navigation {
font-size: 1.4em;
}
h1 {
font-size: 2.4em;
}
#content {
font-size: 1.2em;
}

What about inheriting ems

This causes the biggest confusion for a lot of web designers and is why a lot of people revert back to using pixels. Take the following example:

#content {
font-size: 1.2em;
}
#content p {
font-size: 1.1em;
}

Now, a lot of people might expect that the paragraph would display at 11px given what I explained earlier. However, ems are inherited and therefore the initial 10px would render at 12px due to the #content font value but then assuming that the paragraph is nested within the #content element, it would then be scaled to 1.1em of it’s initial value and would therefore actually appear larger than 12px.

In order to get around this I use the following chart: http://aloestudios.com/tools/emchart/ to determine which em size I need to use in order to inherit the correct font size.

So in the above example, you’d need to use the following:

#content {
font-size: 1.2em;
}
#content p {
font-size: 0.917em; /* this will render at 11px */
}

Summary

Using ems can take a little getting used to but if you want to create accessible font sizes then it really is the best solution and once you’ve got the hang of how ems are inherited they’re a powerful tool.

You can even create truly flexible websites by using ems for entire layouts so that they scale with the users default font setting but I’ll save that tutorial for another time.

21 comments on “Using em’s for font sizing”

  2. Dave Woods Post author

    That’s fine but if you want to increase/descrease font size then you always have to calculate the relative font size, whereas if you set the body to 0.625em then you can set everything else relative to that based 10px… i.e. 12px becomes 1.2em, 8px becomes 0.8em. It’s what you prefer but I find that way much easier and quicker for calculating the font size relative the base font (but it does mean that you have to specify the font sizes for all elements, which I’d rather do anyway)

  3. Veera

    //0.625em//

    Is it something a standard number that is being used to reset the font size everywhere? If so, can you please share how the number is calculated?

    btw, thanks for the chart. Its very useful.

  4. Dave Woods Post author

    Hi Veera, the number is calculated based on the following formula:

    (desired pixel size)/(current pixel size)=(required em)

    So if your base font size is 16px (which is the default font size for most browsers) and you want it to be 10px then you need to do:

    10px/16px=0.625em

    If you don’t want to reset all your font sizes to 10px in the body and you’d rather work with the 16px then you can use the same principle. So for example, if you’re using 16px as your base and you want to increase a heading to 24px you’d do:

    24px/16px=1.5em

    Hope that helps?

  5. Johny Favourite

    Yeah I guess it is down to personal preference.

    I know that when I have used em for widths etc I’ve always started at 10px as the base like you have.

    I feel that 1em (16px) is perfect body size so that scaling is easy. so for 24px height you have 1.5em which is the next step up on my typographical chart. 32px is 2em.

    With your example my chart would go

    body text: 1.6em
    next heading: 2.4em
    next heading 3.2em

    if any of that makes sense! Ha ha!

  6. Dave Woods Post author

    Yeah, I suppose as you use divisions of 8 then it makes sense to keep it at 1.6em for the base. It would get a bit trickier though if you have to introduce other font sizes into the mix but for your scenario it does make perfect sense 🙂

  8. Brody

    So Dave, you mentioned 16px is a default font size for most browsers. Is it good practice to first reinforce this (or another value of choosing) in a reset.css and then start calculating your em’s based on that value?

  9. Dave Woods Post author

    Hi Brody, that’s a good question. Personally if I was using 16px as my base then I wouldn’t reinforce it as there wouldn’t really be much point as specifying 1em would essentially be the same as specifying 100% width on a block level element.

    However, using 0.625em does make it easier for the calculations and won’t effect accessibility at all as all elements are then scaled according to this baseline anyway.

    A more difficult question regards whether you should even mess with font sizes at all if you want a web application to be truly accessible on all devices and whether you should leave the individual device or browser to decide what would be the optimal font and size to display on that particular display.

    Personally though, I think that using font sizes to display content is fine from an accessibility point of view as long as you build a website that allows the user to increase the font size when they need to, which using ems certainly provides.

    Hope that answers your question? 🙂

  11. Dave Woods Post author

    Thanks, that might be another article later then… it’s basically just a blockquote with a background graphic and left padding to push the text over. Simple but effective 🙂

  12. gorkreg

    I am (was) one of those designers who “revert back to using pixels” because of the inheriting ems problem. Never understood why it didn´t work. Thanks a million!

  14. Dave Woods Post author

    Yeah thanks Andy, I’ve been using it for as long as I can remember. It’s easy to calculate an em once you know the formula but as a quick reference it’s a fantastic tool and something I make use of whenever I’m putting some CSS together 🙂 Thanks again.

  17. Dave Woods Post author

    Completely agree Evan, that was the point of the article that we should be using em’s on the web 😉

  19. parms

    Why wouldnt you just set the font size in Ems in the body tag and then use percentages. Surely that is clearer. This way You could even set pixels in body tage and still use percentages through the rest of the css.

    I like you article but still cannot understand why EM’s are considered so important.

    Ems are good for text but you can run into real problems if you take them to the next level and start using them for structure.

    Also is it really requierd when all modern browsers actually zoom in on the content as opposed to increase font size.

  20. Dave Woods Post author

    @parms – you can use em’s or percentages, the idea behind setting the base font size to 10px using em’s or percentage means that you can use either 1.6em or 160% and both would make the font 16px.

    If you were to actually set the font size on the body using px then this still doesn’t solve the problem of browsers resizing the text.

    I agree with your last point that it probably is becoming less of an issue but if you understand how em’s and percentage work for font sizes then it’s not all that difficult so why not do it?

    I completely agree with regards to your comment regarding ems for layout, that’s a completely different issue and requires a lot of time to build a layout that will resize.

  21. Bry Gee

    Nice One Dave 😉 I have been doing my nut with ems for 9 years until now – very well explained and works for me

    many thanks, I owe you one