¿Qué fuente elegir para tu sitio web?

La fuente da el tono de tu sitio antes de que se haya leído una frase: un despacho de abogados y un camión de pizzas no se escriben igual. Sin embargo, su primer trabajo es leerse, rápido, en un teléfono, a pleno sol, con ojos de todas las edades.

Así se elige, se ajusta y se carga sin hacer pesada la página.

Legible ante todo

Una fuente de texto se juzga en un párrafo entero, y en un teléfono. Bastan unas pocas pruebas para descartar:

Las letras que se confunden. Escribe «Il1», «rn m» y «0O». Si la I mayúscula, la l minúscula y la cifra 1 se parecen, un número de teléfono o un código de acceso se convierten en una trampa.
Minúsculas lo bastante altas. A igual tamaño, una fuente con minúsculas grandes (se habla de altura de la x) se lee mejor en pequeño.
Formas abiertas. Una c, una e o una a cuya abertura no se cierra siguen nítidas en tamaño pequeño y en una pantalla menos precisa.
Las cifras. Tus precios, tus horarios y tu teléfono pasan por ellas: deben ser tan claras como las letras.

Reserva las fuentes manuscritas, decorativas o muy estrechas para los títulos, en tamaño grande.

Tamaño e interlineado

Los navegadores muestran el texto a 16 píxeles por defecto, la mayoría de las veces (MDN): mantén ese tamaño como mínimo para el texto corriente. Expresa los tamaños en unidades relativas (rem o em): MDN recuerda que los tamaños en píxeles impiden ampliar el texto en algunos navegadores. Y el criterio 1.4.4 de las WCAG exige que se pueda ampliar hasta el 200 % sin perder nada.

Tres ajustes marcan después la diferencia:

El interlineado. En torno a 1,5 veces el tamaño del texto para un párrafo, algo menos para un título grande. El W3C toma 1,5 como referencia para los bloques de texto (criterio 1.4.8), y web.dev aconseja un valor sin unidad, que sigue el tamaño del texto.
La longitud de las líneas. De 50 a 75 caracteres por línea, espacios incluidos, recomienda el Baymard Institute (2022), que vio a visitantes abandonar la lectura de líneas demasiado largas. El W3C fija 80 caracteres como mucho en su nivel más exigente.
La alineación. Alinea a la izquierda. El texto justificado crea espacios irregulares entre las palabras, que molestan a las personas con dificultades de lectura (W3C, criterio 1.4.8).

Para los títulos, prevé un tamaño que siga el ancho de la pantalla, entre un mínimo y un máximo (web.dev).

Una o dos familias, rara vez más

Una familia agrupa una fuente y sus variantes: grosores (fina, normal, negrita) e itálicas. El sitio de un negocio independiente rara vez necesita más de dos:

una sola familia, jugando con el tamaño y el grosor: la elección más segura, y la más ligera;
dos familias: una fuente con carácter para los títulos, una fuente de texto sobria para el resto. Un restaurante puede permitirse un título con serifa elegante, y un texto de palo seco muy legible.

Cada fuente adicional añade archivos que descargar, y la página pierde su unidad. Limita también los grosores: cada uno suele ser un archivo aparte. Una fuente variable los reúne todos en un solo archivo, más pesado que un grosor pero más ligero que varios (web.dev).

Para el texto corriente, las fuentes ya instaladas en el dispositivo no cuestan nada de cargar: web.dev las recomienda cuando es posible.

La licencia: gratuita no significa sin reglas

Un archivo de fuente es un programa, protegido por el derecho de autor, y su licencia dice lo que tienes derecho a hacer con él. Antes de ponerla en tu sitio, comprueba tres puntos:

¿Está permitido el uso en la web? Una fuente comprada para la imprenta no tiene necesariamente licencia para un sitio web.
¿Puedes alojarla tú mismo? Algunas licencias lo restringen.
¿Puedes modificarla? Aligerar un archivo quitando caracteres inútiles es una modificación: web.dev aconseja comprobar antes la licencia.

La mayoría de las fuentes de Google Fonts se publican con la SIL Open Font License, algunas con Apache 2.0 o la licencia Ubuntu. La OFL permite el uso en un sitio web, la modificación y la redistribución; Google invita de todos modos a leer la licencia de cada fuente usada.

Queda la privacidad. Cargar una fuente desde los servidores de Google les transmite la dirección IP del visitante. En 2022, un tribunal de Múnich juzgó que hacerlo sin consentimiento infringía el RGPD, ya que la fuente podía usarse sin contactar con esos servidores. Esta decisión alemana sigue aislada; alojar los archivos con tu sitio zanja la cuestión de antemano.

La carga: el texto enseguida

Una fuente web es un archivo que el navegador descarga antes de poder mostrarla, y casi nueve páginas de cada diez usan al menos una (Web Almanac 2025). Durante la espera, el texto es o invisible, o mostrado en una fuente de reserva, y luego sustituido. La propiedad CSS font-display elige entre los dos (web.dev):

Valor	Lo que pasa	Para qué
swap	texto mostrado enseguida en la fuente de reserva, sustituido cuando llega	un título de marca
fallback	una espera de 100 ms; la fuente web solo sustituye a la de reserva si llega en 3 segundos	un buen término medio
optional	una espera de 100 ms; si la fuente no está, la página conserva la de reserva	el texto corriente
block	texto invisible hasta unos 3 segundos, mientras llega la fuente	a evitar para el texto

El intercambio hace a veces saltar el texto: las líneas cambian de longitud, y todo lo que sigue se desplaza, un defecto que Google mide. Para limitarlo, web.dev aconseja una fuente de reserva de proporciones parecidas, ajustable con size-adjust, o el valor optional.

Del lado de los archivos:

Sirve el WOFF2, el formato más compacto: un 30 % más ligero aproximadamente que el WOFF (web.dev).
Conserva los caracteres útiles. Una fuente latina tiene a menudo de 100 a 1.000 glifos; un subconjunto limitado a tu idioma aligera el archivo, si la licencia lo permite.
Precarga la fuente del texto, una sola, para que el navegador la pida pronto.

El espaciado debe poder cambiar

Algunas personas, con baja visión o dislexia, amplían el espacio entre las líneas, las palabras y las letras con una extensión o una hoja de estilo propia. El criterio 1.4.12 de las WCAG (nivel AA) exige que tu página lo soporte sin pérdida de contenido, hasta:

un interlineado de 1,5 veces el tamaño del texto;
un espacio de 2 veces el tamaño del texto después de cada párrafo;
un espaciado entre letras de 0,12 veces el tamaño del texto;
un espaciado entre palabras de 0,16 veces el tamaño del texto.

Estos valores son un mínimo que la página debe tolerar; tus propios ajustes siguen siendo libres. En Francia, el RGAA, la norma de accesibilidad de la administración, recoge los mismos umbrales en su criterio 10.12.

La trampa habitual es un botón o un recuadro de altura fija, cuyo texto desborda o se corta cuando el espaciado crece. El W3C sugiere dimensiones en em, que crecen con el texto.

En resumen: una fuente de texto sobria, una fuente de títulos como mucho, 16 píxeles para el cuerpo, un interlineado en torno a 1,5, líneas de 50 a 75 caracteres. Lee la licencia, sirve el WOFF2 desde tu propio sitio, y ajusta font-display para mostrar el texto enseguida.