ImageConverter LogoImageConverter

Text Tools Hub

Fonts, Emojis, Symbols & JSON Processing Tools

Free Font Tools & Typography Playground

Preview Google Fonts, discover perfect pairings, and generate typographic scales

Typographic Scale Generator

Create harmonious font size systems using mathematical ratios

Quick Presets

Scale Settings

Balanced scale for general use

410

Generated Scale

LevelPixelsREM
H116px1rem
H219.2px1.2rem
H323.04px1.44rem
H427.65px1.728rem
H533.18px2.074rem
H639.81px2.488rem
Body16px1.000rem

Visual Preview

H1: The quick brown fox
16px / 1rem
H2: The quick brown fox
19.2px / 1.2rem
H3: The quick brown fox
23.04px / 1.44rem
H4: The quick brown fox
27.65px / 1.728rem
H5: The quick brown fox
33.18px / 2.074rem
H6: The quick brown fox
39.81px / 2.488rem
Body: Typography is the craft of endowing human language with a durable visual form. This is your base body text size that will be used for most content.
16px / 1.000rem

CSS Variables

/* Typographic Scale */
:root {
  --font-size-h1: 1rem; /* 16px */
  --font-size-h2: 1.2rem; /* 19.2px */
  --font-size-h3: 1.44rem; /* 23.04px */
  --font-size-h4: 1.728rem; /* 27.65px */
  --font-size-h5: 2.074rem; /* 33.18px */
  --font-size-h6: 2.488rem; /* 39.81px */
  --font-size-body: 1rem; /* 16px */
}

/* Usage Example */
h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

About Typographic Scales

  • •Typographic scales create visual harmony by using consistent mathematical relationships between font sizes
  • •Musical ratios like Perfect Fourth (1.333) and Golden Ratio (1.618) have been used in design for centuries
  • •Smaller ratios (1.125-1.25) work well for UI with many text levels; larger ratios (1.5+) create dramatic hierarchy
  • •Use CSS custom properties to maintain consistency and enable easy theme adjustments across your project