Should I use pixel, pica, em or rem to set the size when I create styles with CSS?

When you create CSS Styles, you can specify sizes for fonts and other elements in so many ways that confusion (and frustration) can set in pretty quickly.

Historically, most of us used pixels or ems as the sizes of choice (see explanations below), but today an increasingly popular choice is rem, a seemingly magical option that provides the advantages of a relative size with the ability to prevent the problematic cumulative effect that happens when relative sizes are applied on top of each other.

If you’re confused by that last paragraph, read on. The follow explanation of the previously popular options should help you appreciate why rem is where it’s at today.

Common CSS Size Options

As you work in Dreamweaver, or any other web design program, to design web pages, you can choose from many size options, but these are the most popular:

• Pixels: Pixels are an easy choice because they offer many designers a familiar size option. Pixels are also consistent (mostly), meaning that if you use pixels to specify the size of text it won’t change (although the display size may between Mac and Windows computers). Pixels are especially useful when you’re working with very complex style sheets because you don’t have to worry about the cumulative effect of relative sizes, but that’s why so many of us are now moving on to rems. (see below)
• Percent-based relative sizes: Many designers use percentages to make text larger or smaller, relative to a base text size. For example, you could define the text in a caption style as 90 percent and your caption text would appear at 90 percent of the size of the rest of the text on the page. You could then make headlines 150 percent (for example) and subheads 125 percent. This is a relatively simple and easy to understand system for designing pages with relative sizes, but it’s not the best choice anymore.
• Em: For some time, the most popular option among experienced web designers (and anyone who wants to follow good standards on the web), was the em size. Em is based on the amount of space taken up by a capital letter M in the font face specified in a style. Expressing the size of your text using ems may seem complex (especially when you’re new to web design), but this option is ideal on the web because the size is adjusted relative to the displayed text size. Ems work much like percentages but they adapt even better to different font face sizes and do a better job of maintaining a good display when users change their font size settings.
• Ex: Similar to em, the ex option is based on the size of a lowercase x in the specified font face. The em size is generally preferred.
• Small, medium, and large relative sizes: Although these relative sizes were popular in the early days of the web, most web designers today prefer to use ems, pixels, or percentages.

So why are REMs getting popular now, and what is a REM?

The problem with relative sizes, like ems or percentages, is that they are cumulative. That means if I set the size of all of the text on the page to be 80% of the default size, and then I set the size of my captions to be 75%, the captions will be 75% of the 80% of the default size, which is a lot smaller than 80% of the default size.

The same problem exists with Ems and Exs. If you’re creating one simple size, you’re fine, but if you’re applying multiple styles to a page, like most of us, the cascading effect of styles, which causes the cumulative effect, can be problematic. 

For example, 1 EM is about 16 pixels if the body size is set to 100%. If you define the text size in your sidebar, say, to 1 ems, and then within that sidebar, you define another style, for say, sub heads, that is also 1 ems, you’re not going to get text that is 16 pixels, you’re going to get text that is is going to be 32 pixels, because the effect is cumulative.

That’s where rem comes in. As part of the new options in CSS version 3, we got a new size option, rem, which stands for ‘root em.’ Rems are not cumulative. So 1 REM is about 16 pixels. and if you have nested styles, the REMs don’t add up the way EMs do. Saves loads of headaches.

And here’s an advanced tip that makes using REMS even easier. Set a base font size. In theory, you can specify any base font size. You’ll find lots of sites that set a base size of 100% or 16 pixels.

But if you’re using REMs, many designers choose 62.5%. Why that seemingly arbitrary size? Because it enables you to specify REMS in a way that is divisible by 10 — and who wants to do complicated math when they’re designing? (I believe Eric Meyer deserves credit with coming up with this idea).

For example, with the base font size set to 62.5%, 1 rem is the equivalent of 10 pixels, 1.4 rems is equal to 14 pixels, a popular size for the body text used throughout a web page. 

Here’s how these basic styles look when you use rem:

body {
font-size: 62.5%; }

p {
font-size: 1.4rem; }

h1  {
font-size: 2.4rem; }

What web browsers support rem?

Like many of the other new CSS3 features in use on the web, not all web browsers support rems. As of this writing, the latest versions of most browser support rem. You can expect good results in most popular browsers, including Safari 5+, Chrome 1+, Firefox 3.6+, and Internet Explorer 9+.