Generate a harmonious typographic scale based on a ratio. Preview sizes, copy CSS custom properties or Tailwind config.
A typographic scale is a series of font sizes that grow by a consistent ratio. Using a mathematical ratio (rather than arbitrary sizes) creates visual harmony and rhythm in your typography. The most common ratios are the Perfect Fourth (1.333), Major Third (1.250), and the Golden Ratio (1.618).
For body-heavy content like blogs and documentation, smaller ratios (1.125–1.25) work best as they create subtle variation without jarring jumps. For landing pages and marketing sites with large hero text, larger ratios (1.414–1.618) create more dramatic visual impact. The base size is usually 16px (1rem), matching the browser default.