Las mejores fuentes web gratuitas para 2018

Publicado: 2018-10-26

Las fuentes que elija para su sitio web de WordPress juegan un papel importante en el diseño general. No es una ocurrencia tardía de ninguna manera. ¡Simplemente cambie todos sus titulares a Comic Sans si necesita ver pruebas! Bien, eso es un poco drástico. Pero, con la tipografía, incluso el cambio más pequeño puede marcar una diferencia significativa. Gracias a la web (y especialmente a Google), hay un montón de fuentes web gratuitas para ayudarte a elegir la mejor. Por lo tanto, si está buscando un poco de inspiración o una actualización de la fuente de su sitio actual, le recomiendo que explore la lista a continuación para explorar algunas de las mejores fuentes web que el mundo del diseño tiene para ofrecer.

Las mejores fuentes web gratuitas para 2018

Suscríbete a nuestro canal de Youtube

Aquí están 40 de las mejores fuentes web disponibles en 2018 (¡y son gratuitas!)

1. Roboto

mejores-fuentes-web-1

Roboto está destinado a ser un matrimonio entre formas geométricas y curvas amigables. Crea un ritmo de lectura natural y funciona bien como título, titular o tipo de cuerpo. La versión condensada, Roboto Condensed, también es extremadamente popular.

Obtener la fuente

2. Pantalla de Playfair

mejores-fuentes-web-2

Playfair está influenciado por la transición de la tecnología de escritura / impresión de finales del siglo XVIII; cuando las plumas fueron reemplazadas por plumas de acero puntiagudas. También está influenciado por el tipo de letra John Baskerville y el tipo de letra de William Martin para el "Boydell Shakspeare". Es genial para títulos y titulares.

Obtener la fuente

3. Open Sans

mejores-fuentes-web-3

Diseñado como una buena cara de tipo neutral, Open Sans es muy amigable y legible. Bueno para títulos, titulares o texto del cuerpo.

Obtener la fuente

4. Montserrat

mejores-fuentes-web-4

Esta fuente fue creada originalmente por Julieta Ulanovsky. Su inspiración para el diseño de la fuente provino de todos los hermosos letreros y carteles que vio en Montserrat, un barrio de Buenos Aires. Se ve maravilloso en títulos cortos con letras grandes en mayúsculas.

Obtener la fuente

5. Merriweather

mejores-fuentes-web-5

Este tipo de letra serif es extremadamente agradable de leer en el cuerpo del texto en todo tipo de pantallas porque fue creado para la web. También funciona muy bien para los títulos.

Obtener la fuente

6. Lato

mejores-fuentes-web-6

Lato fue diseñado específicamente para uso corporativo. Tiene un aspecto profesional que se presta bien para usar en varios tamaños. Sus detalles semi-redondeados también le dan una calidez que atrae a las multitudes.

Obtener la fuente

7. Bebas Neue

mejores-fuentes-web-7

Esta fuente sans serif "todas mayúsculas" es extremadamente popular y considerada una de las mejores fuentes web gratuitas por una buena razón. ¡Crea pantallas de aspecto asombroso para los encabezados de su sitio web!

Obtener la fuente

8. Noto Sans

mejores-fuentes-web-8

Noto Sans es único en el sentido de que fue creado para verse bien en varios idiomas. Debido al espacio horizontal entre letras, se ve muy bien en el texto del cuerpo y en páginas con mucho contenido.

Obtener la fuente

9. Fuente Sans Pro

mejores-fuentes-web-9

Source Sans Pro se diseñó principalmente teniendo en cuenta las interfaces de usuario. Esto será una excelente fuente de menú, pero también se puede usar para otras cosas, como el texto del cuerpo.

Obtener la fuente

10. Oswald

mejores-fuentes-web-10

Este tipo de letra sans serif es una fuente maravillosa para la web porque se formó para adaptarse a la cuadrícula de píxeles de las pantallas digitales. Es una fuente estrecha que no ocupa mucho espacio, por lo que funciona muy bien para encabezados grandes con mucho texto.

Obtener la fuente

11. PT Sans

mejores-fuentes-web-11

PT Sans es parte de un proyecto llamado “Tipos públicos de la Federación de Rusia” destinado a uniformar la visualización de texto en varios idiomas (similar a Noto Sans). Esta fuente es buena para múltiples propósitos.

Obtener la fuente

12. Rubik

mejores-fuentes-web-12

La fuente rubik fue diseñada por Philipp Hubert y Sebastian Fischer para crear una fuente sans serif con esquinas ligeramente redondeadas en las que las letras encajan perfectamente dentro de los cuadrados del cubo de Rubik. La fuente funciona muy bien tanto para los encabezados como para el cuerpo del texto.

Obtener la fuente

13. Nunito Sans

mejores-fuentes-web-13

