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

También te puede interesar...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *