Tipografía web: fuentes, combinación y legibilidad
La tipografía es la parte más grande de la mayoría de las interfaces —casi todo lo que dice un producto lo dice con tipos— y el oficio se divide en dos mitades: elegir y combinar bien los tipos de letra, y componerlos para que se lean sin esfuerzo. La matemática del dimensionado vive en nuestra guía de escala tipográfica; este hub es la otra mitad, el oficio. La vía más rápida es ver una combinación clásica en texto real.
Elegir es hacer un casting
Elegir un tipo de letra es una decisión de casting: ese tipo pronunciará cada línea que el producto diga jamás, en un registro que los lectores captan antes de leer una palabra. Las guías de aquí cubren las decisiones: combinar tipos que contrastan sin chocar, la cuestión serif tal como está de verdad en las pantallas modernas, tipos de display que no sacrifican la legibilidad y qué señala sobre una marca la forma de las letras. La metáfora del casting hace un trabajo real: los lectores registran el tono de un tipo de letra antes de leer una palabra del contenido, igual que una voz se registra antes que la frase, y ninguna reescritura deshace esa primera impresión.
Leer es mecánica
La otra mitad es mecánica y medible: la longitud de línea que mantiene fiable el viaje de regreso del ojo, la diferencia entre legibilidad —¿puedo descifrarlo?— y lecturabilidad —¿fluye?—, los tipos en formularios, donde los errores cuestan más y los pequeños ajustes ópticos que el texto necesita en tamaños pequeños. Nada de esto es cuestión de gusto: casi todo se ha estudiado durante un siglo, y las guías informan de lo que aguanta. La razón de que los números se sostengan es fisiológica más que estética: la lectura ocurre a saltos y barridos de regreso, y casi cada medida de estas guías existe para que esos saltos aterricen donde el ojo espera.
La capa práctica
Entre el oficio y la teoría se sitúa la capa de trabajo con la que se topa todo proyecto: qué Google Fonts aguantan de verdad, cuándo un stack de fuentes del sistema supera a cargar cualquier cosa, cómo las fuentes llegan a la página sin bloquearla y qué cambian las fuentes variables. Concreto, actual y cubierto aquí; y La lista de comprobación de tipografía web comprime todo el hub en una única revisión antes de publicar.
Dónde vive la mitad del dimensionado
Este hub se detiene deliberadamente donde empieza la medición. La matemática del tamaño —proporciones de escala, jerarquías de encabezados, cuántos tamaños necesita un sistema— pertenece a la guía de escala tipográfica, y cómo se comportan esos tamaños entre un móvil y un escritorio se cubre en tipografía fluida. La división importa en la práctica: la tipografía que se lee mal suele fallar solo por un lado, y saber si estás depurando un problema de casting o de dimensionado ahorra retrabajo. Scale Composer mantiene ambas mitades en un solo lugar: un conjunto curado de familias para las decisiones de oficio, gobernado por la misma escala que dimensiona los tipos, el espaciado y la rejilla, de modo que una combinación elegida aquí llega ya dimensionada por el sistema.
Guías de este hub
- ¿Qué son las fuentes variables?
Las fuentes variables meten un rango de peso continuo en un solo archivo. Cómo funcionan los ejes, cuándo un archivo gana a cuatro cortes estáticos, y por qué font-weight: 457 funciona.
- Cómo elegir una fuente display sin arruinar la legibilidad
Las fuentes display están dibujadas para tamaños grandes: mucho contraste, espaciado ajustado, personalidad. Dónde encajan en la escala tipográfica y por qué fallan como texto de cuerpo.
- Conceptos básicos del rendimiento de carga de fuentes
El rendimiento de carga de fuentes descansa en tres palancas: menos archivos de fuente, archivos más pequeños (WOFF2) y font-display: swap — y por qué un sistema tipográfico ligero casi siempre gana.
- Formas de las letras y voz de marca: qué señala un tipo de letra
La personalidad tipográfica es un registro, no un mensaje: qué señalan los tipos geométricos, humanistas, grotescos y serif, y la mecánica de las formas de letra que hay detrás.
- La lista de verificación de tipografía web
Una lista de verificación de tipografía web con 20 comprobaciones de una línea —escala, comodidad de lectura, tipos de letra, detalles, entrega—, cada una con el número concreto que verificar.
- Las mejores Google Fonts para UI en 2026
Las mejores Google Fonts para UI superan cinco criterios —legibilidad a tamaño pequeño, un rango de pesos real, altura x para pantalla, cobertura, mantenimiento—: unas doce familias.
- Lecturabilidad vs Legibilidad: La Diferencia
Lecturabilidad vs legibilidad: la legibilidad pregunta si los caracteres se pueden descifrar, la lecturabilidad si la lectura sostenida fluye. La diferencia dirige el arreglo.
- Longitud de línea: la regla de los 45–75 caracteres
La longitud de línea óptima para el texto corrido es de 45–75 caracteres por línea, con 66 como el punto ideal clásico. Por qué las líneas largas vencen al ojo, y el arreglo de una sola línea en CSS.
- Pilas de fuentes del sistema: cuándo no cargar una fuente
Una pila de fuentes del sistema muestra el tipo de letra nativo de cada plataforma: cero peticiones de fuentes, cero desplazamiento de diseño provocado por la fuente. Qué ganas, qué cedes y cuándo usarla.
- Reglas para combinar fuentes que sí funcionan
Combinar fuentes con acierto se apoya en un principio: contraste en la clase, armonía en la proporción. Por qué fallan las fuentes casi idénticas y qué parejas clásicas aguantan.
- Serif o sans para texto de cuerpo en pantalla
Serif o sans serif para texto de cuerpo: por qué caducó la vieja regla de las pantallas, qué muestra realmente la investigación y por qué el tamaño y el interlineado importan más que la elección.
- Tamaños ópticos: por qué el texto pequeño necesita formas distintas
Tipografía de tamaño óptico: por qué un solo contorno no puede servir para 12px y 72px, qué ajusta el eje opsz y cómo compensar cuando una fuente no lo incluye.
- Tipografía para formularios y campos de entrada
Reglas de tipografía de formularios con sus razones: campos de 16px, etiquetas encima, mínimos para el texto de ayuda, monoespaciada para códigos — compuesta para verificar, donde los errores cuestan dinero.
Juzga las combinaciones con tus propios ojos
El consejo sobre combinaciones solo se vuelve convicción frente a texto real: intercambia los tipos de titular y de cuerpo en un espécimen en vivo; el selector de fuentes curado de Scale Composer contiene ~50 familias que sobreviven al uso en UI, y ver cómo una combinación encaja (o choca) en texto corrido enseña más rápido que cualquier lista de reglas.