13 Jul ¿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 |  |
|||
| Constantia | |
|||
| Times New Roman | |
|
|
|
| Times | |
|
||
| Georgia | |
|
|
|
| Andale Mono | |
|
|
|
| Arial | |
|
|
|
| Arial Black | |
|
|
|
| Calibri | |
|||
| Candara | |
|||
| Century Gothic | |
|
|
|
| Corbel | |
|||
| Helvetica | |
|
||
| Impact | |
|
|
|
| Trebuchet MS | |
|
|
|
| Verdana | |
|
|
|
| Comic Sans MS | |
|
|
|
| Consolas | |
|||
| Courier New | |
|
|
|
| Courier | |
|
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:
- Ventaja: No tendrás que convertir nada, ni descargar, ni subirlo a tu alojamiento… Lo enlazarás directamente a las librerías de Google.
- 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!
1 comentario