Font size in CSS - % or em?css



%: Some browsers doesn't handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can't use percent relative to elements with no specified height/width.

em: Sometimes browsers use the wrong reference size, but of the relative units it's the one with least problems. You might find it interpreted as px sometimes though.

pt: Differs greatly between resolutions, and should not be used for display. It's quite safe for print use though.

px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.


When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?

My understanding is that when the font is set as follows

body {
  font-size: 100%;

the browser will render the font as per the user settings for that browser.

The spec says that % is rendered

relative to parent element's font size

In this case, I take that to mean what the browser is set to.

Is sizing fonts using “em” still relevant?

Do not specify the font-size in 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)

If you will use this method, no need to calculate

You can set the font-size of the body to 62.5%(that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size in EMs with an easy to remember conversion, divide the px by 10.

* 12px = 1.2EMs
* 13px = 1.3EMs
* 16px = 1.6EMs
* 8px = 0.8EMs
* etc

This makes everything SUPER easy to remember and eliminates the need for conversion tables. Of course, you will still need to use a conversion table for nested elements when using EMs, if you are not being specific in your CSS, which is a whole separate issue.

But 76% is much better and you can use this to calculate

Yes it's still relevant:

IE6 is still widely used and is unable to resize the fonts defined in px. => Usability issues. That alone is a no-no.


IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only.

Here's a summary of what's good and bad about font sizing in general.

Font size in css

I personally like ems. Others, like Chris Coyier over at likes pixels. (Chris has an excellent article on the different font units).

It really comes down to personal preference.

Almost similar or related questions on SO

Should we still use em and % for defining the font-size of the website elements?

Is there really any point to using relative font sizing in CSS?

Why em instead of px?

Font size in CSS - % or em?

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

Problem with EM

Using relative instead of fixed size in CSS

Helpful online tool for px to em

Convert entire site from px to em (This tool is still in development)

EM Calculator AIR application (will work on all os)

Windows apps at bottom)

Pixels to Ems Conversion Table for CSS


Some more articles on this issue

This article posted in "A List Apart" by Richard Rutter is still relevant,

How to Size Text in CSS

If you look at the iterations, you'll see that,

Text size in pixels – iteration 1

The result is that Safari and Firefox still resize the text, whereas IE6 and IE7 do not. The text can be resized in Opera and IE7 by using the page zoom tool, which magnifies the page layout, text and images within.

Text size in ems – iteration 2

The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.

Body sized as percentage – iteration 3

The results show that the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.

Setting line height in pixels – iteration 4

The results show that the 18px line-height is inherited by all text on the page....Unfortunately the results show that the 18px line-height is not scaled by IE6 and IE7 when text is resized, meaning the largest setting appears to squash the text.

Setting line height in ems – iteration 5

The results show accurate, consistently resized text and line-height across all browsers. Perfect. Or nearly so.

The Safari monospace problem – iteration 6

The results show consistently resized text and line-height across all browsers, including the monospaced text in Safari 2.

Even though this article is dated 2007, it's still very much relevant. Setting font sizes is more than just setting an em (or px).