For some time it has been common practise to set font sizes using the unit REM. This was to make sure users who need to change their default font still had readable content. If the user has their browser font set to a base 20px instead of the default 16px then all fonts on the website will scale relatively to this, so 2rem which previously equaled 32px now equals 40px.
However we can do better. It’s all well and good to scale the text to the browser, but what about all the other elements that are still using pixels? Margins and padding that are set using pixels are not going to scale with the browser, and eventually will cause problems for a user, where their particular setting messes up the styling.
Here we have a simple button, viewed as if all browser & PC settings are set to default.
Now lets look at what happens when the base font size of this document is changed.
Imagine the user has set their default font size to be quite large (to simulate this I’ve set the HTML font size to 450%). While the font-size which has been set using REM, and is scaling with the base font size, the button containing the text isn’t able to adapt to the font size change and is causing the the text to spill out of its container. Not only is this having an affect on the usability of the button, it looks dreadful.
Here’s an example where we replace all pixels with relative units.
Here, like font size, both the width and height of the button have been set using REM. With the font size set to 450%, the dimensions of the button have scaled with it. This is obviously an extreme example, but in a realistic setting all users will be able to experience the website in the same way, and it won’t matter if they require their general sizes to be large or small.
The end result is an extremely flexible and dynamic website, where every single element will scale relative to each other.