☰
WintelGuy.com
Buy Me A Coffee
Patreon

CSS Type Scale

Set a base text size, scale, and font to preview a complete typographic hierarchy and its CSS.

Base: Provide the base text size in px or pt.
Scale: Choose the ratio used for the typographic scale.
Font: Select a Google font for the preview.
Weight: Choose the font weight applied to headings.
Line Height: Enter the line height multiplier between 0.5 and 10.
Text: Type the phrase or sentence to preview in the generated scale.

Preview
h1  3.8147rem  61.0352px  45.7764pt  weight:400
The quick brown fox jumps over the lazy dog.
h2  3.0518rem  48.8281px  36.6211pt  weight:400
The quick brown fox jumps over the lazy dog.
h3  2.4414rem  39.0625px  29.2969pt  weight:400
The quick brown fox jumps over the lazy dog.
h4  1.9531rem  31.25px  23.4375pt  weight:400
The quick brown fox jumps over the lazy dog.
h5  1.5625rem  25px  18.75pt  weight:400
The quick brown fox jumps over the lazy dog.
h6  1.25rem  20px  15pt  weight:400
The quick brown fox jumps over the lazy dog.
p  1rem  16px  12pt  weight:normal
The quick brown fox jumps over the lazy dog.
small  0.8rem  12.8px  9.6pt  weight:normal
The quick brown fox jumps over the lazy dog.

Generated CSS

:root { --txt-sz-base: 1rem; --txt-sz-small: 0.8rem; --txt-sz-lrg: 1.25rem; --txt-sz-xlrg: 1.5625rem; --txt-sz-x2lrg: 1.9531rem; --txt-sz-x3lrg: 2.4414rem; --txt-sz-x4lrg: 3.0518rem; --txt-sz-x5lrg: 3.8147rem; } html { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.4; } h1,h2,h3,h4,h5,h6 { font-weight: 400; } h1 { font-size: var(--txt-sz-x5lrg); } h2 { font-size: var(--txt-sz-x4lrg); } h3 { font-size: var(--txt-sz-x3lrg); } h4 { font-size: var(--txt-sz-x2lrg); } h5 { font-size: var(--txt-sz-xlrg); } h6 { font-size: var(--txt-sz-lrg); } p { font-size: var(--txt-sz-base); } small { font-size: var(--txt-sz-small); }

About CSS Type Scale

This tool builds a modular typographic scale from a base paragraph size. The base size can be entered in pixels or points.

Text sizes step above and below the base according to the selected ratio. Supported type scales:

  • 1.067 - Minor 2nd
  • 1.125 - Major 2nd
  • 1.200 - Minor 3rd
  • 1.250 - Major 3rd
  • 1.333 - Perfect 4th
  • 1.414 - Augmented 4th
  • 1.500 - Perfect 5th
  • 1.618 - Golden ratio

The preview reports equivalent rem, pixel, and point sizes; rem values assume the selected base size. The generated CSS uses rem units.

See also:
CSS Unit Converter
Google Variable Fonts
Google Fonts CSS API v2
TypeNetwork - Variable Fonts