Fuentes de vectores de gradiente de color COLRv1 en Chrome 98

Dominik Röttsches
Dominik Röttsches
Lámina de varilla
Lámina de varilla

Fuentes de vectores de color compactas y fáciles de comprimir con todos tus tipos de gradientes favoritos.

En Chrome 98, los equipos de Chrome y Fuentes agregaron compatibilidad con COLRv1, una evolución del formato de fuente COLRv0 destinado a ampliar las fuentes de color agregando gradientes, composición y combinación, y mejoró la reutilización de formas internas para archivos de fuentes nítidos y compactos que se comprimen bien.

Colorear ahora

En la Web, el texto generalmente se dibuja con un color especificado en CSS. La fuente no define ningún color en particular, solo indica dónde se deben colocar los píxeles. Eso suele ser algo bueno. CSS permite que el autor elija un color de manera flexible. Sin embargo, a veces un glifo contiene varios colores que juntos tienen significado. Por ejemplo, la marca Bandera transgénero con rayas de color azul pálido y rosa pálido. con rayas celestes, rosas y blancas no transmitiría el mismo significado si se hubiera dibujado con el color de texto actual.

En la actualidad, para la mayoría de los usuarios, los emojis son las únicas fuentes de color que ven. Por lo general, los emojis aparecen en la Web a través de la fuente de emojis del sistema o mediante la inserción de imágenes (que tiene sus propias complicaciones, Emoji de panda
con expresión facial triste.). Los archivos de gran tamaño, en especial para las fuentes de color basadas en mapas de bits, dificultan el uso de fuentes web para los emojis. Con la compatibilidad con COLRv1, esperamos ver una proliferación del uso creativo de fuentes de colores en la Web y más allá.

Muéstrame tus colores

Creamos un par de ejemplos con los que puedes experimentar:

Los elementos de ejemplo de Google Fonts que se usan en el ejemplo se encuentran en la API web de Google Fonts. No se incluyen en el directorio de fonts.google.com, ya que solo funcionarán en Chrome 98 o versiones posteriores y mostrarán el trabajo experimental.

Ahora puedes crear tus propias fuentes COLRv1 con herramientas gratuitas y de código abierto. Consulta el compilador de fuentes nanoemoji, que te permite compilar fuentes COLRv1 a partir de imágenes de origen SVG y, luego, probarlos en Chrome 98 o versiones posteriores. Intenta dar tu propio giro en Bungee Spice cambiando los colores del gradiente según estas instrucciones.

Por ejemplo, puedes modificar la fuente Bungee Spice para que tenga un gradiente azul y rojo, como se muestra a continuación:

La palabra duna en la fuente de color Bungee Spice, en tonos azules y rojos.

Twittea tus resultados a @googlefonts 🙂 ¿Por qué no pruebas un gradiente radial o de barrido?

Nuevo con COLRv1

El formato de fuente admite varias formas de admitir colores, todas con diferentes compensaciones, pero ninguna ha funcionado correctamente en la Web hasta el momento. (Para obtener más información sobre las compensaciones, consulta la charla BlinkOn 15 de Dominik). Chrome 98 ofrece compatibilidad con COLRv1, una evolución de COLRv0. Esperamos que la combinación de capacidades gráficas y archivos compactos de COLRv1 la convierta en una buena opción para muchos casos de uso de fuentes de colores. COLRv1 agrega gradientes, composición y combinación, y mejora la reutilización de formas internas para crear archivos aún más compactos.

COLRv1 tiene una capacidad expresiva más o menos equivalente a SVG Native, además de la combinación y composición que se agregan por encima. Hay cuatro tipos de rellenos de color: colores sólidos, gradientes lineales, gradientes radiales y gradientes cónicos o de barrido. COLRv1 te permite cambiar la posición y transformar elementos de los glifos mediante un conjunto completo de transformaciones de traslación, rotación, transparencia y escalamiento. Además, admite variaciones de fuente y reutiliza los formatos de definición de forma existentes en la fuente.

Emoji de bola de cristal azul y púrpura con estrellas reutilizadas en una base marrón.
Reutilización de la forma en el emoji de la bola de cristal

Piensa en el emoji de la bola de cristal como un ejemplo: los elementos destacados con forma de estrella tienen la misma forma, pero diferentes tamaños, lo que significa que solo una forma se puede cambiar y volver a colocar sin duplicación dentro del archivo. El formato te permite reutilizar un glifo completo dentro de un glifo nuevo, sin tener que codificar de forma redundante las mismas formas para cada glifo. Imagina una fuente de color decorativo con decoraciones florales, en la que las mismas formas de flores se colocan en letras diferentes haciendo referencia a los glifos de color existentes. Para el caso de uso de fuentes web, COLRv1 se comprime bien debajo de woff2. Por ejemplo, una compilación de prueba de Twemoji que usa COLRv1 toma alrededor de 1.2 MB aumentados, pero equivale aproximadamente a 0.6 MB en forma woff2. Una compilación del conjunto completo de glifos de Noto Emoji Glyph se reduce de 9 MB para la versión de mapa de bits a 1.85 MB en forma COLRv1+woff2.

Gráfico de barras que compara Noto Emoji como fuente de mapa de bits y fuente COLRv1 (alrededor de 9 MB frente a 1.85 MB)
Tamaño de fuente de Noto Emoji CBDT/CBLC en comparación con COLRv1 después de la compresión WOFF2.

