Complete Elementor Typography System: V4 Variables + V3 Widgets Guide

The transition from Elementor V3 to V4 has created a unique challenge for web designers. While the new atomic editor offers powerful typography management through variables and classes, most websites still rely on a mix of V4 elements and older V3 widgets. Rino de Boer has developed a solution that bridges this gap, creating a unified typography system that works across all versions and WordPress editors.

Why Traditional Typography Management Falls Short

The old Elementor system bundled all typography settings—font family, size, weight, and color—under single global font names. This approach, while simple, lacked flexibility. When testing different scenarios, you’d often find yourself needing the same font size for headings and buttons, or wanting to use your body text size in navigation menus.

The V4 Variable Advantage

Elementor V4 changes this approach completely. Variables store single values separately—font size in one variable, font family in another. This separation allows you to reuse individual properties across different elements, providing much greater flexibility than the bundled approach.

For example, you can create a “title-xl” variable for font size and use it in headings, buttons, or any other element that needs that specific size. When you update the variable, all elements using it change automatically.

Setting Up Your Typography Foundation

Before diving into Elementor’s interface, you need to prepare your WordPress installation. Navigate to Elementor Settings and disable the default colors and fonts in the general settings. This prevents conflicts with your custom typography system.

Creating Font Family Variables

Start with the basics: font families. Select your heading font from Elementor’s font library and save it as a variable called “heading-font.” Repeat this process for body text, creating a “body-font” variable. This gives you centralized control over your site’s font choices.

Establishing Font Size Hierarchy

Font sizing requires more strategic thinking. Rather than arbitrary sizes, Rino de Boer recommends using mathematical scaling. The approach starts with 16 pixels for body text (the web default) and scales headings exponentially—each level 25% larger than the previous.

For mobile devices, a 20% scaling factor works better to prevent overly large text on small screens. This creates a harmonious progression: 16px → 20px → 25px → 31px → 39px → 49px → 61px for desktop, with proportionally smaller mobile versions.

Advanced Techniques: REM Units and Clamping

While pixels work for basic setups, REM units offer superior accessibility. REM values scale with user browser settings, ensuring your typography remains readable for users who adjust their browser’s default font size.

Implementing Clamp Values

Clamp functions represent the most sophisticated approach to responsive typography. Instead of setting breakpoint-specific sizes, clamp automatically interpolates between desktop and mobile values based on viewport width.

The syntax follows this pattern: clamp(mobile-size, scaling-factor, desktop-size). For example, clamp(2.4rem, 4.8vw, 4rem) starts at 2.4rem on mobile, scales with viewport width, and caps at 4rem on desktop.

Building Typography Classes

Variables handle individual properties, but classes bundle multiple typography settings under single names. This mirrors the old global font system but with V4’s flexibility.

When creating classes, use descriptive naming conventions. Rino suggests “title-1” through “title-6” to avoid confusion with HTML heading tags (H1-H6). After setting up font size, family, weight, and line height, convert your styling to a global class.

Line Height Considerations

Line height requires careful attention, especially when testing with multi-line text. For headings, 110-120% typically works well. Body text needs more breathing room—160-180% prevents cramped appearance and improves readability.

Bridging V4 and V3: The Sync Process

The most crucial step involves syncing your V4 classes back to V3 compatibility. In Elementor’s Class Manager, you can sync classes to global fonts, making them available to older widgets.

This creates a two-way bridge: V4 elements use modern classes and variables, while V3 widgets access the same styling through the global fonts system. When you update a class, both V3 and V4 elements reflect the changes simultaneously.

WordPress Editor Integration

For complete site-wide consistency, link your atomic classes to WordPress’s site typography settings. Navigate to Site Settings → Typography and assign your classes to HTML heading levels (H1-H6).

This ensures that blog posts created with Gutenberg or the Classic Editor automatically use your typography system. Content creators don’t need to manually apply styling—it happens automatically based on semantic HTML structure.

Practical Implementation Examples

Consider a real-world scenario: your client needs light text on dark backgrounds. Instead of creating entirely separate typography systems, simply create a “title-light” class that inherits all your base typography but uses a light color variable.

For V4 elements, apply the light class directly. For V3 widgets, select your base typography from global fonts, then override the text color with your light color variable. Both approaches achieve the same result while maintaining system consistency.

Why This System Matters

This unified approach solves the major pain point of Elementor’s transition period. Instead of managing separate systems for different widget types, you control everything from V4’s modern interface while maintaining backward compatibility.

The workflow actually becomes more efficient than pure V3 setups. New headings automatically receive appropriate styling based on their HTML level, reducing manual formatting from five clicks to zero for basic applications.

For web designers managing multiple client sites, this system provides scalable typography management that works regardless of which Elementor features clients choose to use. Whether they add V3 widgets, V4 elements, or write blog posts, the typography remains consistent.

Getting Started Today

While setting up this system manually requires initial effort, the long-term benefits justify the investment. Start with a simple hierarchy—three heading sizes and two body text variations—then expand as needed.

Tools like WebsiteStyleKit.com can help generate mathematically-scaled font sizes and clamp values, reducing the technical complexity. The goal is creating a system that grows with your needs while maintaining consistency across all Elementor versions and WordPress editors.

This typography system represents the future of Elementor design workflows—unified, flexible, and ready for whatever updates come next in the platform’s evolution.

FAQ

Can I use this typography system if my site only has V3 widgets?

Yes, the system works perfectly with V3-only sites. You’ll create the typography classes in V4’s interface, then sync them back to global fonts where V3 widgets can access them. All your existing V3 widgets will be able to use the new typography system.

What’s the difference between variables and classes in Elementor V4?

Variables store single values like font size or font family, while classes bundle multiple typography settings together. Variables give you granular control over individual properties, while classes provide quick application of complete typography styles, similar to the old global fonts system.

Do I need to manually set up typography for every blog post?

No, once you link your typography classes to the site settings (H1-H6), all blog posts created with Gutenberg or Classic Editor will automatically use your typography system. The styling applies based on the semantic HTML heading structure.

Should I use pixels or REM units for font sizes?

REM units are recommended because they scale with user browser settings, improving accessibility. If a user increases their browser’s font size, REM-based typography will scale accordingly, while pixel-based typography remains fixed.

How do clamp values work for responsive typography?

Clamp values automatically interpolate font sizes between mobile and desktop breakpoints based on viewport width. Instead of setting specific sizes for each breakpoint, clamp creates smooth scaling across all screen sizes using the formula: clamp(minimum-size, scaling-factor, maximum-size).

This article is an original commentary piece inspired by the video above.