Mejor renderizado para textos

Érase una vez una tímida propiedad CSS que pocos conocen y nadie usa, pero que es muy beneficiosa cuando tratamos con textos.

Es conocido que cada plataforma -y cada browser– trata a las tipografías a su modo; es así como un font-size de una Arial no es similar no sólo dependiendo de la resolución ó la [densidad de pixeles del dispositivo][1] del usuario, sino que además dependiendo del OS y del navegador que se está utilizando. Pero esos son factores que no podemos manejar del todo, y sólo resta ofrecer una buena experiencia y ~~rezar~~ esforzarnos en que lo sea para la gran mayoría de los usuarios de nuestro proyecto web.

text-rendering es una propiedad (aún en working draft) que mejora la legibilidad de los textos, habilitando por ejemplo el kerning y las ligaduras en las tipografías que lo permitan. Los valores son:

auto: indica que el browser debe decidir si optimizar o no el texto.
optimizeSpeed: el browser le dará prioridad a la rapidez del renderizado del texto, causando que se cancele el suavizado (anti-aliasing) de la tipografía.
optimizeLegibility: mejora la legibilidad habilitando el kerning, suavizado y/o las ligaduras de la tipografía, por sobre la rapidez del renderizado ó su geometría.
geometricPrecision – le da prioridad a la geometría del texto por sobre la rapidez ó legibilidad del texto.

Ejemplos:⌗

A Esta Hora

mi avatar

efficaz & floral

Soporte: Firefox 3+, Safari 5+, Chrome 4+.

Enlaces:⌗

[1]: http://csslab.cl/curso/mobilewebdev/clase2.html#diseno-densidad “Enlace en CSSLab a “Desarrollo Móvil - Clase 2: densidad de pixeles””