En el mundo del diseño web, la tipografía cumple una función esencial, no sólo para mostrar texto en sí como es lógico, sino que también sirve de recurso estilístico para ampliar la línea gráfica de la identidad corporativa. Esto no es un descubrimiento y tampoco es exclusivo de las webs, sino que se trata de un elemento heredado del diseño gráfico y la composición tipográfica en general.
No obstante dentro del entorno web las tipografías sí que cobran una nueva dimensión debido al formato en el que utiliza, que al renderizarse en tiempo real dentro del navegador, se presta a poder ser manipulada cada vez que queramos. Esta manipulación no sólo la hacemos los desarrolladores web definiendo su apariencia desde la hoja de estilo con CSS, sino que el propio usuario puede personalizar también ciertos aspectos desde el navegador.
Sin embargo, con el tiempo las necesidades de las webs se han vuelto más complejas haciendo que surjan nuevas tecnologías como COLRv0 y COLRv1, que nos ayudan a aumentar la complejidad en lo que las tipografías permiten hacer.
Qué son
COLR es una extensión del estándar OpenType introducida para poder mostrar tipografías con gráficos basados en vectores. Este tipo de fuentes se diferencian de las habituales en que se crean mediante capas de profundidad, lo que permite asignar colores diferentes a cada una y de este modo crear glifos mucho más complejos que con el método tradicional basado en mapas de bits. Estos colores se almacenan en una tabla aparte cuyo nombre interno es COLR y de ahí ha trascendido a utilizarse para nombrar a la propia extensión en sí.
Lo importante de entender es que realmente estamos trabajando con vectores, lo que permite al diseñador de la fuente trabajar con muchísima más creatividad. Un ejemplo de esto son los famosos Emojis, que si bien visualmente no representan caracteres de una tipografía tradicional, sí que son una fuente en sí y utilizan este sistema. A la hora de renderizar, el navegador sustituye el caracter unicode que se esté usando por el glifo vectorial que tenga asignado.
Existen dos versiones en este momento: COLRv0 que es la inicial y COLRv1 que es una evolución de la anterior con algunas mejoras. Merece la pena pararse un momentillo en cada una de ellas para comprender las diferencias entre ambas.
Diferencias
COLRv0 es la versión inicial de esta extensión, lanzada allá por 2013, si bien tardó aún algunos años en incorporarse como parte del estándar de OpenType dentro de los navegadores. Con esta versión ya se podrían crear tipografías basadas en vectores por capas y asignarles tintas planas.
COLRv1 por otro lado es la segunda y hasta la fecha la última versión, que añade novedades haciendo que haya mucha más versatilidad. Con esta actualización se pueden usar ahora degradados e interpolaciones, lo que permite transiciones de colores mucho más suaves. A esto se le suma algunos añadidos extras que permiten reducir aún más el tamaño de la fuente en base a la posibilidad de reutilizar más elementos.
Ventajas
Hasta ahora he comentado sólo el potencial gráfico que este nuevo modo de crear fuente tiene, sin embargo las ventajas van más allá y no querría perder la oportunidad de verlas de manera breve.
Por un lado obtenemos una mejora de rendimiento respecto a otras alternativas, como puede ser desde luego usar directamente imágenes, pero también mejora respecto a los archivos SVG. Al guardarse la paleta de colores en una tabla aparte éstos se pueden reutilizar y así mejorar el tamaño del archivo final al no embeberlos en el propio vector, como haríamos en un SVG.
Los gráficos en sí son pequeños y ocupan poco, pero a la par escalables, lo que a la mejora de rendimiento se le suma a ausencia de pérdida de calidad ya que son vectores como he comentado ya.
Desde el punto de vista del desarrollador, el uso por otro lado es más sencillo ya que no tiene que hacer nada especial respecto a la configuración. Realiza la instalación y ya puede usar todos los vectores como si de una tipografía normal se tratase. Si has trabajado ya con sets de imágenes o vectores sabrás que la preparación es siempre un poco tediosa teniendo que ajustar los tamaños antes de realizar la carga en la web.
Cómo usarlas
Si has llegado hasta aquí es posible que te estés preguntando cómo puedes incorporar este tipo de fuentes en una web y lo cierto es que tiene menos misterio del que podría parecer a simple vista, ya que el método es similar al que se usa para el resto. Primero debemos encontrar una tipografía que sea compatible con COLRv0 o COLRv1 y luego incorporarlo al proyecto web como lo haríamos con cualquier otra fuente.
@font-face {
font-family: 'NuestraFuenteCOLR';
src: url('NuestraFuenteCOLR.woff2') format('woff2');
}Cabe reseñar que este tipo de fuentes viene con la paleta de colores definida por defecto y por desgracia no podremos personalizarlos desde CSS. No obstante, teniendo en cuenta que todos los navegadores importantes ya soportan ambas versiones debido a la buena acogida que han tenido, estoy seguro de que la puerta queda abierta a que en una revisión futura se añada un modo sencillo de hacerlo.
Referencias:
- Fuentes de vectores de grandiente de color COLRv1 – Chrome for Developers
- COLR – Tabla de Color (inglés) – Microsoft Learn
Deja una respuesta