Se trata de una fuente condensada ideal para titulares modernos con un aspecto retro-vintage. Cuenta con 5 estilos diferentes y es de uso público.
En principio os puede parecer que no hay diferencia en el estilo alternate, si os fijáis por ejemplo en la barra horizontal de la letra A, veréis que en la variedad alternate, en lugar de estar situada a mitad de altura, está un poco más alta.
A continuación os dejos una imagen para que podáis ver su aspecto y el botón de descarga.
CSS Font Stack, nos muestra una relación de las fuentes más utilizadas a la hora de escribir textos en nuestros diseños web y su compatibilidad con los sistemas operativos Windows y Mac.
Además de poder ver cómo se ve y se lee cada una de las fuentes, podemos copiar el código font-family.
Ya sabéis que ahora podemos utilizar todo tipo de fuentes en el diseño web, como pudimos ver el el post de «diseño web con google web fonts«, aquí se trata simplemente de ver cómo queda en pantalla una fuente antes de usarla para nuestros títulos y párrafos.
Gracias al HTML5 el diseño web está viendo cómo paso a paso van cayendo todas las barreras que hasta ahora nos limitaban como diseñadores.
Gracias a CSSWarp ahora podemos diseñar un texto como si estuviésemos trabajando con Ilustrator. Con CSSWarp podemos rotar, inclinar, curvar el texto de tal modo que nos permite hacer cualquier diseño con él y luego obtenerlo como código HTML. Además también nos permite seleccionar cualquier tipo de fuente de Google Web Fonts, lo que lo convierte ahora mismo en la herramienta más potente para generar texto en CSS y HTML.
El uso no podría ser más simple, una pantalla gráfica nos ayuda a generar el diseño y una vez finalizado no tenemos más que pulsar sobre el botón «Generar HTML», sencillamente GENIAL !!!
El Diseño Web se nutre de una cantidad ilimitada de estilos, y la combinación de estos. Hace varios meses, escribí en este blog de diseño web un par de post relacionados con el graffiti y la respuesta fue increíble, se ve que hay mucho grafitero al que le interesa el diseño web, pues bien, he encontrado en dzineblog.com 30 fuentes grafiteras bastante buenas y gratuitas que seguramente os vengan bien para vuestros diseños, además podéis descargarlas tanto para Win como para Mac.
Hoy vamos a ver otro «truco de diseño web con CSS«. Vamos a girar un texto, algo que hasta ahora no quedaba más remedio que hacerlo con una imagen. Además contamos con la ventaja de que se ve en Explorer !!, como veremos más adelante para Explorer hay que hacer algún «retoque», pero se consigue girar, que es lo importante.
Ese «truco», nos permite abrir aún más el diseño de nuestros sites, utilizando además texto en Html, lo cual significa menor peso y ayuda al posicionamiento SEO.
A continuación vamos a ver el código necesario y lo fácil que es usarlo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Dafont, sin duda la más conocida. Tiene una biblioteca de fuentes fantástica para mac y win.
1001 Free Fonts, tiene muy buenas fuentes ordenadas por categorÃas. Una vez que eliges una fuente que te guste, tienes la opción de descargártelas para mac o win. Lo que le diferencia de otras webs de este tipo, es que puedes probar la fuente antes de bajártela.
A-Font, un blog con una treintena de fuentes muy buenas para descargarte.
Rfonts, muy buena web. Escribes una palabra y te la muestra en todas las fuentes disponibles. Muy útil para poder comparar.
Con jQuery podemos usa cualquier tipografía en nuestra web.
Una de las grandes limitaciones del diseño web, es el escaso abanico de fuentes que podemos usar para diseñar una web. Como es sabido, para que un usuario pueda ver una web con una determinada tipografía, debe de tenerla incorporada en su máquina.
Hace tiempo que surgió el sFIR, acrónimo de Scalable Inman Flash Replacement, mediante esta técnica, podemos reemplazar textos por flash. Seguramente por la complejidad de configuración no se ha hecho todo lo popular que debería, pero ahora, con la biblioteca jQuery, parece ser que hemos dado un gran paso adelante, gracias a la inmensa librería de plugins, el convertir un texto en swf es ahora mucho más fácil y rápido.
Gracias a jQuery, no necesitamos especificar color y demás atributos de la fuente. Además ahora ya no es necesario subir el archivo a producción o tener un servidor local para ver el resultado. Todo esto unido a que es más rápido e intuitivo, hace más atractiva la opción de comenzar a introducir nuevas fuentes en nuestros diseños.
Kemie Guaida nos ofrece un tutorial perféctamente ilustrado y todos los enlaces necesarios para poder usar esta técnica.
Cuando un diseñador tiene que simular los textos que aparecerán en una web, normalmente lo que hace es meter un texto ficticio. «Lorem ipsum» es un texto escrito en lenguaje clásico que además de despertar curiosidad, tiene una estructura similar a la que tendrán los textos finales de la web, con lo que el cliente puede hacerse una idea de cómo quedarán sus textos formateados.
El texto es de Cicerón y data del 45 dC.
Pues bien, existen muchas webs en las que recoger este texto para luego usarlo en nuestros diseños, pero sin duda la mejor de ellas es Dummy Text Generator, en esta web podrás definir los párrafos, la cantidad de caracteres o palabras, fuentes, tamaños etc… Todo online.
Sin duda una web imprescindible para cualquier diseñador.
Este post está documentado en un estudio que hizo Smashing Magazine.
Los diseños están limitados a la fuente que tiene el usuario instalada en su máquina. Este problema parece que se está solucionando (Sifr), aunque todavía no está muy desarrollado, será un enorme paso para poder tener más control sobre nuestros diseños (aunque esto será tema para otro post). Ahora lo que hacemos es colocar estos textos como imágenes, y según este estudio las fuentes más usadas son: (más…)
Curioso el video que he encontrado en youtube. Sabemos que las fuentes se ponen de moda y cuando lo hacen a veces llegan a saturar el mercado, pudiendo encontrarlas en web, prensa, televisión,… Pero lo de la fuente Trojan es curioso, el abuso de esta fuente a lo largo de la historia del cine es tremenda. Desde las antiguas películas de romanos hasta las más actuales, siguen sirviéndose de esta fuente para ilustrar sus carteles. Creada por Carol Twombly en 1989, esta tipografía está inspirada en las inscripciones que se encuentran talladas en la base de la columna de Trajano, levantada en Roma en 113 para conmemorar la conquista de Dacia por el emperador Trajano (53-117). Quien se lo iba a decir al emperador… 😉
Typographica, realizó un ranking de las mejores tipografías usadas el año pasado. Para ello contó con 25 de los diseñadores más representativos del mundo.
En este artículo podréis ver casi 40 fuentes, de las que particularmente a mi me han llamado especialmente la atención dos, «BistroScript» y «Los Nidos».
El uso de fuentes, como diseñador web, queda bastante limitado por tener que usar las fuentes «tipo» que el usuario tiene instaladas en su máquina. No vamos a entrar en este artículo en scripts especiales para poder usar otras fuentes.
Ahora gracias a las CSS y cada vez más, el usuario podrá tener la opción de decidir el tipo de letra con el que quiere ver nuestra web.
Decidir el tamaño de letra es muy importante a la hora de diseñar nuestra web, sin embargo hay que ser conscientes de que un mismo tamaño de letra no se ve igual por ejemplo, en Windows que en Mac. En un Mac, la resolución por defecto es de 72 dpi, mientras que en Windows es 96 dpi. (más…)
