Fluid type clamp() generator
Set the font size you want on phones and on desktop. You get one clamp() value that scales smoothly in between, ready to paste into any Divi font size field.
Settings
rem respects the visitor's browser zoom and font settings, which is better for accessibility.
How to use it in Divi
Open the module, go to Design → Text (or Title Text), click the font size value and paste the clamp() value. Set it on desktop only. You no longer need separate tablet and phone values.
Your CSS
clamp(2rem, 1.3785rem + 2.6519vw, 3.5rem)font-size: clamp(2rem, 1.3785rem + 2.6519vw, 3.5rem);Live preview
Build better Divi sites, faster
Font size at this width: 42.4px. Click the text to edit it.
Size at common breakpoints
| Device | Viewport | Font size |
|---|
Using fluid type in a carousel? Divi Carousel's slide titles accept clamp() values, so headings stay readable on every slide size.
See Divi CarouselWhat is CSS clamp()?
clamp(MIN, PREFERRED, MAX) picks the preferred value, but never goes below the minimum or above the maximum. For type, the preferred value mixes a fixed amount with a viewport unit (vw), so the text grows with the screen between the two widths you choose.
How the maths works
The tool draws a straight line between your two points. The slope is (max size − min size) ÷ (max viewport − min viewport). Multiplying the slope by 100 gives the vw part, and the starting offset becomes the rem part.