Fuentes de color OpenType-SVG

OpenType-SVG es un formato de fuente en el que una fuente OpenType tiene representados todos o solo algunos de sus pictogramas como ilustraciones SVG (gráficos vectoriales adaptables). Esto permite que se vean varios colores y degradados en un solo pictograma. Debido a estas particularidades, las fuentes OpenType-SVG son denominadas también como “fuentes de color“.

Las fuentes OpenType-SVG permiten ver el texto con estas características gráficas, al mismo tiempo que dan la opción de editarlo, indexarlo o buscarlo. Además, pueden incluir funciones OpenType con las que se pueden sustituir pictogramas o aplicar estilos de pictogramas alternativos.

Las fuentes de color como Trajan Color Concept y EmojiOne Color aparecerán como fuentes normales en los menús de fuentes de sus programas, pero es posible que no muestren todo lo que ofrecen, ya que muchos programas aún no admiten del todo los componentes de color. Si su programa de software no es compatible con el uso de ilustraciones SVG en las fuentes, los pictogramas pasarán a tener un estilo negro sólido. De todas formas, se podrá aplicar color a este estilo alternativo, ya que actuará como una fuente OpenType normal.

Photoshop (CC 2017 y versiones más recientes) admite fuentes OpenType-SVG e incorpora dos de estas fuentes: Trajan Color y EmojiOne. Trajan Color también viene incluida para aplicaciones web y de escritorio con la suscripción a Creative Cloud.

Para utilizar fuentes OpenType-SVG, siga estos pasos:

• Cree un párrafo o una capa de objeto de texto.
• Cambie la fuente a formato OpenType-SVG. Estas fuentes vienen indicadas en la fuente con el icono OpenType-SVG:
  

• Escriba con el teclado o seleccione pictogramas concretos en el panel Pictogramas. Para ver el panel Pictogramas, seleccione Ventana > Pictogramas.

Aunque se pueden escribir letras únicamente utilizando fuentes OpenType-SVG, la lista completa de pictogramas alternativos solo está disponible en el panel Pictogramas. Trajan Color Concept, por ejemplo, incluye 20 conjuntos estilísticos distintos para cada carácter, como, por ejemplo, plateado, cobre, azul acero y mármol, a los que es necesario acceder a través del panel Pictogramas.

Si convierte una capa de texto en una forma editable (tras seleccionar Texto > Convertir en forma), los caracteres de las fuentes OpenType-SVG recuperarán su estilo alternativo en blanco y negro.

Usar fuentes de color OpenType-SVG en Illustrator

Illustrator admite fuentes OpenType-SVG, como Trajan Color y Emoji One Color. Puede elegir pictogramas específicos en el panel Pictogramas y también puede acceder a este para crear pictogramas compuestos, así como examinar otras variantes de caracteres. Para obtener más información sobre las fuentes OpenType SVG en Illustrator, consulte https://helpx.adobe.com/illustrator/using/fonts.html#OpenTypeSVGfonts.

Trajan Color Concept

Trajan Color Concept es uno de los Adobe Type Concepts: un tipo de letra desarrollado con un proceso de desarrollo ágil y un carácter de reducido tamaño para poder enseñarlo antes a clientes exigentes y recibir sus comentarios a medida que avanzamos en el diseño.

Trajan Color Concept le permite elegir entre muchos colores y texturas diferentes (19). Por otro lado, el tamaño total del archivo se incrementa al usar ilustraciones SVG tan elaboradas para tener acceso a diferentes combinaciones de colores en los 20 conjuntos estilísticos (si esto le parece que los hace más difíciles de usar, estaría en lo cierto: es una de las razones por las que Trajan Color todavía se considera una fuente conceptual).

El estilo de color predeterminado (Dorado) y los primeros 18 conjuntos estilísticos OpenType en Trajan Color Concept incluyen todas las opciones multicolor disponibles en la fuente. El estilo alternativo, que se vería en aplicaciones que aún no admiten las funcionalidades de color de OpenType-SVG, es idéntico al conjunto estilístico 20.

EmojiOne Color

Las fuentes emoji son otro ejemplo de fuentes OpenType-SVG. Con las fuentes Emoji, es posible incluir varias imágenes gráficas y coloridas en los documentos, como emoticonos, banderas, señales de tráfico, animales, personas, comida, lugares emblemáticos, etc. Las fuentes OpenType-SVG de emojis, como la fuente EmojiOne, permiten crear algunos pictogramas compuestos a partir de otros pictogramas. Por ejemplo, se pueden crear banderas de países o cambiar el color de piel de algunos pictogramas que representan a personas y partes de sus cuerpos, como las manos y la nariz.

EmojiOne Color es una fuente de color de código abierto creada por Adobe a partir de la creación artística EmojiOne diseñada por Denis Denz y producida por Rick Moby. La fuente contiene todos los emojis en Unicode 9.0 y ofrece compatibilidad con emojis ZWJ, de variaciones de tonos de piel y de banderas de países.

