Fix MyListing’s Inaccessible Root Font Size

The Root of the Problem

By default, MyListing uses a Root Font Size of 10px, which leaves us with a body (paragraph) font of 14px. This is the root of the problem—pun intended! The standard Root Font Size across the web is 16px. 

It is a bit baffling why the MyListing developers do not adhere to this standard, especially when Elementor is approaching this the correct way. MyListing relies on Elementor for typography but chooses not to follow Elementor’s (or the web standard, for that matter) for some reason.

Install Elementor’s free Hello theme on your MyListing website and activate it. You’ll quickly see how the body font changes from 14px to 1rem. This is because Elementor follows the web standard of a Root Font Sizeset 16px (1rem = 16px).

In the meantime, there is a way to address this, which I cover in this guide.

So, What’s the Big Deal?

By default, MyListing potentially exposes people to fines and lawsuits resulting from inaccessible websites. This is because the minimum body (paragraph) font recommended for ADA (American Disability Act) compliance is 16px.

You may think this sounds like an overreaction, but are you willing to risk it? Don’t you care enough about making your website accessible to those with visual impairments?

You may say, “This is no big deal because I can globally adjust the body font with Elementor Site Settings.” While you would be right, not everyone will know how to do that, and that’s where people are open to being penalized. 

Wouldn’t it make more sense for MyListing to follow the web standard and the solution (Elementor) that the theme relies on for many of its typography aspects? I don’t even think there is a debate. It has to change.

The Current Solution

First, let me point out that you need to get on board with using REM instead of PX to have truly responsive fonts. MyListing’s Root Font Size decision (10px) impacts the responsiveness of your fonts because it prevents proper REM < > PX conversion unless you add the following code snippet to your website.

html { 
  font-size: 16px !important; 
}

Unfortunately, the code snippet alone is no longer enough, so I’ve reported this as a bug. In the end, you need the above code snippet and follow the steps below to get MyListing and Elementor on the same page regarding a Root Font Size of 16px.

1. Edit a page with Elementor.
2. Site Settings > Typography > Body > Typography > Click the pencil icon to edit the Typography.
3. Switch from PX to REM.
4. Set the font size to 1 (1rem).
5. Save changes.

Video Tutorial