Las 60 mejores tipografías para tu web

El uso de tipografías para web siempre ha sido un problema. Por defecto, los navegadores web solo podían presentar el texto con las tipografías que el usuario tenía instaladas en su sistema operativo (Windows, Mac, Linux,…).

La mejor manera de hacerlo era con las llamadas tipografías seguras, un listado de tipos de letra que se utilizaban en orden establecido. Si la primera fuente no estaba disponible en el ordenador del usuario, se utilizaba la segunda fuente.Y, así, sucesivamente. Estas eran los familias de fuentes utilizadas:

Cuáles son las tipografías para web seguras

Las tipografías para web que funcionaban de manera adecuada en cualquier navegador han sido:

  • Verdana, Geneva, sans-serif.
  • Georgia, Times New Roman, Times, serif.
  • Courier New, Courier, monospace.
  • Arial, Helvetica, sans-serif.
  • Tahoma, Geneva, sans-serif.
  • Trebuchet MS, Arial, Helvetica, sans-serif.
  • Arial Black, Gadget, sans-serif.
  • Times New Roman, Times, serif.
  • Palatino Linotype, Book Antiqua, Palatino, serif.
  • Lucida Sans Unicode, Lucida Grande, sans-serif.
  • MS Serif, New York, serif.
  • Lucida Console, Monaco, monospace.
  • Comic Sans MS, cursive.

Una posible solución a este problema con las tipografías para web era utilizar imágenes, lo que permitía crear cualquier efecto con los textos de las webs. Esto suponía un aumento en el tiempo de descarga. Se solucionaba el tema del diseño, pero no era la solución.

Las nuevas tecnologías web y los nuevos navegadores permiten presentar cualquier fuente que quieras utilizar.

Bibliotecas de fuentes indispensables para cualquier diseñador

En muchas ocasiones no encuentras las tipografías para web adecuadas. Estas son algunas de las fuentes que puedes aprovechar para dar a tus páginas web un diseño tipográfico impactante:

No todas las fuentes valen para lo mismo. Elegir bien las tipografías para web puede marcar la diferencia de tu sitio web. Por eso, deberás probar cuál es la que mejor te conviene para combinarla con el diseño que elijas, teniendo en cuenta que lo más importante de las tipografías es su legibilidad.

[Banner-soporte]

A continuación tienes 60 mejores tipografías para web de Google Fonts para mejorar el diseño de tu página web:

1.- Lato

Lato

Lato es una familia tipográfica sans serif que comenzó en el verano de 2010 por el diseñador Łukasz Dziedzic, basado en Varsovia (“Lato” significa “verano” en polaco)

Su diseñador, trató de equilibrar cuidadosamente algunas prioridades potencialmente conflictivas. Quería crear un tipo de letra que pareciera bastante “transparente” cuando se usara en el texto del cuerpo, pero mostraría algunos rasgos originales cuando se usara en tamaños más grandes. Utilizó proporciones clásicas (particularmente visibles en mayúsculas) para darle a las formas de letra armonía y elegancia familiares.

2.- Open sans

Open Sans

Open Sans es una tipografía sans serif humanista diseñada por Steve Matteson, Type Director de Ascender Corp. Esta versión contiene el conjunto completo de caracteres 897, que incluye los juegos de caracteres ISO Latin 1, Latin CE, Greek y Cyrillic estándar. Open Sans fue diseñado con un estrés vertical, formas abiertas y una apariencia neutral, pero amigable. Estaba optimizado para impresoras, web e interfaces móviles, y tiene excelentes características de legibilidad en sus letras.

3.- Proxima nova

Proxima Nova

La familia Proxima Nova es una revisión completa de Proxima Sans (1994).

Desde el punto de vista estilístico, Proxima Nova abarca la brecha entre tipografías como Futura y caras sanas clásicas. El resultado es un híbrido que combina proporciones humanísticas con un aspecto algo geométrico.

4.- Source Sans Pro

Source Sans Pro

