Typography Scale Generator

Create a consistent typographic hierarchy using mathematical scales.

Preview
Step 5

The quick brown fox jumps

49px3.052rem
Step 4

The quick brown fox jumps

39px2.441rem
Step 3

The quick brown fox jumps

31px1.953rem
Step 2

The quick brown fox jumps

25px1.563rem
Step 1

The quick brown fox jumps

20px1.25rem
Step 0

The quick brown fox jumps

16px1rem
tools.typography-scale-generator.output
:root {
  --text-5: 3.052rem; /* 49px */
  --text-4: 2.441rem; /* 39px */
  --text-3: 1.953rem; /* 31px */
  --text-2: 1.563rem; /* 25px */
  --text-1: 1.25rem; /* 20px */
  --text-0: 1rem; /* 16px */
}
Settings
PX
6

A typographic scale creates a harmonious rhythm between different text sizes in your design.

About this Tool

A typographic scale is a set of font sizes that are related to each other by a fixed ratio. By using a mathematical scale, you ensure that the difference between font sizes (like H1 vs H2) feels intentional and balanced. This creates a better visual rhythm and helps users understand the hierarchy of information on your page.

Frequently Asked Questions

Previous
CSS Unit ConverterDesign & Style
Next
CSS Variables GeneratorDesign & Style