Esta fuente sans-serif es una versión no redondeada de Nunito. Es una fuente popular para interfaces de usuario y se ve muy bien para elementos como paneles, menús de restaurantes y listas de precios.

Obtener la fuente

14. Fira Sans

mejores-fuentes-web-14

Esta popular fuente web fue diseñada originalmente para Mozilla FirefoxOS para una legibilidad clara en todos los tamaños de pantalla. Úselo como un tipo moderno para múltiples propósitos.

Obtener la fuente

15. Work Sans

mejores-fuentes-web-15

Esta fuente sans serif está diseñada como fuente web simplificada que se ve muy bien en todas las pantallas. Utilice pesos más pesados ​​para pantallas de título grandes y espaciosas y el peso normal para un texto de cuerpo fácil de leer.

Obtener la fuente

16. Poppins

mejores-fuentes-web-16

Poppins es una tipografía sans serif geométrica moderna basada en el diseño Devanagari que resalta la forma del círculo geométrico de esta hermosa fuente. Siéntase libre de usar esta fuente tanto para los títulos como para el cuerpo del texto para un diseño que sea muy agradable a la vista.

Por si no lo has notado, también es la fuente utilizada en nuestro blog.

Obtener la fuente

17. Josefin Sans

mejores-fuentes-web-17

Esta tipografía es hermana de Josefin Slab (también una gran fuente). Fue diseñado para ser geométricamente elegante y para agregar un toque vintage. Use un espaciado de letras negativo para títulos más grandes y puede mantener el agradable espaciado de letras predeterminado que proporciona para el texto del cuerpo.

Obtener la fuente

18. Ubuntu

mejores-fuentes-web-18
Ubuntu es una fuente sans-serif diseñada para la web y destinada a ser una fuente de uso general. Bueno para títulos, titulares, botones y texto del cuerpo por igual.

Obtener la fuente

19. PT Serif

mejores-fuentes-web-19

PT Serif es la nueva incorporación a la familia PT Sans, por lo que los dos funcionan bien juntos como combinación de fuentes. Es un tipo armonioso que funciona bien para casi cualquier cosa.

Obtener la fuente

20. Muli

mejores-fuentes-web-20

Esta fuente sans serif funciona muy bien para sitios web que tienen un diseño minimalista. Funciona mejor para títulos grandes, pero también puede funcionar para el texto del cuerpo.

Obtener la fuente

21. Arvo

mejores-fuentes-web-21

Arvo es un tipo de letra serif geométrico destinado a ser un tipo "mixto" bueno para múltiples propósitos. Se puede utilizar para títulos, titulares y texto del cuerpo.

Obtener la fuente

22. Oxígeno

mejores-fuentes-web-22

Esta fuente sans serif fue creada por Vernon Adams teniendo en cuenta las interfaces de usuario. Está diseñado para ser claro y legible para que se vea genial en todos los tamaños de pantalla. ¡Úselo para el texto del cuerpo, los elementos del menú y los botones!

Obtener la fuente

23. Raleway

mejores-fuentes-web-23

Raleway es una fuente san serif elegante y fina que probablemente se utilice mejor para títulos, subtítulos y titulares.

Obtener la fuente

24. Noto Serif

mejores-fuentes-web-24

Al igual que Noto Sans, Noto Serif se creó para verse bien en la web en varios idiomas y es una excelente fuente multipropósito que se ve hermosa en todas las pantallas. Úselo con Noto Sans como una combinación de fuentes perfecta también.

Obtener la fuente

25. Nunito

mejores-fuentes-web-25

Nunito es un tipo de letra sans serif ligeramente redondeado que funciona muy bien para la tipografía de pantalla grande. Es una fuente popular para interfaces de usuario. Usar el peso normal para títulos grandes se ve muy bien.

Nunito

26. Archivo

mejores-fuentes-web-26

Archivo es un tipo sans serif grotesco (más antiguo) que tiene una agradable sensación técnica. Se ve especialmente bien en la web como fuente de encabezado.

Obtener la fuente

27. Abril Fatface

mejores-fuentes-web-27

Como sugiere el nombre, Abril Fatface es un tipo "más grande". Está destinado a ser una renovación de los estilos clásicos de Didone. En particular, carteles publicitarios británicos y franceses del siglo XIX. Esta fuente es maravillosamente elegante y probablemente sea la mejor para títulos y titulares.

Obtener la fuente

28. Éxodo 2

mejores-fuentes-web-28

Exo 2 es una nueva versión de Exo diseñada por Natanael Gama. Esta tipografía contemporánea tiene un toque técnico y futurista. A diferencia de Exo, Exo 2 también funciona muy bien para el texto del cuerpo.

Obtener la fuente

29. Barlow

mejores-fuentes-web-29

