Fluid type is useful when it removes awkward jumps between breakpoints. Labels and paragraphs often need a narrow range; headings can move more.
Start with type roles
Name the jobs your type has to do: body, label, supporting text, section heading, and page heading. A modular ratio can suggest values, but the final scale has to survive actual copy inside forms and navigation, as well as longer table content.
Keep stable
Controls and dense product labels often need a narrow range so layout does not shift as the viewport changes.
Let it breathe
Display headings can use a wider range when the line length and surrounding space are also controlled.
Choose two sizes and two viewport points
For each fluid role, decide the smallest useful size, the largest useful size, and the viewport widths where those sizes should stop changing. The middle value in clamp() is a straight line between those points.
:root {
--text-body: 1rem;
--text-lede: clamp(1.125rem, 1.0417rem + 0.4167vw, 1.375rem);
--text-heading: clamp(2rem, 1.3333rem + 3.3333vw, 4rem);
}Different roles use different slopes. Separate slopes are easier to tune than one root value for the entire type system.
Use the worked guides
Generate a scale, then test it in context
The generator gives you fixed and fluid CSS variables. Treat that output as a starting point: paste the values into a real page, use the longest plausible labels, and adjust the roles that create bad wraps.
Standards used in this guide: MDN's clamp() reference, plus the W3C guidance for resizing text and user-set text spacing.
For work that spans tokens, components, and implementation, review the design system service.
