Recomendaciones de font-family para una web más robusta y predecible

Fuentes: font-family recommendations

Este artículo reúne recomendaciones prácticas sobre el uso de la propiedad CSS font-family con el objetivo de que el texto se muestre de forma fiable y consistente en cualquier navegador y dispositivo. La premisa central es que no existen fuentes web seguras: las fuentes con nombre no están disponibles en todas las plataformas, las web fonts pueden bloquearse por motivos de red, seguridad, ahorro de datos o preferencia del usuario, por lo que las familias genéricas (serif, sans-serif, monospace) son la única apuesta verdaderamente segura.

El texto desglosa varias pautas concretas. Primera: declarar siempre la familia genérica, especialmente monospace cuando el contenido deba ir en ancho fijo, ya que su omisión puede romper ejemplos de código y obras ASCII. Segunda: evitar enumerar múltiples fuentes locales del sistema (Arial, Helvetica, Menlo, Monaco, etc.) porque la familia genérica resuelve a una fuente igual o mejor y aligera la hoja de estilos; si se quiere un carácter tipográfico específico, basta con un único nombre seguido de la genérica, por ejemplo Georgia, serif. Tercera: considerar seriamente usar solo la familia genérica, incluido en monospace, donde los valores por defecto de los navegadores actuales ya no son problemáticos como antaño. Se recomienda escribir font-family: monospace, monospace para esquivar una rareza histórica del CSS que reduce el tamaño del texto monoespaciado al 81,25 % cuando aparece una sola familia en la lista, con la advertencia de que Lightning CSS elimina el duplicado y obliga a una solución alternativa. Cuarta: no usar system-ui ni ui-* para contenidos extensos, pues las fuentes de interfaz están diseñadas para textos cortos, pueden carecer de glifos adecuados para ciertos idiomas y algunos usuarios las configuran de forma poco legible.

El artículo también apunta a recursos externos (modernfontstacks.com, issues en repositorios de MDN y CSSWG) y termina sugiriendo elevar el tamaño base de monospace en los navegadores, una propuesta que debería canalizarse a través del CSS Working Group.