Una de las preguntas más habituales que surgen al comprobar tus sitios web en diferentes sistemas operativos es ¿Por qué se ve tan diferente el texto en Mac OS, Windows y Linux? De hecho es posible que más de una vez te hayan preguntado "¿por qué se ve la letra «tan gorda» en Mac OS comparada con Windows y Linux"?.
Izquierda: texto en Mac OS X. Derecha: el mismo texto en Windows.
Por qué se producen estas diferencias
Las diferencias en cómo se muestra el texto se basan principalmente en dos factores:
- Motor de renderización, es el componente del sistema operativo que se encarga de dibujar el texto en la pantalla.
- Antialiasing, es un filtro gráfico que se aplica al texto para que se vea mejor por pantalla.
Motores de renderización de texto
El motor de Mac OS y de los dispositivos iOS se llama Core Text y está diseñado para respetar al máximo las formas originales de cada tipografía. Esto provoca que que con tamaños de letra enormes el texto se vea prácticamente perfecto. Pero con tamaños de letra pequeños como los de un párrafo, los caracteres aumentan su grosor e incluso a veces «se salen» del espacio asignado para cada carácter. Esto hace que algunas partes del texto se lleguen a ver un poco borrosas.
Windows dispone de varios motores para renderizar texto. El más moderno se llama DirectWrite y se utiliza en Windows Vista, 7 y 8. El motor anterior era parte de lo que se conoce como GDI (Graphics Device Interface) y se utilizaba en Windows XP y Vista. A diferencia de Mac OS, el motor de Windows siempre encaja el texto en el espacio disponible, lo que hace que se vea más nítido y mucho más fino. El problema es que para conseguirlo, las formas de algunos caracteres a veces se deforman y no respetan la tipografía original.
Linux y los dispositivos Android utilizan la librería FreeType para mostrar el texto. El resultado que se obtiene se encuentra a medio camino entre Mac y Windows, ya que Linux trata de respetar tanto el espacio disponible como las formas originales de las tipografías.
Antialiasing
En los primeros sistemas operativos, el texto se mostraba sin aplicarle ningún efecto gráfico para mejorarlo. Con el desarrollo de la técnica del antialiasing, el aspecto del texto mostrado en pantalla ha mejorado notablemente.
La siguiente imagen muestra una comparativa de las tres técnicas principales para mostrar el texto:
(Imagen cortesía de typerendering.com)
El texto de la izquierda no utiliza antialiasing, por lo que se ve bastante mal en todos los tamaños. El texto del medio utiliza el primer tipo de antialiasing que se desarrolló y que se basa en una escala de grises. El texto de la derecha utiliza el renderizado subpixel, que es la técnica más moderna y la que obtiene mejores resultados. Su desventaja es que el texto pequeño se ve un poco borroso.
Minimizando las diferencias entre sistemas operativos
La solución tradicional para minimizar o al menos disimular en lo posible estas diferencias consistía en aplicar las propiedades -webkit-font-smoothing: antialiased (para Google Chrome y Safari) y -moz-osx-font-smoothing: grayscale (para Firefox). Aunque es cierto que el texto se muestra más fino en Mac OS X, el problema es que se vuelve un poco más borroso.
La nueva solución que propone el proyecto Type Rendering Mix consiste en modificar los estilos CSS del texto en función del sistema operativo del usuario. De esta manera puedes disminuir el grosor del texto en Mac o aumentarlo en Windows/Linux para que el texto se vea lo más parecido posible en cualquier dispositivo.
Técnicamente se trata de una librería JavaScript que detecta tanto el motor de renderización como el tipo de antialiasing que se está utilizando. Después aplica dos clases CSS al elemento <html> de la página para que puedas modificar los estilos de la página convenientemente.
Así que para utilizarlo, primero tienes que descargar la librería JavaScript (que pesa unos 3KB) desde su sitio web y después tienes que enlazarla en todas tus páginas:
<script src="/js/trmix.js"></script>Si ahora recargas tu página, verás que al elemento <html> se le han aplicado dos nuevas clases CSS:
<html class="tr-coretext tr-aa-subpixel">
...
</html>La primera clase (tr-coretext) indica el motor de renderización de texto utilizado y la segunda clase (tr-aa-subpixel) indica el tipo de antialiasing que se está aplicando. Los posibles valores de la primera clase se indican en la siguiente tabla:
| Valor | Dispositivo |
|---|---|
tr-coretext |
Mac OS X y iOS (iPhone, iPad) |
tr-gdi |
Windows XP y Windows Vista SP1 |
tr-directwrite |
Windows Vista SP2 y versiones posteriores (Windows 7, 8) |
tr-freetype |
Android y Linux |
Utilizando esta clase puedes hacer que el texto de Mac OS se vea más fino para igualar al de Windows o viceversa, hacer que el texto en Windows se vea un poco más grueso para igualar al de Mac:
/* Los títulos en Mac ahora se ven más finos */
.tr-coretext h1 {
font-weight: 100;
}
/* Los títulos en Windows y Linux ahora se ven más gruesos */
.tr-directwrite h1,
.tr-freetype h1 {
font-weight: 600;
}En cuanto a la clase que indica el tipo de antialiasing, sus valores pueden ser:
| Valor | Tipo de antialiasing |
|---|---|
tr-aa-none |
No se aplica ningún antialiasing |
tr-aa-grayscale |
Antialiasing basado en una escala de grises |
tr-aa-subpixel |
Antialising de tipo subpíxel |
En ocasiones no es posible detectar el tipo de antialiasing con absoluta certeza. En estos casos, las clases CSS incluyen el prefijo unknown para indicar que es un valor estimado en vez de detectado (tr-aa-unknown-none, tr-aa-unknown-grayscale y tr-aa-unknown-subpixel).
Y si no fuera posible ni siquiera estimar qué motor y qué tipo de antialiasing se está utilizando, entonces las clases CSS aplicadas son tr-unknown y tr-aa-unknown.
Desactivando las fuentes web
Otro de los usos de la librería Type Rendering Mix consiste en deshabilitar las fuentes web cuando el dispositivo no tiene el antialiasing activado, ya que esto hace que el texto se vea realmente mal.
En esos casos, utiliza la clase .tr-aa-none para cambiar la tipografía por ejemplo a Verdana, que es una fuente que se ve bien incluso cuando el antialiasing está desactivado:
.tr-aa-none {
font-family: Verdana, sans-serif;
}