Pixels are an absolute unit, they are expected to represent a fixed size and aren't affected by outside factors (sort of). While this sounds like a good thing for design because you can be be sure of the dimensions, the reality is that using pixel values in the web hinders user experience. Layouts become unresponsive, translated content becomes unreadable, and accessibility preferences just aren't considered. In most cases, we want to avoid absolute units and instead use something more flexible that adapts to the needs of the layout.
Relative units are related to something else. An example of a relative unit is percentage and relates to different properties based on where it is used. The
rem is a relative unit which roughly represents the size of the letter "M" in the document. If the document
font-size changes, all areas where this unit is used will also change. The root
font-size can change based on user preference; usually increasing to help folks with vision impairment. There is a not insignificant amount of the population who leverage the ability to change the
font-size in user settings so we want to ensure this feature of the web is maintained in our experiences. It's possible to check this out for yourself.
There was a trick by Richard Rutter discovered many years ago which was meant to help folks better understand relative font-size units when coming from pixels. The trick is to set the
font-size of the document to
62.5% looks like what we like to call a magic number; it seems oddly specific. The number is the ratio 10:16 as a percent. The default
rem is 16 pixels, so 1/16th of a
rem equals one pixel. Multiplying by 10 helps keep the font size somewhat readable (
6.25% is too small,
625% too large). Then the final use of this declaration allows for the following:
padding: .8rem 1.6rem; /* 8px 16px */
Here, it is possible to write
rem in terms of pixels. This provides the benefits of
rem while maintaining a pixel mental model. This post by Aleksandr Hovhannisyan goes into the approach in more detail also mentioning accessibility considerations. Some design systems (eg., Workbench by Gusto) use the approach to make it "easier" to work with
rem units. So what is so difficult that warrants this approach?
The fact is that the
rem doesn't exist in design tools, so a translation from pixels to
rem must occur for an inclusive web experience. Before this approach, designers and engineers would need to figure out what the final
rem number should be based on a formula. Then they would potentially need to repeat that formula every time a new size was needed. In other words, math is hard and to repeat that math is a waste of time. It is "easier" for the translation to occur once globally.
So why would Jeremy Keith say the following about the author and the approach nearly 20 years later?
Absolutely arbitrary font-size
Toheeb Ogunbiyi does a deep dive into the
62.5% approach and has some opinions about thinking in pixels:
What if I said that mental model being maintained is baseless artifact of legacy computer graphic design? 😱
When you select a pixel font-size, what does it mean? More specifically, what is the difference between Courier and Verdana at
16px? In practice it's meant to represent the
em square. In the harsh reality, it doesn't really mean anything. That means we could use 16 pigs, or 1 barn, maybe 8 tulips to talk about
font-size if design tools were prepared to use these units. It actually doesn't matter as long as the visual result is expected. That's what we are really doing when curating
font-size. We are tweaking some input and assessing the visual output. When we get something that Looks Good™, we record what the tool says in the input to repeat the visual style in digital media elsewhere.
So why do we need to use the pixel value so much? It's because that's what design tools have decided to use to define the
font-size among other computer graphic properties. If the design tool was to include the
rem as an option, we would have a 1:1 relationship between the design expectation and the engineering execution and no need to require this translation at all! You could speak in terms of
rem right in the tool; no math required. The design tools are the problem and this "solution" is a community hack for a missing feature.
font-size value is redefined at the
html element, the representation of the
rem is changed for the entire document. This means that third-party elements could look incorrect; designed with the
rem to expect the browser
16px default. This even includes usage of
rem in the Shadow DOM. Josh W. Comeau calls this out:
He also mentions that adoption is difficult because it would need to be done all at once. There's no possibility of incremental enhancement. This also means that deprecating the approach is also troublesome. So you need to be very sure in this decision, more than most others.
Back to base
So instead of thinking in terms of pixels for font size, think in terms of a base (or root) size. What is the font size that is most used in the document? This is most likely your body copy. That should be what the
rem represents and exist as the base. Next, any
font-size that you want to set past this should be some proportion from the base. How much larger do you want the headline to be from the base? 1.5x larger? 2x larger? 2.5x larger? Guess what, that's
rem! If you've set your headline to be 2.5x times larger than the base, that's
font-size: 2.5rem; /* 2.5x times larger than your base (root) font-size */
If the user zooms the content, that relationship is maintained. This is what Andrés Galante says in his article "Accessible Font Sizing, Explained" at CSS-Tricks:
While it's recommended to not update the
html and maintain the default expectations, setting the size here isn't all bad as long as it's made accessible. Just recognize that it does affect all use of
rem throughout the page where this rule is applied. So reverting this approach later is an exercise of auditing all pages where
rem is used and updating the values where appropriate. For large applications and systems, this could be a monumental task. However, if you've kept in mind that the
rem is relating to the
font-size in the usage, it might not be a difficult change. It might even be a feature of the approach. Though, if you use
rem as just another unit because someone said it's better without understanding why, you might end up fighting
rem because you don't understand it, dislike pixels because you do.