Mejor renderizado para textos

16/ago/2012 4

É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 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

A Esta Hora

mi avatar

mi avatar

efficaz & floral

efficaz & floral

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

Enlaces:

Comentarios

  1. Lydia [#]

    Me imagino que esto no funcionará en IE+.
    No veo tampoco la diferencia en Firefox 26, los veo exactamente iguales. Adjunto una imagen ya que he leído que aceptas HTML.

    • Cesar [#]

      Esto es porque en los navegadores más recientes el suavizado se aplica por defecto.

  2. Lydia [#]

    He escrito bien el html, pero nada, así que dejo el enlace a pelo.
    http://thumbs.subefotos.com/d01bbeba3fbefe1d5d772eda546e975ao.jpg

  3. Jorge Epuñan [#]

    Lydia: depende de la tipografia y de los caracteres, en el segundo y tercer ejemplo son mas notorias las diferencias.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab