Responsive font sizes and spacing accessibility guide to making user-friendly web apps
In this guide, we’ll go through the important parts of implementing your sizes such as Font-Size, Margins, Paddings, Widths, Heights, and all that is related to spacing in CSS in a way that it can easily be scaled up and down according to the user preferences to serve better accessibility for our web applications.
The problem?
People’s time is precious and limited, particularly in today’s fast-paced world. A poor user experience in the form of non-responsive web design can really harm a business or brand in the blink of an eye and cause financial damage to them so it means learning how to bring responsiveness and accessibility to web apps is crucial for every Front-End developer.
What CSS brings to the table for us?
In CSS, there are many different units that can be used to size elements on a page — px, vw, ch, em, rem, and far too many others to list here. Of all these units, rem is the most reliable for font sizing, allowing you to style text responsively so that it scales whenever users change their preferred browser font size. Let’s understand why this matters.
Don’t use Pixel for Font-Sizes!
First and foremost, you should know that the standard root font size of browsers is 16px. This fixed value is in ‘px’ units by default. To check this you can open your browser, for example here is my Google Chrome, go to settings like below:
Go to Appearance like below:
As you can see in the picture, we have two options here, the first one is the Font Size settings which is Medium by default and which means it is 100% or 16px for the default font size of every HTML page.
You are also given Large and Very Large options as you go up and Small and Very Small options as you need to scale down which will increase the font size respectively.
You can also change the page zoom in order to zoom in or out.
Don’t use EM as well unless you really need it!
For the font-size property, 1em is relative to the font size of that element’s parent. So if the parent element has a font size of 24px, a child with a font size of 1em would get a computed font size of 24px. Likewise, 0.5em would compute to 12px.
Unfortunately, em is problematic for font sizing. If you give one element a font size in ems and a child a font size also in ems, those two values will create a compounding effect and things will get messy in no time!
For this reason, ems are not recommended for font sizing because an element may be nested arbitrarily deep in the DOM. Thus, an element’s em-based font size cannot be determined reliably just by looking at its own CSS—it depends on where that element is inserted into the tree. This makes it very difficult to create independent, reusable components.
REM is better!
By contrast, rem (which stands for “root em”) always references the root font size of the document as its single source of truth. Assuming that the root font size is 16px (as is the case in all modern browsers before user preferences are applied), we get the following values:
1rem = 16px1.5rem = 24px0.5rem = 8px
The great thing about rem is that it’s predictable: we can safely use it for font sizes in nested layouts and component frameworks since it always references the root font size rather than some arbitrary ancestor font size. This makes rem the ideal unit for font sizing, allowing us to define font sizes in responsive units that respect user preferences. So if a user changes their preferred font size in their browser settings, all of your rem-based sizes will scale accordingly and use the new value as their basis.
So now how to fix our main problem now?
When the root font/HTML size is 100%, the font size is 16px by default. But, if you set it to 62.5%, the new root value will be 10px.
Behind the scenes, every browser defines 1rem to be 16px initially, before any custom styling is applied to the page. This means that any unstyled body text will have a rendered font size of 16 CSS pixels (excluding special elements like <small> those that have a smaller font size due to user-agent styles). However, both developers and users can redefine the value of 1rem. Developers can change the font size of the root element (html) with CSS so that all elements inherit that new font size:
Now, 10px (1rem) is way too tiny and is a recipe for disaster in terms of good user experience. So we should set it to 1.6rem (16x) again in the body. Everything looks the same on the surface. But still, this time, the new rem set-up will be more responsive than that of the ‘px’ version.
Now we’re able to translate all the values into rem units. The tricky bit here is the root size calculation in the HTML section. Now, whatever size we pick for the body will be re-shaped in accordance with the pre-defined value in the root/HTML. To put it simply, the new percentage value ‘62.5%’ in the root/html section ensures the smooth transformation of ‘px’ into ‘rem’.
What if the user now picks 18px for the root size?
As the developer of this webpage, you chose ‘62.5%’ for the HTML and ‘1.6rem’ for the body as the initial font size. Now let’s assume that the default size chosen by a user is now 18px, not 16px anymore. How is it going to work out? Will this person be upset and leave the page feeling frustrated or will they keep surfing the webpage without trouble?
Here’s the answer. Once the browser’s font size is chosen as 18px by the user, the font size will instantly be re-calculated as 11.25px (18px * 62.5%) by the system. As a result, the value for the body will be 18px (1.6rem * 11.25px) just the way it is requested by that specific user. So this person will not be negatively affected by the situation just because they wish to see the font size bigger than the standard version.
The good news is that all of these will be re-calculated automatically. And thanks to the percentage and rem-oriented set-up, the text on the webpage will be more responsive and user-friendly.
What about other sizes like padding or margin?
You can easily use the REM unit to define your spacing with the respective root size of your app for example here I have some utility classes that use this advantage.
There is an online tool for converting these units to each other if you are a little foggy with all the mathematics!
https://nekocalc.com/px-to-rem-converter
Is this the ultimate solution?
Despite the fact that the method that uses the root size ‘62.5%’, since it’s specifically a percentage value and the rem-based preference in the body section gives us a chance to play around with the general font size dynamically, it is also not risk-free and you should use it cautiously (see this article for more info).
For instance, it may lead to some problems when ‘em’ values are preferred instead of ‘rem’ values. Plus, this technique only resizes text. So you’ll need to use some other tricks (for example, when dealing with the size of the images).
That said, overriding the root font size is still a widespread practice preferred by many developers around the world and it can be handy if used carefully.
Thank you for reading. If you’ve liked this article, one of the best ways to support me is to share it. Should you have any questions or comments, you can always contact me via LinkedIn. I’ll be more than happy to help you out with your queries.
Resources:
https://www.freecodecamp.org/news/override-root-font-size-for-a-better-user-experience
https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick
https://www.freecodecamp.org/news/override-root-font-size-for-a-better-user-experience/
