Documentation-based practice example; check the controls in your installed Oxygen version.
When fluid typography helps
Use clamp() when a heading should grow smoothly between a phone and a desktop, with limits that prevent it becoming too small or too large. It is useful for a project title or hero heading. Choose separate values for body text and spacing; a hero formula is not a universal type scale.
Worked example: a 32–64px project heading
Assume a 16px root size. You want a heading to be 32px at a 320px viewport and 64px at 1440px. Enter those sizes and viewport endpoints in the CSS Clamp Generator.
font-size: clamp(2rem, 1.428571rem + 2.857143vw, 4rem);The three arguments are the minimum, preferred value and maximum. The browser constrains the preferred value to the two bounds. This example was checked against the working calculator on this site.
Why these numbers work
The slope is the size difference divided by the viewport difference: (64 - 32) / (1440 - 320) = 0.028571. The viewport coefficient is that slope multiplied by 100, or approximately 2.857143vw. The intercept is 32 - 0.028571 × 320 = 22.857143px, or 1.428571rem at a 16px root.
| Viewport | Preferred value | Rendered size |
|---|---|---|
| 320px | 32px | 32px |
| 880px | 48px | 48px |
| 1440px | 64px | 64px |
| Below 320px | Below 32px | Minimum 32px |
Apply the result in Oxygen
- Add or select the heading’s Text element and choose the correct heading level.
- Apply a reusable heading class. Use the available typography value or a scoped CSS rule for its font size.
- Paste the expression once; avoid a competing font-size declaration through another styling method.
- Keep line height and maximum text width deliberate so the long version of the heading remains readable.
- Check the actual frontend at the two endpoints and an intermediate width.
A second example: 40–80px
For 40px at 320px and 80px at 1440px, with the same 16px root, the tested generator returns:
clamp(2.5rem, 1.785714rem + 3.571429vw, 5rem)The preferred value at 880px is approximately 60px. Choose this larger range only if your content needs it; compare a long project name and a short one.
Troubleshooting
- The size stays fixed: inspect the computed font size and competing rules. Also check whether the preferred value is already outside the bounds.
- The endpoints differ: verify the root size. These rem values assume 16px; visitor preferences or your CSS can change it.
- The tool rejects the inputs: the upper viewport must exceed the lower viewport, and the maximum size cannot be smaller than the minimum.
- The text is hard to read: change the design values, line length or breakpoint behavior rather than treating the formula as a visual verdict.
Accessibility and reference
Test browser zoom and text enlargement, not only the calculator preview. Mixing rem with viewport units is useful, but a clamp formula alone does not guarantee successful resizing. Keep instructions and body copy comfortably readable. Reference: MDN clamp().