Fluid Typography Calculator
Build a CSS clamp() that scales text smoothly between two screen widths, then copy the whole type scale as an Elementor Custom CSS block. No more headings that jump at every breakpoint.
font-size: clamp(1rem, 0.4167vw + 0.9167rem, 1.25rem);
The quick brown fox jumps over the lazy dog
Common questions
Why does Elementor need custom CSS for fluid type?
Elementor's typography controls give you one fixed size per breakpoint, so text jumps at 768px and 1024px instead of scaling smoothly. A clamp() value scales continuously at every width in between. Elementor has no clamp field, so it goes into Site Settings > Custom CSS, which then applies site-wide.
Why rem instead of px in the clamp?
A clamp written purely in px ignores the visitor's browser font-size setting, which is a WCAG 1.4.4 failure for anyone who needs larger text. The min and max here are in rem, so zoom and browser preferences keep working.
Should mobile and desktop use the same ratio?
Usually not. A 1.618 scale that looks striking on a 1440px screen produces an unreadable H1 on a 375px phone. Picking a smaller ratio for mobile and a larger one for desktop is the fastest way to fix headings that feel oversized on phones.
Where do I paste the result?
On Elementor Pro: Site Settings (the hamburger menu inside the editor) > Custom CSS, and paste the whole block. On free Elementor the Custom CSS field is locked, but this is plain CSS, so paste it into WordPress under Appearance > Customize > Additional CSS instead and it behaves identically. Either way it applies site-wide.
Do I need Elementor Pro for this?
Not for the CSS itself. Elementor's Custom CSS field, both in Site Settings and in a widget's Advanced tab, is a Pro feature, so on free Elementor you paste into the WordPress Customizer's Additional CSS box or your child theme stylesheet. The generated clamp() values are standard CSS and work in any of those places.
Fluid type pairs well with unstyled components. Snapelement components carry no hard-coded font sizes, so the scale you just generated applies to them the moment you paste. Browsing is free, V3 Adaptive components are free to copy within a monthly allowance, and the V4 Atomic catalog comes with a paid plan. See what each plan includes.