Imagina esto:

Desde Chrome 56, system-ui es un nombre especial de fuente que indica al navegador que utilice la fuente del sistema operativo (por ejemplo, Cantarell en GNOME o San Francisco en macOS).

Sin embargo, system-ui era algo relativamente nuevo y, en su momento, solo estaba disponible en las versiones más recientes de navegadores basados en Blink. Entonces, ¿qué se podía hacer mientras tanto?

Este es el ejemplo que utilizaba Bootstrap 4:

font-family: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;

• Safari y Firefox en Mac reconocen -apple-system y usan la fuente del sistema de macOS.

• Luego aparece system-ui, que solo estaba disponible en Chrome 56.

• Versiones antiguas de Chrome en Mac utilizaban BlinkMacSystemFont.

• Después viene "Segoe UI", que sí es una fuente real y es la utilizada en Windows desde Windows Vista.

• Luego Roboto para Android.

• Helvetica Neue para algunas versiones de macOS.

• Y finalmente Arial para versiones antiguas de Windows.

¿Y qué pasa con Linux?

Podrías pensar:
“¿Dónde está la fuente de GNOME?”

Una lista más completa sería algo así:

font-family: system-ui, -apple-system, BlinkMacSystemFont,
“Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”,
“Helvetica Neue”, Arial, Helvetica, sans-serif;

Aquí se añaden algunas fuentes más:

• Oxygen para KDE

• Ubuntu para Ubuntu

• Cantarell para GNOME

• Helvetica como otra alternativa genérica

Ahora la lista es mucho más completa para diferentes sistemas operativos.

¿Se puede ampliar aún más?

Si quieres cubrir todavía más casos, podrías añadir también:

• Droid Sans para versiones antiguas de Android

• Fira Sans para Firefox OS

• Lucida Grande para versiones antiguas de macOS

La lista puede hacerse bastante larga, pero la ventaja es que solo tienes que escribirla una vez. También puedes definirla mediante @font-face para reutilizarla fácilmente.

Recomendación práctica

Puedes crear tu propia lista de fuentes dependiendo de:

• qué sistemas operativos quieras soportar

• qué navegadores te importan

Y usarla como fuente por defecto en tus proyectos.

Pero, por favor, no olvides incluir Cantarell para los usuarios de GNOME.

Si tu sitio web intenta vender algo o transmitir un mensaje importante, quizá sea mejor elegir una fuente concreta y cuidada (ajustando espaciado de letras, estilo, etc.).

Una opción simple podría ser: