Responsive Font Scale Calculator

Fluid type sizes across viewport range.

Base font size (px)

Scale ratio

Number of steps

Min viewport (px)

Max viewport (px)

Tab to move between fields

H1 size (px)

61.04

H2 size (px)48.83

H3 size (px)39.06

H4 size (px)31.25

Body size (px)16

Scale contrast (H1/body)3.82

Fluid slope (vw coeff.)0.18

Fluid intercept (rem)0.88

How to Use This Calculator

How the result changes with Scale ratio

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).

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.

Identify Input Parameters
4 parameters
Base font size (px) = 16, Scale ratio = 1.25, Number of steps = 6, Min viewport (px) = 320 = 5 input(s) provided
Calculate H1 size
61.04 = 61.04
Calculate H2 size
48.83 = 48.83
Calculate H3 size
39.06 = 39.06