# Sistema tipográfico: una función para cada fuente

[Canonical HTML page](https://gradiently.design/es/guide/brand-typography-system)

Elegir fuentes es lo fácil. Decidir con exactitud cómo se comportan, a qué tamaño, con qué peso y para qué trabajo, es lo que hace que una marca se vea coherente en todas partes.

## The short version

- Un sistema tipográfico es un pequeño conjunto de funciones con nombre, como display, titular, texto y etiqueta, cada una con una fuente, un peso, un tamaño, un interlineado y un uso de mayúsculas fijos.
- Los tamaños de un sistema tipográfico salen de una escala, un tamaño base multiplicado por una proporción constante, así que cada paso se relaciona con los demás.
- La mayoría de las marcas solo necesitan una o dos tipografías; el sistema crea variedad con funciones, pesos y tamaños.
- Los tokens de diseño guardan cada función como un valor con nombre, para que webs, apps y archivos de diseño usen las mismas decisiones tipográficas.
- Las publicaciones en redes, las presentaciones y las webs necesitan tamaños distintos para las mismas funciones, así que un buen sistema lista cada función por canal.

Un **sistema tipográfico** es el conjunto de reglas que decide cómo se comporta la tipografía en una marca: unas pocas funciones con nombre (display, titular, texto, etiqueta), cada una con una fuente, un peso, un tamaño, un interlineado y un uso de mayúsculas, todas dimensionadas desde una sola escala y guardadas como tokens para que cada diseñador y desarrollador use los mismos valores. Las fuentes dan a una marca su voz. El sistema hace que esa voz sea coherente, para que un titular en un cartel, una web y una historia parezcan salir del mismo sitio. Así se construye uno.

## Las funciones de un sistema tipográfico

Empieza por los trabajos, no por las fuentes. Cada texto que publica una marca hace uno de unos pocos trabajos, y cada trabajo se convierte en una función. La mayoría de las marcas necesitan entre cinco y siete.

| Función | Trabajo | Ajuste habitual |
| --- | --- | --- |
| Display | Las palabras más grandes: lemas de campaña, portadas, títulos principales | Fuente de titulares, negrita, interlineado ajustado, pocas palabras |
| Titular | Títulos de sección y titulares de publicaciones | Fuente de titulares, seminegrita o negrita, mayúscula inicial |
| Subtítulo | Introduce una sección, entradillas | Fuente de texto, peso medio, un paso por encima del texto |
| Texto | Texto de lectura | Fuente de texto, regular 400, interlineado en torno a 1,5 |
| Etiqueta y antetítulo | Texto pequeño sobre titulares, etiquetas, botones | Fuente de texto, seminegrita, a menudo en mayúsculas con espaciado extra |
| Pie | Créditos, notas, letra pequeña | Fuente de texto, regular, el paso más pequeño |
| Numérica | Precios, estadísticas, tablas | Cifras tabulares para que los dígitos se alineen |

Siete funciones cubren casi cualquier marca. Si no sabes decir qué trabajo hace un estilo, no es una función; es una excepción.

Una publicación vertical de estilo newsletter con un antetítulo pequeño, un titular grande y una breve línea de apoyo

Tres funciones en una publicación: un antetítulo, un titular y una línea de texto. Cada una se distingue al instante, así que la vista sabe por dónde empezar.

## Cuántas fuentes necesita un sistema tipográfico de marca

Normalmente una o dos. Una familia en tres pesos puede sostener todo un sistema. Dos fuentes, una para titulares y otra para texto, añaden carácter. Una tercera solo se justifica para un trabajo concreto, como código o datos. La variedad sale de las funciones, los tamaños y los pesos, no de más tipografías. [Combinaciones de Google Fonts](https://gradiently.design/es/guide/google-fonts-pairings) y [fuentes de marca](https://gradiently.design/es/guide/brand-fonts) te ayudan a elegir.

### Evita

- Una fuente nueva en cada campaña
- Tamaños elegidos a ojo en cada diseño
- Nueve pesos cargados y tres usados
- Reglas de mayúsculas distintas en cada equipo
- Una guía de estilo que lista fuentes pero no funciones

### Haz

- Una o dos familias para todo
- Cada tamaño sacado de una escala
- Solo los pesos que necesitan las funciones
- Una regla de mayúsculas escrita para titulares y botones
- Funciones con fuente, peso, tamaño, interlineado y mayúsculas

## Construye una escala tipográfica

Una escala tipográfica toma un tamaño base y lo multiplica por la misma proporción en cada paso. Los pasos se relacionan entre sí, así que dos tamaños cualesquiera del sistema se ven intencionados juntos. Una proporción de 1,25 encaja con interfaces y páginas densas; 1.333 o 1,5 dan más dramatismo para trabajo editorial y de marketing. [Escala tipográfica](https://gradiently.design/es/guide/typographic-scale) explica las proporciones con más detalle.

| Paso | Tamaño a 1,25 desde 16 px | Función |
| --- | --- | --- |
| Paso 0 | 16 px | Texto |
| Paso 1 | 20 px | Subtítulo, texto grande |
| Paso 2 | 25 px | Titular pequeño |
| Paso 3 | 31 px | Titular |
| Paso 4 | 39 px | Titular grande |
| Paso 5 | 49 px | Display en móvil |
| Paso 6 | 61 px | Display en escritorio |
| Paso menos 1 | 13 px | Pie, etiqueta |

Una escala web desde una base de 16 px con una proporción de 1,25, redondeada a píxeles enteros. Cada función toma un paso y lo mantiene.

## Guarda el sistema como tokens

Un sistema que solo vive en un PDF se desvía. Los tokens son valores con nombre que leen tanto el código como los archivos de diseño, así que cambiar un valor lo actualiza todo. Nombra los tokens por función, nunca por tamaño: `--type-heading` sobrevive a un rediseño, `--type-31` no. [Tokens de diseño](https://gradiently.design/es/guide/design-tokens) cubre la idea más amplia.

```css
:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }
```

Cada función es un token abreviado de fuente, así que peso, tamaño, interlineado y familia siempre viajan juntos. Los valores coinciden con la escala de arriba en rem.

## Una función, tamaños distintos por canal

Un titular en una web y un titular en una publicación de Instagram hacen el mismo trabajo a tamaños muy distintos, porque uno se lee a un brazo de distancia en una pantalla grande y el otro se encoge dentro del feed de un móvil. Mantén las funciones idénticas y da a cada canal sus propios tamaños.

| Función | Web | Publicación 1080×1350 | Diapositivas 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 a 61 px | 140 a 200 px | 120 a 160 px |
| Titular | 31 px | 90 a 120 px | 88 a 112 px |
| Texto | 16 px | 40 a 48 px | 48 a 64 px |
| Etiqueta y antetítulo | 13 px | 28 a 32 px | 36 a 44 px |

Las mismas funciones, las mismas fuentes, los mismos pesos, tamaños distintos. [Tamaño de letra para publicaciones de Instagram](https://gradiently.design/es/guide/font-size-for-social-media) y [fuentes para presentaciones](https://gradiently.design/es/guide/typography-for-presentations) explican las cifras de redes y diapositivas.

## Cómo construir tu sistema tipográfico

1. **Reúne lo que ya publicas** Haz capturas de tu web, publicaciones, correos y presentaciones. Rodea cada estilo de texto distinto. Casi todas las marcas encuentran muchos más de los que pretendían tener.
2. **Agrupa los estilos en funciones** Fusiona los casi duplicados. Apunta a entre cinco y siete funciones que cubran todo lo que rodeaste.
3. **Elige fuentes para las funciones** Normalmente una fuente de titulares y otra de texto. Comprueba que la licencia cubre web, apps y cualquier uso en el logo.
4. **Fija la escala y los detalles** Elige una base y una proporción, y luego fija el peso, el interlineado, las mayúsculas y el espaciado de cada función. Decide una vez cómo escribes los titulares; [mayúscula inicial o mayúsculas en cada palabra](https://gradiently.design/es/guide/title-case-vs-sentence-case) te ayuda.
5. **Publícalo como tokens y una hoja de una página** Tokens para el código y los archivos de diseño, y una sola hoja visual en tu [guía de estilo de marca](https://gradiently.design/es/guide/brand-style-guide) para todos los demás.

Para las publicaciones y presentaciones del día a día, un kit de marca de Gradiently (en Pro) guarda las fuentes de titulares y de texto de tu sistema, incluidos archivos de fuentes subidos, junto a tus logos, colores y voz. Los diseños nuevos empiezan con esas dos fuentes, y el Designer aplica el kit al maquetar un diseño, así que la división entre titulares y texto se mantiene sin que nadie tenga que recordarla.

## FAQ

### ¿Qué es un sistema tipográfico?

Un conjunto de funciones tipográficas con nombre, como display, titular, texto y etiqueta, cada una con una fuente, un peso, un tamaño, un interlineado y un uso de mayúsculas fijos, normalmente guardados como tokens de diseño.

### ¿Cuántas fuentes debería usar una marca?

Una o dos para la mayoría de las marcas: una para titulares y otra para el texto. Una tercera solo merece la pena para un trabajo concreto, como código o datos.

### ¿Qué es una escala tipográfica?

Una secuencia de tamaños de letra que se obtiene multiplicando un tamaño base por una proporción constante, como 1,25, para que todos los tamaños del sistema se relacionen entre sí.

### ¿Cómo deben nombrarse los tokens tipográficos?

Por función, como type-heading o type-body, no por tamaño. Los nombres por función siguen teniendo sentido cuando cambian los tamaños.

### ¿Las publicaciones en redes deben usar los mismos tamaños de letra que una web?

No. Mantén las mismas funciones y fuentes, pero usa tamaños mucho mayores en las publicaciones, porque se ven en pequeño en el feed de un móvil.