soy Kseso y esto EsCSS

Modern System Fonts: su retorno triunfal

El uso nuevo y la forma moderna y actual de utilizar las fuentes del sistema (system fonts) en la tipografía web evitando los problemas que tenía la forma tradicional. Además de evitar los contras de usar tipografías mediante la regla @font-face.

Modern System Fonts: su retorno triunfal

·Por Kseso ✎ 0
System fonts. El retorno

Históricamente la cuestión tipográfica ha sido uno de los capítulos capitales en la realización de páginas o aplicaciones webs. Y parejo a ello la respuesta desde CSS con las distintas propiedades o documentos que lo desarrollan.

Una de las propiedades fundamentales de este grupo ha sido y es font-family o la forma corta de declararla: font

A modo de breve recordatorio, la propiedad font-family admite como valor una lista de nombres de tipografías separadas por comas. Además siempre se ha recomendado que dichos nombres se escriban entre comillas (simples o dobles es indiferente) especialmente las de nombre compuesto para prevenir pequeños fallos en su interpretación por los navegadores:

font-family: helvética, verdana, arial, sans-serif;

Esta forma de declarar la tipografía obliga a que dichas fuentes estén instaladas en la máquina del usuario. Si no está la primera pasará a usar la segunda. Si tampoco existe usará la tercera y así sucesivamente. La última suele declararse una familia genérica en vez de una concreta como seguro.

Esta obligación de que la fuente exista en la máquina que recibe la página siempre fue un gran incordio limitante. No hay forma de saber si un usuario tiene o no determinada tipografía en su máquina y además suma la incertidumbre de que podría existir un archivo de fuente con un determinado nombre pero no corresponderse con la tipografía original esperada.

Esto limitaba el uso a las llamadas como safety fonts o fuentes seguras que no lo eran tanto.

La respuesta para superarlo fue la regla CSS @font-face allá por los años 90. Solución que tradicionalmente tampoco estuvo exenta de problemas o inconsistencias. Le dediqué el artículo @Font-face y sus problemas. Guía de uso y solucción de problemas.

Además de los clásicos bugs según navegador y versión con @font-face para su uso hay que tener presente los inherentes a ella misma y su forma de funcionamiento junto a cómo manejan los navegadores los archivos CSS:

  1. Las demoras en la carga de la página y aumento de su peso por la descarga del archivo o archivos tipográficos empleados.
  2. Los problemas de repaint y reflow al aplicar la tipografía una vez disponible.
  3. El efecto FOIT (Flash of Invisible Text) o FOUT (flash of unstyled text).

Fuentes del sistema

Todo lo anterior se basa en declarar los archivos tipográficos a emplear por su nombre particular del deseado o de recurrir a una familia tipográfica genérica.

Familias genéricas del sistema de usuario

Son tipografías usadas por el sistema de usuario (UI) o navegador. Las cinco reconocidas y usables son:

  1. SERIF
    Tienen serifas, remates o terminales: pequeños adornos ubicados generalmente en los extremos de las líneas de los caracteres.
  2. SANS SERIF
    No tiene las pequeñas terminaciones o remates de las serif.
  3. MONOSPACE
    Todos los carácteres tienen el mismo espaciado horizontal.
  4. FANTASY
    Letras con algún tipo de "adorno", decorativas.
  5. CURSIVE
    No confundir con las variantes en 'itálicas' o inclinadas. Generalmente tienen rasgos unidos u otra característica cursiva más marcada que los tipos itálicos.

El emparejamiento de la familia genérica con una tipografía en particular suele estar definida en las preferencias del usuario en la configuración de cada navegador. El principal problema es que no hay forma de saber cuál será.

Fuentes del sistema operativo

También podemos definir la familia tipográfica refiriéndonos a las utilizadas por el Sistema Operativo del visitante en algunos de sus elementos. Las palabras clave (keywords) son:

  1. icon
    La fuente usada para rotular iconos.
  2. caption
    La fuente usada en los títulos de los controles (ej., botones, cajas, etc.)
  3. menu
    La fuente usada en los menús (menús desplegables y listas de menús).
  4. message-box
    La fuente usada en las cajas de diálogo.
  5. small-caption
    La fuente usada para controles pequeños.
  6. status-bar
    La fuente usada en la barra de estado de las ventanas.

