Modular Type Scale Builder

base 16px · ratio 1.25 · 7 steps

Scale Parameters

Base size (px)

Root font size (px)

Ratio

Fluid Clamp Settings

Enabled

Min viewport (px)

Max viewport (px)

Mobile anchor scale (0.875× base)

Mobile sizes are this fraction of the desktop size. 1 = no fluid scaling (static rem output).

Saved Scales

No saved scales yet — your current scale auto-saves to this browser, and named scales appear here.

Live Preview

Fluid typography, mathematically tuned

A scale with a ratio of growth

Every size on this page is derived from a single base and a single ratio. Change the ratio and the entire hierarchy re-computes — headings, body text, and captions stay in perfect mathematical harmony, and every step ships with a fluid clamp() you can copy straight into production CSS.

Caption text at the smallest step of the scale.

Scale Steps

px	rem	clamp()
10.24	0.64	`clamp(0.56rem, calc(0.5269rem + 0.1414vw), 0.64rem)`
12.8	0.8	`clamp(0.7rem, calc(0.6586rem + 0.1768vw), 0.8rem)`
16	1	`clamp(0.875rem, calc(0.8232rem + 0.221vw), 1rem)`
20	1.25	`clamp(1.0938rem, calc(1.029rem + 0.2762vw), 1.25rem)`
25	1.5625	`clamp(1.3672rem, calc(1.2863rem + 0.3453vw), 1.5625rem)`
31.25	1.9531	`clamp(1.709rem, calc(1.6078rem + 0.4316vw), 1.9531rem)`
39.0625	2.4414	`clamp(2.1362rem, calc(2.0098rem + 0.5395vw), 2.4414rem)`

Steps are named exponents — px values are always computed as base × ratio^exp and re-derive instantly when the ratio changes. Order follows the exponent.

Export

Include line-heights

:root {
  --text-xs: clamp(0.56rem, calc(0.5269rem + 0.1414vw), 0.64rem);
  --leading-xs: 1.7;
  --text-sm: clamp(0.7rem, calc(0.6586rem + 0.1768vw), 0.8rem);
  --leading-sm: 1.7;
  --text-base: clamp(0.875rem, calc(0.8232rem + 0.221vw), 1rem);
  --leading-base: 1.6;
  --text-lg: clamp(1.0938rem, calc(1.029rem + 0.2762vw), 1.25rem);
  --leading-lg: 1.5;
  --text-xl: clamp(1.3672rem, calc(1.2863rem + 0.3453vw), 1.5625rem);
  --leading-xl: 1.42;
  --text-2xl: clamp(1.709rem, calc(1.6078rem + 0.4316vw), 1.9531rem);
  --leading-2xl: 1.36;
  --text-3xl: clamp(2.1362rem, calc(2.0098rem + 0.5395vw), 2.4414rem);
  --leading-3xl: 1.3;
}