Tag Archives: tipografías

Tipografías de Google Web Fonts en tus bocetos

Ahora, como ya sabrás, gracias a Google Web Fonts puedes usar una tipografía un poco fuera de lo normal. Ya no tenemos que ceñirnos a aquellas tipografías estándares que aparecían en todas las páginas webs (Arial, Trebuchet MS… ).

Usarlas en tu web es bastante sencillo, sólo tienes que elegir una de las tres formas que te ofrece Google:

Pero… ¿sabías que también puedes descargarlas para usarlas en tus bocetos? Sólo tienes que buscar la tipografía que te gusta entre todas las que ofrece Google en http://www.google.com/webfonts, una vez la elijas, añádela a tu colección haciendo clic en el botón “Add to collection“.

Puedes elegir más de una, añade todas las que quieras, y una vez que las tengas todas en tu colección (las verás en la parte inferior de la web), sólo tienes que descargarlas haciendo clic en “Download your Collection” que se encuentra en la parte superior derecha de la ventana:

Cuando lo pulses, verás que te aparece una ventana informándote que no es necesario que te la descargues para usarla en la web. Para descargarla, simplemente haz clic en “Download the font families in your Collection as a zip-file

Instálalas en tu ordenador y listo! Ya puedes empezar a usarlas para hacer tus bocetos en Fireworks, Photoshop, Illustrator…

¿Cómo elegir la tipografia web?

Seguramente, si has trabajado con diseñadores gráficos, más de una vez habrás tenido que explicar que no puedes usar cualquier tipografía… Pues ya sabes, para la próxima vez te lo ponemos fácil… Envíale este post y no perderás tiempo en explicarlo de nuevo!

Cuando vamos a diseñar una página web, uno de los aspectos más importantes es la elección de la tipografía. Y como es lógico, queremos que todos los usuarios vean la tipografía que hayamos elegido. Para ello, lo ideal es que revises la siguiente tabla y veas las tipografías disponibles en cada sistema operativo.

Windows XP

Windows Vista

Mac

Linux
CambriaDisponible
ConstantiaDisponible
Times New RomanDisponibleDisponibleDisponibleDisponible
TimesDisponibleDisponible
GeorgiaDisponibleDisponibleDisponibleDisponible
Andale MonoDisponibleDisponibleDisponibleDisponible
ArialDisponibleDisponibleDisponibleDisponible
Arial BlackDisponibleDisponibleDisponibleDisponible
CalibriDisponible
CandaraDisponible
Century GothicDisponibleDisponibleDisponibleDisponible
CorbelDisponible
HelveticaDisponibleDisponible
ImpactDisponibleDisponibleDisponibleDisponible
Trebuchet MSDisponibleDisponibleDisponibleDisponible
VerdanaDisponibleDisponibleDisponibleDisponible
Comic Sans MSDisponibleDisponibleDisponibleDisponible
ConsolasDisponible
Courier NewDisponibleDisponibleDisponibleDisponible
CourierDisponibleDisponible

Para tener más control sobre el diseño, es aconsejable indicar en el CSS fuentes alternativas, por ejemplo:

#Estilo {
font-family: Arial, Helvetica, sans-serif;
}

Si la primera fuente (Arial) no está instalada, el navegador usará la siguiente (Helvetica), y así sucesivamente. Al final, lo mejor es poner una fuente genérica (por ejemplo, sans-serif) por si ninguna de las anteriores estuviera instalada.

También tenemos la posibilidad de usar otras tipografías usando algunas técnicas que antes no existían, entre las cuales, creo que merecen especial atención las siguientes:

@font-face (FontSquirrel)

FontSquirrel es un repositorio donde podrás encontrar kits de fuentes, que posteriormente deberás enlazar desde la hoja de estilos CSS. También puedes crear tu propio kit a través de @font-face generator subiendo la tipografía que te interese.

Su uso es bastánte fácil. Sólo tendríamos que descargar o convertir la fuente y una vez que nos la descargamos, en el kit vendrá un archivo CSS, normalmente llamado stylesheet.css donde podremos ver el código que tendremos que insertar en nuestro CSS. Te aconsejo meterlo todo en una carpeta y cambiar las rutas si tu hoja de estilos está fuera.

Google Font API

Para mí es la mejor opción. Es muy parecido a lo anterior, pero con algunas diferencias:

  1. Ventaja: No tendrás que convertir nada, ni descargar, ni subirlo a tu alojamiento… Lo enlazarás directamente a las librerías de Google.
  2. Inconveniente: No podrás hacerlo con la tipografía que quieras, tendrás que elegir una de las que te proporciona Google en http://www.google.com/webfonts Pero cada vez son más las fuentes, así que no creo que no encuentres una que te guste.

Una vez que te hayas decidido por una, simplemente selecciónala y copia y pega el código que te aparece, del tipo:

<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>

Después en tu hoja de estilos, para usarla, hazlo como siempre. Por ejemplo:

font-family: 'Forum', serif;

Además de estas dos técnicas, existen más, entre ellas Cufón, que lo hace a través de Javascript. Si tú eres de los que usan alguna otra técnica ¿por qué no lo compartes con nosotros? ¡Nos encanta escuchar vuestras opiniones!