Font Sizes: Ems VS Pixels... in 2011, Which One Should Be Used

Font sizes: EMs vs Pixels... in 2011, which one should be used?

While every modern browser is able to zoom with text sized using px, they can't all scale text sized using px, it still depends on the browser.

Try 'scaling' text in IE8 using zoom, absolutely fine. Scale using the official text size modifier (page -> text size -> largest), and it doesn't work.

1. IE8 - Zoom, no scale
2. Firefox 4, beta 12 - Zoom, no scale
3. Google Chrome 10 beta - Zoom, no scale

Several official bodies that I work with use the official text size modifier as part of their user/group settings management. When accounts are set up for users, they're often pre-configured using this setting. I don't know if they have to set it there ... but for me, EMs are still preferable because PX doesn't scale everywhere.

Finally, a few words from the W3C.

Units: avoid absolute length units for
screen display

• Do not specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print).
• Use relative length units such as percent or (better) em

ref: http://www.w3.org/QA/Tips/font-size

Why em instead of px?

The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define the width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

The problem

However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

Using em instead

A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

What is the relationship between ems and pixels?

There's no specific relationship between em and px. It's computed based on the width of the "m" character for each font-face.

What is the em font-size unit? How much is it in pixels?

Despite what you may read elsewhere, there is no direct relationship between em and px.

As one of the links states:

the "em" value is based
on the width of the uppercase M

So it's going to be different for every font. A narrow font might have the same height (in px) as an extended font, but the em size will be different.

EDIT three years later:

There are now lots of sources which say that 1em = font size (in px). That is, when you write font-size:16px, then 1em = 16px. This still doesn't agree with the Adobe source (which says 1em = the font size in pt), but in either case it seems bizarre; the em size would be far too large with condensed fonts and far too small with extended fonts.

I'm going to make some test pages and see for myself.

And also:

I see that nobody (including me) actually answered the question (which was kind of hidden):

I also read somewhere about some ie bug and to overcome that set body font-size to something

According to this page, you need to add this to your css: html{ font-size:100%; }. That page is six years old, and I haven't read the (hundreds) of comments, so I don't know if it's still relevant.

Font size in CSS - % or em?

There's a really good article on web typography on A List Apart.

Their conclusion:

Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.

Which is better to use in CSS, percentage or pixels?

You won't have any problems using this approach, both percentage and pixels work fine depending on your needs. If you need a fluid site, then percentage might be your best option. And ems for the fonts, so the user can modify its display if necessary.

Couple of expert's opinions on this:

https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

And here's an interesting twist: Percentage + pixels:

http://www.cssplay.co.uk/boxes/outside.html

CSS font size: relative vs. absolute values. Which to use?

Which to use?

Both. Relative for main body text that users are going to have to read a lot of (so they'll want to be able to read it comfortably); Absolute for text that has to be sized to match other elements on the page that are sized in pixels, such as images.

For relative, ‘%’ and ‘em’ are equally good.

For absolute, always use ‘px’. Never use ‘pt’ for on-screen use, it is only sensible for print stylesheets. It is a pity that ‘pt’ is considered the default unit for font-handling because on the web it is the worst possible choice.

(ETA: Note that since this answer, CSS3 has redefined the ‘physical units’ so that px and pt are always proportional. So this problem no longer matters unless you are concerned about very old browsers.)

Some people don't like the ‘compounding’ effect of relative font sizes. The trick, really, is to use as few font-size changes as you can, to avoid too many nestings. It should be possible to get the relative-to-user's-preferred-size behaviour without the compounding behaviour by using the font-size keywords ‘small’/‘medium’/‘xx-large’/etc., but unfortunately that way you don't get much granularity, and there are still even today differences between how the browsers handle them.

Best unit for font-sizes in CSS

I would recommend EM — simply because I use Baseline CSS for my basic set up of forms, layout and most importantly type.

Can't recommend it enough : http://baselinecss.com/

---

Related Topics