Free browser tools that respect your files — everything runs locally, nothing is uploaded.

Type Scale Calculator

Build a modular type scale from a base size and ratio, preview it in real fonts, and copy static or fluid clamp() CSS — free, no account, everything computed in this browser.

Base font size (px)

8–48px · rem values assume a 16px root

Scale ratio

Steps above base

Steps below base

Preview font

Preview text

Shown at every step. Empty previews fall back to the built-in sample.

Step	px	rem	Line height
3xl	39.06	2.44	1.2
xxl	31.25	1.95	1.2
xl	25	1.56	1.2
lg	20	1.25	1.45
base	16	1	1.5
sm	12.8	0.8	1.54
xs	10.24	0.64	1.57

3xlThe quick brown fox jumps over the lazy dog, so every letter gets a turn at this size. Pack my box with five dozen liquor jugs — a second sentence gives the line rhythm something real to wrap.
xxlThe quick brown fox jumps over the lazy dog, so every letter gets a turn at this size. Pack my box with five dozen liquor jugs — a second sentence gives the line rhythm something real to wrap.
xlThe quick brown fox jumps over the lazy dog, so every letter gets a turn at this size. Pack my box with five dozen liquor jugs — a second sentence gives the line rhythm something real to wrap.
lgThe quick brown fox jumps over the lazy dog, so every letter gets a turn at this size. Pack my box with five dozen liquor jugs — a second sentence gives the line rhythm something real to wrap.
baseThe quick brown fox jumps over the lazy dog, so every letter gets a turn at this size. Pack my box with five dozen liquor jugs — a second sentence gives the line rhythm something real to wrap.
smThe quick brown fox jumps over the lazy dog, so every letter gets a turn at this size. Pack my box with five dozen liquor jugs — a second sentence gives the line rhythm something real to wrap.
xsThe quick brown fox jumps over the lazy dog, so every letter gets a turn at this size. Pack my box with five dozen liquor jugs — a second sentence gives the line rhythm something real to wrap.

Export CSS

Fixed rem values from your exact scale; pair each size with its --lh custom property.

/* Type scale — base 16px · ratio 1.25 (Major Third) · +4/−2 steps */
:root {
  --text-xs: 0.64rem;
  --text-xs-lh: 1.57;
  --text-sm: 0.8rem;
  --text-sm-lh: 1.54;
  --text-base: 1rem;
  --text-base-lh: 1.5;
  --text-lg: 1.25rem;
  --text-lg-lh: 1.45;
  --text-xl: 1.56rem;
  --text-xl-lh: 1.2;
  --text-xxl: 1.95rem;
  --text-xxl-lh: 1.2;
  --text-3xl: 2.44rem;
  --text-3xl-lh: 1.2;
}

7 steps · rem custom properties

Private by design: the scale is computed and saved only in this browser (localStorage). Nothing you type leaves your device — the only network request is the Google Fonts stylesheet for the preview, and the tool falls back to system fonts without it.

Quick Answer

A type scale is a set of font sizes picked by repeatedly multiplying a base size by a fixed ratio (like 1.25, the Major Third), so every size on your site relates mathematically. This free calculator builds that scale from your base size, step count, and ratio, previews each step in 28 popular Google Fonts with suggested line heights, and exports ready-to-paste CSS custom properties — static rem values or fluid clamp() rules that resize between 320px and 1280px viewports. Everything renders in your browser, nothing is uploaded, and no account is required.

How It Works

Set your base font size (8–48px) and how many steps you want above and below it (0–6 each)

Pick a named ratio preset such as Major Third (1.25) or Perfect Fourth (1.333), or enter a custom ratio between 1.05 and 2.5

Choose a preview font from 28 Google Fonts to see every step rendered at its exact size, or open the pairings tab to test heading + body combinations

Review the table: step name, exact px and rem values, and a suggested line height per step

Copy the scale as CSS custom properties — static rem values or fluid clamp() rules for a 320–1280px viewport span

Key Facts

Base size from 8–48px (slider and number box stay in sync) with steps 0–6 above and below
Seven named ratio presets — Minor Second through Golden Ratio — plus any custom ratio from 1.05 to 2.5
Every step shows exact px and rem values (computed, rounded to 2 decimals only for display)
Preview the whole scale live in 28 curated Google Fonts, loaded on demand with display=swap
Ten curated heading + body pairings with a combined specimen (H1, H2, body, blockquote)
Suggested line height per step: 1.2 at 24px and above, easing from 1.4 to 1.6 below
Copy the scale as CSS custom properties — static rem values or fluid clamp() across a 320–1280px viewport span
Free with no account; the only network request is the Google Fonts stylesheet itself

Frequently Asked Questions

How does the type scale math work?

Each step is the base size multiplied by the ratio raised to the step number. With a 16px base and a 1.25 ratio (Major Third), step +3 is 16 × 1.25³ = 31.25px (1.95rem) and step −1 is 16 ÷ 1.25 = 12.8px (0.8rem). The calculator keeps full precision internally and rounds to 2 decimals only for display, so the exported values stay exact.

What is the difference between the static and fluid CSS export?

The static export emits fixed custom properties like `--text-lg: 1.25rem`, which never change with viewport width. The fluid export wraps each step in clamp() so it grows from its mobile value to its desktop value as the viewport widens from 320px (20rem) to 1280px (80rem). At the mobile end the ratio is compressed toward 1 so the hierarchy stays visible without oversized headlines on small screens.

How are the suggested line heights chosen?

Steps of 24px and above get 1.2, which suits headings. Smaller sizes get more leading: the value eases linearly from 1.4 near 24px to 1.6 at 8px, matching common body-text practice. Each suggestion is emitted next to its size as a matching custom property such as `--text-sm-lh: 1.45`.

Is this type scale calculator free and private?

Yes — the tool is free with no account, limits, or uploads, and all math runs in your browser. Your settings are saved locally in this browser (localStorage). The only network request is the Google Fonts stylesheet for the family you preview; if you are offline, the preview simply falls back to system fonts.

Which fonts can I preview, and how do the pairings work?

There are 28 curated Google Fonts families across sans, serif, slab, mono, and display styles — Inter, Roboto, Playfair Display, Merriweather, Zilla Slab, JetBrains Mono, Bebas Neue, and more. The pairings tab lists 10 heading + body combinations with a one-line rationale; clicking a pair loads both fonts and shows a combined H1/H2/body/blockquote specimen, and applies the pair to your scale table.

How does this compare to paid tools like Typeflow or Figma typography plugins?

Paid design tools bundle type scales inside a larger editor or charge per seat (Figma sits behind a monthly plan; many typography generators are gated behind accounts). This calculator does the one job in any browser for free: exact modular-scale math, live multi-font preview, pairing specimens, and copy-ready static or fluid CSS with no sign-up. It does not integrate into a design canvas — paste the exported custom properties into your own CSS.