Diseño de Sistemas Tipográficos: Cómo Construir Tipografía Escalable

Elegir una fuente no es diseñar un sistema tipográfico. Elegir dos fuentes que se vean bien juntas tampoco es diseñar un sistema tipográfico. Un sistema tipográfico es el conjunto de reglas que determina cómo se comporta cada pieza de texto en tu producto, marca o interfaz en cada contexto en el que aparecerá.

La mayoría de los diseñadores omiten este paso. Eligen una fuente para los encabezados y otra para el cuerpo del texto, ajustan los tamaños a ojo y lo dan por terminado. Seis meses después, el sitio web de marketing utiliza una escala, la aplicación usa otra, la presentación de ventas una tercera, y nadie puede explicar por qué la marca se siente inconsistente, aunque el logotipo no haya cambiado.

Esa inconsistencia es un problema del sistema tipográfico. Y tiene solución.

Qué Contiene Realmente un Sistema Tipográfico

Un sistema tipográfico real define cinco cosas:

1. Una escala tipográfica. La relación matemática entre los tamaños de tu texto.
2. Combinaciones de fuentes. Qué tipografías desempeñan qué roles y por qué.
3. Reglas de peso y estilo. Cuándo usar negrita, cursiva, medio, y qué señala cada peso.
4. Estándares de espaciado. Altura de línea, espaciado de letras y espaciado de párrafos para cada tamaño.
5. Comportamiento responsivo. Cómo cada elemento anterior se adapta a los diferentes tamaños de pantalla.

Si a tu "sistema tipográfico" le falta alguno de estos, tienes opciones de fuentes, no un sistema.

La Escala Tipográfica es la Base

Una escala tipográfica es un conjunto de tamaños de fuente generados a partir de una relación matemática consistente. En lugar de elegir tamaños por intuición (16px aquí, 24px allá, quizás 36px para el hero), eliges un tamaño base y una relación, y todos los demás tamaños fluyen a partir de eso.

Relaciones comunes que funcionan:

Comienza con una base de 16px (el valor predeterminado del navegador, accesible, legible) y multiplica hacia arriba para los encabezados, divide hacia abajo para los subtítulos y etiquetas. Una escala de Tercera Mayor a partir de 16px te da: 10px, 12.8px, 16px, 20px, 25px, 31.25px, 39px. Redondea a valores limpios y tendrás una escala que se siente intencional en lugar de arbitraria.

La Combinación de Fuentes es Estrategia

Internet está lleno de "mejores combinaciones de fuentes". La mayoría son consejos de decoración disfrazados de consejos de diseño. La combinación real de fuentes es estratégica.

Las reglas que realmente funcionan:

Contraste en la estructura, armonía en la proporción. Combina una sans geométrica con una serif humanista. El contraste estructural crea interés visual. La altura de la x y la proporción compartidas hacen que parezcan pertenecer juntas. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.

Una voz por rol. Tu tipografía de encabezado transmite personalidad. Tu tipografía de cuerpo de texto transmite contenido. Tu tipografía de interfaz de usuario transmite función. Intentar que una sola fuente haga las tres cosas es cómo terminas con un sistema que se siente genérico o forzado.

Dos fuentes casi siempre son suficientes. Tres es el máximo para cualquier sistema que necesite ser manejable. Cada tipografía adicional multiplica el número de decisiones de combinación, decisiones de peso y decisiones responsivas que debes tomar. Si crees que necesitas cuatro fuentes, probablemente necesites usar dos fuentes mejor.

Prueba la combinación en contexto, no en un espécimen. Una combinación que se ve hermosa en un póster de espécimen tipográfico puede desmoronarse dentro de un componente de tarjeta o una barra de navegación. Prueba en el diseño real antes de comprometerte.

Reglas de Peso y Estilo

El peso es jerarquía. Negrita significa importante. Medio significa de apoyo. Regular significa cuerpo de texto. Ligero significa decorativo o secundario. Estas asociaciones están arraigadas en cómo la gente lee.

El error es usar el peso de forma inconsistente. Si tu H2 es seminegrita en el sitio web de marketing pero negrita en la aplicación, la marca se siente diferente, aunque la fuente sea la misma. Un sistema tipográfico lo establece así:

• H1: Negrita (700). Siempre. Esta es tu voz más fuerte.
• H2: Seminegrita (600) o Negrita (700). Elige uno, úsalo en todas partes.
• H3: Medio (500). Suficiente contraste para destacarse sin competir con H2.
• Cuerpo: Regular (400). Legible, neutral, sin fricción.
• Subtítulos y etiquetas: Regular (400) o Medio (500) en tamaños más pequeños.

La cursiva tiene un solo trabajo: énfasis dentro del cuerpo de texto. Usar cursiva con fines decorativos (citas destacadas, etiquetas de sección) diluye su significado y hace que el énfasis real sea invisible.

El Espaciado es Donde los Sistemas Fallan

