Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Typography
Webdesign

Cómo utilizar fuentes de color en la Web

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Cada diseñador web sabe cómo ajustar el color de una fuente, ¿correcto? Es una de las primeras cosas que hacemos cuando empezamos a aprender CSS. Elegimos un color, luego utilizamos estilos para ajustarlo, como color: blue; o color: purple; , de tal modo que todos los glifos en nuestra fuente elegida cambien a ese color, y solo ese color.

Pero, ¿y si pudieras definir más de un color por glifo? ¿Qué sucedería si pudieras hacer que tus letras fueran azules y moradas, o que tuvieran degradados entre azul y morado, o incluso tener media docena de colores o más aplicados a una única fuente?

Bien, con la aparición de las fuentes de color Open Type, puedes hacer eso.

Fíjate en esta imagen de cuatro fuentes con distintos colores:

Podrían parecer imágenes fijas elaboradas en Illustrator, pero en realidad estás viendo un texto en vivo, editable y legible por un buscador en un navegador.

En vez de tener su color controlado a través de CSS, estas fuentes tienen información interna que les permite tener varios colores por glifo, creando una pantalla muy llamativa.

Utilizando fuentes de color

Las fuentes en color aún son bastante nuevas, por lo que no ha salido un número masivo de ellas, y entre las que están disponibles hay una combinación de fuentes gratuitas y de pago. Para asegurar de que puedas jugar con las fuentes en color, seleccioné cuatro fuentes gratuitas para nuestra demostración. Puedes obtener copias de estas fuentes en los siguientes lugares:

  • Gilbert en typewithpride.com
  • Abalone en colorfontweek.fontself.com
  • Playbox en colorfontweek.fontself.com
  • Bixa en bixacolor.com

El código utilizado para añadirlos a la página no es nada nuevo, es simplemente la vieja y simple @font-face que conoces y amas:

Navegadores y soporte

En este momento, si quieres probar las fuentes de color en el navegador necesitarár utilizar Firefox o Edge, los únicos dos navegadores con soporte completo. Safari limita el soporte al formato SBIX solamente. Chrome tiene soporte solo en Android, y solo para formato CBDT. Opera no tiene soporte en absoluto.

Modificación de CSS

En este momento no podemos utilizar CSS para cambiar los colores que se usan dentro de una fuente de color. Sin embargo, es posible que un diseñador de fuentes expida una fuente con varias variaciones preestablecidas incluidas. Esas variaciones pueden ser modificadas usando la propiedad font-feature-settings.

Podemos ver esta funcionalidad en acción mediante la demostración de Robin Rendle de la fuente  de color Trajan de TypeKit.

Los colores son fijos, incluso en los enlaces

Como los colores de una fuente de color están fijos dentro de la fuente misma, la propiedad color que generalmente aplicas a tu texto no tendrá ningún efecto, incluso en los enlaces, cualquiera que sea su estado.

También vale la pena estar consciente que si bien no se producirán cambios de color en los enlaces, aún pueden tener su decoración de texto de subrayado predeterminada aplicada, y que el subrayado recibirá cualquier color que especifiques por medio de tu CSS. Si decides combinar fuentes de color y enlaces, podría valer la pena utilizar dicho subrayado para ayudar a los usuarios a distinguir los enlaces del resto del texto.

Aquí hay un código como ejemplo:

Esto nos dará el subrayado rojo en la última palabra:

Concluyendo

Entre las fuentes de color y las fuentes variables, los desarrollos más recientes para Open Type hacen que las fuentes en el navegador sean mucho más divertidas e interesantes. ¡El futuro de la tipografía en el diseño web parece prometedor!

Enlaces relacionados


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.