Fuente Sans Pro es un conjunto de fuentes OpenType que han sido diseñadas para funcionar bien en entornos de interfaz de usuario (UI). Además de una fuente funcional OpenType, este proyecto de código abierto proporciona todos los archivos fuente que se utilizaron para crear esta fuente OpenType mediante la herramienta AFDKO makeotf.

5.- Calibri

calibri

Calibri es la tipografía más popular para el correo electrónico, la mensajería instantánea y las presentaciones. También obtuvo buenos resultados para el uso en texto de páginas web.

6.- Cera

cera

Cera combina calidez con elegancia. En un compañero interesante para el diseño web.

7.- Montserrat

montserratDiseñadora: Julieta Ulanovsky. Es una diseñadora gráfica y propietaria de ZkySky, un estudio de diseño que fundó en 1989 después de obtener un título en Typeface Design. Vive y trabaja en Montserrat, el primer y más antiguo barrio de Buenos Aires. Julieta admira a muchos diseñadores como Harald Geisler y otros argentinos como Juan Pablo del Peral y Alejandro Paul. Actualmente está desarrollando nuevas variantes de Montserrat-itálicas, además de nuevos pesos y estilos, y sueña que pronto se convierta en una gran familia extendida.

8.- Helvetica® Neue

helveticaEsta tipografía, diseñada por Max Miedinger y otros miembros del proyecto en Haas’sche Schriftgiesserei, se ha convertido en una de las tipografías para web más famosas y populares del mundo, gracias a la estrategia de marketing de Stempel y Linotype. Forma parte integral de muchas impresoras y sistemas operativos. Las formas originales de Helvetica tuvieron que modificarse para el sistema Linotype. A lo largo de los años, Helvetica se amplió para incluir muchos pesos diferentes, pero estos no se coordinaron entre sí.

9.- Raleway

ralewayRaleway es una familia elegante del tipo de letra del sans-serif diseñada para los títulos y el otro uso grande del tamaño. Inicialmente diseñado por Matt McInerney como un solo peso delgado, fue expandido a una familia de 9 pesos por Pablo Impallari y Rodrigo Fuenzalida en 2012 y fue creado por Igino Marini.

10.- Keep Calm

keepcalmKeep Calm es una familia de fuentes desarrollada a partir del ahora famoso póster de la Segunda Guerra Mundial que fue diseñado en 1939, pero nunca emitido, luego redescubierto en 2000. Además de la fuente original Keep Calm, el peso medio del póster que se puede descargar gratis para uso personal, tres nuevos pesos están disponibles en K-Type – Book (regular), Heavy y Light – y cada uno viene con una Italic complementaria.

11.- Basic tittle

basictitle

Crea increíbles imágenes de texto o logotipos con diferentes colores y cientos de efectos de texto.

12.- Code

code

Es aplicable para cualquier tipo de diseño gráfico: web, impresión, gráficos en movimiento, etc., y es perfecto para camisetas y otros artículos como pósters, logotipos.

13.- Couture

couture

Tipo de letra utilizado por Chanel, perfecta para diseño de logotipos.

14.- Dolce Vita

dolce vitaEsta es una fuente mayúscula hecha para diseñadores, por diseñadores. Para logotipos, tipo de cuerpo, o cualquier otra cosa,

Dolce Vita viene en: Light, Normal, y Bold.

15.- Nova

nova

Mark Simonson, su diseñador fundó su estudio especializado en letras y tipografía en 2000. Había comenzado como diseñador gráfico e ilustrador en 1976, trabajando como director de arte en varias revistas y en la Radio Pública de Minnesota. Mark comenzó a otorgar licencias de fuentes a FontHaus en 1992 y ahora tiene más de 100 fuentes en el mercado.

16.- Quicksand

quicksand

Está diseñado para fines de exhibición, pero también es lo suficientemente legible para usar en tamaños pequeños.

17.- Asenine

asenine18.- Fine Style

asenine19.- Alegreya

alegreyaUna de las mas populares, perfecta para el cuerpo de texto de cualquier publicación o contenido digital. Puedes encontrarla en 6 versiones diferentes.

