Should We Use Rems?

Should We Use Rems?

A Little History

Back in the early days of the world wide web, users wanted to zoom the text on web pages so they could read it better. No problem, the browsers said, we will let you zoom the text.

Which worked great, except Internet Explorer actually had its fingers crossed behind its back. Because it would let you zoom text, but only if the font-size was defined in a proportional measurement like ems or percent, not pixels.

So, web developers defined their font-size in ems if they wanted to keep the page accessible for people who needed larger font.

Enter the Modern Browser Zoom

At some point the browser programmers decided that just growing or shrinking the text size wasn’t really a good technique. Usually bumping up the text size broke the layout of the web page. So instead of text zooming, browsers introduced the full page zoom.

From my highly unscientific research on the web, it looks like this features was introduced in Firefox 3, Safari 4, and Internet Explorer 8.

Since this method just zoomed the whole page, graphics, text, everything, it worked whether your font-size was set in pixels or ems.

End of having to worry about ems, right?

Not So Fast

Well, sort of the end of ems. Turns out that Internet Explorer still has a feature called ‘Text Size’ (under the View menu). The user can set their text size to Largest, Larger, Medium (the default), Smaller, Smallest.

And if your font-size is set to pixels, the Text Size feature won’t work.

Do We Care If An Obscure Feature in Internet Explorer Won’t Work?

If we want to be accessible, we do. Doesn’t matter that very few people use the feature, basically it will make your website look like it’s broken if it doesn’t work.

So we need to use a proportional unit for our font-size.

The Problem with Ems

The problem with ems is they can be complicated to use correctly. Here’s the definition for an em from the w3.org:

Equal to the computed value of the ‘font-size’ property of the element on which it is used.

http://www.w3.org/TR/css3-values/#font-relative-lengths

But you also have to know this (also from w3.org):

Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the ‘font-size’ property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the ‘font’ property, if the element has no parent).

Emphasis is mine.

So, when setting the font-size property, an em is based on the font-size of the parent element. If your parent element has a font-size of 24px, then 1em = 24 px.

If you have a complicated layout with different sections and divs and different font-sizes in all of them, it is easy to quickly become confused when using ems.

Rems to the Rescue

The rems mentioned in the second quote are the best solution.

Here’s what a rem is:

Equal to the computed value of ‘font-size’ on the root element.

Emphasis mine again. That root element is what makes it so much easier to use rems. What is the root element of our web page? The html tag.

So, we set our html tag’s font-size to a nice size, set all the other font-sizes to rems and we’re set.

What’s a nice size for the html tag’s font-size?

How about this:

html { font-size: 62.5%; }

That doesn’t look like a nice size to you? Well, it’s actually 10 px (62.5% of the default font-size of 16 px). And that’s a nice size because it makes it really easy to set your font-sizes in your CSS.

Want an h1 that’s 36 px in font-size?

h1 { font-size: 3.6rem; }

How about a p that’s 15px?

p { font-size: 1.5rem; }

And so on and so on.

A Note About Responsive Text

I’ve come across several sites that present rems as the way to set responsive text. Rems aren’t responsive. They don’t respond to the size of the browser window, like percents do.

Can I change all my font-sizes with one fell swoop if I use rems and want them all to change proportionally?

Yes, simply by changing the font-size on the html tag with a media query.

Would I ever want to do that? I’m not convinced. Much more likely I’ll want to adjust the fonts specifically for each kind of element.

I’m advocating rems because they are accessible and will make sure your users can resize their text size in IE.

Further Reading

Betalogue >> More on full-page zooming in web browsers

Font sizing with rem – Snook.ca

Comments are closed.