La versión corta
- 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.
En esta página
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.
Ajuste habitual
Ajuste habitual
Trabajo
Ajuste habitual
Ajuste habitual
Trabajo
Ajuste habitual
Ajuste habitual
Ajuste habitual
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 y fuentes de marca 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 explica las proporciones con más detalle.
Función
Función
Función
Función
Función
Función
Función
Tamaño a 1,25 desde 16 px
Función
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 cubre la idea más amplia.
: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; }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.
Publicación 1080×1350
Diapositivas 1920×1080
Publicación 1080×1350
Diapositivas 1920×1080
Publicación 1080×1350
Diapositivas 1920×1080
Web
Publicación 1080×1350
Diapositivas 1920×1080
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 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 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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil