Clamp calculator

The preferred value is usually an expression with vw (a percentage of the viewport width). That's what makes the size grow or shrink. Here's an example from the plugin for an H1 heading (UI SaaS preset):

clamp(3.250rem, calc(2.044rem + 1.46vw), 4.563rem)

• At a 320px viewport (mobile), the size will be exactly 3.25rem (52px).

• At 1440px (wide desktop), it will be 4.563rem (73px).

• At any viewport in between, the size slides smoothly between those two limits.

How does the plugin get those numbers?

1. It calculates a target size for each text level (body, h1–h6) based on the preset scale.
   For example, UI SaaS has scale 1.25. Base font size = 16px.
   H1 size = 16 × 1.25⁶ ≈ 61px.

2. It defines the min and max boundaries:
   min = target size × 0.85 (so the text never shrinks below 85% of the ideal size on narrow screens).
   max = target size × 1.2 (so it doesn’t blow up larger than 120% on wide screens).

3. It calculates clamp() parameters that are tied to the viewport range (by default 320–1440px).
   slope = (max - min) / (1440 - 320) * 100 (this becomes the vw coefficient)
   base = min - slope * 320 / 100 (the starting rem value)

4. All values are converted to rem (dividing by the base font size, usually 16).

How to adjust the typography for your own needs?

• Don’t like the scale? Pick another preset from the dropdown – each one gives a different size ratio.

• Need a completely different scale? A developer can add a custom preset using the WordPress filter clamp_typography_presets.

• Want to change the responsive range (viewport)? Use the filters clamp_typography_viewport_min and clamp_typography_viewport_max.

• Just copy the ready-made code – the “Copy clamp” button instantly puts the result into your clipboard. Then paste it into your CSS.

Example of a manual adjustment

Suppose you want a more aggressive growth for your heading. You could modify the preset so the min/max ratios are 0.8/1.3 instead of 0.85/1.2, making the clamp range wider. In the plugin, this can be done via the clamp_typography_steps filter or by customizing presets.

The golden rule

Both the minimum and maximum sizes should always be in rem (or px) to ensure accessibility. The plugin already handles that for you.

Remember: the body text remains the anchor point – its size usually doesn’t scale as dramatically as headings. The plugin displays it first so you can instantly evaluate the base rhythm.

Now you know enough not only to use the generated code but also to adapt it to your own projects.