IconVault logoIconVault
Sign in

Typography Scale - Free Online Type System Tool | IconVault

Build a modular typography scale from a base size and ratio, preview every step live, and export ready-to-use CSS. Free and in-browser.

All tools

Typography Scale

Modular type scales with live preview and CSS export

5 of 5 free uses left
Scale ratio

Each step multiplies the previous size by the ratio. Larger ratios give more dramatic headings; smaller ratios feel calmer and more editorial.

5 of 5 free copies left.

Live preview

Step +5

67.34px / 4.209rem

The quick brown fox

Step +4

50.52px / 3.157rem

The quick brown fox

Step +3

37.9px / 2.369rem

The quick brown fox

Step +2

28.43px / 1.777rem

The quick brown fox

Step +1

21.33px / 1.333rem

The quick brown fox

Base (body)

16px / 1.000rem

The quick brown fox

Step -1

12px / 0.750rem

The quick brown fox

Step -2

9.00px / 0.563rem

The quick brown fox

Step -3

6.76px / 0.422rem

The quick brown fox

/* Typography scale: base 16px, ratio 1.333 (Perfect fourth) */
:root {
  --text-scale-n3: 6.76px;
  --text-scale-n2: 9.00px;
  --text-scale-n1: 12px;
  --text-scale-0: 16px;
  --text-scale-1: 21.33px;
  --text-scale-2: 28.43px;
  --text-scale-3: 37.9px;
  --text-scale-4: 50.52px;
  --text-scale-5: 67.34px;
}

About this tool

IconVault's Typography Scale builds a modular scale for your project in seconds. Set a base font size, choose a ratio like the golden ratio, perfect fourth or major third (or dial in your own), and adjust how many steps go up and down. Every size renders live in a real preview so you can judge the hierarchy with your own eyes.

When the scale feels right, export it as clean CSS with one click and drop it into your project. The tool is free and runs fully in your browser, no signup and nothing to install.

Frequently asked questions

Popular searches

typography scalemodular scale calculatortype scale generatorfont scale calculatortypography scale toolmodular typography scaletype scale cssfont size scale generatorperfect fourth typographygolden ratio typographymajor third type scaleminor third font scaletypography ratio calculatorfont size calculator designresponsive type scalefluid type scalecss type scaletypography scale generator cssfont scale tool freeonline type scale calculatorheading size calculatorh1 h2 h3 size ratiofont size hierarchy generatortypographic scale toolweb typography scaletype system generatordesign system typographyfont size steps calculatorbase font size scalemodular scale designtypography for websitestype scale ratio listchoose typography ratiotypography scale examplesfont scale for ui designtype scale figmacss clamp type scaletypographic hierarchy toolfont sizing systemweb font scaletype scale 1.25major second typographyaugmented fourth type scaleperfect fifth typographytype scale export cssfree typography tool onlinefont size proportion calculatorharmonious font sizestype scale design systemfont size ratio tooltypographic scale calculator onlinetype scale preset ratiosweb design font scaletypography scale for headings

More tools

Font Pairing

Curated heading and body font pairs with live preview

Font Preview

Preview 200+ Google Fonts with your own text

Glassmorphism Generator

Design frosted glass cards and copy the CSS

Gradient Text

Gradient headlines with live preview and CSS

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →