18oct2011

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.



    Añadir enlace de salto y enlace al comentario en Blogger

    Algunas plantillas no incluyen la función jump-link y comment-link. Estos ...

    CSS Sprites para mejorar las fechas de tus posts

    Hace ya tiempo, vimos como introducir un calendar con las fechas en t ...

    Buscador de Taringa! para Blogger

    (Tutorial a petición de Felipe, Dryken)  Lo más distintivo de un bl ...

    Bordes redondeados en imágenes con CSS 3 y jQuery

    CSS 3 tiene la propiedad border-radius que permite crear&n ...






    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





    cargando