This article was written in 2014. 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.
A few days ago Chris Coyier wrote an article about which font-size units to use. It’s a very clever idea. He basically says to use the
em for font-sizes of elements like
<h1>, and use
rem to adjust the font-size of different components on the page. This definitely makes sense. It sounds like a similar solution to the one I describe here. There is one important flaw in this article though. Chris defines the root font-size in pixels. This is an accessibility problem.
If I need a bigger font-size in my browser I can easily do that by adjusting a setting. You would assume that all fonts would show up bigger now, but unfortunately, fonts defined in pixels do not change to the users’ prefs. Let me illustrate. Here’s a screenshot of the little tool Chris created to play around with his idea.
This is how things were designed, and everything looks fine. Now in the next screenshot you can see what happens if you make the font-size bigger in your settings. All font-sizes that are defined in ems and rems have grown. But if you look at the labels in the tools you’ll see that they haven’t changed. These font-sizes are defined by the root font-size, which is defined in pixels. This is unreadable for people who need this preference.
It’s very easy to prevent this issue. Just define the root font-size in
em or percentages.
There’s another issue with Chris’ example. He uses pixels for his media-queries. You should use
em as a unit there too. And don’t use pixels. Here’s an example which uses
ems for font-sizes and pixels for mediaqueries and widths. With default setting it looks like this:
Everything looks fine. But when we increase the font-size in our settings we see that things break terribly:
Here’s the example for you to play with.
Here’s a screenshot of the same example, with increased font-sizes, but this time with widths and mediaqueries based on ems.
As you can see, the mediaqueries and the widths now react to the font-size in the users’ settings, and not to pixels. This results in a layout that scales proportionally and doesn’t break. You can try it yourself here.
So again. If you want to respect the users’ needs, and if you want to create truly fluid web stuff, don’t use pixels for font-sizes, measurements and mediaqueries. And you should definitely use Chris’ method, but be sure to change all the pixel-values to scalable