Why us REM for Font Sizes
Back in the days, we I used PX on everything. And it was cool, a great way to get started when building websites. But times have changed and using PX for font sizing is no longer considered accessible. In the last few years, there has been more light shined on making websites accessible and by following best practices, we can make sure our websites have a great experience for all users.
Using REM for font sizes is one of those best practices we all should be doing. In this article, I’ll show you an easy way to get started when going from PX to REM.
The challenge of using REM
By default, a browser’s root font size is 16px. This means 1 REM equals 16px. Not bad, but when you’re used to using PX and know how big your fonts should be, you may find yourself breaking out the calculator or using a 3rd party tool to figure out the conversion.
And this disrupts the workflow by causing us to deviate from our flow to calculate the changes.
The Solution: Change the browser’s root font size
If we change the default font size from 16px to 10px, well figuring out the conversion from px to REM is a breeze. 1REM = 10 px. This means 20px = 2rem, 22px = 2.2rem, 38px = 3.8rem, and so on.
How to change the browser’s root font size for Elementor
This actually works on every WordPress website no matter the page builder or theme. All we need to do is add a snippet of CSS.
Below is a CSS snippet that changes the root front size from 100% (which equals 16px). to 62.5% (equaling 10px).
Copy and paste this code snippet where you store your custom CSS. I suggest using the customize. You can find this by selecting on Appearance > Customize > Additional CSS.
html {
font-size: 62.5%;
}Conclusion
That’s it. Super easy. If you want to get a better understanding, checkout the video below as I walk you through the whole set up.
