Fluid Typography in Elementor with clamp()

Setting a heading to 56 px on desktop, 44 px on tablet and 32 px on mobile works, but text jumps between sizes at each breakpoint and looks wrong on the screens in between. Fluid typography scales text smoothly with the viewport using the CSS clamp() function. This tutorial explains how clamp() works and how to use it in Elementor, including in Global Fonts.

How clamp() works

font-size: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

clamp() takes three values: a minimum, a preferred value and a maximum. The browser uses the preferred value, but never goes below the minimum or above the maximum. Here the heading is never smaller than 2rem (32 px) or larger than 3.5rem (56 px), and in between it grows with the viewport width.

Why the preferred value mixes rem and vw

1vw is 1% of the viewport width. A size made only of vw ignores the user’s font-size setting and does not grow with browser zoom in some cases, which is an accessibility problem. Adding a rem part (1.2rem + 2.5vw) keeps the text responsive to user preferences while still scaling with the screen.

<h2

Working out the numbers

Decide the smallest and largest sizes and the viewport widths where they should apply, for example 32 px at 375 px wide and 56 px at 1280 px wide. The slope is (56 − 32) ÷ (1280 − 375) ≈ 0.0265, so the vw part is 2.65vw. The intercept is 32 − 0.0265 × 375 ≈ 22 px, or 1.375rem. Result:

clamp(2rem, 1.375rem + 2.65vw, 3.5rem)

You do not need to do this by hand: the clamp generator takes the four numbers and returns the formula, and shows the size at common screen widths.

A fluid type scale

Apply the idea to every level, with larger headings scaling more than body text:

Element	Mobile	Desktop	clamp() (375 → 1280 px)
H1	36 px	60 px	clamp(2.25rem, 1.63rem + 2.65vw, 3.75rem)
H2	28 px	40 px	clamp(1.75rem, 1.44rem + 1.33vw, 2.5rem)
H3	22 px	26 px	clamp(1.375rem, 1.27rem + 0.44vw, 1.625rem)
Body	16 px	18 px	clamp(1rem, 0.95rem + 0.22vw, 1.125rem)

The type scale generator builds a full scale from a base size and ratio, and can output fluid values.

<h2

Using clamp() in Elementor

On a single widget

1. Select the Heading widget and open Style → Typography.
2. Next to Size, click the unit selector and choose Custom (the pencil icon in some versions).
3. Type the full clamp() expression and press Enter.
4. Leave the Tablet and Mobile sizes empty, so the same fluid value applies everywhere.

In Global Fonts (recommended)

Go to Site Settings → Global Fonts, open each typography preset (Primary, Secondary, or your custom ones), and enter the clamp() value in the size field with the Custom unit. Every widget that uses the preset becomes fluid at once, and later changes happen in one place.

With CSS variables

If you prefer code, define the sizes once in Site Settings → Custom CSS (Pro) or your child theme’s stylesheet:

:root {
  --fs-h1: clamp(2.25rem, 1.63rem + 2.65vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.44rem + 1.33vw, 2.5rem);
}

Then use var(–fs-h1) as the custom size in widgets.

Things to watch

• Line height: use a unitless or em line height (1.1–1.25 for large headings) so it scales with the text.
• Maximum line length: as text grows, keep paragraphs around 60–75 characters wide with a max-width on the text container.
• Zoom test: zoom the browser to 200% and confirm text still grows. If it does not, the rem part of the preferred value is too small.
• Browser support: clamp() works in all current browsers.

Summary

clamp(min, preferred, max) gives you smooth, bounded text sizes with no breakpoint jumps. Combine rem and vw in the preferred value, generate the numbers with a tool, and set them once in Elementor’s Global Fonts.