Design Tools

Typographic Scale Generator — Modular Scale to CSS Variables Free

🔒 Corre no seu navegador

Generate a harmonious typographic scale from a base size and named ratio. Choose from eight classic ratios — Minor Second through the Golden Ratio — and get 9 steps from xs to 5xl with pixel and rem values. Export as CSS custom properties ready to paste into your :root block. No upload, no account, no logs.

Como usar esta ferramenta

  1. Introduza o tamanho base da fonte em px.
  2. Escolha uma proporção de escala no menu pendente.
  3. Copie o resultado das propriedades personalizadas CSS.
Steppxrem
xs10.20.640
sm12.80.800
base161.000
lg201.250
xl251.563
2xl31.31.953
3xl39.12.441
4xl48.83.052
5xl613.815
:root {
  --text-xs: 0.640rem; /* 10px */
  --text-sm: 0.800rem; /* 13px */
  --text-base: 1.000rem; /* 16px */
  --text-lg: 1.250rem; /* 20px */
  --text-xl: 1.563rem; /* 25px */
  --text-2xl: 1.953rem; /* 31px */
  --text-3xl: 2.441rem; /* 39px */
  --text-4xl: 3.052rem; /* 49px */
  --text-5xl: 3.815rem; /* 61px */
}

Ratio: 1.25 | Base: 16px. All calculations run in your browser.

guide

How to Create a Typographic Scale Online — Free

Generate a modular type scale from a base size and ratio. Output CSS custom properties for your design system.

→
Mais ferramentas gratuitasVer as 492 →
Merge PDFsCompress ImageJSON FormatterPassword GeneratorVAT CalculatorQR Code Generator
Typographic Scale Generator — Modular Scale to CSS Variables Free | brevio