Accessible font-size

As front-end developers, our job is to provide a valid experience to people using our applications. Some of these users may not have excellent sight and will need to adjust the size of what they see on the screen to be able to read things correctly.
Using web browsers, these people have multiple ways to solve the text sizing problem including:
cmd + plus
on OSX)The built-in zoom functionality is a very nice feature: it reduces the viewport width and zoom-in the content directly. It can trigger responsive mechanisms such as media-queries. For instance, if you zoom enough on this website, youāll see the menu disappearing and a navbar appearing.
Concerning the preferred font-size set in the browser settings, there is a debate where some people argue that the zoom functionality is enough to provide a valid user experience. However, I personally think that if some users have defined a custom font-size in their preferences, I have to respect that and provide them with a valid experience.
The answer to this problem is to adjust the content displayed on a website based on the usersā preferred font-size. While this might sound obvious, itās not that obvious in practice.
To create UIs on the web, we use the CSS language. In this language, multiple units can be applied to properties. The CSS language itself doesnāt take part in any of these and leaves the developers to choose what is the most convenient for them.
For me, the easiest to represent as a concept is the px
one: itās an absolute tangible unit representing a concrete shape on the screen. The problem with px
is that itās an absolute tangible unit representing a concrete shape on the screen.
Letās illustrate that. The following is a Codesandbox with a paragraph of font-size: 10px
:
Now, Iām going to change my preferred font-size
in Firefox following these steps:
cmd + ,
on OSX)With my new preferred font-size set, Iām going to check back the Codesandbox above. What I can see is that the paragraph has still a font-size of 10px
and that the content has not been adjusted with my preferred font-size: it has not scaled.
Letās check the associated CSS rule:
p {
font-size: 10px;
}
The font-size: 10px
declaration means that the font-size of the <p>
element will always be 10 pixels no matter what happens.
As mentioned earlier, it exists multiple CSS units and some of these are ārelative unitsā. In this post, I will deal with the rem
one. 1rem
corresponds to ā1 time the font size of the root elementā.
In this new Codesandbox, Iāve modified the paragraph to have a font-size of 1rem
:
When modifying the preferred font-size of the browser, we can see that the text has been scaled. If I modify this setting again, the text on the screen will change accordingly.
Letās check the associated CSS stylesheet:
body {
font-size: 100%;
}
p {
font-size: 1rem;
}
The font-size: 100%;
declaration tells the browser to use the usersā preferred font-size as a default. In modern browsers, the default font size is set to 16px
.
The font-size: 1rem;
declaration tells the browser that the <p>
tag should be displayed using 1 time the size of the base font size (16px
in this case)
As a result, the body
font-size relates to the usersā preferences and the rem
unit relates to the body
font-size: the rem
unit scales based on the usersā preferences.