Al usar las fuentes del sistema operativo has de tener en cuenta que:

  • Para utilizar las Fuentes del Sistema no puedes usar la propiedad font-family, sólo es posible con la forma acortada font
  • las fuentes del sistema operativo se aplican como un todo: no sólo la familia definida, sino todo el conjunto de propiedades: weight|-size|-style| etc., por lo tanto:
  • Como la forma acortada 'font' restablece a los valores iniciales (por defecto) los no declarados explícitamente, si el sistema no ha asignado alguno, encontrarás sorpresas: perderás las herencias. Así que:

.caption { font: .8em caption;} /*Si en el SO no han definido algún valor de los restantes, esa regla se traduce por:*/ .caption { font-style: normal; font-variant: normal; font-weight: normal; font-size: .8em; line-height: normal; font-family: /*la usada por el SO para los 'captions'*/; }

  • Si mezclas la forma acortada font con otras propiedades declaradas explícitamente para alterar el valor normal, el orden es muy importante. Coloca la declaración acortada font: caption; antes de ellas.

.caption { /*font: caption; los valores siguientes se respetarían*/ font-style: italic; font-variant: small-caps; font-weight: 900; font-size: .8em; /*font: icon; los valores previos serían restablecidos a 'normal'*/ }

Las fuentes genéricas y del sistema ayer y hoy

Estas dos formas de declarar la tipografía en CSS (fuentes seguras o del sistema) en un principio era bastante más eficiente y recomendable que hoy día.

Varios son los aspectos que con el tiempo han ido cambiando y haciendo más compleja la cuestión tipográfica.

  • El número de Sistemas Operativos y sus versiones han aumentado considerablemente.
  • El número de navegadores y sus versiones también.
  • Hemos pasado de tener un sólo entorno (escritorio) a todo un ecosistema: escritorio, móviles, tabletas, lectores de libros...
  • El hardware donde se visualizan las tipografías ha evolucionado y mucho. De prácticamente homogéneo a una gran disparidad en cuanto a tipos de pantallas y sus características técnicas.
  • También el software asociado a su renderizado.
  • CSS ha añadido propiedades para el control del renderizado de los texto: la propiedad text-rendering
  • Las tipografías han cambiado. Hemos pasado de unas cuantas adaptadas de medios impresos a diseñadas expresamente para su uso digital.
  • Las características de las tipografías web han cambiado tanto para mejorar su representación en medios digitales como para ganar en legibilidad:
    1. se prefieren los tipos sans-serif.
    2. Su grosor [font-weight] es más cuidado en función de su tamaño.
    3. Formas más redondillas.
    4. Su relación ancho/alto [font-size-adjust] ha cambiado para hacer que su x-height (altura de la letra 'x') sea mayor para el mismo tamaño [font-size].

Así, si volvemos al código CSS previo [3] y declaramos font: caption el resultado o familia tipografía usado según SO será muy dispar:

  • En Ubuntu será Ubuntu Font.
  • En Yosemite será Helvetica Neue.
  • En El Capitan será San Francisco.
  • En Windows XP será Tahoma.
  • En los Windows nuevos Segoe UI.
  • En Windows Phone será Segoe UI.
  • En Android usará Roboto.
  • En iOS9 también San Francisco.
  • En iOS8 será Helvetica Neue.
  • En Blackberry usará BBAlphaSans.

Información obtenida del pen The Default Operating System Font in CSS.

A esta disparidad hay que añadir inconsistencias en sistemas IOs que font: caption lo resuelve como font-family: times. En Windows XP, la fuente del sistema se usa en Internet Explorer, pero otros navegadores muestran el contenido utilizando Arial.

Fuentes del sistema por su nombre

Una ventaja de usar las fuentes del sistema en páginas web es que se logra cierta "uniformidad" o integración de los textos con el SO y la familiaridad del usuario con ellos. Tiene cierta sensación de que la web tiene un aire de "aplicación nativa" del SO.

Otra a tener en cuenta es que se evita todos los problemas derivados del uso de @font-family (tráfico, peso, demoras, flases...) que mencionaba antes conservando el control de la tipografía finalmente usada.

Primer intento

Así que una primera idea sería declarar en la propiedad font-family una lista más o menos larga con los nombres de las fuentes usadas por los distintos sistemas operativos.

font-family: "San Francisco", "Helvetica Neue", "Segoe UI", Roboto,...;

