Share
Veamos un enfoque alternativo para mostrar logotipos en una página web. Normalmente, abordará el desafío utilizando una
En primer lugar, una palabra rápida sobre la marca. La identidad visual (cuando se hace correctamente) está diseñada muy bien y muy específicamente. Tipografía, colores, espacios en blanco, variantes: eche un vistazo a las pautas de marca corporativa de cualquier producto o empresa y se dará cuenta rápidamente de los pequeños márgenes de interpretación..
Los logotipos no pueden ser aproximados; deben reproducirse con precisión, por lo que dependemos de los archivos de imagen para mostrarlos en las páginas web.
La mayoría de las páginas web muestran un logotipo (lo que te hace preguntarte por qué no hay
o usando una técnica de reemplazo de imagen en el contenido del ancla:
Logo
h1 a # logo font: 0/0 a; texto-sombra: ninguno; color: transparente; fondo: url (images_19 / your-logo-as-a-web-font-ligature.png);
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é pasa con el tema de las pantallas de alta densidad de píxeles. Para que las técnicas anteriores funcionen en un mundo de la retina, una segunda versión de alta resolución del logotipo tendrá que mostrarse cuando sea necesario. O una versión SVG en su lugar. Ambas posibilidades, pero ¿qué tal si nos apoyamos en las fuentes web diseñando nuestra propia ligadura??
Piénsalo:
Para una explicación detallada, eche un vistazo a nuestra Anatomía de la tipografía web. Para resumir, 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 junto al otro (Florida siendo un ejemplo clásico) una ligadura puede diseñarse para ayudar. El glifo de la ligadura se "asigna a" (asociado con) la combinación de letras en cuestión. Cuando el navegador encuentra esa combinación, cambia las letras para una única ligadura.
Una de las muchas ligaduras disponibles de Adobe Caslon Pro Este principio no solo tiene que aplicarse a la letra. pares ya sea; Los glifos se pueden asignar a cadenas enteras.
Nuestro glifo de ligadura será un logotipo de aplicación falso (llamado "Vectr"; la última vocal se eliminó para demostrar que es una aplicación ...) y se asignará a la cadena "Vectr".
No se equivoque, IcoMoon ha hecho que este proceso sea fácil. Antes de que apareciera IcoMoon, habría 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), o como SVG, luego convertirías a TTF usando otra herramienta. Entonces, por fin, cargaría su TTF a un generador de webfont para darle su producto final..
Con IcoMoon, todo lo que necesitas hacer es ...
Antes de comenzar cualquier cosa, vamos a necesitar un logotipo, en forma vectorial. Muchos formatos de archivos vectoriales se pueden abrir y editar en una variedad de aplicaciones gráficas. Secuencias de comandos de publicación encapsulada (EPS), secuencias de comandos de publicación (PS), formato de documento portátil (PDF) y gráficos vectoriales escalables (SVG) son algunos ejemplos comunes para el manejo de vectores.
Estoy utilizando Adobe Illustrator en este ejemplo, pero todo el proceso se puede aplicar a otras aplicaciones (como Inkscape de código abierto).
En primer lugar, preste atención a su artboard. Estamos diseñando efectivamente un glifo de fuente, que en circunstancias TrueType sería un cuadrado de 512, 1024 o 2048 píxeles. Esta es una convención, no un requisito, pero optaremos por que 1024px nos brinde una cuadrícula sólida de 64x16; Ideal para diseñar tipos de letra alrededor de un tamaño predeterminado de 16px.
Nuestro glifo se imprimirá con todo el cuadrado de la mesa de trabajo a su alrededor, definiendo efectivamente nuestra medición "EM".
Al diseñar fuentes completas, es importante ubicar a todos los personajes en relación con los demás en este lienzo, de modo que todos se sientan a lo largo de la misma línea de base..
Estoy divagando ...
Con nuestro logotipo colocado correctamente en la mesa de trabajo, guardaremos el archivo como SVG. No hay una gran diferencia (en lo que concierne a nuestros propósitos) en las diversas configuraciones de SVG, solo vaya por los valores predeterminados y presione "guardar".
Arranca la aplicación web IcoMoon.io IcoMoon (desarrollado por el muy inteligente @Keyamoon) le permite seleccionar y mezclar glifos de íconos, mapearlos a los personajes de su elección y luego descargar el paquete @ font-face para usar en la web.
Eso además le permite cargar sus propios glifos (como SVG o TTF) para agregarlos a su colección. Importe el archivo SVG que acabamos de crear, luego verifique que se vea más o menos bien en la miniatura.
Puede 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 puede ver que hay un problema con las bolas en el extremo de cada mango en el logotipo.
¿Ves donde se cruzan las formas? No hemos combinado todos nuestros objetos vectoriales juntos correctamente en Illustrator, por lo que debo regresar y asegurarme de que se haga correctamente.
Con todo en orden, construyamos una colección de iconos..
Seleccione los iconos que necesite, incluido su logotipo, luego haga clic en "(Generar) Fuente". En este punto, recibirá una vista previa de cada glifo, incluidos los caracteres o las entidades Unicode a las que se asignarán..
Puede definir los caracteres usted mismo (si lo desea) o, como en nuestro caso, puede definir una cadena completa de caracteres para que actúe como una ligadura..
Abra el menú de Preferencias y marque la 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).
En la ventana de Preferencias, también puede optar por descargar su fuente como Base64, incrustada en el propio CSS en lugar de sentarse en el servidor como archivos de fuentes separados. Estoy optando por la codificación Base64, ya que nos salva aún más Peticiones HTTP.
Ahora, cuando haga clic en descargar, estará adornado con una demostración totalmente funcional; Un archivo HTML, todos los archivos de fuentes y el CSS que lo acompaña..
El CSS predeterminado le da la opción de seleccionar todos los elementos con un [icono de datos] atributo, o simplemente usando una clase de su elección en los elementos a los que desea aplicar el archivo de fuente. También se nos proporciona una carga completa de interesantes reglas tipográficas de CSS; Algunos de los cuales son específicos del navegador, pero todos ellos vale la pena echar un vistazo a:
hablar: ninguno; / * Habilitar ligaduras * / -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings-settings: "liga = 1, dlig = 1"; -moz-font-feature-settings: "liga", "dlig"; -ms-font-feature-settings-settings: "liga", "dlig"; -o-font-feature-settings-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; renderizado de texto: optimiza la legibilidad; estilo de letra: normal; fuente-peso: normal; Variante de fuente: normal; transformación de texto: ninguna; línea de altura: 1; -webkit-font-smoothing: suavizado;
Hay algunas reglas bastante experimentales para asegurarnos de que las ligaduras se usen siempre que sea posible, y luego 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. hablar: ninguno; lo que evita que el contenido sea "hablado" por los dispositivos relevantes (tal vez no sea necesario en el caso de nuestro logotipo). Entonces notarás la optimizarlegibilidad y webkit's suavizado de fuentes, Todas las buenas prácticas para garantizar que nuestra tipografía se muestre de manera óptima en varios navegadores..
De todos modos, ignorando esos estilos por ahora, todos nosotros Lo que hay que hacer es asegurarse de que nuestro elemento de logotipo tenga aplicada la nueva familia de fuentes:
Vectr
.logo font-family: 'vectr';
¡Eso es! Siempre que nuestro navegador encuentre un elemento con la clase "logo", con los contenidos "Vectr", se mostrará nuestro logo. Ahora, solo a través de CSS, podemos modificar el tamaño, el color, varios otros efectos de CSS y todos los 100% de resolución independiente.
Prepárese: las ligaduras no son compatibles con IE9 y versiones anteriores. Opera también ha eliminado el soporte desde la versión 10 (aunque como Opera se está moviendo a Webkit, es probable que cambie pronto). Todos los demás navegadores modernos, incluidas las plataformas móviles, juegan bastante bien a la pelota, pero deberá asegurarse de tener una solución alternativa para las versiones anteriores de Internet Explorer..
Una forma de hacerlo sería usar clases condicionales en su etiqueta HTML:
Estos le permiten identificar todas las versiones de IE; todo lo anterior a IE10 aquí se da la clase lt-ie10. Luego puede anular los estilos de su logotipo en navegadores anteriores, definiendo alguna alternativa a la ligadura de webfont:
html.lt-ie10 .logo fondo: algo-u-otro-cambiar-la-fuente-familia-y-así sucesivamente;
Accentsconagua