Durante las últimas dos semanas, ha habido mucho entusiasmo por las fuentes de color. Adobe describe la tecnología así:
OpenType-SVG es un formato de fuente en el que una fuente OpenType tiene todos o solo algunos de sus glifos representados como ilustraciones SVG (gráficos vectoriales escalables). Esto permite la visualización de múltiples colores y degradados en un solo glifo. Debido a estas características, también nos referimos a las fuentes OpenType-SVG como “fuentes de color”.
En marzo, Roel Nieskens escribió sobre su experiencia construyendo una fuente de color y describió el problema que pretenden resolver:
La tipografía en la web es de un solo color: los caracteres son negros o rojos, nunca negros y rojos.
Por lo tanto, con una fuente de color, los diseñadores de tipos ahora pueden incrustar varios colores dentro de los propios glifos. Luego, un diseñador web puede elegir una de las opciones disponibles con el font-variation-settings propiedad en CSS. A continuación, hice una demostración que muestra cómo funciona esto con Trajan Color, una nueva fuente creada por Adobe y ahora disponible con Typekit:
¿Ves cómo diferentes partes de esos glifos, ABC, tienen diferentes toques de color en su interior?
Lo que esto significa es que cuando se trata de emoji y tipo de pantalla, los diseñadores pronto tendrán opciones más interesantes a mano. Por ahora, la compatibilidad con el navegador no es tan buena, pero Adobe les ha informado a todos sobre la página de Typekit diseñada por Nick Sherman:
La compatibilidad del navegador con fuentes de color aún está evolucionando, pero existe en Firefox y Microsoft Edge (IE), y esperamos que más fabricantes de navegadores adopten el formato en poco tiempo. En los navegadores que carecen de compatibilidad con fuentes de color, recurrirán a los glifos monocromáticos normales.
Creo que el punto final, acerca de cómo las fuentes de color retroceden, fue ilustrado mejor por Roel Nieskens, que debería ser lo perfecto y mejorado progresivamente que podría suceder en esta situación:
A continuación, se muestran algunos ejemplos de fuentes de color con las que puede experimentar hoy:
- Color de Trajano
- Emoji uno
- Bungee por David Jonathan Ross
- Color Bixa
¡Pero cuidado! Hay algunos problemas con este enfoque. El más problemático es el tamaño del archivo de fuente en mi demostración anterior: es 593 KB en total. Aunque, para ser honesto, en la mayoría de los proyectos probablemente no necesitemos cargar todas las variaciones de la fuente de color, lo que reducirá en gran medida el tamaño del archivo de fuente que servimos.
En segundo lugar, no parece que en CSS sea posible cambiar los distintos colores dentro de una fuente de color. Así que por un tiempo, nos quedamos atrapados con los estilos que los diseñadores de tipos nos brindan en los archivos de fuentes.
Sin embargo, independientemente de esos dos puntos débiles, todavía estoy muy emocionado por la aparición de fuentes de color y lo que eso podría significar para la tipografía en la web. Puedo ver que los viejos estilos de madera en particular regresan gracias en parte a este nuevo formato de fuente.
Asegúrese de ver la demostración a continuación (con Firefox o Edge) para ver el efecto de fuente de color:
Vea la demostración de fuentes Pen Color de Robin Rendle (@robinrendle) en CodePen.