Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements

Tu logotipo, como ligadura de fuente web

by
Length:MediumLanguages:

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

Veamos un enfoque alternativo para mostrar logotipos en una página web. Normalmente, abordarás el desafío utilizando una etiqueta <img>. Tal vez uses el reemplazo de imágenes a través de CSS, tal vez incluso te aventurarás en archivos SVG, pero ¿has considerado lo que es posible al diseñar tu propia ligadura de fuente web?


La importancia de una marca precisa

Primero, unas breves palabras sobre la marca. La identidad visual (cuando se hace correctamente) está diseñada de manera muy completa y específica. Tipografía, colores, espacios en blanco, variantes: echa un vistazo a las pautas de marca corporativa de cualquier producto o empresa y rápidamente te darás cuenta de los pequeños márgenes de interpretación.

Los logotipos no se pueden aproximar; deben reproducirse con precisión, por lo que dependemos de los archivos de imagen para mostrarlos en las páginas web.


Visualización de logotipos en páginas web

La mayoría de las páginas web muestran un logotipo (¿lo que te hace preguntarte por qué no hay un elemento <logo> o <brand>?) y a menudo se implementan con una etiqueta <img>:

o usando una técnica de reemplazo de imagen en el contenido del ancla:

Esto esta bien. El marcado dice "encabezado importante, enlace a la página de inicio, con contenido indexable (accesible) para decirnos de qué se trata". El CSS intercambia el contenido por una marca 100% visualmente precisa.

Pero, ¿qué sucede con el problema de las pantallas de alta densidad de píxeles? Para que las técnicas anteriores funcionen en un mundo de retina, se tendría que mostrar una segunda versión de alta resolución del logotipo cuando fuera necesario. O una versión SVG en su lugar. Ambas posibilidades, pero ¿qué tal si nos apoyamos en las fuentes web al diseñar nuestra propia ligadura?

Piénsalo:

  • Si ya estás usando íconos de fuentes web (¿por qué no lo harías?), Entonces parchear un glifo adicional en el archivo de fuente significaría que no hay solicitudes adicionales del servidor y muy poco ancho de banda adicional.
  • Tener tu logotipo en formato de fuente significa que puedes colorearlo con CSS como desees, con tantas variantes en la página como desees.
  • El uso de ligaduras significa que no hay necesidad de técnicas de reemplazo de imágenes (que son un poco breves, cuando todo está dicho y hecho).

Entonces, ¿qué es una ligadura?

Para obtener una explicación detallada, echa un vistazo a nuestra Anatomía de la tipografía web. En resumen, las ligaduras son combinaciones de pares de caracteres diseñadas a propósito. Si dos caracteres de una fuente se ven incómodos cuando se colocan uno al lado del otro (fl es un ejemplo clásico), se puede diseñar una ligadura para ayudar. El glifo de ligadura se “asigna” (asocia con) la combinación de letras en cuestión. Cuando el navegador encuentra esa combinación, cambia las letras por una sola ligadura.

ligature-fl
Una de las muchas ligaduras disponibles de Adobe Caslon Pro

Este principio no tiene por qué aplicarse únicamente a los pares de letras; los glifos se pueden asignar a cadenas completas.

Nuestro glifo de ligadura será un logotipo de aplicación falso (llamado "Vectr"; la última vocal se ha eliminado para demostrar que es una aplicación...) y se asignará a la cadena "Vectr".


El proceso

No te equivoques, IcoMoon ha facilitado este proceso. Antes de que apareciera IcoMoon, habrías necesitado usar una aplicación de diseño de fuentes (el editor de fuentes SVG de Inkscape es una de las pocas formas de hacerlo de manera asequible) para alinear y mapear cada glifo. Luego, guardarías el archivo, con suerte directamente como TTF (TrueType), alternativamente como SVG, luego de lo cual lo convertirías a TTF con otra herramienta. Luego, por fin, subirías tu TTF a un generador de fuentes web para darte tu producto final.

Con IcoMoon, todo lo que necesitas hacer es...


Finalmente, el tutorial

Paso 1: Archivo vectorial

Antes de comenzar cualquier cosa, necesitaremos un logotipo, en forma de vector. Se pueden abrir y editar muchos formatos de archivos vectoriales en una variedad de aplicaciones gráficas. Postscript encapsulado (EPS), postscript (PS), formato de documento portátil (PDF) y gráficos vectoriales escalables (SVG) son algunos ejemplos comunes de manejo de vectores.

Estoy usando Adobe Illustrator en este ejemplo, pero todo el proceso se puede aplicar a otras aplicaciones (como Inkscape de código abierto).

En primer lugar, presta atención a tu mesa de trabajo. Estamos diseñando efectivamente un glifo de fuente, que en circunstancias TrueType sería un cuadrado de 512, 1024 o 2048 píxeles. Esto es una convención, no un requisito, pero optaremos por 1024px para darnos una cuadrícula sólida de 64x16; ideal para diseñar tipos de letra con un tamaño predeterminado de 16 px.

ligature-artboard

Nuestro glifo se imprimirá con todo este cuadrado de la mesa de trabajo a su alrededor, definiendo efectivamente nuestra medida "EM".

