FreeConvert LogoFreeConvert

文本工具中心

字体、表情符号、符号和 JSON 处理工具

Free Font Tools & Typography Playground

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

印刷比例生成器

使用数学比率创建和谐的字体大小系统

快速预设

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