Fluid Typography Calculator
Build a complete fluid type scale — modular ratios at both viewport ends, output as CSS custom properties.
This tool runs 100% in your browser. Your data is never uploaded, stored, or logged.
Fluid type scale (CSS custom properties)
About this tool
One clamp() is a size; a system needs a scale. This calculator generates a full fluid type scale: pick base sizes and modular ratios for small and large viewports, and get a set of --step-* custom properties where every step interpolates smoothly between its own min and max.
Using a larger ratio on desktop than mobile keeps headings dramatic on large screens without overwhelming phones.
How to use it
- Set base sizes (body text) for min and max viewports.
- Pick a modular ratio for each end — minor third to golden ratio.
- Choose how many steps up (headings) and down (small text).
- Copy the :root block and use var(--step-2) etc. in your CSS.
Useful ways to apply it
- Design systems that need consistent heading hierarchies.
- Marketing sites with big, fluid display type.
- Replacing ad-hoc font sizes with a principled scale.
- Matching a designer's type ramp in code precisely.
Frequently asked questions
What is a modular scale?
A series where each step multiplies the previous by a fixed ratio (like 1.25). It produces harmonious size relationships instead of arbitrary values.
Why different ratios for min and max?
Small screens can't fit huge headings; large screens look flat without them. A 1.2 ratio on mobile and 1.25+ on desktop is a proven combination.
How do I use the output?
Paste the :root block into your CSS, then reference the variables: h1 { font-size: var(--step-4); }. The generator includes usage examples.
Privacy
This tool runs 100% in your browser. Your data is never uploaded, stored, or logged.