Fuentes de color Guía de un principiante

Entonces, ¿qué diablos es una fuente de color? Es un término que sigue apareciendo y está empezando a ganar fuerza, aunque el uso en grandes proyectos de diseño aún está en su infancia.

Los proveedores como el Typekit de Adobe han comenzado a lanzar algunas opciones de fuente de color con soporte de navegador, por lo que hay un movimiento hacia un uso más amplio. Algunos incluso han llamado a las fuentes de color "la próxima gran cosa en el diseño web".

Aquí, veremos la tendencia y le dejaremos decidir qué tan grande - o no - Este concepto será.

¿Qué es una fuente de color?

Las fuentes de color son casi exactamente como suenan. Tipos de letra que incluyen varios colores, sombras o degradados, texturas o transparencias. Estas opciones no solo están agregando color a las letras, sino que son tipografías específicas con todos los detalles incluidos.

Las fuentes de color pueden incluir formas vectoriales, imágenes de mapa de bits o ambas en los archivos de fuentes, lo que puede hacer que estas fuentes sean más pesadas que los paquetes de fuentes estándar. Los ejemplos comunes de fuentes de color incluyen un tipo de letra emoji o una letra que contiene iconos dentro. Las fuentes de un solo color en este estilo a menudo se denominan fuentes cromáticas, ya que solo contienen un tono o gris.

El mayor problema con las fuentes de color en este momento es que no existe un formato estándar verdadero. Y hay un problema con todos esos formatos de archivo: las imágenes vectoriales y SVG se pueden escalar con facilidad, pero las versiones de mapa de bits podrían tener limitaciones de tamaño.

En realidad hay cinco formatos para tratar:

  • SBIX (Apple): versión de mapa de bits con soporte nativo en sistemas Mac e iOS
  • CBDT (Google): versión de mapa de bits con soporte nativo en sistemas Android
  • COLR (Microsoft): versión vectorial con soporte nativo en sistemas Windows 8.1+
  • SVG (W3C): versiones vectoriales y de mapa de bits
  • OpenType SVG (Adobe / Mozilla): versiones vectoriales y de mapa de bits que colocan formas SVG en fuentes OpenType

Por otro lado, los principales actores están empezando a adoptar pautas de uso. Mozilla (la columna vertebral del navegador web Firefox) y Adobe acordaron que OpenType SVG es el formato preferido; otros todavía están en proceso de cambio cuando toman una decisión.

Si quieres entrar en el meollo de la cuestión de cómo funcionan estas fuentes y todas las especificaciones de formato de archivo, Fontself tiene una cartilla bastante buena.

¿Cómo se usan las fuentes de color?

Uno de los dos pensamientos sucede cuando ves una fuente de color por primera vez:

  • Wow, eso es horrible!
  • ¡Guay! ¡Sé exactamente cómo usar eso!

No importa en qué campamento se encuentre, hay aplicaciones que son perfectamente adecuadas para las fuentes de color. Pero hay que usarlos dentro de lo razonable. (Las fuentes de color son para la mayoría de los usos moderados.)

