CSS

Paleta de fuentes de colores COLRv1 y CSS trucos CSS

Paleta de fuentes de colores COLRv1

Según Toshi Omagari, autor de Arcade Game Typography, el mundo la primera fuente digital multicolor fue creado en 1982 para un videojuego nunca antes lanzado llamado Insector. Fuentes multicolores, a veces llamadas tipo cromáticotodavía son relativamente raros en la web, aunque Formato de fuente COLR tiene soporte completo para varios navegadores desde 2018 (¡incluso en Internet Explorer!).

La tecnología revela toda una nueva veta de creatividad tipográfica. Si bien algunas de las fuentes de color que he visto son divertidas, en el mejor de los casos, las fuentes cromáticas son divertidas, innovadoras y llamativas. Ambos con la adición de nuevas funciones de CSS, que incluyen font-palette propiedad y @font-palette-values regla: controlar la paleta de colores de las fuentes de color y la evolución del formato de fuente COLR es un buen momento para sumergirse y experimentar con lo que puede hacer la impresión web moderna.

 

Soporte COLORES

La última vez que escribí sobre fuentes de color fue en 2018. En ese momento, había cuatro estándares diferentes para fuentes multicolores: OpenType-SVG, COLR, SBIX y CBDT/CBLC. Puedes usar cromacheck para ver qué formatos de fuente de color admite su navegador.

Google Chrome tiene marcó OpenType-SVG como «wontfix» lo que significa que el formato nunca será compatible con Chrome o Edge. SBIX y CBDT / CBLC se pueden ignorar en su mayoría para uso web, ya que ambos se basan en imágenes de mapa de bits y se vuelven borrosos en tamaños de fuente más grandes. El gran tamaño de archivo de las fuentes basadas en imágenes rasterizadas también las convierte en una mala elección para la web.

Ulrike Rausch es el creador de amorHeidefuente de color con gráficos rasterizados que copia asombrosamente el aspecto de un bolígrafo. «Mi mayor objetivo siempre ha sido reproducir un texto escrito a mano con la mayor autenticidad posible», me dijo. «Para LiebeHeide, finalmente logré simular estos atributos hechos a mano con Font. ¿La desventaja? Todas las imágenes PNG en el archivo de fuente se recopilan y dan como resultado un tamaño de archivo OTF enorme. Puede que esto no sea un problema para las aplicaciones de escritorio como Adobe InDesign, pero para el uso web, la fuente apenas es aplicable. »

Todos los navegadores admiten fuentes COLR (ahora conocidas comúnmente como COLRv0). La versión 98 de Chrome (y Edge), lanzada en febrero, agregó soporte para COLRv1, una evolución del formato.

Escritorio

Cromo Firefox ES DECIR Borde, final safari
71 32 9 12 11

Móvil / Tableta

AndroidCromo android firefox Androide iOSSafari
101 100 101 11.0-11.2

COLRv0 y COLRv1

Captura de pantalla de la fuente.
Fundición de ropa interior Póster

COLRv1 es parte de Estándar OpenType 1.9Si bien el COLRv0 original no tenía muchas de las capacidades creativas de OpenType-SVG, COLRv1 cumple con estas capacidades, evitando algunos inconvenientes. COLRv0, por ejemplo, solo podía hacer colores sólidos, mientras que COLRv1 podía lineal, radial, y gradientes cónicosEl formato también agrega componer y mezclar y permite reutilizar el formulario para ahorrar el tamaño del archivo.

Experto en imprenta Roel Niskins explica: “Solía ​​decir que el formato OpenType-SVG es el mejor formato porque ofrece la mayor flexibilidad, hasta que me di cuenta de que es demasiado complicado para trabajar a un nivel bajo como la representación de texto. Implementa un subconjunto básico de SVG en el nivel de visualización de fuentes. Pero no funciona bien con otras tecnologías tipográficas (sugerencias, ejes variables, etc.) y es difícil de implementar. Entonces, estoy del lado de COLR. COLR básicamente reutiliza todo lo que las fuentes OpenType ya han cambiado a Imam. «Solo» agrega capas y la capacidad de cambiar el color de cada capa. Sencillo pero efectivo».

COLRv1 es totalmente compatible con ejes de fuentes variables y ya hay ejemplos de fuentes variables COLR como Un signo de mérito, Color del cartel y color roche.

