Learn how to implement REM for font sizes in Elementor and WordPress sites explained by Jeffrey at Lytbox. It’s a modern and accessible approach to setting WordPress font sizes and Elementor font sizes, especially for users who need to adjust their screen for visual impairment. This tutorial will guide you through the process of using REM in a simpler and more efficient way to create accessible web design.
What is REM?
Before we dive into the tutorial, let’s take a moment to understand what REM is. REM is a unit of measurement used in CSS, the language used for styling websites. It stands for “Root EM”, where “EM” is another unit of measurement in CSS.
What sets REM apart is that it’s relative to the root element’s font size, typically the “<html>” element. This means that when you set your font sizes using REM, they will scale based on the root element’s font size. This is particularly useful for ensuring your website is accessible, as it allows users who need larger text sizes to adjust their browser settings accordingly, and your text will scale to match.
Why you should switch from Pixels to REM
Using REM over pixels for font sizes is considered a best practice in modern web design. It makes your website more accessible to visually impaired users who need to adjust their screen size. Moreover, it simplifies the process of setting font sizes, especially when you change the base font to 10 pixels.
While this tutorial focuses on using REM for font sizes, REM can be used in other areas as well. For example, you can use REM to set the gap sizes in a grid layout. This further enhances the accessibility and responsiveness of your website.
How to switch px to rem
- Understanding the Default Font Size Setting in Browsers
Browsers by default set the font size to pixels. However, pixels don’t adjust well to screen size changes, making them less accessible for visually impaired users. REM, on the other hand, adjusts well to screen changes. - Converting Pixels to REM
The base font in browsers is set to 16 pixels, which equals 1 REM. If you want to convert a pixel value to REM, you need to do some calculations. For example, if you want to make your font size 32 pixels, that’s 2 REM. But for values like 22 pixels or 54 pixels, you’ll need to do some math or use a rem font-size calculator. - Simplifying the Conversion Process
To make the conversion process easier, you can change the base font from 16 pixels to 10 pixels. This way, if you want to make your font 20 pixels but in REM, that’s simply 2 REM. If you want to make it 22 pixels, that’s 2.2 REM. This eliminates the need for a calculator or a conversion tool. - Applying the Change in Elementor
To change the base Elementor font sizes, you need to add a small CSS snippet that changes the base font of the website from 100 (which equals 16 pixels) to 62.5 percent (which equals 10 pixels). You can add the CSS below in the customizer.html { font-size: 62.5%; }Source: Lytboxacademy
Use Cases for font sizing with rem
- Designing Accessible Websites:
If you’re designing a website with accessibility in mind, using REM for font sizes is a must. This tutorial guides you through the process of implementing REM in an easy and efficient way. - Creating Responsive Layouts:
REM is not just for font sizes. You can use it to set the sizes of other elements, like gaps in a grid layout. This makes your layouts more responsive and adaptable to different screen sizes. - Streamlining Your Workflow:
If you’re a web designer or developer, using REM can streamline your workflow. By changing the base font to 10 pixels, you can easily convert pixel values to REM without the need for calculations or conversion tools.
Troubleshooting Common Issues
- Fonts Not Adjusting to Screen Size Changes
If your fonts are not adjusting well to screen size changes, make sure you’re using REM instead of pixels for font sizes.Also, check if you’ve correctly changed the base font to 10 pixels using the CSS snippet provided in the tutorial. - Difficulty Converting Pixels to REM
If you’re having trouble converting pixels to REM, remember that with the base font set to 10 pixels, the conversion process is straightforward. A pixel value of 20 is 2 REM, 22 is 2.2 REM, and so on. - Changes Not Applying in Elementor
If your changes are not applying in Elementor, make sure you’ve added the CSS snippet in the right place. It should be added in the customizer.