ligature-em

Al diseñar fuentes completas, es importante colocar todos los caracteres en relación entre sí en este lienzo, de modo que todos se sitúen perfectamente a lo largo de la misma línea base.

Estoy divagando...

Con nuestro logo colocado correctamente en la mesa de trabajo, guardaremos el archivo como SVG. No hay una gran diferencia (en lo que respecta a nuestros propósitos) en las distintas configuraciones de SVG, simplemente ve a los valores predeterminados y presiona en "guardar".

ligature-svg-options

Paso 2: Súbelo a IcoMoon

Inicia la aplicación web IcoMoon.io. IcoMoon (desarrollado por el muy inteligente @Keyamoon) te permite elegir y mezclar glifos de iconos, asignarlos a los caracteres que elijas y luego descargar el paquete @font–face para usarlo en la web.

También te permite cargar tus propios glifos (como SVG o TTF) para agregarlos a tu colección. Importa el archivo SVG que acabamos de crear, luego verifica que se vea más o menos bien en la miniatura.

ligature-icomoon

Puedes reposicionar el logotipo y hacer pequeños cambios presionando el botón del lápiz y haciendo clic en la miniatura. De hecho, en la pantalla de edición puedes ver que hay un problema con las bolas al final de cada asa en el logotipo.

ligature-edit

¿Ves dónde se cruzan las formas? No hemos combinado todos nuestros objetos vectoriales correctamente en Illustrator, así que necesito regresar y asegurarme de que se haya hecho correctamente.

ligature-edit-correct

Con todo en orden, construyamos una colección de iconos.

Paso 3: Compilar la colección

Selecciona los iconos que necesites, incluido tu logotipo, luego haz clic en "(Generar) fuente". En este punto, se te dará una vista previa de cada glifo, incluidos los caracteres o entidades unicode a los que se asignarán.

ligature-map

Puedes definir los caracteres tú mismo (si lo deseas) o, como en nuestro caso, puedes definir una cadena completa de caracteres para que actúen como ligadura.

Abre el menú Preferencias y marca a casilla de verificación "Habilitar ligaduras". Ahora podemos ingresar una cadena de ligadura personalizada en el cuadro sobre el glifo. En nuestro caso, "Vectr" (y eso es sensible a mayúsculas y minúsculas, por supuesto).

ligature-mapped

En la ventana de Preferencias también puedes optar por descargar tu fuente como Base64, incrustada dentro del CSS mismo en lugar de usarlo en el servidor como un archivo fuente por separado. Estoy optando por la codificación Base64, ya que nos ahorra aún más las solicitudes HTTP.

Paso 4: Descargar

Ahora, cuando presiones descargar, estarás adornado con una demostración completamente funcional; un archivo HTML, todos los archivos de fuentes y el CSS que lo acompaña.

ligature-files

El CSS predeterminado te da la opción de seleccionar todos los elementos con un atributo [data-icon], o simplemente usar directamente una clase de tu elección en los elementos a los que deseas aplicar el archivo fuente. También contamos con una gran cantidad de reglas CSS tipográficas interesantes; algunas de las cuales son específicas del navegador, pero vale la pena echarle un vistazo a todas:

Hay algunas reglas bastante experimentales para asegurarte de que se usen ligaduras siempre que sea posible, luego algunas otras reglas (más estándar) que restablecen nuestra visualización de texto para los elementos en cuestión. Antes de todo lo que verás speak: none; evita que los contenidos sean "hablados" por dispositivos relevantes (quizás no sea necesario en el caso de nuestro logo). Entonces notarás el optimizado de legibilidad (optimizeLegibility) y el suavizado de fuentes (font-smoothing) de webkit, todas las buenas prácticas para garantizar que nuestra tipografía se muestre de manera óptima en varios navegadores.

Paso 5: Nuestro CSS

De todos modos, ignorando esos estilos por ahora, todo lo que tenemos que hacer es asegurarnos de que nuestro elemento de logotipo tenga la nueva familia de fuentes aplicada:

¡Eso es! Siempre que nuestro navegador encuentre un elemento con la clase "logo", con el contenido "Vectr", se mostrará nuestro logo. Ahora, solo a través de CSS, podemos alterar el tamaño, el color, varios otros efectos de CSS y todo 100% independiente de la resolución.


Mi gran advertencia griega

Prepárate: las ligaduras no son compatibles con IE9 y versiones anteriores. Ópera también ha eliminado el soporte desde la versión 10 (aunque como Ópera se está moviendo a Webkit, eso probablemente cambiará pronto). Todos los demás navegadores modernos, incluidas las plataformas móviles, lo corren bastante bien, pero deberás asegurarte de tener una solución alternativa para las versiones anteriores de Internet Explorer.

Una forma de hacer esto sería usar clases condicionales en tu etiqueta HTML:

Estos te permiten identificar todas las versiones de IE; todo lo anterior a IE10 aquí recibe la clase lt-ie10. Luego puedes anular los estilos de tu logotipo en navegadores anteriores, definiendo alguna alternativa a la ligadura de fuente web:


Recursos adicionales

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.