Create Fluid Responsive Typography
Scale font sizes smoothly between mobile and desktop with one line.
Rendered size at different viewports
💡 clamp(min, preferred, max) scales a value fluidly with the viewport, then locks at the min and max. It replaces stacks of media queries for typography, spacing, and widths with a single line.
Typography tips
Set a min size for mobile and a max for desktop; text scales fluidly in between, no media queries.
For headings, a wide range (e.g. 28px → 56px) feels dramatic; body text wants a gentle 16px → 18px.
rem output respects user font-size preferences — better for accessibility than px.
วิธีการทำงาน
ทำไมต้องใช้ของเรา?
Also check out…
Fluid Margins & Padding
Make section spacing grow with the viewport instea
Replace Media Queries with clamp()
Collapse stacks of breakpoint overrides into a sin
Build a Fluid Type Scale
Generate consistent clamp() steps for a design-sys
Fluid Hero & Display Headings
Make big landing-page headlines scale dramatically