Aquí hay un ejemplo sorprendente de Ulrike Rausch sobre lo que es posible con la forma, fuente (actualmente no lanzada), que recrea digitalmente la apariencia de un letrero de neón:

Captura de pantalla de la fuente COLR en rosa brillante sobre un fondo claro y oscuro.

Akim Helmling del tipo de fundición Ropa interior está enamorado de COLRv1, diciéndome que «[t]El formato COLRv1 podría tener un impacto similar (o incluso mayor) en el diseño de fuentes que las fuentes variables en los últimos años. «Para Akiem, este es sin duda el formato excelente». Todos los formatos de color anteriores son malos trucos para agregar colores a los glifos. . Si bien algunos consideran que OpenType-SVG es una buena solución, desde mi punto de vista no lo es en absoluto. Desde un punto de vista pragmático, SVG es una «habitación cerrada» dentro de la estructura abierta de OpenType. No hay forma de reutilizar o vincular datos o de crear un vínculo entre otras tablas de fuentes y la tabla SVG. Y por lo tanto, no podemos crear una fuente variable con datos SVG variables».

Todavía es pronto para la forma. Mozilla aún no ha enviado COLRv1, pero sí posición positiva sobre el formato, afirmando que tiene «el potencial para reemplazar las fuentes OpenType-SVG cuando se usa en la web.» Apple no quiere implementarlo en Safari.

Las fuentes COLRv1 aún se mostrarán y se podrán leer en estos navegadores, pero todas las letras serán monocromáticas (que puede configurar con CSS color propiedad, como en una fuente normal). Veremos cuántas fundiciones tipográficas lanzan fuentes COLRv1, y algunas herramientas de diseño populares como Figma ni siquiera son compatibles con COLRv0, pero espero y creo que este será el futuro de la impresión en color en la web. En el poco tiempo que COLRv1 ha existido, ya hay algunos hermosos ejemplos de lo que la tecnología puede hacer, como Roma Kufi y las iniciales de Bradley.

PALETA DE COLORES y CSS

Si usa una fuente de color, probablemente quiera poder controlar sus colores. Hasta ahora, esto era imposible de hacer con CSS. font-palette la propiedad tiene el poder de reemplazar el esquema de color de fuente predeterminado y aplicar el suyo propio. Esta propiedad funciona en las fuentes COLRv0 y COLRv1. (de Apple Millas maxfield explica que las fuentes SVG pueden incluido en para usar paletas mientras todos los colores de la fuente COLR están automáticamente reemplazado por CSS).

Inventar una paleta de colores decente es un gran arte. Algunos diseñadores de fuentes han hecho el trabajo duro por nosotros e incluyen paletas alternativas dentro de la fuente. Puede elegir entre estos diferentes esquemas de color usando base-palette en CSS.

¿Cómo saber si una fuente ofrece una paleta alternativa? El sitio de fuentes puede decírtelo. Si no, hay una herramienta útil llamada Fundación Wakamai que enumerará todos los esquemas de color disponibles (que se muestran en la imagen a continuación). Para este ejemplo, usaré color rochefuente cambiable de color libre de Henrique Beier con atmósfera de los Picapiedra. Al mirar Wakamai Foundue, podemos ver que esta fuente usa cuatro colores y viene con once opciones de paleta diferentes.

Cuadrícula de valores de color hexadecimales.

Utilizando base-palette: 0 elegirá la paleta de colores predeterminada (en el caso de Rocher, estos son tonos de naranja y marrón).

Fuente Rocher COLR.

Utilizando base-palette: 1 seleccionará la primera paleta alternativa definida por el creador de la fuente, etc. En el siguiente ejemplo de código, selecciono una paleta de colores que tiene diferentes tonos de gris:

 @font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}

Una vez que haya seleccionado una paleta con CSS @font-palette-values regla, puede aplicarla usando font-palette Propiedad:

.grays {
  font-family: 'Rocher';
  font-palette: --Grays;
}

Por supuesto, es posible que desee crear tu propio paleta que combine con los colores de su marca o con su propia sensibilidad por el diseño. Si va a reemplazar todos los colores, entonces no es necesario base-palette.

Echemos cuerda elástica del diseñador tipográfico pionero david jonathan ross como ejemplo. Utiliza solo dos colores predeterminados, rojo y blanco. En el siguiente ejemplo, reemplazo los dos colores de fuente para que base-palette no importa y se omite:

 @font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values --GrayAndPink {
  font-family: bungee;
  override-colors:
    0 #ff3a92,
    1 #c1cbed;
}
Colorea la palabra en rosa y las fuentes en gris claro sobre un fondo saturado con una foto rosa.

