While developing the frontend for a website or web application, accessibility is an important topic in order not to lock out people with disabilities. In this article we highlight the importance of using relative units for values in your CSS. This is especially important for the value of the default font size set in the user's browser. It might be modified to make text larger and easier to read.
How Browsers render relative CSS values
By default, all browsers calculate relative values based on one reference value which is set in the parent or root element. 16px is the default font size in all current browsers. Each browser supports multiple units, while each unit has their own pro's and con's. However, they have in common, that the browser converts between the different units. Font sizes for example convert as follows:
100% = 1em = 1rem = 16px = 12pt
Let's give you you another example. We've set the font size of the element to 18px.
- A child paragraph with font size
1.5remconverts this to a visible font size of27px. - A child paragraph with font size
25px, however, simply overrides the default in the element or browser setting and uses25px.
Changing the reference font size in the browser
Users can always change the reference font size to any value other than 16px in the browser settings. If this setting is changed, the browser sets this value as the default reference-font size for all websites. This means, if the setting is changed browser-wide, all values which use proportional units will change too. This, in effect, leads to enlarged website views, if no values are set absolutely.
The Test setup
In this experiment we created two test cases with a simple layout: a box, headline, paragraph and an image placeholder. While the first test case uses relative values for all properties (including font sizes, dimensions and spacing), the second uses absolute values. Here's the example:
// First test with relative units
p {
font-size: rem(18);
}
// Second test with absolute units
p {
font-size: 18px;
}
The test setup is available in this Codepen demo. Change your browser's default font size to something other than 16px to see the difference.
Furthermore, you may have noticed the rem(18) function.
@function rem($pixels) {
@return ($pixels / 16) * 1rem;
}
This function is a helper function to convert pixel values to the correct rem values. Given the function of rem(18), 18px will be converted into 1.125rem.
Results
For this test, we changed the browser-wide reference font size to 20px.
As expected, the first test case will be properly scaled while the second will still be displayed in its original size. In the first test the computed font size of the paragraph (normally 18 pixels) is now 22.5px, which is actually 20px * 1.125. The results can also be applied to dimensions and spacing. The first test case displays the image placeholder much larger and with more spacing to the text than the second one with absolute units.
This experiment shows that to meet basic accessibility standards, relative units for all values in your CSS should be used. If you have to use absolute values for layouts, make sure no text is "locked in", i.e. the box is too small for larger text to be properly rendered.
Important notice about font-size on the <html> element
For the <html> element you must not use any absolute value for the font-size property. Either use a relative unit such as 100%, 1rem or 1em or remove the font-size property at all. If you use an absolute value you will override any value set by the users and still get absolute results.
Top comments (2)
Thanks for the post, I am struggling and have for a very long time, how do you do rem based media queries. I suppose it's calculated by the root so it's not much different to px. Its been so long I can't remember the benefits.
Rem in media queries works exactly like in the rest of the CSS. We usually have something like this in out code:
where
media(sm)is a custom helper function for advanced media queries which translates to something like this: