Mejora la legibilidad del texto con CSS






La legibilidad, un conjunto de características que hace a un texto o tipografía más fácil de leer, puede mejorarse de varias formas. Una de ellas la introdujo Firefox 3.0 y que ahora adoptan Safari 5, Chrome y la beta de webkit (del que derivan otros navegadores) y se trata de un propiedad CSS que controla el renderizado de un texto: text-rendering.

¿Cómo funciona?

Funciona y se aplica como cualquier otra propiedad de CSS, text-rendering puede tomar los siguientes valores:
  • optimizeLegibility – Que da prioridad a la legibilidad del texto. Habilita el kerning y laligadura de la tipografía.
  • auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px yoptimizeSpeed para los de mayor tamaño.
  • optimizeSpeed – Que da prioridad a la velocidad con que se muestra un texto.
  • geometricPrecision – Da prioridad a la geometría del texto.
Ejemplos:
body  { text-rendering: optimizeLegibility; }
.post  { text-rendering: optimizeSpeed; }

Comentario

Una propiedad CSS que otorga al diseñador una herramienta de control más sobre el texto, por ahora el soporte es limitado, pero que seguramente irá aumentando con el transcurrir de las versiones de los navegadores.



ESCRITO POR WitCho

¡Hola! Mi nombre es Juan González y tengo 20 años. He fundado este sitio para ayudar a todas las personas que se inician en el mundo del Blogger. Aquí encontrarás diversos aportes, herramientas, efectos (jQuery), trucos y JSON, para que tu blog vaya mejorando día a día, así de fácil.



Si este artículo te gustó, por favor selecciona alguno de los siguientes servicios para compartirlo:



  • Vemos otro post cualquiera por si le encontraras alguna utilidad?



  • ¿Quieres seguir obteniendo trucos iguales que este? Entonces, suscríbete a nuestro RSS Feed.

    Por favor, ingresa tu correo electrónico

    ¡Mira que fácil! No has tardado nada, y a partir de ahora, podrás recibir tods nuestras entradas por correo.








    Antes de realizar ningún cambio, te recomendamos que "respaldes" la plantilla, para evitar, así, futuros problemas. Quizá, en algún momento te sirva de ayuda en algún... apreto


    Ir al centro | Ir arriba | Ir abajo



































    Logo de Android Honeycomb creado con propiedades de CSS3 por Manz (Emezeta blog), y después modificado por Juan