Casos de uso de fuentes de color

Títulos pegadizos

Una fuente de color actualizado permite que se destaquen los elementos destacados visuales, los títulos y los banners.

Plakato Color Happy 2022 con gradientes de barrido enérgico, creados por la innovadora fundadora de tipos Underware (Twitter: @underware, Instagram: @underwarefoundry). Obtén más información sobre la primera versión de COLRv1 de Underware en esta entrada de blog.

No más reemplazo de imágenes: fuentes de emojis

Si admites contenido generado por usuarios, probablemente tus usuarios utilicen emojis. En la actualidad, es muy común analizar texto y reemplazar cualquier emoji que aparezca con imágenes para garantizar una renderización multiplataforma coherente y la capacidad de admitir emojis más nuevos que los que admite el SO. Esas imágenes deben volver a cambiarse a texto durante las operaciones del portapapeles. Aquí hay un ejemplo real:

Un fragmento de código que muestra imágenes intercaladas como etiquetas img y metadatos como parte de un historial de chat
Reemplazo de imágenes en Google Chat

Si tienes una fuente de emojis, solo renderiza el texto en la fuente, de la siguiente manera:

<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);

.emoji {
  font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>

Del mismo modo, en un componente de reacción con emoji, COLRv1 ofrece la oportunidad de usar un archivo de fuente compacto en lugar de un catálogo de recursos de imagen.

IU del selector de emojis como se usa en GitHub
Selector de reacción de emojis en GitHub

Imagina cuántas imágenes tendrías que recuperar para un selector de emojis completo.

Color de las fuentes de íconos

El uso de colores en las fuentes de iconos agrega claridad y hace que los glifos sean más fáciles de comprender.

Tres íconos verdes
en contorno negro
Íconos de Material en dos tonos de https://fonts.google.com/icons

Expresión artística

Las fuentes de color con uso eficiente del espacio posibilitan nuevas formas de expresión artística en los textos de la Web. En este ejemplo de una fuente árabe de estilo kufi, se usan gradientes de color como una interpretación artística de cómo se vería el flujo de tinta de la caligrafía tradicional cuando se aplica al estilo kufi de escritura árabe, que se origina por no estar escrito con plumilla y tinta, sino tallado en piedra.

Letras árabes con gradientes de negro a rojo.
Reem Kufi Ink, una fuente árabe de Khaled Hosny

Detección de atributos

Por el momento, es posible averiguar si un motor del navegador admite un formato de fuente de color específico mediante el sniffing de usuarios-agentes o mediante una búsqueda en una biblioteca como ChromaCheck de @PixelAmbacht para probar la renderización de glifos de color en Canvas. Ninguna de las soluciones es la óptima. Las pruebas de funciones deben detectar solo una función específica y evitar el sniffing de usuarios-agentes. La biblioteca ChromaCheck no debería necesitar realizar operaciones de lienzo 2D que requieran muchos recursos para determinar la compatibilidad.

El equipo de Chrome quiere mejorar este aspecto y inició una serie de debates [1, 2] en el grupo de trabajo de CSS para proporcionar información sobre la compatibilidad de la tecnología de fuentes del navegador en JavaScript y de forma declarativa en CSS. El equipo planea lanzar una eficiente detección de funciones para fuentes de color y otras tecnologías de fuentes en una versión futura de Chrome.

Si deseas usar fuentes de color en tu proyecto ahora mismo, cuando la compatibilidad con COLRv1 se limita a Chrome, hay dos formas de hacerlo: Pídele a tu proveedor de fuentes una fuente COLRv1 que también contenga glifos monocromáticos. Los usuarios-agentes que no admiten COLRv1 volverán a renderizar glifos monocromáticos. Como alternativa, puedes usar la biblioteca de ChromaCheck o el análisis de usuarios-agentes para determinar si la compatibilidad con COLRv1 está disponible. Luego, entregas CSS que cargan fuentes COLRv1 en la compatibilidad de los usuarios-agentes y usas un formato de fuente alternativo, como COLRv0, un formato de fuente de mapa de bits o SVG de OpenType en otros navegadores.

Compatibilidad con la paleta de fuentes de CSS

Sería sumamente útil si, para usar un conjunto de colores diferente, no se necesitaría una fuente nueva. Afortunadamente, existe un mecanismo: la propiedad font-palette CSS. El equipo de Chrome está trabajando para agregar compatibilidad con font-palette en Chrome.

Fuentes COLRv1 y tú

Si las fuentes COLRv1 te interesan, pregúntale a tu proveedor de fuentes qué fuente de color COLRv1 puedes usar en tu proyecto, prueba los ejemplos y las demostraciones anteriores o ¿por qué no profundices y crea la tuya?

Si tienes comentarios sobre COLRv1 en Chrome, realiza una publicación en la lista de distribución de blink-dev o informa un problema en nuestra Herramienta de seguimiento de errores. Si tienes comentarios sobre el formato de fuente COLRv1, informa el problema en el repositorio de GitHub de la especificación COLRv1.

Con Chrome 98, nos entusiasma cómo COLRv1 aporta un nivel completamente nuevo de creatividad tipográfica a la Web.

Más información

Si quieres obtener más detalles, tenemos algunos recursos más para ti:

Para saber cómo funciona COLRv1 y cómo se implementa en Chrome, mira la charla BlinkOn 15 de Dominik.

Agradecimientos

Muchas gracias a Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens1 y otros por sus contribuciones.