June 7, 2023

Best Practices with REM for font sizes in Elementor and WordPress

Play Video

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

  1. 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.
  2. 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.
  3. 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.
  4. 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

  1. 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.
  2. 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.
  3. 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.

Required Resources

Elementor Logo
Free Options
Credit to Jeffrey at Lytbox
Jeffrey's Lytbox Studio is a YouTube channel dedicated to empowering aspiring website creators by offering web design tutorials, insights into the business side of web design, and fostering creativity and skill development. With a strong focus on Elementor, Jeffrey shares his journey from a techno-dinosaur to a successful freelancer and design studio owner, aiming to inspire and educate others in their quest for freedom and purpose through the world of web design.
Best Practices with REM for font sizes in Elementor and WordPress
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.