Krypton Solid

Una guía práctica rápida – Revista Smashing

Una guía práctica rápida – Revista Smashing

Quizás por primera vez desde el Macintosh original, podemos entusiasmarnos con el uso de fuentes de la interfaz de usuario del sistema. Son interesantes alternativa fresca a la tipografía web – y uno que no requiera un servicio de entrega de fuentes web o archivos de fuentes almacenados en su servidor. ¿Cómo utilizamos las fuentes de la interfaz de usuario del sistema en un sitio web y cuáles son las advertencias? Las fuentes de la interfaz de usuario del sistema se nos acercaron increíblemente. Google ha estado trabajando duro en Roboto con gran éxito (incluidas las actualizaciones periódicas), Apple causó sensación con San Francisco y Mozilla le pidió al renombrado diseñador tipográfico Erik Spiekermann que creara Fira Sans.

Quizás por primera vez desde el Macintosh original, podemos entusiasmarnos con el uso de fuentes de la interfaz de usuario del sistema. Son interesantes alternativa fresca a la tipografía web – y uno que no requiera un servicio de entrega de fuentes web o archivos de fuentes almacenados en su servidor. ¿Cómo utilizamos las fuentes de la interfaz de usuario del sistema en un sitio web y cuáles son las advertencias?

Las fuentes de la interfaz de usuario del sistema se nos acercaron increíblemente. Google ha estado trabajando duro en Roboto con gran éxito (incluyendo actualizaciones periódicas), Apple causó sensación con San Francisco, y Mozilla le pidió al renombrado diseñador tipográfico Erik Spiekermann que creara Fira Sans. Por último, pero no menos importante, no nos olvidemos de Microsoft. Fue Microsoft quien reinició las conversaciones sobre las fuentes de la interfaz de usuario del sistema con su lenguaje de diseño original de Windows Phone (de soltera Metro), que se basaba en gran medida en la tipografía en general y en una fuente llamada Segoe En particular.

La última generación de fuentes de interfaz de usuario del sistema y sus lealtades. (Ver versión grande)

No es de extrañar que la idea de usar esas fuentes también se esté extendiendo por el mundo web. Ya sea que desee que su sitio web se sienta más como una aplicación, para trazar líneas más claras entre el contenido y la interfaz de usuario, o para use fuentes modernas y hermosas con latencia cero, es posible que le interese utilizar las fuentes de la interfaz de usuario del sistema en su sitio web.

Otras lecturas en SmashingMag:

Pero no es tan fácil como podría ser. Eso es porque el soporte de CSS es curiosamente esquizofrénico.

(Nota de nomenclatura: estoy usando «fuente de IU del sistema» aquí para referirme a la fuente en la que se representa la interfaz de usuario del sistema operativo, distinta de una «fuente del sistema», un nombre tradicional para cualquier fuente local o de plataforma que ya sea presente en el sistema del usuario y que no necesita incluirse en la carga útil del sitio web).

Dos enfoques para las fuentes del sistema

Actualmente, existen dos enfoques para hacer que su sitio web utilice la fuente de la interfaz de usuario del sistema para su tipografía.

Enfoque A

El método A consiste en utilizar la propiedad CSS abreviada «mágica»:

font: menu;

A algunas de estas propiedades taquigráficas han existido durante más tiempocaption, icon, menu, message-box, small-caption, status-bar), sin embargo, nunca he visto que se utilicen comúnmente.

El enfoque A tiene sus inconvenientes:

  • Eso no devuelve una fuente correcta en iOS, ni en muchos navegadores de Android.
  • Es una taquigrafía, lo que significa que anula el tamaño de la fuente (aunque eso se puede restablecer), y no se puede combinar con nada más.
  • Hasta diciembre de 2015 en Firefox en Mac OS X, no utiliza las propiedades «inteligentes» de San Francisco (que cambia de San Francisco Text a San Francisco Display automáticamente para texto de más de 20 píxeles y ajusta el espaciado entre letras).
Fuentes del sistema: fuentes de la interfaz de usuario del sistema Mac OS X a lo largo de las edades: desde Chicago en 1984, pasando por Charcoal y Lucida Grande, hasta San Francisco en una pantalla de alta resolución en 2015
Fuentes de la interfaz de usuario del sistema Mac OS X a lo largo de las edades: desde Chicago en 1984, pasando por Charcoal y Lucida Grande, hasta San Francisco en una pantalla de alta resolución en 2015. (Ver versión grande)

Enfoque B

El método B consiste en enumerar las fuentes por nombre:

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

Esto también tiene sus inconvenientes:

  • Tendrás que mantener la lista (y su orden). Quizás las fuentes de la interfaz de usuario del sistema no cambien con tanta frecuencia como lo hicieron en los últimos años, pero en cualquier caso, esto no está preparado para el futuro.
  • La lista se dirige a los navegadores y sistemas operativos más populares, pero no se dirige a todos ellos.
  • Todavía no funciona en Firefox en Mac OS X El Capitan, lo que hace que se muestre Neue Helvetica, en lugar de San Francisco. (Esto está programado para solucionarse en diciembre de 2015).
  • Esta solución es propensa a los conflictos de nombres, lo que llevó a una muy interesante error con la fuente del sistema en medio. Además, por ejemplo, Oxígeno (Fuente de la interfaz de usuario de KDE) es el nombre de otra fuente que la gente puede instalar, lo que puede llevar a sorpresas. Además, si usted es un desarrollador y ha instalado Roboto o Fira Sans en su máquina, entonces esta declaración de fuente podría usar una de esas en lugar de la fuente de interfaz de usuario real del sistema.
  • Mac OS 10.0 a 10.9 utiliza Lucida Grande como fuente de la interfaz de usuario del sistema. Mac OS 10.10 utiliza Neue Helvetica. Sin embargo, todas las versiones de Mac OS X tienen instaladas estas dos fuentes. Porque el font-family La declaración funciona revisando secuencialmente la lista de fuentes para encontrar la primera instalada, elegir Lucida Grande en algunas plataformas y Neue Helvetica en otras es imposible. Siempre se elegirá el primero disponible que figure en la declaración.

Otros enfoques

Es posible que se sienta inclinado a combinar el enfoque A con el enfoque B para obtener lo mejor de ambos mundos. Desafortunadamente, esto no es fácil porque el font y font-family las propiedades son mutuamente excluyentes – uno simplemente anulará al otro. Quizás las consultas de los medios puedan venir al rescate, pero eso es un truco.

También puede imaginar el envío de diferentes valores CSS desde el servidor, según el agente de usuario (por ejemplo, enviar solo font-family: “Fira Sans”, sans-serif; si sabemos que el navegador se ejecuta en Firefox OS), o hacerlo a través de JavaScript. Pero esto parece engorroso y difícil de mantener, y todavía no resuelve todos nuestros problemas.

Puede utilizar la fuente de la interfaz de usuario del sistema solo para la interfaz de usuario (a la izquierda, medium.com) o para todo el sitio web (a la derecha, colepeters.com).  Sin embargo, tenga en cuenta que muchas fuentes de la interfaz de usuario del sistema no están optimizadas para contenido más extenso.
Puede usar la fuente de la interfaz de usuario del sistema solo para la interfaz de usuario (a la izquierda, Medio) o para todo el sitio web (a la derecha, Cole Peters). Sin embargo, tenga en cuenta que muchas fuentes de la interfaz de usuario del sistema no están optimizadas para contenido más extenso. (Ver versión grande)

¿Que hacer hoy?

Trabajo en Medium y actualmente utilizamos el enfoque B:

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

Elegimos este enfoque porque parece tener menos problemas importantes. (El Método A falla en los navegadores móviles de formas inaceptables. El Método B también falla, pero con menos frecuencia y con menos consecuencias. Su kilometraje puede variar).

Tú y yo podemos hacer esto aún mejor juntos. El cuadro a continuación usa la declaración anterior y debería mostrarse en la fuente de la interfaz de usuario de su sistema. Si no es así o si tienes alguna idea, ¡deja un comentario!

Esto debe representarse en la fuente de la interfaz de usuario de su sistema. El veloz zorro marrón salta sobre el perro perezoso.

Detalles del enfoque B

Si está interesado en los detalles, analicemos cómo esta lista se ve como lo hace:

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

La primera agrupación son las propiedades CSS que se asignan a la fuente de la interfaz de usuario del sistema. Eso cubre mucho terreno, y no hay posibilidad de que estas fuentes se confundan con otra cosa:

  • -apple-system apunta a San Francisco en Safari en Mac OS X e iOS, y apunta a Neue Helvetica y Lucida Grande en versiones anteriores de Mac OS X. Selecciona correctamente entre San Francisco Text y San Francisco Display dependiendo del tamaño del texto.
  • BlinkMacSystemFont es el equivalente de Chrome en Mac OS X.

