Tipografía avanzada: dar una voz a la marca

La tipografía es la voz, no el envoltorio

La presentación de la landing de Sereno fue bien — muy bien, incluso. Pero al salir de la sala, el cliente deslizó una frase que cambia el resto del proyecto: « Es bonito. Ahora quiero que se reconozca a Sereno con los ojos cerrados. » El director de Studio Mango te mira: « Eso es tipografía. » Tiene razón: una interfaz está compuesta en un 90 % de texto. Cambia la tipografía de un producto y cambias su voz — antes incluso que el color, antes que las imágenes.

En el capítulo 2 planteaste una escala de tamaños en ratio 1,25 y dos familias elegidas un poco deprisa. Era suficiente para prototipar; ya no lo es para una identidad. Este capítulo baja un piso: cómo leer la personalidad de una fuente, cómo casar dos sin disonancia, cómo ajustar la medida y los detalles de microtipografía que separan al aficionado del profesional — y cómo hacer todo eso fluido entre móvil y desktop con una sola línea de CSS.

Leer la personalidad de una fuente

Una fuente no es « bonita » o « fea »: tiene rasgos de carácter medibles. Los remates (las pequeñas terminaciones de las serifas) evocan la herencia, la edición, la calidez; su ausencia evoca la neutralidad moderna. El contraste de trazos gruesos y finos — la diferencia de grosor dentro de una misma letra — aporta elegancia cuando es fuerte, robustez cuando es débil. La altura de x (el tamaño de las minúsculas respecto a las mayúsculas) influye en la legibilidad en cuerpos pequeños. Las formas abiertas o cerradas de letras como la « e » o la « a » hacen una fuente acogedora o estricta.

No necesitas convertirte en tipógrafo: necesitas ese vocabulario para dar el briefing. Y la IA también aquí es un excelente profesor particular — muéstrale dos fuentes y pide: « compara la personalidad de Fraunces y de Playfair Display en términos de remates, contraste y formas; ¿cuál traduce mejor “calma premium cálida” y por qué? ». Obtienes un análisis argumentado y, sobre todo, las palabras para justificar tu elección ante el cliente mañana.

Casar dos familias sin nota falsa

La regla de oro del matrimonio tipográfico cabe en una frase: contraste franco o parentesco total, nunca el término medio. Dos fuentes casi idénticas (dos sans-serif geométricas, por ejemplo) crean una disonancia sutil — el ojo siente que algo chirría sin saber qué. Dos fuentes francamente diferentes (una serif con carácter para los títulos, una sans-serif neutra para el cuerpo) se realzan mutuamente. Es el dúo más seguro, y es el de Sereno: Fraunces que habla, Inter que se borra.

Segundo criterio, menos conocido: la altura de x comparable. Si la fuente de títulos tiene minúsculas proporcionalmente mucho más grandes que la del cuerpo, las dos parecerán mal calibradas una junto a otra, incluso a tamaños « idénticos ». Por último, limítate a dos familias — la tercera queda reservada a casos muy particulares (código a mostrar, una cifra de cuadro de mando en display). Cada familia adicional es un peso de carga y un riesgo de cacofonía.

Propón 3 parejas de fuentes de Google Fonts para Sereno, app de meditación, dirección « calma, premium, cálida »:
- para cada pareja: la fuente de títulos, la fuente de cuerpo, y 2 frases que justifiquen el matrimonio en términos de remates, contraste grueso/fino y altura de x
- restricción: la fuente de cuerpo debe seguir impecable a 16 px y en grosor 400
- excluye: las fuentes vistas en todas partes sin intención (nada de Montserrat ni de Roboto por defecto)
Después recomienda UNA pareja y explica en qué se distingue de las otras dos para este producto concreto.

La medida: de 45 a 75 caracteres, ni uno más

La medida es la longitud de una línea de texto, contada en caracteres. Por debajo de 45, el ojo salta de línea sin parar y la lectura se vuelve entrecortada; por encima de 75, el ojo se pierde al volver a la línea y relee la misma línea dos veces. La zona de confort se sitúa entre 45 y 75 caracteres, con un ideal en torno a 65 para los textos largos. Es el error más frecuente de la web: párrafos estirados a todo el ancho de una pantalla de 27 pulgadas, es decir, 150 caracteres y más — ilegible, por mucho cuidado que tenga el resto.

La solución cabe en una propiedad: max-width: 65ch en los bloques de texto (la unidad ch vale aproximadamente el ancho de un carácter de la fuente en curso). Acóplala a la altura de línea: cuanto más larga es la medida, más generoso debe ser el interlineado para ayudar al ojo a encontrar la línea siguiente. Y en cuanto a la alineación, una regla simple en la web: en bandera a la izquierda, nunca justificado — la justificación crea ríos de espacios irregulares que los navegadores gestionan mal, sobre todo sin partición de palabras.

