#GeekStuff: Una mejor manera de renderizar nuestras fuentes en macOS

Los dos principales factores que determinarán la manera en la que se verán las fuentes de un sitio son el navegador utilizado y el sistema operativo. La única manera de saber como se verá nuestro trabajo, es intentando probar usando la mayor cantidad de dispositivos, sistemas operativos, navegadores (usando diferentes versiones), lo cual es un trabajo pesado.

Es muy común recibir comentarios de los diseñadores en mi trabajo diciéndome que las fuentes no se ven como en su diseño y es lógico, ― Photoshop no renderiza las fuentes usando el motor de renderizado del sistema operativo/navegador.

Renderizado de las fuentes en macOS

El algoritmo de antialiasing utilizado por macOS tiende a renderizar las fuentes light en fondos obscuros muy bold, eso también causa que el uso de Font Awesome o servicios similares haga que los iconos se vean borrosos.

Afortunadamente hay técnicas que podemos utilizar para decirle a los navegadores como renderizar el texto. Los navegadores basados en Chromium/Webkit nos permiten usar -webkit-font-smoothing y Firefox nos permite hacer uso de -moz-osx-font-smoothing¹ desde la versión 25.

Estas propiedades nos permiten cambiar el algoritmo de renderizado a escala de grises, que resulta en una mejor apariencia de las fuentes en nuestro sitio (más delgadas y mucho más nítidas).

Para sus proyectos pueden utilizar el siguiente mixin:

Mixin

  
    @mixin font-smoothing($value: on) {
      @if $value == on {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      @else {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
      }
    }
  

Implementación

  
    .obscuro-en-claro {
      @include font-smoothing(off);
    }

    .claro-en-obscuro {
      @include font-smoothing(on);
    }
  

Esta es una solución ideal para como queremos visualizar nuestras fuentes especialmente en Firefox gracias a -moz-osx-font-smoothing, que es el navegador donde las fuentes se ven más diferentes.