Typography Scale Playground
Preview a modular typography scale with adjustable base size, ratio, font, and line height. Export CSS sizes for body text and six heading levels.
Typography CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }Export text stays in English; your input is kept as entered.
No signup. No AI credits. This tool assembles your output in your browser.
From an idea to something useful.
- 01
Choose a font, base size, and modular ratio.
- 02
Inspect heading sizes and paragraph spacing.
- 03
Download CSS variables for the current scale.
A little context.
A modular scale multiplies a base font size by a repeated ratio. This playground computes a six-level heading hierarchy plus body and small text. Sizes are explicit pixel values for a starting point; review responsive behavior and zoom before using them in production.
Good questions.
Does the CSS load the selected font?
No. It names the font and supplies fallback families. Load or self-host the chosen font in your application.
Are these sizes responsive?
The export contains fixed sizes. Adapt them to your breakpoints or fluid type system after testing the actual content.