You should understand CSS units

On Twitter I was asked for my opinion about an article that tells people — wrongly — to use pixels instead of flexible units. People who’ve been reading my blog know that I disagree with the author. I’ve written about all the misunderstandings in the article before, so instead of writing about them again, I’ll simply link to my previous posts. If this stuff is unknown to you, or if you think you agree with the author, I recommend you start understanding CSS units. There are use cases for pixels, ems and rems and you should know them.

Nesting

One of the arguments that the author uses against the use of the em is nesting. But the nesting issue is only a problem if you define your font-sizes on the wrong places. If you understand and use the cascade properly there really is no such thing as an inheritance issue. I explain this in this article about the rem unit and in this article about the weird 62.5% antipattern. You should read these until you get it.

Accessibility

Another argument the author uses states that people use em and rem for accessibility purposes. Which is true. But instead of explaining the real accessibility benefits of using these flexible units, the author digs up an old argument that doesn’t really matter anymore. Zooming is really not the issue. I explain the real accessibility problems in this article about the fact that pixels are not very polite. A counter argument I hear a lot against this article is that almost nobody uses these settings. Which might be an acceptable argument if using ems was hard, and if pixels would be as powerful as other units. Both are not the case.

Decimal system

The last argument I hear a lot against the use of em is the fact that people are trained to think in decimals, not in a hexadecimal system. This would be a solid argument if 1em consisted of 16 parts. But it doesn’t. The em is a simple decimal system, just like the pixel. 1.1em is just as easy to read as 11px. And we only think we know how big 11px is because we’ve seen it quite often. You’ll get used to ems once you understand them.

I explain this idea in this little post that explains how big an em is. It turns out that screen sizes are much easier to remember in ems than in pixels. And it explains that font-sizes in ems are only complex if you calculate them from pixels.

Flexibility

The main argument against the use of pixels, flexibility, is understandably omitted in the article. In this article I explain the wonderful flexible power of the em. The em is elegant and simple. In it I also explain when you should use an inflexible unit like the rem.

A better explanation about the flexible nature of the web and its units can be found in Lea Verou’s brilliant book CSS Secrets.