Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Typography

Consejo rápido: cómo renderizar las tipografías de forma consistente entre navegadores

by
Read Time:1 minLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este consejo rápido, te voy a enseñar cómo aplicar CSS en función del motor de renderizado de texto de cada navegador.

Mira el screencast

Esta es la cuestión: dependiendo de tu navegador y de tu sistema operativo, el texto mostrado será renderizado de forma diferente. Esto puede ser un problema para los diseñadores, especialmente para aquellos que se enfocan en perfeccionar los detalles tipográficos como el tipo de letra, el tamaño, el peso, el espaciado, etc.

Browser type renderBrowser type renderBrowser type render
La misma página mostrada en (de izquierda a derecha) Chrome Mac OS, Internet Explorer, Microsoft Edge

Si deseas tener más consistencia en tus diseños, una biblioteca de JavaScript llamada Type Rendering Mix creada por las leyendas vivas de la tipografía Tim Brown y Bram Stein te ayudará.

Esta biblioteca detecta text rasterizer y el método antialiasing utilizado por el navegador y añade clases al elemento html para reflejar los resultados, por ejemplo:

En nuestro ejemplo anterior, queremos reducir el peso de la cita en Chrome. Habiendo cargado Type Rendering Mix en la página, una rápida inspección muestra que la clase tr-coretext se ha aplicado en Chrome, indicando el hecho de que utiliza Core Text (Mac OS e iOS) para la rasterización.

Podríamos entonces dirigirnos específicamente a nuestro texto más denso añadiendo una regla como esta a nuestro CSS:

Conclusión

Type Rendering Mix existe desde hace varios años, pero es una herramienta sencilla y sólida, que ofrece una ayuda fiable a los diseñadores que desean corregir la manera en que su tipografía se renderiza en diferentes navegadores.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.