Utility · CSS unit tool
Responsive type scale generator
Build a fluid type step with the generator below, then lock its vertical rhythm with a matching line-height. Good responsive typography is two decisions working together: a bounded fluid size and leading that scales with it.
font-size: clamp(1.1250rem, 0.7624rem + 1.5470vw, 2.0000rem);
/* px-based */ font-size: clamp(18.00px, 12.20px + 1.5470vw, 32.00px);
Keyboard tip: press Tab or Shift+Tab to switch fields.
Designing a responsive scale
Pick a small-screen and large-screen size for each step (body, h3, h2, h1) and let clamp() interpolate between them. Keep the ratio between steps consistent so the hierarchy reads clearly at every width.
Anchor the smallest body size to ~16px so reading comfort holds on phones, and cap the largest so headings do not overwhelm wide desktops.
Vertical rhythm that holds
Use unitless line-height so leading tracks the computed font-size automatically as it scales. Tighter leading suits large display text; looser leading aids long-form body copy.
Match line-height to measure (line length): wide columns need a touch more leading to keep the eye on track when returning to the next line.
Copy-ready examples
h2 {
font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
line-height: 1.2;
}Frequently asked questions
- How many type steps do I need?
- Most interfaces do well with 4–6 steps (body, small, and two or three heading levels). Keep the ratio between them consistent.
- Unitless or fixed line-height?
- Unitless. It scales with the font-size at every viewport, which is exactly what fluid type needs.
- Is responsive type scale generator free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.