Generador de escala tipográfica

Creá una escala tipográfica consistente y exportala como tokens.

← Volver a UX Tools

Configuración

Tipografía

Usado para convertir a rem. Por defecto 16 px = 1rem.

Proporción

Ratios bajos: interfaces densas. Ratios medios: productos y sitios editoriales. Ratios altos: composiciones expresivas con pocos niveles.

No todas las fuentes incluyen todos los pesos; el navegador puede sintetizarlos.

Modo

Escala tipográfica

display

paso +6

Diseñar es decidir qué dejar afuera.

px
61.04
rem
3.8147
line-height
1.15 (70.2px)
peso
700
3.8147rem

heading-1

paso +5

Diseñar es decidir qué dejar afuera.

px
48.83
rem
3.0518
line-height
1.15 (56.15px)
peso
700
3.0518rem

heading-2

paso +4

Diseñar es decidir qué dejar afuera.

px
39.06
rem
2.4414
line-height
1.15 (44.92px)
peso
700
2.4414rem

heading-3

paso +3

Diseñar es decidir qué dejar afuera.

px
31.25
rem
1.9531
line-height
1.15 (35.94px)
peso
700
1.9531rem

heading-4

paso +2

Diseñar es decidir qué dejar afuera.

px
25
rem
1.5625
line-height
1.15 (28.75px)
peso
700
1.5625rem

heading-5

paso +1

Diseñar es decidir qué dejar afuera.

px
20
rem
1.25
line-height
1.15 (23px)
peso
700
1.25rem

body

paso +0

Diseñar es decidir qué dejar afuera.

px
16
rem
1
line-height
1.5 (24px)
peso
400
1rem

small

paso -1

Diseñar es decidir qué dejar afuera.

px
12.8
rem
0.8
line-height
1.5 (19.2px)
peso
400
0.8rem

caption

paso -2

Diseñar es decidir qué dejar afuera.

px
10.24
rem
0.64
line-height
1.5 (15.36px)
peso
400
0.64rem

Vista previa de UI

Fundamentos

Jerarquía tipográfica con intención

Una escala coherente ordena la lectura.

El cuerpo sostiene el contenido. Revisá ritmo, peso y contraste entre niveles antes de exportar tokens.

Tarjeta de ejemplo

Un bloque secundario para comprobar headings y texto de apoyo juntos.

Caption o metadato contextual

Exportar

:root {
  --font-family-primary: "Funnel Display", sans-serif;

  --font-size-display: 3.8147rem;
  --line-height-display: 1.15;
  --font-weight-display: 700;

  --font-size-heading-1: 3.0518rem;
  --line-height-heading-1: 1.15;
  --font-weight-heading-1: 700;

  --font-size-heading-2: 2.4414rem;
  --line-height-heading-2: 1.15;
  --font-weight-heading-2: 700;

  --font-size-heading-3: 1.9531rem;
  --line-height-heading-3: 1.15;
  --font-weight-heading-3: 700;

  --font-size-heading-4: 1.5625rem;
  --line-height-heading-4: 1.15;
  --font-weight-heading-4: 700;

  --font-size-heading-5: 1.25rem;
  --line-height-heading-5: 1.15;
  --font-weight-heading-5: 700;

  --font-size-body: 1rem;
  --line-height-body: 1.5;
  --font-weight-body: 400;

  --font-size-small: 0.8rem;
  --line-height-small: 1.5;
  --font-weight-small: 400;

  --font-size-caption: 0.64rem;
  --line-height-caption: 1.5;
  --font-weight-caption: 400;
}