The Elementor / Pojo team created the popular (and free) One Click Accessibility plugin. Next, change any other fonts to corresponding REM sizes throughout the page, as needed.Įlementor has you covered there as well. Click the Calculate button and a list will be generated showing the REM size that is comparable to each of the PX sizes you’ve requested. Then enter a list of sizes in PX that you’d like to convert to REM, separated by commas (eg, 16,18,20,22,24,27,33,36,65). Simply input your base font size in PX (for our example, that’s the 16px we set in Customizer as the default size). My favorite is OffRoadCode’s REM Calculator. Tip: There are a number of online calculators to help convert PX to REM. Let’s not take that choice away from her. While we might wish for it to be exactly the size we want, it is the user’s right to see our text at a size that is readable to her. This means the heading will be 2x larger than the base font size (16px normally, or in the case of our user who changed her default size to 20px, our heading would now be the equivalent of 40px). Instead of setting your heading at 32px, set it to 2REM instead. If we design sites using pixels, we take away the ability for that user to have control over the size of the text, making our sites less accessible. If a user sets the default size at 20px, all text should scale upwards accordingly. As we’ve mentioned, most browsers use 16px as the default text size, but a user can, and often do, change their default browser text size to be something different. Why use REMs instead of Pixels for font size? Accessibility is the key reason here. Simply go to the widget’s Style > Typography settings, click on REM, and either use the slider or enter. Elementor makes it easy to change the size. 9 REM so that it is slightly smaller than default, but still very readable.