Sugerencia rápida Cómo generar tipos de letra de forma coherente en todos los navegadores

En esta sugerencia rápida, le mostraré cómo aplicar CSS en función del motor de procesamiento de texto de cada navegador..

Mira Screencast

 

Aquí está la cosa: según el navegador y el sistema operativo, el texto que muestre su navegador se representará de manera diferente. Eso puede ser problemático para los diseñadores, especialmente aquellos que se centran en perfeccionar detalles tipográficos como el tipo de letra, el tamaño, el peso, el espaciado, etc..

La misma página que se muestra en (izquierda a derecha) Chrome Mac OS, Internet Explorer, Microsoft Edge

Si desea lograr una mayor coherencia en sus diseños, una biblioteca de JavaScript con el nombre de Type Rendering Mix por las leyendas tipográficas vivas Tim Brown y Bram Stein lo ayudarán.

Esta biblioteca detecta el rasterizador de texto y el antialiasing método utilizado por el navegador y añade clases a la html Elemento para reflejar los resultados, por ejemplo:

En nuestro ejemplo anterior, podemos querer reducir el peso de la cita en bloque en Chrome. Habiendo cargado Type Rendering Mix en la página, una inspección rápida revela que la clase tr-coretexto se ha aplicado en Chrome, lo que refleja el hecho de que utiliza Core Text (Mac OS e iOS) para rasterizar.

Entonces podríamos apuntar específicamente a nuestro texto más pesado agregando una regla como esta a nuestro CSS:

.tr-coretext blockquote font-weight: 300; // peso más ligero 

Conclusión

Type Rendering Mix ha existido desde hace algunos años, pero es una herramienta simple y sólida, que ofrece ayuda confiable a los diseñadores que desean modificar la forma en que se representa su tipo en diferentes navegadores.