Using pixels is a popular way to define font sizes, and previously this is the approach we have commonly taken. Pixels are absolute in size, so setting some text to 16px is equal to 16 pixels on the user screen. This has worked fine as we know exactly what will be rendered on a user’s screen and this will never change.
However, the fact that the font size cannot be changed presents a problem for many users. If a user requires a large font for comfortable reading, one common way to achieve this is to increase the default font size of the browser. This calculates the size values of all elements using relative units, and adjusts the value accordingly. But pixels are absolute! So no matter whether a user keeps the default setting or adjusts their default font size, if the font size is defined using pixels it will always stay the same.
So how have we resolved this?
Here at interconnect we have combed through all our sites and changed the pixel values of all our font sizes and line heights to use rem values instead.
What does that mean?
1rem = root element font size.
All modern browsers default to 16px, so in most cases:
1rem = 16px
However, if the user changes their default font size to 20px, then:
1rem = 20px
So, for example, by setting a site’s text to use rem values instead of pixels, the content will automatically adjust to the user’s preferences. This massively improves accessibility by allowing the user to adjust to their required font size and providing control over how they receive content on the web.
Lets test it out
Head to your browser settings and adjust the font.
Chrome: Settings > Appearance > Font size
Firefox: Options > Language and Appearance > Fonts and Colors > Size
(For other browsers, check their documentation to adjust their default font sizes.)
As you can see, nothing has changed for everyone who keeps their font sizes set to default but those who need (or prefer) to adjust their font size also have a working result too.
Websites don’t have to be restricted to those with perfect vision. Websites can (and should) be accessible to everyone. By giving the user more control over how they receive content, we are welcoming more people to stay on our sites for longer — all by a simple change with our font values.
