5 populares fuentes tipográficas web del 2015 y sus alternativas gratuitas

Andrés Vargas Aguilar
Refracción 3
Published in
6 min readJan 23, 2016

Según información de páginas especializadas en tipografía, bastante websurfing y una seria adicción a las fuentes tipográficas acá tengo algunas fuentes muy populares en sitios web de hoy en día y algunas alternativas gratuitas para no vernos forzados a vaciar nuestras cuentas bancarias al diseñar sitios web.

Fotografía bajo licencia por Chris Leggat vía Unsplash

Cada alternativa gratuita tiene un enlace para ver su “specimen” y al final del artículo está una pequeña nota sobre cómo descargarlas fácilmente.

5. Proxima Nova

La creación de Mark Simonson es hoy en día apodada como la “nueva helvetica”, esta fuente tipográfica es una todo terreno, muy versátil y de gran legibilidad.

Existe un buen número de páginas diseñadas con ésta fuente y es la fuente más popular en páginas web según la base de datos de Typ.io.

Considero que uno de los mejores ejemplos de su uso está en UltraLinx, todo el texto que se maneja ahí es Proxima Nova y queda muy bien.

Su alternativa gratuita: Montserrat

Nota: No recomiendo usar Montserrat como fuente tipográfica para cuerpos de texto pues carece de cursivas, úsala como fuente para títulos, ese es su fuerte.

4. Caslon

Ésta fuente dominaba en la imprenta de antaño y aún ahora tiene una gran presencia en las webs contemporáneas.

Quizás su popularidad se debe a los diseñadores nostálgicos, a su gran legibilidad o al popular dicho “ante la duda use Caslon”. Es difícil decirlo. Pero algo es seguro, si una fuente tipográfica sigue vigente desde el año 1722 debe ser por algo.

Su alternativa gratuita: Lora

Nota: Lora es una alternativa muy buena, pero también podrías considerar usar Droid Serif si piensas usarla principalmente en cuerpos de texto, funciona increíble y es muy legible, aún en dispositivos móviles.

3. Apercu

Descrita por su fundidora, Colophon, como una amalgama entre las clásicas Johnston, Gill Sans, Neuzeit & Franklin Gothic.

La popularidad de ésta fuente tipográfica no ha hecho más que incrementarse en los últimos tres años, simplemente tiene algo especial y al ser una fuente relativamente nueva el mercado aún no está saturado de ésta fuente. Esto la hace una excelente opción para realizar branding además de webs.

Su alternativa gratuita: Karla

Nota: Merriweather es una serif, también gratuita, que puede funcionar como una buena combinación para Karla.

2. Avenir

No es sorpresa la creciente popularidad de la fuente Avenir, con el fallecimiento de Adrian Frutiger en septiembre del 2015 muchos diseñadores empezaron a rendir tributo al gran diseñador tipográfico utilizando sus fuentes tipográficas y no sería una sorpresa que ésta fuente empiece a verse más y más cada día.

Avenir es considerada el mejor trabajo de Frutiger y en una reciente encuesta fue nombrada como la opción preferida entre los expertos de la tipografía.

Sus alternativas gratuitas: Nunito y Lato

Nota: Nunito parece ser la fuente que tiene un “esqueleto” más parecido al de la Avenir y funciona como una excelente alternativa para cuerpos de texto, sin embargo cuenta con terminaciones redondeadas que sí harían una diferencia a tamaños superiores a 24px; En cuyo caso Lato es la opción adecuada.

1. Futura

Ésta fuente domina el mercado desde hace, al menos, un par de años y es la fuente tipográfica más popular del 2015 según el listado de typewolf. Posiblemente la pudiste ver en el logotipo de la película Gone Girl.

Quizás su éxito se deba a su atractiva y algo reducida altura-x, o a lo bien que funciona en bold para títulos con algo de tracking incrementado.

Indudablemente es una fuente tipográfica increíble, especialmente la versión de la fundidora Bitstream está muy bien lograda y al parecer no la veremos desaparecer en la web este 2016.

Su alternativa gratuita: Josefin Sans

Nota: Puedes combinarla con Josefin Slab, su fuente hermana.

Pero, un momento, ¿Dónde está la fuente Brandon Grotesque?

Lastimosamente esta popular fuente tipográfica no tiene una alternativa gratuita muy acertada, claro, existen fuentes como Halis Rounded o FF Super Grotesk, que son muy buenas alternativas, pero hay que pagar por ellas.
Algunos dicen que Lato es una “aceptable” alternativa de Google Fonts, pero no estoy de acuerdo.

¿Cómo descargar las familias tipográficas de Google Fonts?

  1. En los enlaces del specimen de cada familia, en la parte superior derecha ir a “open (nombre de fuente) in google fonts”.
  2. Seleccionar todos los pesos de la familia.
  3. Usar el botón de descarga (flecha descendente) ubicada en la parte derecha.
  4. Disfrutar. :D

(Si lo deseas en lugar de seguir el paso 3, google proporciona la fuente en css, javascript, etc. para incluir directamente al código de tu web)

Concluyendo

La web contemporánea se transforma constantemente y de manera muy acelerada, ya vimos la revolución de las páginas flat o las parallax, fueron tendencias muy explosivas, pero en el mundo de la tipografía las cosas se mueven de manera más lenta, las fuentes tipográficas tardan muchos años en caducar (O nunca, como es el caso de la Caslon) así que no hay peligro con estas 5 fuentes o sus alternativas. Úsalas con tranquilidad.

Y recuerda, al final no se trata de usar fuentes premium en toda ocasión, a veces tendremos que optar por alternativas gratuitas para cumplir con el presupuesto de algunos proyectos comerciales, no es el fin del mundo, eso sí, recomiendo usar preferentemente fuentes tipográficas de Google Fonts, todas sus familias tienen caracteres latinos y cuentan con soporte para web. Descargar fuentes de otros sitios como FontSquirrel no garantiza que sean óptimas para web, o que tengan todos los caracteres necesarios.

¿Alguna fuente popular que haya olvidado?

¡Gracias por leer!

¿Estás interesado en algún tema relacionado al diseño, cultura visual o arte? Puedes dejar una nota acá, las ideas para listas o artículos nuevos alegran el día.
O también puedes hacer una sugerencia, alguna pregunta o ver contenido interesante en nuestra página en
Facebook.
Sería de gran ayuda para
R3. ☺

--

--

Andrés Vargas Aguilar
Refracción 3

Lic. en diseño de comunicación visual. Consultor de diseño y estrategia en Exotípico. Fotógrafo documental/subjetivo y de estilo cinema.