Alternativamente, puede preguntar base-palette como punto de partida y cambiar selectivamente solo algunos de los colores. A continuación, uso la paleta de colores grises de Rocher, pero reemplazo un color con verde menta:

@font-palette-values --GraysRemix {
  font-family: Rocher;
  base-palette: 9;
  override-colors: 
    2 rgb(90,290,210);
}

body {
  font-family: "Rocher";
  font-palette: --GraysRemix;
}

Al aclarar override-colors es difícil saber qué parte de la fuente será reemplazada por qué número; debe jugar y experimentar y lograr el efecto deseado a través de prueba y error.

Fuente Rocher COLR.

Si lo desea, puede incluso cambiar el color de las fuentes de emoji, como Twemoji (que se muestra a continuación) o Noto. Aquí está un demostración divertida de Font Engineer en Google.

Perro de dibujos animados ilustrado marrón con orejas y lengua verdes.

Restricciones actuales

Una limitación desafortunada, al menos por ahora, es que las propiedades CSS personalizadas no funcionan. @font-palette-valuesEsto significa que lo siguiente no es válido:

@font-palette-values --PinkAndBlue {
  font-family: bungee;
  override-colors:
    0 var(--pink),
    1 var(--blue);
}

Otra limitación: animaciones y transiciones de una font-palette no se interpola a otra, lo que significa que puede cambiar instantáneamente de una paleta a otra, pero no puede animar gradualmente entre ellas. Desafortunadamente, mi sueño de una fuente animada divertida para emojis no se ha cumplido.

Compatibilidad con navegador

font-palette y @font-palette-values son compatibles con Safari desde la versión 15.4 y están en cromo y borde con el lanzamiento de la versión 101.

Escritorio

Cromo Firefox ES DECIR Borde, final safari
101 No No No 15.4

Móvil / Tableta

AndroidCromo android firefox Androide iOSSafari
101 No 101 15.4

Los casos de usar

Probablemente ya puedas imaginar cómo podrías usar fuentes de color en tus propios proyectos. Sin embargo, hay algunos casos de uso específicos que vale la pena mencionar.

COLR y fuentes de fuentes

Es posible que las fuentes de íconos ya no sean el método más popular para mostrar íconos en la web (Chris explica por qué), pero todavía se usan ampliamente. Si usa una fuente para íconos de varios colores, como Duotone de FontAwesome o íconos de dos colores de diseño de materiales, font-palette puede sugerir un método de personalización más fácil.

Cuadrícula de iconos de duotono.

Resuelve el problema con emoji

Nolan Lawson escribió recientemente sobre problemas con el uso de emojis en la web. Blog para desarrolladores de Chrome explica una solución actual bastante compleja:

Si admite contenido generado por usuarios, sus usuarios pueden estar usando emojis. Hoy en día, es muy común escanear texto y reemplazar todos los emojis que vienen con imágenes para garantizar una visualización consistente de diferentes plataformas y la capacidad de admitir emojis más nuevos que los que admite el sistema operativo. Luego, estas imágenes deben volver a convertirse en texto durante las operaciones del portapapeles.

Si obtiene más compatibilidad con el navegador, las fuentes emoji COLRv1 ofrecerán un enfoque mucho más simple. COLRv1 también tiene la ventaja de verse nítido en cualquier tamaño, mientras que los emojis naturales del navegador se vuelven borrosos y pixelados en tamaños de fuente más grandes.

Resumiendo

Antes de las fuentes de color, la creatividad web se limitaba a aplicar trazos o rellenos degradados con CSS. Siempre puede hacer algo más personalizado con una imagen vectorial, pero esto no es texto real: el usuario no puede seleccionarlo y copiarlo en el portapapeles, no se puede buscar en la página con El equipo+Фno es legible por lectores de pantalla o motores de búsqueda y solo necesitará abrir Adobe Illustrator para editar la copia.

Las fuentes de color tienen el potencial de captar realmente la atención del usuario, lo que las hace ideales para páginas de destino y pancartas. Puede que no sean algo que busque con frecuencia, pero prometen nuevas oportunidades de diseño web creativas y expresivas que pueden hacer que su sitio se destaque.

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba