Usando la tipografía nativa de tu sistema operativo

Recientemente ha comenzado a haber discusiones sobre el uso de tipografía nativa para las interfaces, es decir, utilizar la tipografía predeterminada según el sistema operativo que utilice el usuario. Esto tiene como ventajas:

  1. El diseño de las tipografías nativas ha mejorado sustancialmente en años recientes.
  2. Las tipografías nativas ofrecen un experiencia familiar al usuario que parece extenderse desde su sistema operativo hasta el Internet.
  3. De igual forma, las páginas web pueden llegar a parecer aplicaciones nativas cuando se visita desde sistemas operativos móviles.
  4. El uso de fuentes predeterminadas ofrece la posibilidad de eliminar la latencia creada al utilizar fuentes externas.

Acento en la O es una obra en constante evolución, sin embargo, mi objetivo principal al crear esta página web siempre ha sido proveer al usuario una experiencia e interfaz digital, rápida, limpia y familiar. Como pueden observar, el uso de fuentes nativas y los beneficios que otorgan son similares a mis objetivos para Acento en la O, es por ello que he decidido darles uso en la página.

IMPLEMENTACIÓN

Luego de realizar un poco de investigación sobre el tema y de ver diferentes formas de realizarlo, encontré un fabuloso artículo en la revista Smashing Magazine creado por Marcin Wichary quien actualmente se desarrolla como Lider de diseño y tipografía en Medium, una plataforma creada para escritores creativos.

En este artículo, Wichary indica que existen dos formas de lograr nuestro objetivo pero una de ellas puede llegar a producir errores de gran magnitud en los sistemas operativos móviles por lo que no es recomendable. El segundo método es sencillo: listar todos los nombres de las tipografías nativas.

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

Las fuentes nativas se utilizaran para renderizar el contenido, mientras que Montserrat, una tipografía open source de Google Fonts se utilizará para encabezados, titulos y demás detalles a manera de crear branding para Acento en la O.

DETALLES

A pesar de parecer sencillo, dicha implementación también tiene sus razones de ser, no es una lista generada aleatoriamente.

  • -apple-system busca localizar las tipografías – Apple ha usado varias a lo largo de los años y varían según la versión del sistema operativo – utilizadas en OS X ya que su nomenclatura no es accesible vía CSS estándar.
  • BlinkMacSystemFont es el equivalente para obtener las fuentes en Chrome para OS X.
  • Segoe UI se utiliza en Windows y Windows Phone.
  • Roboto se utiliza para Android y versiones recientes de Chrome. Se localiza después de Segoe UI para evitar que se muestre Roboto si eres un desarrollador de aplicaciones Android y la tienes instalada.
  • Oxygen se utiliza en la distribución Linux KDE, Ubuntu en... Ubuntu, y Cantarell en GNOME.
  • Fira Sans se utiliza en Firefox OS.
  • Droid Sans para versiones antiguas de Android.
  • Helvetica Neue para versiones antiguas de OS X y por ser popular en varios sistemas operativos y con usuarios.
  • sans-serif para recaer en la fuente predeterminada. Nótese que no necesariamente es la nativa ya que puede ser manipulada en los navegadores y sistemas operativos.

PROBLEMAS

A pesar de ser la mejor implementación existente, no es perfecta en ningún sentido y tiene sus múltiples complicaciones:

  • A pesar de obtener la tipografía nativa de los sistemas operativos más populares, de ninguna forma obtiene la de todos los sistemas operativos existentes.
  • Esta lista requiere mantenimiento y no es robusta. Como se mencionó antes, un cambio en el orden o nombre de la tipografía haría que esta declaración fuera inútil.
  • Existen dos tipografías llamadas Oxygen[1][2], si se tiene instalada la que no es nativa para KDE estamos en problemas.

En el lado positivo de las cosas, parece que se esta trabajando junto con la W3C – World Wide Web Consortium – para crear el estandar system que localice la tipografia nativa del sistema operativo. Actualmente system se refiere a una fuente utilizada en Windows 3.0.


Fuente: Using System UI Fonts In Web Design: A Quick Practical Guide



Show Comments