Intente una fuente de color:

  • Para una técnica que llama la atención por una palabra corta.
  • Para un icono o elemento de estilo logo
  • Para una tapa de caída para iniciar un largo bloque de texto
  • Para un tratamiento de encabezado audaz en un diseño de estilo minimalista.
  • Para enfocar una palabra o palabras específicas en un bloque grande de texto
  • Cuando el resto del diseño sea sencillo.
  • Cuando la tipografía será tu principal elemento artístico.
  • Cuando el proyecto exige algo divertido e inusual para captar la atención del usuario.
    • Cómo no usar fuentes de color

      Hay más formas de no usar fuentes de color de las que probablemente pueda contar. No querrá revertir el diseño del sitio web a algunos de los destellos, el parpadeo y la abrumadora locura de color de los años noventa.

      No use una fuente de color:

      • Con imágenes o encima de imágenes.
      • Con fondos ocupados
      • Por mucho texto
      • Con muchas otras técnicas de diseño, como animación o movimiento; el color solo suele ser suficiente para crear impacto visual
      • Con otras tipografías novedosas o especializadas.

      Una tendencia en evolución

      La tendencia de la fuente de color está empezando a ganar fuerza de algunos de los principales actores de la tipografía. El formato OpenType SVG adoptado por Adobe y Mozilla podría ser la herramienta y el formato que ayuden a que esta tendencia realmente despegue. Adobe incluso recientemente agregó fuentes de color a Photoshop (es posible que hayas notado algunos emojis en la paleta de caracteres).

      Así es como Adobe explica OpenType SVG:

      ? 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".

      ? Las fuentes OpenType-SVG permiten que el texto se muestre con estas calidades gráficas, al mismo tiempo que permite editarlo, indexarlo o buscarlo. También pueden contener características OpenType que permiten la sustitución de glifos o estilos de glifos alternativos.

      ? Las fuentes de color como Trajan Color Concept y EmojiOne Color aparecerán como las fuentes típicas en los menús de fuentes de sus programas, pero es posible que no muestren todo su potencial, ya que muchos programas aún no tienen soporte completo para los componentes de color. Si su programa de software no admite la ilustración SVG dentro de las fuentes, los glifos volverán a un estilo negro sólido. El color todavía se puede aplicar a este estilo alternativo, ya que funcionará como una fuente típica de OpenType.

      Además, The State of Web Type tiene una sección dedicada a actualizar el soporte del navegador para las fuentes de color para que puedas determinar cuándo es el momento adecuado para dar el paso.

      En términos de la evolución de las fuentes de color y la adopción del uso, dos cosas desempeñarán un papel importante:

      • Adopción y compatibilidad con navegadores para proyectos de diseño web (en este momento, más diseños de fuentes de color aparecen en la impresión debido a problemas de compatibilidad)
      • Las técnicas generales de estilo y si las técnicas de diseño más ornamentadas y coloridas son tendencias generales

      Pruebe una fuente de color

      Si las fuentes de color son lo tuyo, puedes descargar una fuente de color para comenzar o crear la tuya, según el tipo de proyecto de diseño.

      Crea tu propio

      El tipo de fuente de color que crea realmente depende de sus habilidades de software. Una fuente de color puede incluir cualquier cosa, desde imágenes de tus fotos favoritas hasta hermosas burbujas y trazos en colores degradados. Puede hacerlo completamente solo o usar una herramienta para ayudar a diseñar una fuente de color personalizada.

      • Fontself es un complemento de Adobe Illustrator o Photoshop que te ayuda a crear fuentes de color personalizadas
      • Puedes dibujar y diseñar todo desde cero con este tutorial de Glyphs
      • FontLab tiene un video tutorial que recorre el proceso paso a paso

      Descargar o incrustar

      Hay algunas fuentes de colores muy interesantes por ahí que están gritando para que las uses en un proyecto hoy. A continuación, se incluyen algunas para impulsar el flujo de creatividad de la fuente de color (más los enlaces a las otras fuentes de color utilizadas anteriormente):

      • Tipo con orgullo
      • Toalla de playa
      • Bungee
      • Fuente de acuarela
      • Bixa Color
      • Juguetes de los niños
      • OneLine Bold
      • Gurú
      • Neón

      Conclusión

      ¿Estás listo para saltar en la tendencia de la fuente de color? ¿Es demasiado o el soporte irregular es un problema real para sus proyectos?

      Personalmente, encuentro que esta tendencia es muy divertida y tiene un uso práctico real en proyectos impresos, como carteles de eventos o folletos. Sin embargo, todavía no estoy del todo convencido de los proyectos de sitios web El tiempo solo dirá si esta tendencia realmente se convierte en la próxima gran cosa en el diseño web. u otra moda pasajera.