Font sizes

Scalable Font Sizes with REM for Elementor Websites

Choosing the right font sizes is a critical aspect of web design, and scalability is the key to making your site look great on all devices. Here’s a guide to implementing scalable font sizes using REM units in Elementor, ensuring accessibility and responsiveness without the need for tablet-specific adjustments.

Why Use REM Units for Font Sizes?
  • Better Accessibility: REM units scale relative to the root font size, making it easier for users to adjust text size through their browser settings.
  • Responsive Design: Using clamp() for font sizes ensures seamless scaling across devices, from desktop to mobile.
  • Global Control: Setting font sizes in Elementor’s Global Fonts section gives you centralized control over typography.
How to Implement Scalable Fonts in Elementor
1. Set Up Global Fonts
  • Navigate to WordPress > Elementor > Site Settings > Global Fonts.
  • Add your font sizes here to maintain consistency across your site. Use the Custom Unit option in Elementor to input clamp() values for scalable fonts.
2. Avoid Adding Sizes to H1–H6 in Site Typography
  • Do not configure font sizes directly in the Typography section for H1–H6.
  • Why? It limits heading styles to a maximum of six and can negatively impact SEO.
3. Use Clamp Calculator for Custom Sizes
  • Customise the sizes using the clamp calculator
  • Example values below are calculated for a minimum viewport of 360px and a maximum of 1140px.
Recommended Font Sizes for Titles and Text
Title 1 (64px on desktop to 48px on mobile):
				
					clamp(3rem, 2.5385rem + 2.0513vw, 4rem)
Title 2 (48px to 38.4px):
				
					clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem)
Title 3 (40px to 33.6px):
				
					clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem)
Title 4 (32px to 28.8px):
				
					clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem)
Title 5 (28px to 25.6px):
				
					clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem)
Title 6 (24px to 22.4px):
				
					clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem)
Title 7 (20px to 19.2px):
				
					clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem)
Recommended Font Sizes for Titles and Text
  • Subheading (19.2px): 1.2rem
  • Body Text (16px): 1rem
  • Bold Body Text (16px): 1rem
  • Big Body Text (18px): 1.125rem
  • Small Body Text (14px): 0.875rem
Recommended Font Sizes for Titles and Text

  1. Apply Clamp Text Sizes in Elementor

    • Go to the Style tab of any Elementor widget.
    • In the typography section, select Custom for font size and enter the clamp() value.

  2. Test Responsiveness

    • Use Elementor’s Responsive Mode to preview font sizes on desktop, tablet, and mobile.
    • Make adjustments in the Global Fonts section to fine-tune scaling.
Benefits of Scalable Font Sizes
    • No Need for Tablet-Specific Adjustments: Fonts automatically scale across devices, simplifying your design process.
    • Improved SEO: Proper font scaling enhances usability and search engine rankings.
    • Consistent User Experience: A well-defined typography system ensures readability on all screen sizes.

    By following these steps and using the recommended clamp() values, you’ll create a scalable, accessible, and beautifully designed website with Elementor. Happy designing!