fbpx

¿Cómo elegir la tipografia web?

¿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
Cambria Disponible
Constantia Disponible
Times New Roman Disponible Disponible Disponible Disponible
Times Disponible Disponible
Georgia Disponible Disponible Disponible Disponible
Andale Mono Disponible Disponible Disponible Disponible
Arial Disponible Disponible Disponible Disponible
Arial Black Disponible Disponible Disponible Disponible
Calibri Disponible
Candara Disponible
Century Gothic Disponible Disponible Disponible Disponible
Corbel Disponible
Helvetica Disponible Disponible
Impact Disponible Disponible Disponible Disponible
Trebuchet MS Disponible Disponible Disponible Disponible
Verdana Disponible Disponible Disponible Disponible
Comic Sans MS Disponible Disponible Disponible Disponible
Consolas Disponible
Courier New Disponible Disponible Disponible Disponible
Courier Disponible Disponible

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!

Etiquetas:
,
1 comentario

Déjanos un comentario