La altura de línea, el espaciado de letras y el espaciado de párrafos son donde la mayoría de los "sistemas tipográficos" se desmoronan silenciosamente. Los tamaños de fuente coinciden en todos los productos, los pesos coinciden, pero el texto se siente diferente porque el espaciado es inconsistente.

Reglas de altura de línea:

Los encabezados necesitan una altura de línea más ajustada (1.1 a 1.3) porque el texto grande crea demasiado espacio vertical con las proporciones del texto de cuerpo. El texto de cuerpo necesita una altura de línea más suelta (1.5 a 1.8) para una lectura cómoda. El error común es aplicar 1.5 a todo, lo que hace que los encabezados floten y el texto de cuerpo se sienta apretado en el tamaño incorrecto.

Reglas de espaciado de letras:

El texto grande (encabezados, display) se beneficia de un espaciado de letras ligeramente negativo (-0.01em a -0.02em). El espaciado óptico en tamaños grandes crea huecos que se sienten más anchos de lo previsto. El texto pequeño (subtítulos, etiquetas, mayúsculas) se beneficia de un espaciado de letras ligeramente positivo (+0.02em a +0.05em) porque un tracking ajustado en tamaños pequeños reduce la legibilidad.

Espaciado de párrafos:

Usa un multiplicador consistente de tu unidad base. Si tu base es 16px con una cuadrícula de 4px, el espaciado de párrafos debe ser 16px o 24px, no un valor arbitrario. Esto mantiene el ritmo vertical consistente en cada página.

Comportamiento Responsivo

Un sistema tipográfico que funciona en un solo punto de interrupción no es un sistema. Es una captura de pantalla.

La tipografía fluida escala los tamaños de fuente suavemente entre puntos de interrupción usando CSS clamp(). En lugar de saltar de 16px a 14px en un punto de interrupción, el tamaño se interpola. Esto elimina los problemas de diseño que surgen de los cambios bruscos en los puntos de interrupción.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

Compresión de escala en móvil. Tu relación de escala de escritorio (digamos 1.250) crea demasiado contraste en una pantalla pequeña. Un H1 de 39px en escritorio funciona. Un H1 de 39px en un teléfono de 375px no. La solución: comprimir la relación en móvil (bajar a 1.125 o 1.150) manteniendo el tamaño base igual. La jerarquía se mantiene, los tamaños se adaptan.

Tamaños mínimos legibles. Nunca bajes de 16px para el texto de cuerpo en móvil. Nunca bajes de 12px para ningún texto. La accesibilidad no es opcional, y el texto pequeño en pantallas pequeñas falla a los usuarios reales.

Fallos Comunes en los Sistemas Tipográficos

El buffet de fuentes. Cinco tipografías, sin justificación. Cada página se siente como una marca diferente.

El peso huérfano. Usar Fina (100) o Negra (900) para un solo elemento decorativo y nada más. Añade ruido visual sin aportar valor al sistema.

La adivinanza del espaciado. Alturas de línea y espaciado de letras que cambian entre componentes porque nadie definió las reglas.

La escala solo para escritorio. Se ve genial en un mockup de 1440px. Se desmorona en cualquier tamaño más pequeño porque nadie probó el comportamiento responsivo.

Los tokens faltantes. Un sistema tipográfico definido en un archivo de Figma pero no traducido a design tokens o propiedades personalizadas de CSS. El sistema existe en teoría pero no en código, por lo que los ingenieros lo reinventan en cada sprint.

Preguntas Frecuentes

¿Qué es un sistema tipográfico en diseño?

Un sistema tipográfico es el conjunto completo de reglas que rigen la selección de fuentes, el tamaño, el peso, el espaciado y el comportamiento responsivo en una marca o producto. Va más allá de elegir fuentes para definir cómo cada pieza de texto escala y mantiene la consistencia.

¿Cuántas fuentes debe tener un sistema de diseño?

Dos es el estándar. Tres es el máximo para la mayoría de los sistemas. Una tipografía para display o encabezados y una tipografía para el cuerpo del texto cubren la gran mayoría de las necesidades de diseño. Añadir más crea una complejidad exponencial en las decisiones de combinación, peso y responsividad.

¿Cuál es la mejor relación de escala tipográfica?

No existe una única mejor relación. La Tercera Mayor (1.250) funciona bien para marketing y editorial. La Tercera Menor (1.200) se adapta a interfaces densas. La Cuarta Perfecta (1.333) crea un fuerte contraste en los encabezados. Elige la relación que coincida con la densidad de tu contenido y tus necesidades de jerarquía.

Construye el Sistema Antes de Elegir la Fuente

La fuente es la última decisión, no la primera. Define tu escala, tus reglas de espaciado, tu jerarquía de pesos y tu comportamiento responsivo. Luego, elige la tipografía que se ajuste a esas limitaciones. Una fuente mediocre dentro de un gran sistema superará a una gran fuente sin sistema, siempre.