Fuentes de color: guía para principiantes
Tabla de contenido
Fuentes de color: guía para principiantes
¿Qué demonios es una fuente de color? Es un término que no deja de aparecer y que está empezando a ganar adeptos, aunque su uso en grandes proyectos de diseño aún está en pañales.
Proveedores como Typekit de Adobe han empezado a lanzar algunas opciones de fuentes de color compatibles con los navegadores, por lo que hay cierto 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 hasta qué punto... o no - será este concepto.
Ver más
¿Qué es una fuente de color?
Las fuentes de color son casi exactamente como suenan: tipos de letra que incluyen varios colores, matices o degradados, texturas o transparencias. Estas divertidas opciones no se limitan a añadir color a las letras, sino que son tipos de letra específicos 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 estos tipos de letra sean más pesados que los paquetes de fuentes estándar. Algunos ejemplos comunes de fuentes de color incluyen un tipo de letra emoji o una letra que contiene iconos en su interior. Las fuentes de un solo color de este estilo suelen denominarse fuentes cromáticas, porque sólo contienen un tono o gris.
El mayor problema de las fuentes en color en la actualidad es que no existe un verdadero formato estándar. Y todos esos formatos de archivo tienen un inconveniente: las imágenes vectoriales y SVG pueden escalarse con facilidad, pero las versiones de mapa de bits podrían tener limitaciones de tamaño.
En realidad, hay que tratar con cinco formatos:
- 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 directrices de uso. Mozilla (la espina dorsal del navegador web Firefox) y Adobe han acordado que OpenType SVG es el formato preferido; otros están aún en proceso de decisión.
Si desea conocer a fondo cómo funcionan estas fuentes y todas las especificaciones de los formatos de archivo, Fontself tiene un manual muy bueno.
¿Cómo se utilizan las fuentes de color?
Cuando ves por primera vez una fuente de color, puedes pensar dos cosas:
- ¡Vaya, qué horror!
- ¡Genial! ¡Sé exactamente cómo usar eso!
Independientemente del bando en el que te encuentres, hay aplicaciones que se adaptan perfectamente a las fuentes de color. Pero hay que usarlas dentro de lo razonable (las fuentes de color son para los usos más parcos entre los parcos).
Pruebe con una fuente de color:
- Para llamar la atención sobre una palabra corta
- Para un icono o un logotipo
- Para iniciar un bloque de texto largo con una letra mayúscula
- Para un tratamiento audaz de los titulares en un diseño de estilo minimalista
- Centrar la atención en una o varias palabras concretas de un gran bloque de texto.
- Cuando el resto del diseño es sencillo
- Cuando la tipografía será su principal elemento artístico
- Cuando el proyecto exige algo divertido e inusual para captar la atención del usuario
- Con imágenes o sobre imágenes
- Con fondos ocupados
- Para mucho texto
- Con muchas otras técnicas de diseño, como la animación o el movimiento, el color por sí solo suele bastar para crear impacto visual.
- Con otros tipos de letra novedosos o especiales
- Adopción y compatibilidad con los navegadores para proyectos de diseño web (ahora mismo aparecen más diseños con fuentes de color en la impresión por problemas de compatibilidad).
- Técnicas generales de estilo y si las técnicas de diseño más ornamentadas y coloridas son tendencia en general.
- 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 tutorial en vídeo que explica el proceso paso a paso
- Escriba con orgullo
- Toalla de playa
- Puenting
- Fuente acuarela
- Bixa Color
- Juguetes infantiles
- OneLine Negrita
- Gurú
- Neón
Cómo no usar fuentes de color
Hay más formas de no utilizar fuentes de color de las que probablemente pueda contar. No querrá que el diseño de su sitio web retroceda a la locura de colores parpadeantes y abrumadores de los años noventa.
No utilices una fuente de color:
Una tendencia en evolución
El formato OpenType SVG adoptado por Adobe y Mozilla podría ser la herramienta y el formato que ayude a que esta tendencia despegue realmente. Adobe incluso ha añadido recientemente fuentes de color a Photoshop (puede que haya visto 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 sólo algunos de sus glifos representados como 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 mostrar texto con estas cualidades gráficas, al tiempo que permiten editarlo, indexarlo o realizar búsquedas. 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 fuentes típicas en los menús de fuentes de sus programas, pero es posible que no desplieguen todo su potencial, ya que muchos programas aún no son totalmente compatibles con los componentes de color. Si su programa de software no es compatible con las ilustraciones SVG dentro de las fuentes, los glifos volverán a un estilo negro sólido. El color aún se puede aplicar aeste estilo alternativo, ya que funcionará como una fuente OpenType típica".
Además, The State of Web Type tiene una sección dedicada a la actualización de la compatibilidad de los navegadores con las fuentes en color, para que pueda determinar cuándo ha llegado el momento de dar el paso.
En cuanto a la evolución de las fuentes de color y la adopción de su uso, dos cosas desempeñarán un papel fundamental:
Pruebe una fuente de color
Si lo tuyo son las fuentes de color, puedes descargar una fuente de color para empezar o crear la tuya propia, dependiendo del tipo de proyecto de diseño.
Cree el suyo propio
El tipo de fuente de color que crees depende de tus conocimientos de software. Una fuente de color puede incluir cualquier cosa, desde imágenes de tus fotos favoritas hasta bonitas burbujas y trazos en colores degradados. Puedes hacerlo completamente solo o utilizar una herramienta que te ayude a diseñar una fuente de color personalizada.
Descargar o incrustar
Hay algunas fuentes de color muy chulas por ahí que están pidiendo a gritos que las utilices en un proyecto hoy mismo. Aquí tienes algunas para poner en marcha tu flujo creativo de fuentes de color (además de enlaces a otras fuentes de color utilizadas anteriormente):
Conclusión
¿Está listo para subirse a la moda de las fuentes de colores? ¿Es demasiado o el soporte irregular es un verdadero problema para sus proyectos?
Personalmente, esta tendencia me parece muy divertida y tiene un uso práctico real en proyectos impresos como carteles de eventos o folletos. Sin embargo, no me acaba de convencer cuando se trata de proyectos web. El tiempo dirá si esta tendencia se convierte realmente en "la próxima gran cosa del diseño web" o en otra moda pasajera.
