Type Scale Builder

Build harmonious typographic scales using mathematical ratios.

Scale Preview
48.83px
3.052rem
The quick brown fox
39.06px
2.441rem
The quick brown fox
31.25px
1.953rem
The quick brown fox
25px
1.563rem
The quick brown fox
20px
1.25rem
The quick brown fox
16px
1rem
The quick brown fox
12.80px
0.8rem
The quick brown fox
10.24px
0.64rem
The quick brown fox
:root {
  --text-xs: 0.64rem; /* 10.24px */
  --text-sm: 0.8rem; /* 12.80px */
  --text-base: 1rem; /* 16px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.563rem; /* 25px */
  --text-3xl: 1.953rem; /* 31.25px */
  --text-4xl: 2.441rem; /* 39.06px */
  --text-5xl: 3.052rem; /* 48.83px */
}

How to Use a Typographic Scale

Establishing visual hierarchy and rhythm in web design through mathematically driven font sizes.

What is a Type Scale?

A typographic scale is a predefined set of font sizes mathematically derived from a base font size. By scaling headings, body text, and captions by a set multiplier (a 'musical ratio' like Major Third), your entire UI gains an underlying structural harmony. Major design systems like Material Design rely heavily on modular scales.

Choosing the Right Ratio

- **Minor Second (1.067)**: Low contrast between sizes. Excellent for dense dashboards and data tables. - **Major Third (1.250)**: The perfect sweet spot. Ideal for standard blogs, SaaS homepages, and articles. - **Perfect Fifth (1.500) & Golden Ratio (1.618)**: High, dramatic contrast. Perfect for artistic portfolios and bold marketing hero sections.

Integrating via CSS Variables

Copy the generated `:root { ... }` CSS block. By assigning your `<h1>` tags to `var(--text-3xl)` instead of hardcoded pixel values, you ensure design consistency across your entire project instantly.