Barlow se inspira en el público de California (matrículas, letreros, autobuses, etc.). El diseño es ligeramente redondeado y tiene versiones condensadas que hacen grandes encabezados sin ocupar mucho espacio.

Obtener la fuente

30. Slabo 27px

mejores-fuentes-web-30

Slabo 27px es un tipo de letra único que (al igual que su fuente hermana Slabo 13px) está optimizado específicamente para ver el tamaño de píxel de su nombre. Esto la convierte en una excelente fuente web para titulares claros, ligeramente condensados ​​y fáciles de leer.

Obtener la fuente

31. Aleo

mejores-fuentes-web-31

Aleo es una fuente slab serif similar a la popular fuente Lato. Está diseñado con detalles elegantes y semi redondeados que lo convierten en una buena opción para los títulos y el cuerpo del texto.

Obtener la fuente

32. Arenas movedizas

mejores-fuentes-web-32

Este es un tipo de letra de pantalla sin serif que sigue siendo una opción popular en la web. Tiene un diseño geométrico que se ve muy bien para los títulos.

Obtener la fuente

33. Cooper Hewitt

mejores-fuentes-web-33

Esta fuente sans serif contemporánea está diseñada con arcos geométricos únicos que funcionan bien con su pantalla condensada. Esta fuente se ve muy bien en mayúsculas como títulos, pero también se puede usar para el texto del cuerpo normal.

Obtener la fuente

34. Ostrich Sans

mejores-fuentes-web-34

Ostrich Sans es una fuente sans serif moderna que es ideal para títulos, logotipos y titulares.

Obtener la fuente

35. IBM Plex Sans

mejores-fuentes-web-35

Esta tipografía contemporánea fue diseñada específicamente para reflejar el espíritu de la marca IBM. Tiene un atractivo neutral y amigable que se puede utilizar para múltiples propósitos en su sitio web.

Obtener esta fuente

36. Cormorán

mejores-fuentes-web-36

Esta tipografía única fue diseñada (en su mayoría dibujada) desde cero por Christian Thalmann. Para resaltar las complejidades del tipo de letra, use esta fuente en su sitio web para pantallas más grandes como títulos.

Obtener la fuente

37. Alegreya Sans

mejores-fuentes-web-37

Esta fuente sans serif se diseñó originalmente para la literatura, por lo que funciona muy bien como cuerpo de texto debido a su armonioso espaciado entre párrafos.

Obtener la fuente

38. Libre Franklin

mejores-fuentes-web-38

Esta tipografía sans serif es una versión contemporánea de la fuente clásica Franklin Gothic. Úselo para encabezados o texto del cuerpo. Funciona muy bien si se usa como texto de encabezado y se combina con Libre Baskerville como texto del cuerpo.

Obtener esta fuente

39. Libre Baskerville

mejores-fuentes-web-39

Esta hermosa fuente web es un tipo de letra de alta calidad que parece ser perfecto para un cuerpo de texto único y legible. Funciona bien si se combina con Libre Franklin.

Obtener esta fuente

40. Liga Spartan

mejores-fuentes-web-40

League Spartan es una fuente sans serif de un solo grosor (negrita) que funciona bien para crear títulos y encabezados fuertes y hermosos.

Obtener la fuente

¿Qué pasa con las fuentes de escritura?

Si encuentra que la lista carece de fuentes de escritura (o escritura a mano), no está equivocado. Pero eso no significa que no haya algunos grandes gratuitos (Mali, Indie Flower, Pacifico y Dancing Script, por nombrar algunos). También puede consultar esta lista de hermosas fuentes de script gratuitas y premium.

Algunos consejos rápidos sobre el emparejamiento de fuentes

Cuando busque actualizar la tipografía de su sitio web, es una buena idea considerar cómo funcionan juntas las diferentes fuentes.

Aquí hay algunos consejos para ayudarle a empezar:

  • Manténgalo simple, no use demasiadas fuentes a la vez.
  • Manténgalo legible.
  • Piense en opuestos. Por ejemplo, empareje un serif con un sans serif o negrita con delgado.
  • O manténgalo en la familia. Utilice diferentes pesos y estilos de fuentes en la misma familia.
  • Intenta coincidir con el estado de ánimo de tu contenido.
  • Experimente y conserve lo que funciona.

(Para Google Fonts también puede usar su herramienta de emparejamientos gratuita)

Para obtener más información sobre el emparejamiento de fuentes, consulte nuestro artículo completo sobre 7 principios clave.

Pensamientos finales

Espero que esta lista de fuentes ayude en el proceso de encontrar la fuente perfecta para su próximo proyecto. Y recuerde, muchas de estas fuentes tendrán diferentes pesos y estilos que puede modificar para crear innumerables diseños. ¡Diviértete explorando!

¡Salud!