Las fuentes más utilizadas en diseño web y su compatibilidad

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.

CSS Font Stack

CSS Font Stack

VER ARTÍCULO ORIGINAL EN CSS FONT STACK

Más artículos relacionados

 

Comparte este Blog de Diseño Web
Alucinantes efectos en texto con jQuery

Alucinantes efectos en texto con jQuery

Efectos en texto con jQuery

Efectos en texto con jQuery

Hoy traemos más jQuery para diseño web. En este caso se trata de efectos aplicados a párrafos y textos en general.

Podréis simular desde el típico efecto de máquina de escribir, hasta los efectos más alucinantes que hasta ahora sólo eran terreno flash.

A continuación os dejo el listado de efectos junto a la dirección en la que podéis descargarlos. Espero que os sirvan.

CONTINUAR LEYENDO “Alucinantes efectos en texto con jQuery” »

Comparte este Blog de Diseño Web
Impresionante generador de texto curvo con CSS y HTML5

Impresionante generador de texto curvo con CSS y HTML5

Generador de texto curvo en CSS y HTML5

Generador de texto curvo en CSS y HTML5

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 !!!

 

Comparte este Blog de Diseño Web
50 fuentes Grunge GRATIS!!!

50 fuentes Grunge GRATIS!!!

Fuentes Grunge Gratis

Fuentes Grunge Gratis

Es evidente que en los últimos tiempos el grunge ha influido notablemente en el diseño web.

En este blog de diseño web, ya hemos abordado varias veces el tema del grunge en el diseño web.

Hoy os dejo el enlace a un interesante post de madtuts.com en el que podréis descargaros gratuitamente 50 fuentes grunge para vuestros diseños web.

Espero que os sean de utilidad.

Comparte este Blog de Diseño Web
30 fuentes Graffiti GRATIS !!!

30 fuentes Graffiti GRATIS !!!

Fuentes Graffiti Gratis

Fuentes Graffiti Gratis

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.

Espero que os gusten.

POST RELACIONADOS CON EL GRAFFITI

Comparte este Blog de Diseño Web
Rotar texto Html con CSS

Rotar texto Html con CSS

Rotar texto Html con CSS

Rotar texto Html con CSS

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" />

<title></title>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
position:absolute;
padding:45px 5px 0px;
margin:0px;
}
.fecha .mes {
text-transform: uppercase;
font-size:25px;
}
.fecha .dia {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.fecha .year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #fff;
}
</style>
</head>
<body>
<div class="fecha">
<span class="dia">31</span>
<span class="mes">July</span>
<span class="year">2009</span>
</div>

</body>
</html>

CONTINUAR LEYENDO “Rotar texto Html con CSS” »

Comparte este Blog de Diseño Web
Fuentes GRATIS !!!

Fuentes GRATIS !!!

Los mejores sitios para descargarte gratuÃtamente una tipografÃa

Los mejores sitios para descargarte gratuítamente una tipografía

Existen muchos sitios en los que descargarse fuentes gratis, unos destacan por la cantidad de tipografías que ofrecen, otros ofrecen menos pero son más selectos, en cualquier caso con este listado seguramente que encontréis una tipografía que se adapte a vuestras necesidades.

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.

AbstractFonts, cientos de fuentes que no sólo puedes descargarte, si no que también puedes hacer pruebas tanto en tipografías como en tamaño de texto.

UrbanFonts, esta web además te permite cambiar el color tanto del background como de la fuente para ver el resultado antes de descargártela.

TypeNow, la particularidad de esta web, es que puedes descargarte fuentes que se han hecho famosas en series, películas,… (Star wars, Simpsons,…)

Comparte este Blog de Diseño Web
¿Cómo usar cualquier fuente en tu web con jQuery?

¿Cómo usar cualquier fuente en tu web con jQuery?

Con jQuery podemos usa cualquier tipograf�a en nuestra web.

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.

Comparte este Blog de Diseño Web
Lorem ipsum dolor sentarse amet….

Lorem ipsum dolor sentarse amet….

Lorum ipsum dolor

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.

Comparte este Blog de Diseño Web
Las fuentes más usadas en diseño

Las fuentes más usadas en diseño

Las fuentes más usadas en diseño

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: CONTINUAR LEYENDO “Las fuentes más usadas en diseño” »

Comparte este Blog de Diseño Web

Trajan, una fuente típica en los carteles

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… 😉

Comparte este Blog de Diseño Web
Tamaño de fuente en el diseño web

Tamaño de fuente en el diseño web

Tamaño de fuente en el diseño web

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. CONTINUAR LEYENDO “Tamaño de fuente en el diseño web” »

Comparte este Blog de Diseño Web