Seguro que te ha pasado alguna vez de ir a alguna página web que te interesaba de verdad y acabar marchándote porque no había manera de leer lo que ponía con la letra tan pequeña y pegada. Y seguramente que alguna vez también te habrá pasado de estar leyendo un artículo muy interesante y pensar que ya podrían cambiar la fuente, que se hace muy pesada de leer.
Es posible que también a la hora de crear tu propio diseño web hayas pensado en no usar las fuentes típicas que usamos todos, como Open Sans, Helvetica o Arial. Así que he pensado de hacer una recopilación de diferentes tipografías de calidad que puedas usar para la web.
En diseño web tienes dos opciones para usar fuentes que el usuario no tiene instaladas en su ordenador:
- Usar Google Fonts
- Usar la propiedad de CSS3
@font-face
La ventaja principal de Google Fonts es que la fuente siempre se muestra, mientras que con @font-face es posible que en alguna versión de algún navegador no esté disponible. La otra ventaja de Google Fonts es que es más rápido de configurar, pero el principal contra que tiene es que añades más peticiones HTTP a la carga de la página web en cuestión, lo que se traduce en que el rendimiento web disminuye. Otra desventaja de Google Fonts es que puede haber una demora en mostrarse la fuente, lo que implica que primero se verá la fuente por defecto.
Fuentes Gratis Excelentes Para Diseño Web
En este artículo vamos a ver una serie de fuentes que podemos usar para diseño web con @font-face. Recuerda que es necesario que la tipografía en cuestión traiga consigo webfonts, en otro caso te servirá para aplicaciones como Photoshop o Illustrator pero no para insertar en el diseño web final.
Algo también a tener en cuenta es descargar la tipografía que admita acentos, ya que no todas lo traen consigo, así como diferenciar las fuentes que se pueden usar para titulares de las que son para texto, pues estas últimas no deben cargar la vista.
1. Raleway (usada en eSandra)
2. Enriqueta
3. Titillium
4. Springsteel (no todas gratis)
5. Alfa Slab
6. Ubuntu
7. Bebas Neue
8. Exo 2
9. League Gothic
10. Ostrich Sans
11. Colaborate
12. Droid Sans
13. Sansation
14. Code
15. Lato
16. Source Sans Pro
17. Capture it
18. Molot
19. Droid Serif
20. Nobile
21. Impact Label
22. Deja Vu Sans
Para acabar…
La tipografía es uno de los grandes olvidados en diseño web, pero de gran importancia. No todas las tipografías existen para diseño web, así que es importante que podamos usarlas con @font-face. Si se te ocurre alguna tipografía que no haya mencionado y que te guste especialmente para diseño web, te animo a dejar un comentario. Y si te ha gustado el artículo, será genial si lo compartes en las redes sociales.
Un abrazo!
Comentarios
carlos duarte
¿Qué fuente usas en el contenido del artículo de esta página?
Gracias.
eSandra
Lo digo en el artículo, Raleway.
un abrazo!
Sandra
n_n
ha sido muy util su post, para encontrar un buen tipo para mi web, saludos
eSandra
me alegro te haya servido
Pablo
Hola!
A mi una fuente que me encanta por su simpleza es Roboto, muy simple y que hace que te centres solo en el texto, no en su estilo.
Una pregunta, ¿Qué características debe tener una buena fuente para un menú?
Saludos.
eSandra
Pues la característica número #1 es que sea legible y accesible :-)
un abrazo!