Design Tools

Typographic Scale Generator — Modular Scale to CSS Variables Free

🔒 Fonctionne dans votre navigateur

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.

Comment utiliser cet outil

  1. Entrez votre taille de police de base en px.
  2. Choisissez un ratio d'échelle dans le menu déroulant.
  3. Copiez le résultat des propriétés CSS personnalisées.
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.

→
Plus d'outils gratuitsVoir les 492 →
Merge PDFsCompress ImageJSON FormatterPassword GeneratorVAT CalculatorQR Code Generator
Typographic Scale Generator — Modular Scale to CSS Variables Free | brevio