/* Bloque de lectura confortable */
.prose {
  max-width: 65ch;          /* medida: ~65 caracteres */
  font-size: var(--text-base);
  line-height: var(--leading-body);  /* 1.6 para esta medida */
  text-align: left;          /* nunca justify en la web */
  text-wrap: pretty;         /* evita las palabras huérfanas a final de párrafo */
}

.prose + .prose { margin-top: var(--space-6); }

/* Los títulos: medida más corta, interlineado apretado */
h1, h2 {
  max-width: 22ch;
  line-height: var(--leading-tight);
  text-wrap: balance;        /* equilibra las líneas de los títulos */
}

La tipografía fluida con clamp()

Tu escala del capítulo 2 es estática: un h1 a 3,052 rem mide eso en todas partes. Pero 49 px es perfecto en desktop y aplastante en un teléfono de 375 px. La respuesta clásica era una cascada de media queries; la respuesta moderna cabe en una función: clamp(min, valor-fluido, max). Das un tamaño suelo, un tamaño techo, y entre los dos un valor que respira con el ancho de la pantalla (en vw). El título crece de forma continua de 2 rem en móvil a 3,05 rem en desktop, sin ningún salto.

Un detalle de accesibilidad crucial: no uses nunca vw solo en la parte fluida. Un tamaño en vw puro ignora el zoom del navegador — un usuario con baja visión que haga zoom al 200 % vería el texto… quedarse del mismo tamaño. La fórmula segura combina siempre una parte en rem y una parte en vw: clamp(2rem, 1.4rem + 2.6vw, 3.05rem). El rem garantiza que el zoom y las preferencias de tamaño de fuente del sistema se respetan.

:root {
  /* Escala fluida — ratio 1.25 conservado en los extremos */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl:   clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --text-3xl:  clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.4rem);
}

Convierte mi escala tipográfica estática (abajo) en escala fluida con clamp():
[pega aquí tus tokens --text-* actuales]
Restricciones:
- viewport de referencia: 375 px (móvil) a 1280 px (desktop)
- cada clamp combina rem + vw (nunca vw solo, para respetar el zoom del navegador)
- conserva el ratio 1.25 entre niveles en los dos extremos
- da el bloque :root final, y luego una tabla recapitulativa: tamaño a 375 px / a 768 px / a 1280 px para cada nivel
Por último, indica las alturas de línea recomendadas por nivel.

Jerarquizar sin agrandar

El reflejo del principiante para jerarquizar es el tamaño: más importante = más grande. Pero el tamaño es solo una palanca entre cinco, y a menudo la menos refinada. El grosor distingue un título de una etiqueta a igual tamaño. La caja — un antetítulo en versalitas espaciadas (« MEDITACIÓN GUIADA ») encima de un gran título — crea un piso de jerarquía elegante que no consume ni un píxel más. El color hace retroceder un texto secundario (--color-text-muted) sin empequeñecerlo. El espacio aísla y por tanto realza. Combina dos palancas discretas antes que una sola palanca chillona: es la diferencia entre una página que grita y una página que habla.

Una palabra sobre las fuentes variables, el estándar moderno: un solo archivo contiene todos los grosores (y a veces otros ejes, como la óptica o la anchura). Ventaja doble: cargas un archivo en lugar de cuatro, y puedes usar grosores intermedios precisos (550 en lugar de la elección binaria 500/600). Fraunces, precisamente, es variable y expone un eje « óptico » que suaviza o afirma el dibujo según el tamaño — exactamente el tipo de detalle que hace una identidad reconocible « con los ojos cerrados ».

Microtipografía: los detalles que hacen pro

Queda la capa final, invisible cuando está bien hecha y estridente cuando falta. Los apóstrofos y comillas curvos (el apóstrofo recto es un vestigio de máquina de escribir), las comillas latinas (« »), los espacios duros entre un número y su unidad, y los signos de apertura ¿ ¡ que el texto generado a veces olvida — el español tiene reglas precisas que la IA no siempre respeta. Pide sistemáticamente una pasada: « aplica las convenciones tipográficas españolas a todos los textos de la página ».

En el plano técnico, tres reflejos de entrega: sirve las fuentes en woff2 (el formato comprimido moderno), añade font-display: swap para que el texto se muestre de inmediato con una fuente de sistema mientras llega la verdadera, y verifica la licencia — las fuentes de Google Fonts son libres, pero una fuente premium encontrada « por ahí » puede costarle caro al cliente en caso de inspección. Dos familias bien servidas pesan menos de 200 Ko; ese es el presupuesto que no superar para que lo premium no se pague en segundos de carga.