Typography scale generator
Generate a modular type scale with CSS custom properties, SCSS, Tailwind config, or fluid clamp values.
:root {
--font-size-xs: 0.64rem; /* 10px */
--font-size-sm: 0.8rem; /* 13px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.563rem; /* 25px */
--font-size-2xl: 1.953rem; /* 31px */
--font-size-3xl: 2.441rem; /* 39px */
--font-size-4xl: 3.052rem; /* 49px */
--font-size-5xl: 3.815rem; /* 61px */
--font-size-6xl: 4.768rem; /* 76px */
--font-size-7xl: 5.96rem; /* 95px */
--line-height-xs: 1.5;
--line-height-sm: 1.5;
--line-height-base: 1.5;
--line-height-lg: 1.45;
--line-height-xl: 1.4;
--line-height-2xl: 1.35;
--line-height-3xl: 1.3;
--line-height-4xl: 1.25;
--line-height-5xl: 1.2;
--line-height-6xl: 1.15;
--line-height-7xl: 1.1;
}A modular scale is one number raised to a series of powers: pick 16 px as your base and a ratio of 1.25, and every step up multiplies by 1.25 while every step down divides by it. This page computes eleven of those steps — two below the base and eight above — names them the way utility frameworks do, from xs through base to 7xl, and shows the whole run as live type you can read rather than a column of numbers. A line height is attached to each step and tightened as the sizes grow, because the value that reads well on body copy is far too loose on a display heading. The output switches between CSS custom properties, an SCSS map, a Tailwind fontSize block and fluid clamp values.
Key facts about Typography scale generator
| Steps generated | 11 — step -2 to step 8, named xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl and 7xl |
|---|---|
| Ratios offered | 8 — minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.5 and the golden ratio 1.618 |
| Base size | 8 to 32 px, default 16 — the step named base, from which every other step is a power of the ratio |
| rem conversion | Every value is divided by 16 to produce rem, regardless of your base size, because rem is relative to the root font size and not to your scale |
| Line height rule | Steps at or below the base use your chosen value; each step above it loses 0.05, with a floor of 1.1 — so a 1.5 body line height becomes 1.1 by the 7xl heading |
| Line height range | 1 to 2, adjustable in 0.05 increments, default 1.5 |
| Output formats | 4 — CSS custom properties, an SCSS map with a generated .text-* class per entry, a Tailwind theme.extend.fontSize block with per-size line heights, and fluid clamp() values |
| Fluid mode | Takes a separate mobile and desktop base, applies the same ratio to each, and emits clamp(min, min + Nvw, max) per step |
| Where fluid mode lands | The vw term is calculated so each step reaches its desktop size at a 1600 px viewport and is clamped above that; at 375 px a step sits about a quarter of the way from mobile to desktop |
| Preview fonts | 5 stacks — system, serif, mono, Inter and Georgia — with editable sample text, so the scale is judged on real words |
| Precision | Sizes are rounded to three decimal places in rem and shown to the nearest pixel in the comments |
| Output is copy-only | There is no file download; the result is a single block you paste into a stylesheet or config |
What happens to your file
This is arithmetic, and it happens in your tab. Each step is the base size multiplied by the ratio raised to the step number, computed with Math.pow in JavaScript that loaded with the page; the preview is live text rendered by your own browser with your own fonts. Nothing is submitted, no scale is saved to an account, and nothing is written to local storage — change the ratio, reload, and you are back to major third at 16 px. The sample text you type stays in the page. The only thing that leaves is the code you deliberately copy to your clipboard.
About this tool
- 1
Set the base size
This is your body text, and everything else is derived from it. 16 px is the browser default and the safest starting point; going below it for body copy is the most common typographic mistake on the web.
- 2
Choose a ratio
Smaller ratios give you many usable sizes close together; larger ones give dramatic headings and a gap in the middle. Minor third at 1.2 and major third at 1.25 suit dense interfaces; perfect fourth and above suit editorial pages with big headlines.
- 3
Read the preview, not the numbers
Type your own words into the sample field and switch the preview font to something close to what you will ship. A ratio that looks balanced in a system sans can feel cramped in a serif with a different x-height.
- 4
Set the body line height
1.5 is a good default for paragraphs. The larger steps tighten automatically, which is what you want — display type at 1.5 leaves rivers of space between lines.
- 5
Switch on fluid if you need it
Give a mobile and a desktop base and the output becomes clamp() values that interpolate with viewport width, so you do not need a media query per step.
- 6
Copy the format your project uses
CSS custom properties drop into a :root block, the SCSS map generates utility classes, and the Tailwind block goes into theme.extend so the built-in size scale is replaced by yours.
| Formula | size(step) = base x ratio ^ step, for step -2 through 8 |
|---|---|
| CSS variables output | --font-size-xs through --font-size-7xl in rem with a pixel comment, plus a matching --line-height block per step |
| SCSS output | $base-size and $ratio, a $font-sizes map, and an @each loop that emits .text-xs through .text-7xl classes |
| Tailwind output | module.exports with theme.extend.fontSize entries as [size, { lineHeight }] tuples — the classic config file shape |
| Clamp output | clamp() with rem bounds and a vw middle term, supported in every current browser |
| Root size assumption | 16 px. If your project sets html { font-size } to anything else, the rem values shift with it |
| Accessibility | rem output respects the reader's browser font-size setting; a px-based scale would not |
| Network | None after page load |
- Take fewer steps than you generate. Eleven sizes is a menu, not a specification — most interfaces use five or six, and every extra one is another decision someone has to make correctly later.
- Check the gap between base and the step above it. With a small ratio the two can be close enough that nobody can tell them apart, which makes the distinction useless in a hierarchy.
- Keep the output in rem rather than converting to px. A reader who has raised their default font size in browser settings gets a scale that grows with them; a px scale ignores them entirely.
- The rem values are always divided by 16, not by your base size. If your project sets a different root font size, adjust the root or the numbers will not mean what you expect.
- Round when you implement. 1.953rem is the mathematically correct step but 1.95rem or 2rem is easier to live with, and nobody can see the difference.
- Large ratios need more restraint at the small end, where the scale compresses. Going from 1.618 to 1.25 is often the fix for a design where the caption and the body text look identical.
- Fluid values reach the desktop size at a 1600 px viewport here, so a wide but not huge screen sits slightly below the desktop base. If your layout has a narrower maximum width, set the desktop base a little higher to compensate.
- Set the line height before you judge the ratio. Loose leading makes a tight scale feel spacious and a wide one feel disconnected, so tuning the two separately is guesswork.
- Eight classical scale ratios
- 11 named steps from xs to 7xl
- Per-step line height that tightens as sizes grow
- CSS custom properties, SCSS map, Tailwind config and clamp output
- Fluid mode with separate mobile and desktop bases
- Live preview in five font stacks
- Editable sample text
- Set up the type scale for a new design system before any component is built.
- Replace an ad-hoc set of font sizes that grew page by page with one consistent progression.
- Generate the theme.extend.fontSize block for a Tailwind project so the built-in scale matches the design.
- Produce fluid clamp values so headings shrink on phones without a media query per size.
- Compare how the same content reads at 1.2 and at 1.333 before committing to a ratio.
- Hand a developer the exact CSS variables that match a design file's text styles.
Related tools
View allWorks well with this5
More in CSS & Design12
Updated