[Banner-soporte]

Diseñado por Huerta Tipográfica, una fundición argentina de colaboración con un profundo respeto por el diseño y la tipografía. Fundada en 2009, la compañía comenzó como un lugar para reunirse, cooperar y compartir experiencias mientras colaboraba en proyectos académicos y comerciales. Huerta Tipográfica desarrolla fuentes personalizadas y minoristas con licencias libres, patentadas o exclusivas, y está firmemente comprometido con la creación de tipos innovadores y funcionales. Su trabajo galardonado ha sido reconocido por Letter.2, Tipos Latinos y la Bienal Iberoamericana de Diseño.

20.- Asap

asapDiseñado por Omnibus-Type.

Asap es una familia de tipografías para web sans-serif contemporánea con sutiles esquinas redondeadas. Diseñado por Pablo Cosgaya, Asap (“tan pronto como sea posible”) hay 4 estilos: Regular, cursiva, negrita y negrita cursiva. Esta familia, especialmente desarrollada para el uso de pantalla y escritorio, ofrece un ancho de caracteres estandarizado en todos los estilos, lo que significa que las líneas de texto siguen siendo de la misma longitud. Esta función útil permite a los usuarios cambiar estilos de texto en movimiento sin tener que reenviar un cuerpo de texto. Asap se basa en Ancha (diseñado por Pablo Cosgaya y Hector Gatti), y ha sido desarrollado con la colaboración de Andrés Torresi.

21.- Merriweather

MerriweatherDiseñador

Tipo Sorkin

Merriweather fue diseñado para ser una cara de texto que es agradable de leer en las pantallas. Presenta una letra X muy grande, ligeramente condensada, una tensión diagonal suave, serifas robustas y formas abiertas.
También hay Merriweather Sans, una versión sans-serif que armoniza estrechamente con los pesos y estilos de esta familia serif.

22.- Roboto

roboto

Roboto tiene una naturaleza dual. Tiene un esqueleto mecánico y las formas son en gran parte geométricas. Al mismo tiempo, la fuente presenta curvas amables y abiertas. Mientras que algunos grotescos distorsionan sus formas de letra para forzar un ritmo rígido, Roboto no compromete, permitiendo que las letras se coloquen en su ancho natural. Esto hace que el ritmo de lectura más natural se encuentre más comúnmente en los tipos humanista y serif.

23.- Amaranth

AmaranthDiseñador Gesine Todt. Es un simpático diseño en cursiva vertical con un ligero contraste y curvas distintivas. ¡Con sus tres nuevos estilos Amaranth es saludable para todos sus textos también!

24.- Gentium Basic

gentiumbasicLa familia de fuentes Gentium Basic se basa en el diseño original de Gentium, pero con pesos adicionales. La familia viene con un completo conjunto de fuentes regulares, negrita, cursiva y negrita.
El conjunto de caracteres admitido, sin embargo, es mucho más pequeño que para las fuentes principales de Gentium Plus. Estas fuentes “Básicas” solo admiten los rangos básicos Unicode del complemento Latin y Latin-1, más una selección de los caracteres latinos extendidos más utilizados, con marcas diacríticas, símbolos y signos de puntuación diversos.

En particular, estas fuentes no son compatibles con IPA latino extendido completo, soporte completo para idiomas de Europa Central, griego y cirílico. Vea la página principal del proyecto Gentium para más detalles.
La familia Gentium Book Basic es muy similar pero tiene un peso ligeramente más oscuro.

25.- Noto Sans

notosansNoto ayuda a que la web sea más bonita en todas las plataformas para todos los idiomas. Actualmente, Noto cubre más de 30 scripts, y cubrirá todos los de Unicode en el futuro. Esta es la familia sin latín, griego y cirílico. Tiene estilos regulares, negrita, cursiva y cursiva en negrita y se insinúa. Se deriva de Droid, y como Droid tiene una familia hermana serif, Noto Serif.

26.- Ubuntu

ubuntu