La segunda agrupación es para fuentes de interfaz de usuario del sistema conocidas:

  • Segoe UI apunta a Windows y Windows Phone.
  • Roboto se dirige a Android y al sistema operativo Chrome más reciente. Se incluye deliberadamente después de la interfaz de usuario de Segoe, por lo que si es un desarrollador de Android en Windows y tiene Roboto instalado, se utilizará la interfaz de usuario de Segoe en su lugar.
  • Oxygen apunta a KDE, Ubuntu objetivos … bueno, puedes adivinar, y Cantarell apunta a GNOME. Esto comienza a parecer inútil porque algunas distribuciones de Linux tienen muchas de estas fuentes.
  • Fira Sans apunta a Firefox OS.
  • Droid Sans se dirige a versiones anteriores de Android.
  • Tenga en cuenta que no especificamos San Francisco por su nombre. Tanto en iOS como en Mac OS X, San Francisco no es obviamente accesible, sino que existe como una fuente «oculta».
  • Tampoco especificamos San Francisco usando .SFNSText-Regular, el nombre PostScript interno de San Francisco en Mac OS X. Solo funciona en Chrome y es menos versátil que BlinkMacSystemFont.

El tercer grupo son nuestras fuentes alternativas:

  • Helvetica Neue apunta a versiones anteriores a El Capitan de Mac OS X. Aparece cerca del final porque es una fuente popular en otras computadoras que no son de El Capitan.
  • sans-serif es la fuente de reserva sans-serif predeterminada.
La evolución de la fuente de la interfaz de usuario del sistema de Windows es incluso más drástica que la de Mac OS X, desde las fuentes de mapa de bits monoespaciadas en Windows 1.0 en 1985 hasta la interfaz de usuario de Segoe de alta resolución en Windows 10.
La evolución de la fuente de la interfaz de usuario del sistema de Windows es incluso más drástica que la de Mac OS X, desde las fuentes de mapa de bits monoespaciadas en Windows 1.0 en 1985 hasta la interfaz de usuario de Segoe de alta resolución en Windows 10. (Ver versión grande)

Estos son los problemas conocidos actualmente con este enfoque:

  • En Firefox en Mac OS X, San Francisco tiene un espaciado de letras más ajustado que en Safari y Chrome.
  • No representa a Lucida Grande en versiones anteriores a Yosemite de Mac OS X, recurriendo a Neue Helvetica. Y puede que no coincida con la fuente correcta en sistemas operativos menos populares o configuraciones más complicadas.

El futuro

Aún queda trabajo por hacer. Todo lo que hemos cubierto funciona solo para la tipografía occidental. Además, si desea ajustar el relleno o la altura de la línea de acuerdo con la fuente de la interfaz de usuario que usa su sitio web, tendrá que usar el enfoque híbrido anterior o de lo contrario detectar la fuente después de renderizar.

Aún así, los primeros resultados ya son lo suficientemente buenos. Con suerte, en el futuro, todo esto será menos complicado. Si algo de esto es importante para usted, ¡dígaselo a los proveedores de navegadores!

Las últimas tres versiones de Mac OS X utilizan tres fuentes de interfaz de usuario del sistema diferentes: Lucida Grande en Mac OS 10.9 (Mavericks);  una versión especial de Neue Helvetica en Mac OS 10.10 (Yosemite);  y una versión especial de San Francisco en Mac OS 10.11 (El Capitan).  Es seguro asumir que las versiones futuras continuarán usando San Francisco.
Las últimas tres versiones de Mac OS X utilizan tres fuentes de interfaz de usuario del sistema diferentes: Lucida Grande en Mac OS 10.9 (Mavericks); una versión especial de Neue Helvetica en Mac OS 10.10 (Yosemite); y una versión especial de San Francisco en Mac OS 10.11 (El Capitan). Es seguro asumir que las versiones futuras continuarán usando San Francisco. (Ver versión grande)

Otras lecturas

Gracias a John Daggett, Michael Duggan, Kenneth Ormandy y Emil Eklund por su ayuda con este artículo.

Deja un comentario