English Português

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 la ligadura de la tipografía.
  • auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px y optimizeSpeed 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 Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Tom / Hace 6 años /

      Donde puedo ver un ejemplo funcionando ?

      Responder a Tom →
    2. Francisco / Hace 6 años /
      Responder a Francisco →
    3. pedro / Hace 6 años /

      francisco te quedo demasiado bueno ese texto….me gusta el texto….te felicito,muy chevere…jejejeje

      Responder a pedro →
    4. Pedro / Hace 6 años /

      jejejeje espero q sigas asi de inteligente…..

      Responder a Pedro →
    5. protocolo_ssl / Hace 5 años /

      Justo lo que estaba buscando, me estaba volviendo loco con el contenido de una web que estoy desarrolando, lo probaré con las fuentes de Google. Muchas gracias por la información y saludos.

      Responder a protocolo_ssl →
    6. Diamantes / Hace 4 años /

      Hola necesito un favor, yo quiero aprender a guardar una alteración de un número, cuando voy a inspeccionar elemento lo modifico, pero como hago para que quede guardada, Gracias..

      Responder a Diamantes →
    7. Estevez / Hace 3 años /

      Hola Francisco.
      Haber si me puedes ayudar, llevo hace tiempo intentando saber como pongo en mi blog como lo tienes tu en el tuyo,donde metes los ejemplos, no se como llamarlo se que no es una [textarea] tu lo tienes debajo de donde tienes el Ejemplo:
      ——————————-
      Codigo
      body { text-rendering: optimizeLegibility; }
      .post { text-rendering: optimizeSpeed; }
      ——————————-
      La cajita de color gris donde metes los códigos de los ejemplos.
      Por mas que intento aprender como ponerlo en mi blog no logro encontrar como hacerlo.
      Me siento tonto al no saber como explicarme.
      Haber si tu me puedes ayudar te estaria agradecido.

      Responder a Estevez →
    8. Edgar / Hace 2 años /

      Lamentablemente esta propiedad no está dentro del estandar css3, por lo que arroja errores en la validación de una hoja de estilo

      Responder a Edgar →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad