A Major Third (1.25) scale works well for most websites — it provides clear hierarchy without extreme size jumps.

Use rem units for accessible typography — they respect the user's browser font size settings?

Use rem units for accessible typography — they respect the user's browser font size settings.

The Golden Ratio (1.618) creates dramatic size differences — best for editorial or artistic layouts.

Type Scale Generator

Generate a typographic scale with ratios, preview fonts live, and export CSS/Tailwind

Generate a typographic scale with mathematical ratios, preview fonts live, and export CSS, SCSS, or Tailwind config — all in your browser.

1Set a base font size (e.g., 16px) and choose a scale ratio (Minor Third, Major Third, Perfect Fourth, Golden Ratio, etc.).
2Select the unit (px, rem, em) and toggle value rounding.
3Choose a font family and weight to preview the scale.
4Review the visual scale showing each step with its computed size.
5Export as CSS custom properties, SCSS variables, or Tailwind config.

A Major Third (1.25) scale works well for most websites — it provides clear hierarchy without extreme size jumps.
Use rem units for accessible typography — they respect the user's browser font size settings.
The Golden Ratio (1.618) creates dramatic size differences — best for editorial or artistic layouts.

OneKitTools TeamUpdated 2.21.4