Scalable Typography using REM Units

In case of a lack of knowledge regarding the appropriate font sizes for your website, the following resource may provide immense value. The font sizes of the titles are scalable and adjustable from desktop to mobile devices. Consequently, it is unnecessary to establish any font sizes on the tablet mode.

All the values of the typography are determined and presented in the REM unit, as it is deemed more favorable for accessibility. To configure the font sizes, it is highly recommended to assign them in the Global Fonts section within Elementor. Furthermore, the clamp text must be placed into the custom unit option located in the same Elementor section.

On the other hand, it is inadvisable to include these sizes in the H1 – H6 typography section of the Site settings. This is due to the fact that such action is unfavorable for Search Engine Optimization (SEO) and restricts your headings to a maximum of six only.

Personalizing Font Sizes using Clamp Calculator

To tailor the font sizes to suit your preferences, we suggest utilizing the clamp calculator. Please find below the appropriate sizing for each title:

Title 1

clamp(3rem, 1.7309rem + 1.813vw, 4rem)

Title 2

clamp(2.6rem, 1.7309rem + 1.813vw, 3rem)

Title 3

clamp(2.2rem, 1.5482rem + 1.3598vw, 2.5rem)

Title 4

clamp(1.8rem, 1.3654rem + 0.9065vw, 2rem)

Title 5

clamp(1.6rem, 1.2741rem + 0.6799vw, 1.75rem)

Title 6
clamp(1.4rem, 1.1827rem + 0.4533vw, 1.5rem)

Title 7
clamp(1.2rem, 1.0914rem + 0.2266vw, 1.25rem)

For the subheadings, we suggest utilizing sizes 1.2 and 1.5. Meanwhile, the body text is best presented using size 1. Additionally, for emphasis, the bold version of the body text should be size 1.125, whereas for larger text size, use 1.25. For smaller text sizes, 0.875 is recommended.

Please ensure that you apply the recommended sizes in the appropriate sections to ensure optimal accessibility and avoid issues with SEO. These sizes should be configured in the Global Fonts section of Elementor, utilizing the custom unit option. Please refrain from using the H1 – H6 typography section in the Site settings, as this could limit your headings and negatively impact SEO.