Pero por desgracia esto sería comprar el 100% de las papeletas para un desastre.

Entre otras razones que desaconsejan esta forma resulta que en IO "El Capitán" no existe un archivo San Francisco como tal. Además de que esta tipografía viene con cierta magia: cambia automáticamente de San Francisco Text a San Francisco Display por encima de un tamaño de 20px y ajusta el espaciado entre letras. Además de otras características especiales.

Segundo intento

Pero no todo está perdido. Safari en Mac introdujo un nombre de tipografía para solventar lo anterior: -apple-system. Usará la fuente San Francisco con sus ventajas y en los viejos sistemas mostrará Helvetica Neue y Lucida Grande. Tienes la información "oficial" en el artículo Using the System Font in Web Content.

En realidad -apple-system engloba las siguientes:

font: -apple-system-body font: -apple-system-headline font: -apple-system-subheadline font: -apple-system-caption1 font: -apple-system-caption2 font: -apple-system-footnote font: -apple-system-short-body font: -apple-system-short-headline font: -apple-system-short-subheadline font: -apple-system-short-caption1 font: -apple-system-short-footnote font: -apple-system-tall-body

Por su parte Chrome también implementó la suya para lo mismo: BlinkMacSystemFont

Como ambas son "privativas" se ha propuesto el uso del valor system como forma estándar para hacer lo mismo en todos los navegadores: [css-fonts] "system" generic font name. Este valor no sería dependiente del navegador si no del Sistema Operativo en el que se ejecute (al contrario de lo que ocurre actualmente con las familias genéricas de las fuentes).

Así que con estos nuevos valores de fuentes del sistema y unas pocas más para los navegadores que aún no contemplan esta vía podemos usarlas con todas las ventajas actuales de la siguiente manera:

html { font-family: /*1*/-apple-system, BlinkMacSystemFont, /*2*/"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", /*3*/"Helvetica Neue", sans-serif; }

Una pequeña explicación de la regla anterior:

  • -apple-system selecciona 'San Francisco' en Safari en Mac OS X e iOS, y muestra 'Neue Helvetica' o 'Lucida Grande' en las versiones anteriores de Mac OS X. Se selecciona adecuadamente entre 'San Francisco text' y 'San Francisco display' dependiendo del tamaño del texto.
  • BlinkMacSystemFont es el equivalente para Chrome en Mac OS X.

El segundo grupo /*2*/:

  • Segoe UI en Windows y Windows Phone.
  • Roboto en Android y Chrome en OS. Declarada después de Segoe UI para que si estuviese instalada en Android developer o Windows no la "pise".
  • Oxygen para KDE, Ubuntu ya sabes y Cantarell y en GNOME.
  • Fira Sans para Firefox OS.
  • Droid Sans para viejas versiones de Android.

Y el tercer grupo /*3*/:

  • Helvética Neue para versiones de IOs X anteriores a El Capitán.
  • sans-serif como un pequeño seguro por si todo lo anterior falla.

System fonts en uso

El resultado de usar las system fonts de esta forma puedes observarlo y evaluarlo en este blog desde hace ya unas fechas. Aproximadamente llevo 10 días usando esta última declaración en estas páginas para los textos principales. Ha sustituido a la hind de Google Fonts.

Personalmente he observado una mejora en el rendimiento y carga del blog además de que ya no tengo problemas de FOIT o FOUT pese a mantener en los títulos la Roboto Slab vía @font-face.

System fonts un paso más allá con custom properties

Un pequeño inconveniente (que no creo que sea tal) de usar las system fonts de esta última forma es su valor complejo imposible de recordar por si necesitas declararlo en alguna otra regla en medio del CSS.

Ello obligaría a buscarlo, copiarlo y pegarlo en donde fuese necesario.

Proceso que puedes evitarte con sólo usar las CSS custom properties (que no variables CSS):

::root { --systemFonts: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; /* Otras declaraciones de autor */ } /*Reglas a gogó*/ html { font-family: var(--systemFonts); } /*Más CSS a gogó*/ .el { /* Anulamos herencia y/o cascada */ font-family: var(--systemFonts); }

Lecturas complementarias y base de este post

Además de los distintos artículos que he ido enlazando en el cuerpo del post como referencia o complemento puedes ampliar el tema de las fuentes del sistema modernas con estas lecturas:

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso