CSS unitsshould understand
This article was written in 2015. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
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,
rems and you should know them.
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.
Another argument the author uses states that people use
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.
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.
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 is elegant and simple. In it I also explain when you should use an inflexible unit like the
A better explanation about the flexible nature of the web and its units can be found in Lea Verou’s brilliant book CSS Secrets.