¿Hasta dónde puede llegar el diseño tipográfico?. Yo diría que este tipo de diseño no tiene límites; un buen ejemplo es este trabajo realizado por Michelle, cartas con un excelente diseño donde destacan los elementos tipográficos… ¡yo quiero unas!
Desde dafont nos llega una tipografía en 3D recortable estilo pixel. Gracias a Tobias Sommer podemos tener a nuestra disposición, para uso personal, una tipografía que podemos imprimir, recortar y pegar de la misma forma que un recortable.
Martino&JañaDesign surge como un interesante proyecto iniciado por el portugués João Martino y la chilena Alejandra Jaña. En su portafolio nos podemos encontrar trabajos de diseño gráfico, donde destaca los diseños tipográficos, diseños a lapiz, composición fotográfica o diseño retro.
Gracias a Creativos Online, tenemos acceso a una recopilación de 15 tipografías ligeras, que podemos utilizar para darle un aspecto más “limpio” a nuestros proyectos.
Los dingbats fueron inventados por Eddie Dolon, y nacieron como un adorno, caracter o espaciador utilizado en la composición tipográfica. Hoy en día se le llama dingbat a la tipografía que contiene símbolos y formas en lugar de los típicos y habituales caracteres alfabéticos o numéricos.
La llegada de Unicode ha permitido que este tipo de caracteres se hayan popularizado aún más, siendo utilizados para añadir casi cualquier tipo de símbolos de una forma rápida y sencilla.
En Internet, tienes a disposición multitud de sitios desde donde puedes descargar este tipo de fuentes, algunos de los cuales te muestro a continuación:
http://www.dafont.com/theme.php?cat=710
Una de las grandes ventajas de los nuevos navegadores, es el uso de @font-face para la inserción de tipografías personalizadas para la web. Es una gran noticia el que podamos elegir cualquier fuente teóricamente a integrar dentro de nuestras páginas web y aplicaciones en internet.
Por supuesto, soluciones como sIFR y Cufón han existido desde hace bastante tiempo, pero tienen sus desventajas (los dos son mejor usarlos sólo en los títulos, y Cufón no permite copiar y pegar su contenido). Si realmente quiere incrustar fuentes en sus páginas web, creo que @font-face es la solución más adecuada.
¿Por qué es importante incrustar las fuentes?
A la hora de maquetar una página, dependemos de las fuentes que tenga instaladas en su ordenador la persona que la esté visualizando. Éstas fuentes suelen ser genéricas, y muchas veces no se corresponden con la imagen que se desea dar desde la web.
Hasta no hace mucho, la única forma de poder ver un texto con una tipografía determinada se hacía por medio de imágenes; esto ralentizaba la carga de la página debido al peso de estas imágenes.
Formatos de fuentes
Hoy en día la mayor parte de los navegadores soportan la incrustación de fuentes. Todos ellos soportan el uso de fuentes TrueType (. Ttf) y OpenType (. Otf) … excepto Internet Explorer que sólo admite el formato Embedded Open Type (. EOT).
No hay muchas fuentes disponibles en este último formato, y la herramienta de Microsoft que convierte de TTF a EOT, llamada urdimbre, tiene un uso complicado y frustrante. Hay sin embargo una aplicación online que permite realizar este paso de una forma más sencilla, ttf2eot. Si desea convertir una fuente OpenType a Embedded Open Type, es necesario utilizar FontForge, una herramienta gratuita de edición, para convertir la fuente de TrueType, y luego usar ttf2eot para convertir la fuente resultante al formato EOT.
Dónde obtener fuentes que puedas usar en la web
Aunque ahora es técnicamente posible integrar casi cualquier tipografía dentro de la página, es importante recordar que si se utiliza una fuente comercial para este propósito, se debe tener licencia para hacerlo. Es por esta razón que gran parte de los navegadores no permitían incrustar las fuentes.
Afortunadamente, hay algunos sitios que han recopilado decenas de fuentes para usar de forma libre y gratuita:
¿Cómo insertar la fuente en la página?
Una vez que tienes la fuente que deseas insertar, primero se declara dentro de la hoja de estilos:
@font-face {
font-family: 'Droid Sans';
/* for IE */
src: url('/shared/fonts/DroidSans/DroidSans.eot');
/*
* for non-IE: first see if the font exists locally on the browser's
* computer. If so, use that copy of the font. Otherwise, load it
* from the server
*/
src: local('Droid Sans'),
url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}
Después se incluye la fuente dentro de cualquiera de los selectores del CSS, de la misma forma que se haría con cualquier otra fuente.
body {
font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}
Hay que tener en cuenta que aún se deberían añadir fuentes alternativas, para navegadores que no soporten @font-face.
Conclusión
Aún queda mucho por mejorar en este aspecto, que @font-face acabe siendo un estándar y que todos los navegadores lo soporte correctamente y de la misma forma. Pero ésta es una solución bastante aceptable que puede solucionarnos muchos quebraderos de cabeza.
Font Squirrel es un excelente sitio que nos ofrece cientos de tipografías para descargar de forma gratuita. Pero lo que sorprende de este sitio, que lo diferencia de los demás, es lo trabajado que está.
No ofrece cualquier tipo de tipografía para descarga, sino que todas son de gran calidad; existe la posibilidad de filtrar por categoría o formato, y una vez que encontramos una fuente que nos interese, podemos ver la información y los formatos, realizar una prueba con el texto que nosotros queramos, ver el mapa de caracteres, la licencia y descargar el archivo para utilizarla en local en nuestro ordenador, o el paquete @font-face para utilizarla en la web. Yo creo que más no se le puede pedir a esta página.
Las siguiente recopilación, realizada por TutorialFeed, incluye toda una completa serie de fuentes gratuítas para descarga y para su uso en cualquiera de tus proyectos. La siguiente lista incluye la mayor parte de fuentes Serif y Sans-Serif como Serifan, Serifab, Serifat, Vaground, Bitstream Vera Serif, Stonsans, Bastardus Sans, Museo Sans, Ambrosia Demo etc.
A veces, a la hora de diseñar un logotipo, pasamos demasiado tiempo intentanto insertar diferentes elementos que hagan especial la imagen de la marca en cuestión, cuando lo más efectivo sería destacar la sencillez de un logotipo basado en una tipografía concreta, al cual se le podría añadir únicamente algún pequeño detalle.
Esto es lo que nos muestran en 1stwebdesigner, una relación de logotipos sencillos pero de gran belleza, basados únicamente en tipografía.
Los ambigramas son palabras o frases escritas o dibujadas de tal modo que admiten, al menos, dos lecturas diferentes. La segunda lectura se podrá hacer tras hacer algún tipo de operación con el dibujo original. En la mayoría de los casos, la segunda lectura se realiza tras girar el dibujo 180º, estamos ante los llamados ambigramas de simetría central; en otros, la segunda lectura se producirá al ver la imagen reflejada en un espejo, son los ambigramas de simetría horizontal o vertical; finalmente existen ambigramas que no tienen ningún tipo de simetría pero, aún así, existe una segunda lectura del mismo.
Últimos comentarios