A typography scale generator turns a single base font size and a ratio into a full set of harmonically related sizes for h1 through small text. Instead of picking pixel values by feel, you choose a base (commonly 16px, the browser default) and a modular scale ratio such as 1.25 (major third) or 1.333 (perfect fourth), and each step is the previous size multiplied by that ratio. The result is a consistent vertical rhythm where headings relate to body copy by the same proportion at every level.
This tool computes those steps and exports them in three forms you actually ship: CSS custom properties (--step-0, --step-1, and so on), fluid clamp() values that interpolate between a min and max viewport, and a Tailwind fontSize config object. The clamp() output is the useful part for responsive work: a value like clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) grows the heading smoothly with the viewport without a single media query, clamped so it never gets absurdly small on phones or oversized on wide monitors.
Under the hood a modular scale is just geometric progression: size(n) = base × ratio^n. Negative steps (ratio^-1, ratio^-2) give you captions and fine print below the base. Because the math is deterministic, every developer on a team lands on the same numbers, which is what makes a type scale calculator worth using over eyeballing values.
Generating your scale
- 1
Set the base size (typically 1rem / 16px) and pick a ratio from the presets — 1.2 minor third, 1.25 major third, 1.333 perfect fourth, 1.5 perfect fifth, 1.618 golden — or type a custom value.
- 2
Choose how many steps up and down you need; upward steps produce headings, negative steps produce small print and captions.
- 3
Toggle the output mode between static CSS variables, fluid clamp() values, and Tailwind config, adjusting the min/max viewport bounds when using clamp() so the fluid range fits your breakpoints.
- 4
Preview the rendered scale to check that adjacent sizes are distinguishable and the smallest step is still legible.
- 5
Copy the generated snippet and drop it into your stylesheet, design tokens file, or tailwind.config.js.
Where this fits in a workflow
Bootstrapping a design system
Establish the canonical set of font-size tokens for a new product before any components are built, so headings, body, and captions all derive from one ratio.
Fluid responsive typography
Replace stacks of font-size media queries with clamp() values that scale continuously between mobile and desktop, eliminating the awkward jumps at breakpoints.
Auditing an inconsistent codebase
Legacy CSS often accumulates dozens of one-off pixel sizes. Generating a clean scale gives you a target set of values to consolidate toward.
Tailwind projects
Drop the exported fontSize object into your config to override Tailwind's default scale with a ratio that matches your brand instead of the framework default.
Practical guidance
- Keep the base in rem, not px, so a user's browser font-size preference still scales the whole system — hardcoding px breaks that accessibility affordance.
- Larger ratios (1.5, 1.618) create dramatic contrast that suits marketing pages but wastes vertical space in dense app UIs; 1.2–1.25 is safer for dashboards and long-form reading.
- For clamp(), the preferred (middle) value should mix a rem term with a vw term (e.g. 1rem + 2vw) rather than pure vw, otherwise zooming the page won't resize text and you fail WCAG 1.4.4 resize-text.
- Don't apply the fluid scale to body copy as aggressively as to headings — readers expect stable paragraph text; reserve large min/max spreads for display sizes.
- Round generated values sensibly for CSS variables but leave clamp() precise; sub-pixel rem values are fine and the browser handles the interpolation.
Common questions
What is a modular scale in typography?+
A modular scale is a sequence of font sizes generated by repeatedly multiplying a base size by a fixed ratio. Each step relates to its neighbors by the same proportion, producing consistent, harmonious size relationships across headings and body text.
Which type scale ratio should I use?+
For readable app and content UIs, 1.2 (minor third) or 1.25 (major third) give balanced contrast. Larger ratios like 1.5 (perfect fifth) or 1.618 (golden ratio) create bold hierarchy suited to landing pages and editorial layouts.
How does CSS clamp() create fluid type?+
clamp(min, preferred, max) picks the preferred value but never lets it fall below min or exceed max. Using a viewport unit in the preferred term, like clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem), makes the font size scale smoothly with screen width without media queries.
Should font sizes be in px or rem?+
Use rem. rem is relative to the root font size, so text respects the user's browser font-size setting and zoom preferences. Pixel sizes ignore that preference and can hurt accessibility.
Why prefer a type scale over hand-picking sizes?+
A calculated scale guarantees every size shares the same mathematical relationship, so the hierarchy looks intentional and stays consistent as the project grows. It also gives a whole team one deterministic source of truth instead of scattered ad-hoc values.
Does fluid typography with clamp() work in all browsers?+
Yes. clamp() and viewport units are supported in all current major browsers (Chrome, Firefox, Safari, and Edge). Just ensure the preferred value includes a rem or em term so text still responds to browser zoom, satisfying WCAG resize-text requirements.