Los caracteres de una fuente emoji, como EmojiOne, no coinciden con las letras del teclado. Solo se pueden insertar por medio del panel Pictogramas, según el sistema operativo correspondiente, es decir, Mapa de caracteres (Windows) y Caracteres (macOS), o copiando texto de una página de Internet como emojicopy.com.

Notas:

• También puede abrir el panel Pictogramas si selecciona Ventana > Espacio de trabajo > Gráfico y Web y luego hace clic en la pestaña Pictogramas.
• Los emojis utilizados recientemente aparecerán en la primera fila del panel Pictogramas.

En Photoshop, puede insertar una secuencia de pictogramas EmojiOne para plasmar otros pictogramas. Por ejemplo, se pueden crear banderas de países o cambiar el color de piel de personas o partes del cuerpo determinadas (esto no funciona con emojis de dos o más personas).

Crear banderas de países Las letras contenidas en un círculo (A, B, C, D, etc.) en EmojiOne no tienen correspondencia con ninguna tecla del teclado. Cuando se insertan estos caracteres a través del panel Pictogramas para componer un código ISO de país, los dos caracteres forman la bandera de ese país. Por ejemplo, US produce la bandera de EE. UU., GB produce la bandera del Reino Unido, AR produce la bandera de Argentina e IN produce la bandera de India. La lista completa de códigos viene indicada en la norma ISO 3166-1.

Crea variantes de caracteres Combine caracteres predeterminados de una sola persona o partes del cuerpo con cualquiera de los cinco tonos de piel disponibles según la escala Fitzpatrick (valores GID del 356 al 360). El carácter predeterminado original se reemplazará por uno que tenga el mismo tono de piel correspondiente. Estas composiciones no funcionan actualmente con pictogramas que representen a más de una persona.  

Notas:

• Los caracteres predeterminados de una sola persona o los emojis de partes del cuerpo solo se pueden emparejar una vez con cualquiera de los caracteres de tono de piel.
• Las secuencias de pictogramas son una función de fuente. No todas las fuentes OpenType-SVG le permitirán combinar varios caracteres para formar un único pictograma.

Usar fuentes OpenType-SVG con CSS

Las fuentes OpenType-SVG tienen funciones que se pueden habilitar a través de CSS, como otras fuentes OpenType. Consulte Uso de funciones OpenType y Sintaxis de funciones OpenType en CSS para repasar cómo se pueden usar estas funciones.

Los estilos de color adicionales en Trajan Color Concept, por ejemplo, se agrupan como funciones OpenType llamadas conjuntos estilísticos, que vienen acompañados de un número del 1 al 20 (ss01, ss02, ss03, etc.). Para aplicar uno de los 20 estilos al texto en Trajan Color, puede usar font-feature-settings para utilizar uno de los conjuntos estilísticos:

En los navegadores que no admitan fuentes OpenType-SVG, se verá el estilo alternativo (idéntico al conjunto estilístico 20).

Cuando añada fuentes web OpenType-SVG a su sitio, tenga en cuenta que es posible que los archivos sean de mayor tamaño que los de fuentes OpenType normales, ya que se incluyen ilustraciones SVG asociadas a todos o algunos de los pictogramas de la fuente.  

Aplicaciones que admiten fuentes OpenType-SVG

• Photoshop, versión CC 2017 y superiores
• Illustrator
  
• Firefox, versión 32 y superiores
• Microsoft Edge, Windows 10 Anniversary Edition y versiones superiores
• En Windows 10, los componentes de plataforma DirectWrite y Direct2D disponen de compatibilidad con OpenType-SVG en cualquier aplicación que use estas API

Problemas conocidos

Illustrator e InDesign

Es probable que surjan los siguientes errores al utilizar fuentes de color OpenType-SVG en Illustrator o InDesign:

• Los pictogramas podrán aparecer en posiciones incorrectas tras exportarlos a PDF o SVG.
• Al aplicar los efectos Distorsión, Rotar o Reflejo en fuentes de color SVG, los efectos podrán perderse o los caracteres podrán cambiar su posición original cuando se crean los contornos de los pictogramas. 
• Al colocar el texto verticalmente, los caracteres podrán aparecer en posiciones diferentes después de la exportación.
• Al colocar el texto en una disposición en espiral, los caracteres podrás aparecer colocados indebidamente.

Los equipos de software están trabajando para solucionar estos problemas. 

Otros recursos

A continuación le facilitamos algunos enlaces a otras fuentes de información para saber cómo preparar fuentes OpenType-SVG y hacer uso de ellas:

• Detalles y especificaciones de la tabla SVG en fuentes OpenType-SVG:
  https://www.microsoft.com/typography/otspec/svg.htm
• Herramientas y archivos de muestra para crear fuentes OpenType-SVG:
  https://github.com/adobe-type-tools/opentype-svg
• https://pixelambacht.nl/chromacheck/ es una página web que indica al usuario la compatibilidad del navegador con diferentes formatos de fuentes de color, incluidas las OpenType-SVG (el código fuente lo puede encontrar en https://github.com/RoelN/ChromaCheck).
• Participe en interesantes conversaciones sobre cómo preparar y usar fuentes OpenType-SVG en el foro de TypeDrawers: http://typedrawers.com/discussion/comment/19442/