Recomendaciones para `font-family` en CSS

• Diseñar en la web confiando en un nombre de fuente específico puede romperse según la plataforma, la red o la configuración de seguridad, así que font-family debe definirse asumiendo un fallback de familia genérica
• En código, arte o layouts que requieran ancho fijo, hay que incluir siempre monospace; también conviene especificar serif y sans-serif si se quiere asegurar la familia deseada
• Las pilas largas de fuentes que probablemente estén instaladas localmente suelen aportar poco, y es posible que el valor por defecto de la familia genérica del navegador elija mejor
• Las web fonts son más lentas que no usarlas y además introducen fallos de carga y concesiones con font-display, así que para contenido también es realista usar directamente la fuente predeterminada del usuario
• system-ui y ui-* tienen un carácter más propio de textos cortos de interfaz, y pueden no encajar con contenido largo ni con el soporte de idiomas; usarlos como reemplazo de fuente predeterminada para contenido puede ser riesgoso

---

No confiar en los nombres de fuentes

• No existen fuentes web seguras compartidas por todas las plataformas principales, así que no hay que asumir que un nombre de fuente específico siempre funcionará
• Las web fonts tampoco son una solución definitiva
  • Los subrecursos no embebidos pueden fallar al cargar por varias razones de red
  • La carga de fuentes es un área con implicaciones de seguridad, así que algunos entornos pueden bloquearla
  • uBlock Origin tiene un botón dedicado para desactivar fuentes remotas
  • Algunos modos de ahorro de datos de ciertos navegadores pueden bloquear la carga de fuentes, y la postura es que incluso los que no lo hacen deberían hacerlo
• Si el usuario no permite la elección de fuentes propia del sitio web, solo funcionarán las familias genéricas
• Si en JavaScript se usa document.fonts.load("1em my-web-font"), el Promise devuelto puede ser rechazado
  • En 6 años, de 2020 a 2025, se vieron unos 4 casos rotos por este problema, y 2 de ellos ocurrieron en 2025

Especificar siempre la familia de respaldo

• Si se necesita texto monoespaciado, hay que poner siempre monospace en font-family
  • La ausencia de monospace no se nota para muchos usuarios, pero en algunos entornos puede arruinar el layout o la intención de la obra
  • Por ejemplo, ASCII might fly? de Adel Faure no incluía monospace al momento de escribir esto, así que puede verse sin ancho fijo
• También conviene incluir serif o sans-serif si se necesita un fallback de la familia deseada
  • Ejemplo: font-family: Arial, sans-serif;
  • Ejemplo: font-family: Times New Roman, serif;
  • Si no se incluyen, se usará la fuente predeterminada, y esa fuente puede ser serif o algo completamente distinto

Reducir la lista de fuentes probablemente instaladas

• Enumerar largamente fuentes que probablemente estén en el sistema, como Arial, Helvetica, Helvetica Neue, Liberation Sans, Noto Sans, por lo general no ayuda
• En particular, se considera que Arial nunca será una mejor opción que sans-serif
• sans-serif puede interpretarse como una fuente que no sea peor que las fuentes especificadas, e incluso puede terminar eligiéndose una mejor
• Un ejemplo real de declaración monoespaciada visto en la práctica tenía una lista excesivamente larga
  • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
  • Esa declaración es estrictamente peor que font-family: monospace, monospace, y monospace puede interpretarse como una fuente que no sea peor que cualquiera de esa lista
• No hace falta prohibir por completo las fuentes no web con nombre, pero como máximo una parece razonable
  • Georgia) y Times New Roman son ambas serif de Core fonts for the Web de Microsoft, pero tienen características distintas
  • Georgia es mucho más ancha que Times New Roman, así que si ese rasgo es necesario por estilo, font-family: Georgia, serif es una elección aceptable
• modernfontstacks.com y el repositorio contienen ideas para elegir fuentes por plataforma
  • Aun así, se considera que recetan demasiadas fuentes con nombre, y que convendría eliminar bastantes
  • El tratamiento de Courier New está muy mal, y las imágenes parecen hechas con Courier de macOS

La opción de usar solo familias genéricas

• Si ya se redujo la enumeración de fuentes instaladas localmente, también vale la pena revisar si las web fonts son realmente necesarias
• Las web fonts son más lentas que no usarlas y pueden generar problemas de carga
  • Por eso existe font-display
  • Pero en vez de lidiar con las concesiones entre períodos de block y swap, redibujado y reflow, también se puede optar por usar tal cual las fuentes que el usuario ya tiene
• También es posible optar por usar solo la familia genérica monospace
  • En el pasado, el valor predeterminado de monospace no era bueno y, en particular, Courier New#Courier_New) de Microsoft estaba mal digitalizada, por lo que visualmente parecía un peso 200–250 en vez de 400
  • Después Apple introdujo Menlo), y durante una época en la que el monospace predeterminado del navegador no se actualizaba, la gente empezó a poner Menlo en la pila de fuentes
  • Hoy los valores predeterminados del navegador han mejorado en todos los casos y, aunque no son excelentes siempre, ya no son malos
• Es posible tirar listas como Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New y dejar solo monospace
• Incluir Courier New deliberadamente en una pila de fuentes recibe una valoración muy negativa

monospace, monospace y el comportamiento del navegador

• Si se especifica font-family: monospace; de forma explícita o implícita, font-size puede quedar por defecto no en 100% sino probablemente en 81.25%
  • El usuario puede cambiar la fuente de familia genérica, el tamaño de letra predeterminado y el tamaño de letra monoespaciada predeterminado
• Si hay una segunda family en la lista, ese comportamiento no ocurre
  • font-family: my-web-font, monospace; está bien
  • font-family: monospace, monospace; también está bien
  • También se puede especificar font-size directamente
• Lightning CSS tiene un problema que rompe monospace, monospace
  • Issue relacionada: parcel-bundler/lightningcss#1221
  • Como solución temporal se está usando monospace, m
• Este problema solo afecta a monospace
• La postura es que habría que convencer a los navegadores de abandonar ese comportamiento de tamaño para monospace y elevar ese valor, probablemente de 13px a 16px
  • El lugar para proponerlo podría ser CSSWG

No usar system-ui ni ui-* para contenido

• Las fuentes de UI son para textos cortos de interfaz, no para contenido largo
• Las fuentes de UI pueden no dar buen soporte al idioma del contenido
  • Se considera que macOS resuelve esto bastante bien, pero Windows no
  • Como resultado, pueden darse casos como usuarios de CJK viendo una fuente monoespaciada deficiente
• Algunos usuarios incluso eligen a propósito fuentes de UI del sistema ridículas, y se dice que eso es bastante común en algunas comunidades de Android
  • La preocupación es que, si se usa system-ui, el contenido también puede verse así
• w3c/csswg-drafts issue #3658 discutió varios problemas de system-ui y concluyó que system-ui se abusó ampliamente
• mdn/content issue #41244 agregó una nota en MDN advirtiendo sobre su uso excesivo
• system-ui y ui-* se han usado como un proxy para obtener una mejor fuente predeterminada, pero ese uso no es bueno
• La postura es que system-ui fue un error
  • La opinión es que se debió dejar solo -apple-system y hacer que BlinkMacSystemFont cambiara a eso
  • En el momento de la estandarización no había equivalentes útiles en otras plataformas, y ahora se considera que sí existen en algunas
  • También se cree que, en su mayor parte, se abusó de ello para esquivar el problema de que los navegadores no actualizaran los valores predeterminados anticuados de las familias genéricas existentes
• ui-serif, ui-sans-serif, ui-monospace y especialmente ui-rounded se consideran errores evidentes que deberían eliminarse
  • Fuera de entornos Apple no cabe esperar que se asignen a ninguna fuente concreta
  • Como el concepto en sí solo existe en plataformas Apple, no debería haberse incluido en el estándar
  • Si Apple lo hubiera ofrecido, se considera que debería haber sido una forma con prefijo -apple, como -apple-system
• Hay casos de uso legítimos de system-ui en web apps, pero la impresión es que en la práctica se ha abusado de ello casi por completo, e incluso una intervención para retirarlo podría no ser mala

[GN⁺]

Comentarios en Lobste.rs

• En https://lindenii.org optaron por no especificar font-family en absoluto, respetando así la fuente predeterminada que el usuario eligió en el navegador.
  Personalmente prefiero sans serif, pero si el usuario usa serif como valor predeterminado, no veo razón para sobrescribirlo.
  Sin embargo, cuando hay que usar caracteres que no existen en la mayoría de las fuentes, como en https://runxiyu.org/soc/ta/, no queda más que incluir una fuente web, y eso genera el problema de que el resto del texto también queda forzado a sans serif en vez de usar el valor predeterminado del usuario.
  No sé si hay una mejor forma, salvo envolver cada carácter raro en algo como <unusual-character>, y también estaría bueno que hubiera una forma de especificar algo como “la fuente preferida del usuario para código”.
  Gracias por el truco de monospace, monospace; la diferencia de tamaño era bastante confusa.

  • Para el segundo problema, poner una representación alternativa en imagen junto al carácter inusual podría ser un fallback razonable.
    Los sitios con listas de caracteres Unicode lo manejan así.
  • En mi blog, https://hauleth.dev, hago algo parecido, pero uso monospace.
    Alguna vez me felicitaron por el diseño del sitio, pero en realidad solo tomé un tema de Zola y reduje el CSS y los elementos personalizados, así que coincido bastante con el espíritu del artículo, sobre todo para páginas personales.
  • Sobre no especificar font-family en absoluto, creo que quizá sería mejor para los usuarios que la fuente predeterminada básica del navegador cambiara de serif a sans serif.
    La gran mayoría de los usuarios no elige una fuente manualmente, así que no hay forma de distinguir entre “la fuente elegida por el usuario” y “la fuente predeterminada del navegador”.
    Me gustan las serif, pero hoy en día es muy probable que la mayoría prefiera sans serif.
    En mi entorno bloqueé que las páginas puedan especificar fuentes, y tampoco instalé fuentes CJK decentes.
    Porque, aunque aparezcan cuadros como “4E2D” en vez de caracteres chinos, para mí significan tan poco como esos ideogramas.
    Ese manejo de fuentes de fallback está bien hecho, pero lamentablemente no hay una forma de especificar directamente el nombre de la fuente predeterminada.
    En cambio, si con JavaScript mirás getComputedStyle(document.documentElement).fontFamily en un documento vacío, según mi configuración avanzada de fuentes aparece "serif" o "sans-serif".
    No sé exactamente qué significa “fuente preferida para código”; parece que están pensando en algo distinto de monospace.

• Este texto todavía es un borrador, así que está bastante incompleto, y es algo desordenado porque mezcla fragmentos de dos o tres formas distintas.
  Probablemente al final tenga más de una página, tome una forma bastante distinta de la actual, y algunas partes quizá sean manuscritas, dibujadas a mano o con maquetación manual.
  Últimamente, en cambio, estoy concentrado en implementar un lenguaje de marcado liviano, y ya está casi usable; siento que ni siquiera queda un último 90% completo.
  Después volveré a escribir y lo publicaré.

• Es realmente interesante que, si se usa font-family: monospace;, font-size pueda quedar configurado de forma predeterminada en 81.25% en vez de 100%, y que eso no ocurra si hay una segunda fuente en la lista.
  Es decir, font-family: my-web-font, monospace; o font-family: monospace, monospace; están bien, pero parece que actualmente no está documentado en MDN.
  Me pregunto si alguien puede explicar por qué pasa esto y por qué no está documentado.

  • Según recuerdo, Firefox en realidad no hace este ajuste de tamaño de fuente, mientras que Chrome sí.
    Así que también se vuelve una fuente de inconsistencias entre navegadores.
  • Tal vez la intención haya sido hacer que el texto monoespaciado se vea visualmente del mismo tamaño que el texto del cuerpo.

• Aunque sea un borrador, hay una repetición rara dentro del texto, como si hubieran copiado y pegado una sección completa por segunda vez.
  Me molestó más porque, en particular, da a entender que mi fuente monoespaciada favorita no es muy buena.

  • Esas partes siguen ahí porque todavía estoy reorganizando la estructura.
    Si se lee con atención, también hay contradicciones leves porque estoy ordenando qué dejar como recomendación definitiva y en qué partes conviene adoptar una postura más matizada.
    Me da curiosidad cuál es tu fuente monoespaciada favorita.

• Una razón para no limitarse a usar solo serif y sans-serif es que la fuente serif predeterminada a menudo es Times, que me parece bastante fea.
  Por eso estoy pasando la fuente del cuerpo de serif a sans serif.

• Respecto a los consejos de “no enumerar fuentes que probablemente estén instaladas en el sistema” y “también para monoespaciadas, usar la familia genérica siempre que sea posible”, en mi sitio web lo tengo configurado así:
  uso --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; y --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace;.
  La intención es que, si Adwaita Sans está instalada en GNOME, se use la fuente del sistema y no se descargue la fuente web; si no está, se use la fuente web Adwaita Sans Bundled, y durante la carga haga fallback a Inter y sans-serif, que tienen métricas similares.
  Para monoespaciada es lo mismo: si existe Iosevka en el sistema, se usa; si no, se usa la fuente web Iosevka Web, y durante la carga hace fallback a Cascadia Code y monospace.
  También tuve en cuenta que el monospace de Windows es Consolas, que no me gusta, y que en Windows nuevo viene instalado Cascadia Code.
  Sé que no es ideal que Cascadia Code tenga métricas muy distintas de Iosevka, pero me da curiosidad qué opinan de este enfoque.

  • Como casi no sé de programación web, puede que se me esté escapando una mejor forma de especificar “descargar la fuente solo si no está instalada en el sistema”.

• Es un artículo prolijo, y no tenía idea del truco de monospace, monospace.
  Como detalle menor de formato, en mi navegador el texto del párrafo .unimportant aparece por encima del fondo amarillo, pero queda detrás del texto de la barra fija .status, así que se ve raro al desplazarse por la sección .unimportant.
  Parece que algo parecido ocurre con la marca de agua diagonal DRAFT.