1.333×

Type Scale Generator

100% Free

Generate a modular CSS typography scale — choose a ratio, base size, and unit to get CSS custom properties and a Tailwind fontSize config.

8 Ratios

CSS + Tailwind

Instant

Private

Base Size (px)

Scale

Steps Up

Steps Down

Unit

Root Size (px)

perfect-fourthratio×1.333·9 steps

5xl

H1 Heading

5.61rem

4xl

H2 Heading

4.209rem

3xl

H3 Heading

3.157rem

2xl

H4 Heading

2.369rem

Subheading

1.777rem

Lead paragraph

1.333rem

base

Body text

1rem

Body text (small)

0.75rem

Small caption

0.563rem

Embed This Tool

Easy to Embed

Add Type Scale Generator to your website or blog in seconds.

Responsive design
Lightweight & fast
No backend required
Always up-to-date

<iframe
  src="https://tools.town/embed/type-scale-generator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="Type Scale Generator">
</iframe>

Share This Tool

Share Instantly

Share Type Scale Generator with anyone — no login required.

Shareable link
No login required
Works on any device
No account needed

Share via

How to Use

1 Set your base font size (default 16px — matches browser default)
2 Choose a named scale ratio: Minor Third (1.2), Perfect Fourth (1.333), Golden Ratio (1.618), etc.
3 Or enter a custom ratio for full control over the progression
4 Set the number of steps above and below the base size
5 Choose your output unit: rem (recommended), px, or em
6 Copy the CSS custom properties block or the Tailwind fontSize config object

Features

8 classic named ratios: minor second through golden ratio — plus custom ratio support
Steps above and below base, labelled xs through 9xl for easy reference
Output as rem (recommended for accessibility), px, or em units
CSS custom properties block ready to paste into a :root {} rule
Tailwind CSS fontSize config object for theme.extend.fontSize
Live preview table showing each step's value and an example string at that size

Why it Matters

Choosing font sizes arbitrarily — 12, 14, 16, 20, 24, 32 — produces a typography system that looks inconsistent even if individual sizes seem reasonable. A modular scale applies a single ratio repeatedly, so every size is mathematically related to every other. The result is a visual rhythm that feels balanced without the designer needing to manually tune each step. The Perfect Fourth (1.333) and Golden Ratio (1.618) are the most popular choices because they mirror proportions found throughout nature and classical design.

★★★★★

Use Cases

Design System Setup

Define the full font-size token set for a new design system in one step

Tailwind Projects

Generate a Tailwind-ready fontSize config to override or extend the default type scale

Brand Typography

Match your brand's chosen type scale ratio across all font-size tokens

Responsive Typography

Use the rem output with a fluid base size to create responsive type that scales with the viewport

Why a modular scale beats arbitrary sizes

When font sizes are chosen ad hoc (12, 14, 16, 20, 24, 32, 48…) the differences between them are inconsistent — sometimes 2px, sometimes 8px, sometimes 16px. A modular scale applies the same multiplier at every step, so the visual distance between levels feels uniform even as the absolute pixel sizes grow.

The seven standard named ratios

The named ratios have musical origins — the names refer to musical intervals. A Perfect Fourth has a frequency ratio of 4:3 (1.333), meaning the A above middle C vibrates at 4/3 the frequency of the E below it. Applying this ratio to typography gives sizes that feel harmonically related, which is why designers reach for it.

Privacy

All calculations happen in your browser. No data is sent to any server.

Frequently Asked Questions

What is a modular type scale?

A modular scale generates font sizes by repeatedly multiplying a base value by a fixed ratio. If the base is 16px and the ratio is 1.333 (Perfect Fourth), the sizes are 16 × 1.333 = 21.3px, 21.3 × 1.333 = 28.4px, and so on. Going below the base reverses the operation: 16 ÷ 1.333 = 12px.

Which ratio should I choose?

For body-heavy interfaces like dashboards, a subtle ratio like Major Second (1.125) or Minor Third (1.2) gives closer size steps. For editorial or marketing pages, Perfect Fourth (1.333) or Perfect Fifth (1.5) creates more dramatic contrast between headings and body. Golden Ratio (1.618) is expressive but the steps become large quickly.

Why should I use rem instead of px?

rem units are relative to the browser's root font size, which users can adjust in browser settings for accessibility. A user who sets their browser to 20px root will see your rem-based type scale scale up proportionally. px ignores user font-size preferences. em is relative to the parent element, which can cascade in unexpected ways.

How do I use the CSS custom properties output?

Paste the :root { ... } block into your global CSS file. Then reference sizes with var(--font-size-base), var(--font-size-lg), etc. in your component styles. The variable names match the step labels (xs, sm, base, lg, xl, 2xl, etc.).

How do I use the Tailwind output?

Paste the fontSize object into your tailwind.config.js under theme.extend.fontSize. The keys (xs, sm, base, lg, etc.) become Tailwind utilities like text-base, text-lg, text-2xl. Use the tailwind-config-generator tool to build the full config.

📖

Want to understand the math?

Browse all guides →

How to Use Border Radius Gener

css

How to Use Border Radius Generator — Complete Guide

Learn how to visually design CSS border-radius values for buttons, cards, and containers using Tools.Town's free Border Radius Generator.

8 May 2026

5 min read

How to Use Box Shadow Generato

css

How to Use Box Shadow Generator — Complete Guide

Learn how to build CSS box-shadow values visually — offset, blur, spread, color, inset — using Tools.Town's free Box Shadow Generator.

8 May 2026

5 min read

Related Tools You Might Like

Border Radius Generator

Visually craft CSS border-radius with per-corner sliders, live preview, unit toggle (px/em/rem/%), and shorthand collapsing.

CSS Gradient Generator

Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.

Neumorphism Generator

Generate soft-UI (neumorphism) CSS — two opposite light and dark shadows on a surface that matches the background — with a live preview, four shapes, and copy-paste code, all in your browser.

Tailwind Config Generator

Build a tailwind.config.js or .ts with custom colors, fonts, breakpoints, and dark-mode strategy — copy-ready in seconds.

Box Shadow Generator

Visually craft CSS box-shadow — offset, blur, spread, color, opacity, inset toggle, plus Material-style elevation presets.

Browse more free tools — no sign-up required

More Design Tools All categories

AI Text Summarizer

AI Image Packs