Cómo elegimos la tipografía de un sitio web

Antes de abrir un catálogo de fuentes nos hacemos una pregunta más aburrida: ¿qué tiene que hacer este texto? Un título vende, un párrafo se lee de corrido, un dato técnico necesita distinguirse de todo lo demás. Recién ahí buscamos la tipografía. Y en la web hay una segunda pregunta, igual de importante: cómo llega esa fuente al navegador sin frenar la página.

Primero la función, después la familia

Cada tipo de texto tiene un trabajo distinto, y eso define qué buscar.

• Títulos (display). Pocas palabras, tamaño grande. Acá hay lugar para carácter: formas marcadas, pesos extremos, anchos condensados o expandidos.
• Texto corrido. Muchas palabras, tamaño chico. Tiene que desaparecer: si alguien nota la tipografía mientras lee, algo está mal.
• Datos y código. Precios, fechas, métricas, fragmentos técnicos. Necesitan diferenciarse del resto y alinearse bien en columnas.

Legibilidad antes que personalidad

Los criterios que revisamos en cualquier fuente para texto corrido:

• Altura de x generosa. Las minúsculas altas en relación con las mayúsculas se leen mejor en tamaños chicos y en pantallas de baja densidad.
• Formas que no se confunden. La prueba rápida: escribir Il1 y O0. Si no se distinguen, la fuente va a dar problemas en mails, códigos y precios.
• Soporte completo de idioma. Para un sitio en español: tildes, ñ, diéresis, y los signos ¿ y ¡ bien dibujados, no agregados de compromiso.
• Cifras tabulares disponibles. Para que los números de una tabla de precios queden alineados.
• Pesos suficientes. Como mínimo regular y bold reales, no simulados por el navegador.

Y los valores de composición de los que partimos:

Parámetro	Punto de partida
Tamaño del cuerpo	16 px como mínimo; a menudo 17 o 18 px
Interlineado del cuerpo	Entre 1,5 y 1,7
Interlineado de títulos	Entre 1,0 y 1,2
Largo de línea	Entre 45 y 75 caracteres
Contraste del texto	4,5:1 como mínimo (nivel AA)

Los tamaños los definimos en unidades relativas (rem) y, para los títulos, con clamp(), que permite que el tamaño crezca con el ancho de la pantalla entre un mínimo y un máximo. Así el texto respeta la preferencia de tamaño que cada persona configuró en su navegador.

Máximo dos familias

Una para display, otra para texto corrido. Una tercera, monoespaciada, solo si hay datos o código que mostrar. Más que eso, el sitio empieza a sonar como un collage.

Cómo las combinamos

• Contraste claro o ninguno. Dos fuentes sans serif casi iguales parecen un error. O se parecen mucho en estructura y cambian en un rasgo evidente (ancho, peso), o son francamente distintas.
• Proporciones compatibles. Alturas de x similares hacen que dos familias convivan en la misma línea sin que una parezca más chica.
• Una sola protagonista. Si la de títulos tiene mucho carácter, la de texto tiene que ser sobria.

Este sitio es un ejemplo: Archivo para los títulos, aprovechando su eje de ancho; Instrument Sans para el texto corrido; y JetBrains Mono para etiquetas y datos. Tres familias, tres trabajos que no se pisan.

Fuentes variables: un archivo, muchos pesos

Una fuente tradicional necesita un archivo por cada estilo: regular, medium, bold, cada uno con su cursiva. Una fuente variable incluye en un solo archivo todo un rango continuo, a través de ejes como peso (wght), ancho (wdth) o inclinación.

Las preferimos cuando el diseño usa tres o más pesos de una misma familia: un archivo variable suele pesar menos que la suma de los estáticos, y es una sola descarga. Además permiten valores intermedios (un peso 550, por ejemplo) y animar el peso o el ancho sin cambiar de archivo.

Si el diseño usa un solo peso, un archivo estático puede ser más liviano. Se mide caso por caso.

Self-hosting: las fuentes en tu propio dominio

Servimos las fuentes desde el mismo dominio del sitio, no desde un servicio externo. Tres razones:

1. Performance. Se evita la conexión a otro servidor. Y el viejo argumento de “ya la tiene en caché de otro sitio” dejó de valer: los navegadores actuales separan la caché por sitio.
2. Privacidad. Cargar una fuente desde un tercero le envía a ese tercero la IP de cada visitante. En 2022, un tribunal de Múnich falló contra un sitio justamente por cargar Google Fonts de forma remota sin consentimiento.
3. Control. La fuente no cambia ni desaparece por una decisión ajena.

Para que funcione bien: formato WOFF2, archivos recortados al conjunto de caracteres que el sitio usa (para español e inglés alcanza con el subconjunto latino) y verificar la licencia. Las fuentes con licencia abierta OFL permiten alojarlas sin costo; las comerciales suelen tener una licencia web aparte.

font-display y el salto de texto

Mientras la fuente se descarga, el navegador tiene que decidir qué mostrar. Eso se controla con font-display:

• swap: muestra el texto enseguida con una fuente de respaldo y la reemplaza cuando llega la definitiva. El contenido se lee desde el primer momento, pero el reemplazo puede mover el texto.
• optional: si la fuente no llega casi de inmediato, se queda con la de respaldo durante esa visita. Cero saltos, a cambio de que algunas primeras visitas vean otra tipografía.
• block: oculta el texto mientras espera. Lo evitamos.

Ese movimiento al reemplazar la fuente suma al CLS, una de las métricas que explicamos en Core Web Vitals sin jerga. Lo reducimos de dos maneras: precargando solo las fuentes que se usan en la primera pantalla, y ajustando la fuente de respaldo con size-adjust y ascent-override para que ocupe casi el mismo espacio que la definitiva.

El test real

Antes de dar una tipografía por elegida, la probamos con contenido verdadero, no con texto de relleno:

• Un párrafo largo en un celular, a pleno sol si se puede.
• El título más largo del sitio y el más corto.
• Una tabla con números.
• Las dos versiones de idioma, si el sitio es bilingüe.
• Tema claro y tema oscuro: en fondo oscuro, los pesos finos se ven todavía más finos.

Si un párrafo largo se lee sin cansar y un título se reconoce a la distancia, la tipografía está haciendo su trabajo. Lo demás es gusto, y el gusto no lleva discusión.

El siguiente paso

La tipografía es una de las decisiones que tomamos en la etapa de diseño de nuestro proceso, y es parte de cada proyecto de desarrollo web a medida: la identidad no se elige de un catálogo, se diseña. Si tu sitio actual se lee mal o tarda en mostrar el texto, también lo revisamos en las auditorías de performance y SEO técnico.