Uso de @font-face para realizar iconos con distintos colores

Desde hace ya tiempo, estamos viendo el uso de @font-face para cargar fuentes que contienen iconos en lugar de letras. Aunque tanto las ventajas como las desventajas de este uso son bastante discutibles, la desventaja que se comenta que más me ha llamado la atención es la de no poder crear iconos con varios colores, que es cierto sólo si se plantea la creación de un icono a partir de una única letra de la tipografía. Así, creo que podría plantearse separar en diferentes letras las formas del icono que tuvieran diferentes colores y luego juntarlas en el html para crear un icono multicolor. Esto, además, nos permitiría usar los diferentes elementos para ofrecer diferentes versiones de un mismo icono.

Para hacer esta prueba he seleccionado el logotipo de Repsol ya que tiene varios colores y he localizado un pequeño Manual de identidad corporativa de Repsol que me servirá, para en base a las diferentes formas del logotipo, mostrar las distintas versiones del mismo.

Lo primero que tengo que definir es la distribución de los elementos en las diferentes letras de la tipografía:

• Como no dispongo de la tipografía original de Repsol Ypf insertaré estas letras también en la tipografía que voy a crear y aunque debería colocar en su correspondiente letra de la fuente cada una de las letras del nombre del logotipo me será más cómodo colocar REPSOL en una letra e YPF en otra distinta, ya que no tengo intención de usarlas de otra forma.
• Cada elemento del icono del logotipo lo colocare en letras distintas de la tipografía ya que tienen diferentes colores.

Ahora hay que conseguir un programa de creación de tipografías. El primero que me ha venido a la mente es Fontographer, que quien haya trabajado con Freehand cuando pertenecía a Macromedia recordará que lo acompañaba en alguna versión, y aunque ahora pertenece a FontLab parece que sigue siendo un referente en su campo. No conozco en absoluto los detalles de este tipo de programas de creación de fuentes ni es uno de mis objetivos así que comentarios sobre el programa más adecuado o consejos para optimizar la creación de la fuente serán bien recibidos.

Una vez instalado FontLab Studio o Fontographer lo que tenemos que crear es nuestra nueva tipografía, así que File > New y podremos trabajar sobre el mapa de nuestra fuente.

En un archivo de Illustrator colocamos el logo y lo exportamos a EPS. Yo he usado la versión Illustrator 8 EPS. Volvemos a FontLab, hacemos doble click sobre una letra, por ejemplo la A (mayúscula), y aparece la ventana de glyph. Seleccionamos del menú File > Import > EPS… y abrimos el archivo exportado a EPS desde Illustrator que aparecerá en la ventana de glyph.

Ahora voy a cortar y pegar cada una de las partes en las diferentes letras de la tipografía, A:REPSOL, B: YPF, C: forma 1, D: forma 2, E: forma 3. Esta distribución me permitirá crear cualquiera de las versiones del logotipo que venían definidas en el manual de  identidad corporativa. Como he comentado antes, no sé nada de creación de fuentes pero hay que tener cuidado con la dirección de los contornos y que los trazados estén cerrados ya que de lo contrario podríamos obtener resultados no deseados. En mi primera prueba la fuente creada aunque se veía correctamente en la previsualización de impresión de Google Chrome se mostraban los huecos de las letras R, P y O como rellenos.

El siguiente paso es definir la información de la fuente. Para ello, seleccionamos en el menu File > Font Info… y en la ventana que aparece rellenamos los diferentes campos que aparecen y pulsamos OK.

Ya estaría la fuente lista para ser creada, así que lo único que tendríamos que hacer es seleccionar el menú File > Generate Font… y en la ventana que aparece darle un  nombre y seleccionar un formato, en mi caso TrueType.

Tenemos nuestra fuente truetype que podemos usar en nuestro ordenador pero necesitamos crear una fuente que funcione con @font-face en los diferentes navegadores, por lo que deberemos usar el @font-face Kit Generator de Font Squirrel, que en estos momentos “es la herramienta imprescindible para implementar @font-face“. Para realizar esta prueba he usado la configuración optimal del @font-face Kit. Una vez descargado el paquete generado podremos ver el resultado de cada uno de los glyphs en el archivo html que viene en el paquete.

Ahora es el momento de crear nuestro logotipo en html y experimentar con las diferentes versiones, así que creamos un documento html en el que insertamos el css que nos suministra el @font-face Kit y creamos un elemento en el body al que le asignamos nuestra fuente y en el que escribimos las diferentes letras que hemos usado.

Podemos ver que nuestra página muestra los diferentes elementos del logotipo.

Ahora vamos a ver cómo montamos el logotipo, que es algo tan sencillo como poner las diferentes letras en diferentes divs y aplicarles el estilo position:absolute. Para no insertar cada una de las letras dentro de cada div podemos usar  los selectores :before y :after en combinación con content. Esto nos permite modificar el contenido desde el css y evitamos insertar contenido sin sentido en nuestro código. Aquí sólo voy a usar :after para que se vea más claro el ejemplo pero usando los dos selectores podemos ahorrarnos algunas etiquetas en el html.

Usamos z-index para controlar el orden de apilamiento de los elementos. En este caso, he colocado detrás el último elemento ya que venía más grande por la parte superior en el manual de identidad y tapado ese sobrante por los otros dos elementos. A este elemento también le asigno positio:relative para que marque el tamaño del logotipo. Finalmente, asignamos los colores a cada uno de los elementos. El html correspondiente sería el que se ve a continuación.

Nuestro logotipo funciona en diferentes tamaños y le hemos asignado los colores rgb que indica el manual de identidad corporativa. Para mejorar la visualización del logotipo en los tamaños más pequeños podemos usar -webkit-font-smoothing: antialiased.