El alcance de la familia de fuentes de Ubuntu incluye todos los idiomas utilizados por los diferentes usuarios de Ubuntu en todo el mundo, en sintonía con la filosofía de Ubuntu, que establece que todos los usuarios deben poder usar su software en el idioma que prefieran.

27.- Droid Sans

droidsansDroid Sans es una fuente sans-serif diseñada por Steve Matteson. Está optimizada con el fin de ser amigable con dispositivos móviles, web y otros textos que se muestren en pantallas.

28.- Signika

signikaInicialmente fue creada para usarse en señalización, pero es aplicable a todo tipo de diseños debido a su ritmo y legibilidad.

29.- Josefin Slab

josefinslabJosefin Slab es una tipografía que se inspira en las tendencias de 1930 que destacaban por sus formas geométricas. Es una fuente genial para utilizar en titulares y cabeceras, pero también encaja perfectamente como cuerpo de texto.

30.- Vollkorn

vollkornVollkorn es una fuente con una serifa prominente y con cuerpo. Fue diseñada para ser discreta y funcionar en cualquier tipo de publicaciones escritas, ya sea en papel o en pantalla. Es perfecta para usar en titulares y tiene varios pesos incluyendo negritas y cursivas.

31.- Bree Serif

breeserifFue diseñada en 2008 por Verónica Burian y José Scaglion. Esta tipografía triunfó desde su primer momento. Es muy buena opción para usar en Titulares y combina muy bien con fuentes sans-serif como Lato. Es muy estética y queda muy bien incluso cuando se reduce su tamaño.

32.- Poppins

poppinsPoppins es una tipografía geométrica sans-serif creada por Indian Type Foundry en 2014. Está disponible en 5 pesos diferentes, pero desafortunadamente no incluye una variante en cursiva. Es una fuente que funciona mucho mejor en pantallas, por lo que es perfecta para diseño web, donde se utiliza bastante.

33.- Hind

hindHind, al igual que Poppins tiene 5 variantes, y tampoco incluye cursiva. Se utiliza mucho su variante “bold” para encabezados y titulares en diseño web ya que es muy legible en pantallas y en móviles.

34.- Playfair Display

playfairdisplayEs una fuente con trazos muy contrastados, que la hacen una tipografía moderna y visual muy buena para titulares. Su variante cursiva es muy bonita, elegante y original para títulos y subtítulos. No es recomendable usarla mucho en cuerpo de texto ya que sus trazos tan contrastados pueden hacer que se pierda algo de legibilidad.

35.- Lora

loraLora es una tipografía de Google Fonts disponible en su modo normal y en negrita, incluyendo sus correspondientes cursivas, las cuales tienen un toque muy caligráfico.

36.- Domine

domineDomine fue diseñada por Pablo Impallari en Fue creada con el objetivo principal de ser utilizada en textos en la web, por lo que buscaron un diseño que prioritaria la legibilidad.

37.- Fira Sans

firasansFira Sans es una fuente open-source creada por Erik Spiekermann y con la contribución de Carrois Type Design. En principio solo fue creada para Firefox OS pero mas tarde fue lanzada en código abierto. Está todavía en desarrollo activo y a día de hoy tiene 9 pesos distintos con cursivas, y una versión monospace.

38.- Old Standard TT

oldstandardttSu diseño se inspira en las fuentes serif modernas de finales de los 90 . Está disponible gratis en Google Fonts en normal, cursiva y negrita, pero desafortunadamente no existe un estilo cursiva en negrita.

39.- PT Serif

ptserifEsta Google Font del tipo serif y estilo elegante fue diseñada por tres diseñadores rusos en 2010. Está disponible en normal, cursiva, negrita y negrita cursiva.

40.- Oswald

oswaldActualmente es una de las fuentes condensadas más usadas de Google Fonts. Cuenta con seis pesos desde la extra-light hasta la bold. 

[Banner-soporte]

41.- Cabin Condensed

cabincondensedUna sans inspirada en en las tipografías de Edward Johnston y Eric Gill, con un toque de modernismo y disponible en cuatro pesos.

