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

Question

• What's the best way to size text across browsers?
• What are the advantages and disadvantages of defining font size in pixels / em?

Solution 1

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.

Solution 2

I keep the font size as the user's chosen default, then use relative sizing:

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

This method respects the user's choice of font size in their browser, which is usually set to 16px.

Solution 3

Personally I set an absolute font size on the body and from there set everything as relative to that. eg:

body {
    font-size: 10px;    /* or pt if you want */
}
h1 {
    font-size: 200%;
}

Just try to avoid combining compounded relative sizes:

body {
    font-size: 10px;
}
p {
    font-size: 80%; /* 8px, right? */
}
div {
    font-size: 150%;
}
/* what size is a "div > p" ? */

All the modern browsers have full-page zoom these days, meaning that even sizing your font in pixels is ok.

The benefit to this method is that you can easily size up or down all your text by changing one definition.

The downside is that if you want to change the default font size, but not the headings (for example), then there'd be a lot of declarations to change.

Solution 4

A List Apart did an extensive write up on how font sizes work in various browsers. It turns out to be more complicated than you'd expect, just like everything else in CSS. The consensus seems to tilt toward using ems, since that gives the user more control over adjusting the font size in the browser.

Solution 5

I prefer relative values since the Internet Explorer (< 7?) cannot scale absolute or pixel values.

View more solutions

Comments

[Rhys]

Accepted this answer as it is a direct answer to the question. (even though all of the answers have been really helpful, thanks!)

[Amit Patil]

12pt is a very poor base font size: ‘pt’ is an inconsistent unit on screen, only making sense for print stylesheets. Very high DPI devices already scale everything up at an OS level so ‘px’ remains usable. The CSS standard defines ‘px’ specifically not to be an actual physical pixel!

[JeeBee]

Good point. I always mix them up. Anyway I agree with the other poster that said to use the user's specified font size as the root size, not to define your own.

[Beau]

'%' and 'em' are not equally good. They scale differently when the user changes the base font size. I suggest setting the base font size to 'small' and using percents after that. kyleschaeffer.com/best-practices/…

[Mikko Rantalainen]

The difference between '%' and 'em' is simply a bug in old versions of MSIE. If you use `html {font-size: 100%}' which should do nothing by denifition, the 'em' will work exactly the same as '%' for all the other elements.

[Axel]

@bobince Please do you think you could help me with this question goo.gl/Yl5qIi

[Nesha Zoric]

There is no right or wrong font size unit. It all depends on what you need to achieve in your project. The the pixel, is used if you want absolute control or in case you need a "pixel perfect" result. On the other hand, the relative units, like em or rem are usually used if the font size needs to change according to the screen size. It provides easier manipulation and requires less media query usages. There is a blog post here kolosek.com/css-relative-font-size explaining the difference between the units, so check it out if you need more information.