Responsive Font Scale Calculator
Fluid type sizes across viewport range.
About this calculator
This calculator builds a modular type scale — a set of font sizes computed as size(n) = base × ratio^n — from a base size and any of the classic scale ratios (1.125 Major Second, 1.25 Major Third, 1.333 Perfect Fourth, 1.618 Golden Ratio, and others). Given a base and a step count, it generates the full sequence of sizes and reports the top four as H1 through H4, working down from the highest step. Scale contrast is just the ratio of the largest size to the base — a quick way to see how dramatic your type hierarchy is before you commit to it. The fluid-typography section is a separate, simpler model layered on top: rather than fluidly scaling the whole generated scale, it computes a single clamp()-style slope for the base font size only, assuming it should shrink about 12.5% at the minimum viewport and reach full size at the maximum viewport.
The reported slope (in vw units) and intercept (in rem, assuming a 16px root) are the two numbers you'd drop into a CSS calc() or clamp() expression for fluid body text. Note that the fluid slope/intercept only covers the base font — if you want every heading level to scale fluidly too, you'll need to repeat that calculation for each size in the generated scale, using the same min/max viewport assumptions. This is a planning tool for hierarchy and fluid-scaling math, not a live CSS generator.
Inputs
Results
H1 size (px)
61.04
How to Use This Calculator
- Enter Base font size (px), Scale ratio, and Number of steps.
- Set Min viewport (px) and Max viewport (px).
- Review the H1 size (px) result.
- Use H2 size (px) and H3 size (px) to inform your decision.
How the result changes with Scale ratio
| Scale ratio | H1 size (px) |
|---|---|
| 1.01 | 16.98 |
| 1.88 | 706.43 |
| 3 | 11,664 |
What each input means
- Base font size (px)
- Body text size in pixels. All other sizes derive from this.
- Scale ratio
- Modular scale ratio. Popular: 1.125 (Major Second), 1.25 (Major Third), 1.333 (Perfect Fourth), 1.618 (Golden Ratio).
- Number of steps
- How many heading levels above the base size to generate.
- Min viewport (px)
- Smallest viewport width for fluid scaling (mobile).
- Max viewport (px)
- Largest viewport width for fluid scaling (desktop).
What each result means
- H1 size (px)
- Largest heading size at the top of the scale.
- H2 size (px)
- Second-level heading size.
- H3 size (px)
- Third-level heading size.
- H4 size (px)
- Fourth-level heading size.
- Body size (px)
- Base body text size (your input).
- Scale contrast (H1/body)
- Ratio of largest heading to body — higher means more dramatic hierarchy.
- Fluid slope (vw coeff.)
- Viewport-width coefficient for CSS clamp() fluid typography.
- Fluid intercept (rem)
- Fixed rem portion of the fluid font-size formula.
How this is calculated
Worked example, using the default values
- Identify Input Parameters4 parametersBase font size (px) = 16, Scale ratio = 1.25, Number of steps = 6, Min viewport (px) = 320 = 5 input(s) provided
- Calculate H1 size61.04 = 61.04
- Calculate H2 size48.83 = 48.83
- Calculate H3 size39.06 = 39.06
Engine last updated . Checked against 3 independently-derived tests — how we verify calculators. Built by Paul Gunder, a software engineer, not a licensed financial, medical, or legal professional.
Frequently Asked Questions
Why are H1 through H4 taken from the top of the generated scale instead of fixed multipliers?
The calculator generates the full sequence size(n) = base × ratio^n for every step you request, then assigns H1 to the topmost step, H2 to the next one down, and so on — so your heading sizes are whatever step count and ratio you configured, not a hardcoded set of multipliers. That means increasing the number of steps pushes H1 higher (since it always tracks the top of a now-taller scale) even if your base size and ratio haven't changed.
Why does a higher scale ratio produce more dramatic scale contrast?
Scale contrast is simply H1 divided by the base size, and since each step multiplies by the ratio again, the gap between the base and the top step compounds exponentially with both the ratio and the number of steps — a ratio of 1.618 (Golden Ratio) over 6 steps produces a far larger H1/body ratio than 1.125 (Major Second) over the same 6 steps. Choose a smaller ratio for a subtle, editorial hierarchy or a larger one for a bold, high-contrast design.
Does the fluid slope apply to my H1–H4 headings too, or just body text?
Just the base font size — the fluid-typography section computes one clamp()-style slope and intercept assuming the base size shrinks about 12.5% at your minimum viewport and reaches full size at your maximum viewport, but it doesn't repeat that calculation for each heading level in the generated scale. If you want every heading to scale fluidly as well, you'd need to run the same min/max viewport assumptions against each heading's own size.
Why would I choose a scale ratio like 1.333 over 1.25 or 1.618?
Each classic ratio corresponds to a musical-interval-inspired step: 1.25 (Major Third) gives a moderate, versatile hierarchy common in UI design, 1.333 (Perfect Fourth) gives noticeably more separation between heading levels for content-heavy sites, and 1.618 (Golden Ratio) produces dramatic size jumps suited to editorial or marketing pages with only a few heading levels. There's no universally correct choice — it's a design decision about how much visual weight difference you want between adjacent heading levels.
Does this calculator give me a below-body small-text size or an explicit line-height number?
No — this scale only generates sizes at and above the base (H1 through H4 plus the body itself), so it has no equivalent to a below-body caption or footnote step, and it reports no line-height figure at all. If you want a proportioned small-text size, the same modular-scale relationship this calculator already uses upward also works downward: dividing the base by the scale ratio once produces a below-body size that stays consistent with the rest of the scale. For line height, a widely used starting point is 1.4 to 1.6 times the base font size — neither of these is generated here, so you'd need to compute them yourself.
Related Calculators
The questions that sit next to this one — chosen by subject, including calculators filed under a different category.
More in Creative, Media & Design.