42.- Abril Fatface

abrilfatfaceEstá inspirada en las pesadas fuentes de titulación utilizadas en carteles publicitarios en el siglo XIX en Gran Bretaña y Francia. Es una tipografía con mucha personalidad.

43.- Dosis

dosisUna fuente redondeada de la familia sans serif. Comenzó con el estilo extra-light y actualmente ya cuenta con más de seis puntos hasta el extra bold.

44.- Oxigen

oxygenLa familia de tipos de letra Oxygen se crea como parte del proyecto KDE, un escritorio libre para el sistema operativo GNU + Linu. Disponible en tres estilos:  light, regular y bold.

45.- Pathway Gothic One

pathwaygothiconeEs una sans serif muy similar a Oswald pero con un diseño más fino. Es ideal para títulos. El único inconveniente es que solamente está disponible en un grosor.

46.- Advent Pro

adventproSe trata de una tipografía sans-serif con un estilo moderno y diseñada especialmente para webs. Está disponible en siete variantes y es recomendable hacer uso de ella  especialmente para títulos subtítulos..

47.- Maven Pro

mavenproMaven Pro es una tipografía sans-serif con una curvatura única y un ritmo fluido. Sus formas lo hacen muy distinguido y legible cuando está en contexto. Combina estilos de muchas tipografías geniales y es adecuado para cualquier medio de diseño. El diseño moderno de Maven Pro es ideal para la web y se adapta a cualquier entorno.

48.- Arvo

arvoArvo es una familia de tipografía geométrica de slab-serif adecuada para pantalla e impresión

49.- Patua one

patuaonePatua One es un tipo de texto serif de slab diseñado para usar en tamaños pequeños. Sus serif gruesas están curvadas para proporcionarle un toque de suavidad y gesto.

50.- Varela Round

varelaVarela Round se basa en la conocida fuente Varela. Las esquinas redondeadas lo hacen perfecto para una sensación suave y excelente en cualquier tamaño. Es adecuado para titulares e impresos, y mantiene sus propiedades distintas entre otros objetos. Varela Round es una gran fuente para cualquier sitio web.

51.- Questrial

questrialAunque presenta una sola variante, esta fuente de palo seco es limpia y muy legible, perfecta para el cuerpo de texto. Diseñada por Joe Prince es ideal para usar con caracteres de gran tamaño. Formada por curvas de círculo completo y líneas rectas de una gran singularidad.

52.- Titillium web

titilliumCreada por múltiples diseñadores se compone de caracteres de palo seco y formas cuadradas. Con 16 familias y múltiples estilos es una tipografía elegante y moderna.

53.- Libre Baskerville

librebaskerville

Esta romana con aspecto clásico funciona muy bien para la lectura en pantalla.

54.- Orbitron

orbitronSi estás buscando una fuente sólida, geométrica y de palo seco Orbitron es perfecta. Diseñada por Matt McInerney como alternativa a otros estilos, esta tipografía es futurista y nos recuerda a la cartelería de películas de ciencia ficción.

55.- Kaushan Script

kaushanscript56.- Space Mono

spacemonoSpace Mono es una de las tipografías estrella del catálogo de Google Fonts por su originalidad y por haber sido diseñada para Google por la prestigiosa fundición británica Colophon. La singular combinación de rasgos geométricos y de tipografía grotesca hacen de Space Mono una familia inusual, con un marcado carácter postmoderno.

57.- Chivo

chivoSe trata de una familia de corte grotesco, disponible en 8 variantes y con pesos desde light hasta black, lo cual la hace idónea para el trabajo con diferentes niveles de texto.

58.- Crimson Text

crimsontext59.- Rubik

rubik60.- Inconsolata

inconsolataAhora que ya dispones de las tipografías para web adecuadas es el momento de registrar tu medio digital en la plataforma de content marketing Coobis. Con ello podrás llegar a más de 2.000 anunciantes entre los que se encuentran las principales marcas de cada sector. ¿Quieres registrarte en Coobis?