Tecnología y Coaching para Emprendedores

20+ Fuentes Excelentes Para Diseño Web. ¡Todas GRATIS!

tipografia

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:

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)

tipografia para la web


2. Enriqueta

tipografia para la web


3. Titillium

tipografia para la web


4. Springsteel (no todas gratis)

tipografia para la web


5. Alfa Slab

tipografia para la web


6. Ubuntu

tipografia para la web


7. Bebas Neue

free-fonts-2014-bebas-2


8. Exo 2

tipografia para la web


9. League Gothic

tipografia web


10. Ostrich Sans

ostrich-sans-5


11. Colaborate

colaborate font


12. Droid Sans

20_fonts_droid_sans-1-


13. Sansation

sansation-font


14. Code

code font


15. Lato

lato font


16. Source Sans Pro

Source+Sans+Pro


17. Capture it

capture-it_18975


18. Molot

Molot


19. Droid Serif

Droid+Serif


20. Nobile

nobile


21. Impact Label

impact label font


22. Deja Vu Sans

sp-720


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!