Krypton Solid

Cómo optimizar la legibilidad mediante el procesamiento de texto

Cómo optimizar la legibilidad mediante el procesamiento de texto

El aspecto más frustrante del diseño web para los diseñadores capacitados para la impresión es la persistente falta de control tipográfico.

Las elecciones tipográficas cuidadosas son el sello distintivo de un trabajo de calidad y la falta de esa calidad en línea nunca deja de ser discordante para aquellos de nosotros que sabemos lo que estamos buscando.

Afortunadamente, el nivel de control que tenemos está aumentando todo el tiempo y el soporte para una representación tipográfica más avanzada también está aumentando. Si bien ciertamente no es posible brindar el tipo de tratamiento que brindan las aplicaciones como Illustrator, donde cada letra se puede modificar si es necesario, hay herramientas disponibles para aumentar la calidad. Uno de los menos conocidos es la propiedad de representación de texto.

No encontrará la propiedad de representación de texto en ninguna especificación de CSS porque técnicamente no es CSS, es una propiedad de SVG, aunque se usa como una propiedad de CSS. Lo más importante es que con una sola línea de CSS podemos eliminar algunos ríos y otras imperfecciones de nuestro texto.

La propiedad de representación de texto tiene cuatro configuraciones:

  • automático: permite que el navegador elija una configuración por sí mismo
  • optimizarSpeed: se centra en la velocidad
  • optimizarLegibilidad: se centra en el renderizado avanzado
  • geometricPrecision: representación precisa

Lamentablemente, el uso del navegador predeterminado «automático» normalmente favorecerá la velocidad en lugar de la legibilidad, lo que indica un estándar finalizado por los desarrolladores en lugar de los diseñadores.

Como la mayoría de nosotros no producimos páginas que sean lo suficientemente sustanciales como para justificar la necesidad de la configuración OptimizeSpeed, solo estaremos realmente interesados ​​en OptimizeLegibility (aunque geometricPrecision es útil para ciertas fuentes).

El código CSS es el siguiente:

.myClass { text-rendering: optimizeLegibility; }

Aquí hay una comparación directa de optimizarSpeed ​​y optimizarLegibilidad, como puede ver si observa de cerca, hay dos mejoras significativas en la versión más legible: los caracteres ‘ffi’ en la primera línea se han reemplazado correctamente con una ligadura y el interletraje se ha mejorado en todo, lo que es especialmente notable en la quinta línea, donde se ha corregido el espacio entre la ‘V’ y la ‘e’.

Las mejoras de kerning se pueden ver más fácilmente en estas superposiciones:

Chrome Mac

Windows Chrome

Firefox Mac

Firefox Windows

Internet Explorer 9 Windows

Safari Mac

El soporte del navegador es actualmente inconsistente, sin embargo, el hecho de que la representación de texto falla silenciosamente en navegadores que no lo admiten, significa que es muy útil en este momento.

¿Utiliza la propiedad de representación de texto en su CSS? ¿Alguien más que un tipógrafo notaría la diferencia? Háganos saber sus pensamientos en los comentarios.

Imagen destacada / miniatura, afinar la imagen a través de Shutterstock.

Deja un comentario