Zero Signup ToolsFree browser tools

Generator Tools

Type Scale Generator

Generate a modular typographic scale from a base size and ratio. Live preview, CSS variables, Tailwind config, and JSON tokens for h1 to caption.

Configure scale

Base size, ratio, and number of steps

Base font size (px)

Browser default is 16. Accepted range: 8 to 32 px.

Scale ratio

Accepted range: 1.01 to 3. Each step multiplies the previous size by this number.

Matches preset: Major Third (Marketing pages).

Quick ratios

Steps above base

Each step grows by the scale ratio.

Steps below base

Captions, footnotes, and meta text.

Sample text for the preview

Edit to test the ladder with brand copy, product names, or actual headings.

Live preview

9 steps rendered at the actual ratio. Largest at the top.

16 px x 1.25

h161 px / 3.8147 rem

The quick brown fox jumps over the lazy dog

h248.8 px / 3.0518 rem

The quick brown fox jumps over the lazy dog

h339.1 px / 2.4414 rem

The quick brown fox jumps over the lazy dog

h431.3 px / 1.9531 rem

The quick brown fox jumps over the lazy dog

h525 px / 1.5625 rem

The quick brown fox jumps over the lazy dog

h620 px / 1.25 rem

The quick brown fox jumps over the lazy dog

base16 px / 1 rem

The quick brown fox jumps over the lazy dog

sm12.8 px / 0.8 rem

The quick brown fox jumps over the lazy dog

xs10.2 px / 0.64 rem

The quick brown fox jumps over the lazy dog

Export

Copy the scale into your codebase or design tokens.

:root custom properties

:root {
  --fs-h1: 3.8147rem;
  --fs-h2: 3.0518rem;
  --fs-h3: 2.4414rem;
  --fs-h4: 1.9531rem;
  --fs-h5: 1.5625rem;
  --fs-h6: 1.25rem;
  --fs-base: 1rem;
  --fs-sm: 0.8rem;
  --fs-xs: 0.64rem;
}

Scale table

Every step with px, rem, recommended line height, and a quick copy.

Name	CSS variable	Pixels	Rem	Line height	Copy
h1	--fs-h1	61 px	3.8147 rem	1.1
h2	--fs-h2	48.8 px	3.0518 rem	1.1
h3	--fs-h3	39.1 px	2.4414 rem	1.15
h4	--fs-h4	31.3 px	1.9531 rem	1.25
h5	--fs-h5	25 px	1.5625 rem	1.25
h6	--fs-h6	20 px	1.25 rem	1.4
base	--fs-base	16 px	1 rem	1.5
sm	--fs-sm	12.8 px	0.8 rem	1.55
xs	--fs-xs	10.2 px	0.64 rem	1.55

Picking a ratio

Tighter ratios (1.067 to 1.2) work well for dense product UIs where many sizes need to coexist on the same screen without one element dominating. Pick 1.125 or 1.2 for dashboards, tables, and form-heavy apps.

Mid-range ratios (1.25 to 1.414) are the everyday default for marketing sites, blogs, and product pages where the heading hierarchy should be obvious but not theatrical. Perfect Fourth (1.333) is a popular brand default.

Wide ratios (1.5 to 1.618) give bold, editorial contrast. Reserve them for hero pages, landing pages, and case studies where one headline carries the page.

The Octave (2.0) doubles size at each step and is rarely used past two steps; treat it as a hero-only ladder. Designers often pair a wide ratio above the base with a tighter one below to keep small text readable.

How to use

Set the Base font size in pixels (default 16) using the input or one of the preset chips (14, 16, 18, 20).
Pick a scale ratio from the named presets (Perfect Fourth, Golden Ratio, and so on) or type any value between 1.01 and 3 to match a design spec.
Choose how many steps you want above and below the base. The preview labels the steps with editorial names (h6 to display) above the base and (sm, xs, 2xs) below.
Edit the sample text to render the ladder with your own copy. The preview uses the exact px size, line-height, and weight the export will produce.
Switch the Export panel between CSS variables, Tailwind config, JSON tokens, and a plain px/rem table, then click Copy output to take it into your codebase.

About this tool

Type Scale Generator builds a modular typographic ladder from a base font size and a scale ratio, the same approach Robert Bringhurst describes in The Elements of Typographic Style and that designers know as a modular scale. Pick a base size between 8 and 32 px (16 px is the browser default), then pick a ratio: Minor Second (1.067), Major Second (1.125), Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414, the sqrt-2 paper ratio), Perfect Fifth (1.5), Golden Ratio (1.618), Major Sixth (1.667), or Octave (2.0). Custom ratios between 1.01 and 3 are also accepted. Set how many steps you want above the base (named h6, h5, h4, h3, h2, h1, display, display-xl) and below the base (sm, xs, 2xs, and so on), up to eight steps in each direction. Each step is base * ratio raised to the step index, expressed in both px and rem against your chosen base. The tool also reports a sensible line-height for every step: tighter for display sizes, comfortable for body text, slightly open for the smallest captions. The live preview ladder renders every step with your own sample copy at the exact size and line-height the export will produce, so the visual hierarchy you see is the one you ship. Four copy-ready exports cover the common downstream cases: a CSS custom-properties block (:root variables keyed by --fs-h1, --fs-base, --fs-sm) for vanilla CSS or any framework that consumes design tokens; a Tailwind v3+ theme.extend.fontSize config that pairs each utility name with a [size, lineHeight] tuple; a JSON tokens object for Style Dictionary, Figma Tokens, or a design-token pipeline; and a plain px-and-rem table for documentation or a spec sheet. Useful for kicking off a design system, auditing whether your existing scale follows a real ratio, exporting tokens for engineers, or just picking a coherent ladder of headings for a new site or marketing page. Everything runs locally in your browser. The numbers and sample text you type here never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

CSS Clamp Generator

Build clamp() for fluid type and spacing with a live viewport preview.

Open tool

Pixels to REM Converter

Bidirectional pixel and rem or em converter with batch mode and a reference chart.

Open tool

CSS Line Clamp Generator

Live multi-line ellipsis builder with CSS, Tailwind, JSX, and HTML output.

Open tool

CSS Gradient Generator

Linear, radial, and conic gradients with multi-stop editor and live preview.

Open tool

CSS Box Shadow Generator

Layered box-shadow with live preview, opacity, inset, and Tailwind output.

Open tool

Case Converter

Convert text between six common cases at once.

Open tool

All tools Generator Tools