Necesitas que tu sitio se vea genial, y la tipografía es un factor clave en el diseño. ¿Dónde puedes encontrar fuentes gratuitas en línea en 2020 que mantengan un alto nivel de calidad?

Creo que una interfaz de usuario solo debe hacer lo necesario mientras hace que los elementos necesarios sean atractivos. Queremos encontrar el equilibrio óptimo entre minimalismo y atractivo visual.

Manténgalo simple, pero haga que lo simple se vea genial.

Pero, ¿cómo se ve exactamente lo simple?

Elimina el desorden, y la mayor parte de lo que queda es el contenido de texto y copia de la interfaz de usuario. No es emocionante, pero seamos honestos: este es el aspecto más importante de cualquier aplicación o sitio web. La información es la razón por la que los usuarios utilizan nuestra aplicación o sitio web.

Por lo tanto, con la tipografía correcta junto con los estilos de fuente correctos (consulte Fuente vs.tipografía: la guía definitiva), podemos crear diseños que sean bastante simples y atractivos al mismo tiempo. Esto enfatiza los aspectos importantes del diseño, utiliza menos recursos e induce la carga cognitiva menos indeseada.

La tipografía puede ser muy potente.

Pero, ¿cuáles son los mejores sitios web de fuentes gratuitas?

Donde no buscar fuentes gratuitas

Dribbble, Behance, Gumroad, etc. son el hogar de un montón de gemas ocultas, pero esto implica tamizar a través de muchos recursos digitales, algunos de los cuales son empresas secundarias incompletas y versiones «lite». Dicho esto, asegúrese de marcar como favoritos recursos increíbles si se encuentra con alguno. Incluso Instagram puede sorprenderte, y Twitter tampoco debe pasarse por alto.

Aparte de eso, echemos un vistazo a los mejores sitios web de fuentes gratuitas.

Google Fonts

El número uno en esta lista es obviamente Google Fonts, que va más allá de lo que la mayoría de las alternativas ofrecen. En primer lugar, Google Fonts ofrece una CDN (red de entrega de contenido) rápida y conveniente, lo que hace que sea súper fácil incrustar fuentes web en sitios web sin alojarlas realmente.

Las fuentes de Google se pueden subdividir por script y peso, y también podemos controlar cómo se cargan en la Web configurando la propiedad CSS font-display de la cadena de consulta del código de inserción, lo que mejora los tiempos de carga del sitio web. (El artículo de trucos CSS sobre «Fuentes de Google y visualización de fuentes» explica cómo.)

Tenga en cuenta que las fuentes auto-alojadas son mejores para la privacidad (porque no se cocinan) y la velocidad (porque ofrece a los desarrolladores más control). De cualquier manera, Google Fonts tiene un repertorio enorme.

Mercado Creativo

Sé lo que estás pensando: «El mercado creativo no es gratis, Daniel!»

Ahhh, pero ¿qué pasa con la sección de Productos Gratuitos? Lo interesante de los productos gratuitos es que en realidad son fuentes premium que son temporalmente gratuitas. Aunque no se garantiza que incluya fuentes, se actualiza con seis nuevos recursos de diseño cada semana (más tres más cuando te registras y otros tres si gastas X en recursos).

He estado revisando la sección de Productos Gratuitos en Creative Market cada semana durante años, y he creado un gran repositorio de fuentes de alta calidad que no cuestan nada. Font Bundles funciona de forma similar.

Font Squirrel

Font Squirrel es como Unsplash pero para fuentes, aunque teniendo en cuenta cuánto tiempo ha existido (¡mucho tiempo!), tal vez decir que Unsplash es como una ardilla de fuentes, ¡pero para imágenes de stock es más preciso! Uno de los sitios web de fuentes gratuitas veteranos junto a fuentes Dafont y Urbanas, aunque «ardilla» es mejor.

Aunque muchos de los sitios veteranos parecen un poco anticuados, Font Squirrel ha mantenido su sitio web un poco moderno en comparación con el resto. También tiene un par de herramientas muy útiles:

• Generador de Webfont (convierte fuentes TrueType/OpenType en fuentes web)
• Identificador de fuente (para averiguar el nombre de la fuente de una imagen/captura de pantalla cargada)

FontSpace

FontSpace es una de los sitios web de aspecto más agradable, aunque solo ofrece fuentes gratuitas para uso personal, mientras que Font Squirrel confirma que todas sus fuentes son gratuitas para uso comercial. Es posible que FontSpace no siempre sea adecuado.

Por fonts

Lo que distingue a Befonts es su enfoque en las fuentes de visualización.

Aunque algunas de las fuentes solo ofrecen versiones lite/demo y, a menudo, solo vienen en formato TTF/OTF (lo que significa que son menos adecuadas para la Web), Befonts es uno de los pocos sitios web que no adopta el enfoque de «lo tenemos todo» (que a veces puede ser abrumador). Además, siempre puede convertir fuentes TTF y OTF en fuentes web.

Font Shop

Font Shop no se centra completamente en tipografías gratuitas como Font Squirrel y FontSpace, pero sigue siendo una alternativa bastante decente si las opciones de la una a la cuatro no tienen lo que estabas buscando. Encuentro que es la menos fácil de usar de las opciones, pero las fuentes son relativamente de alta calidad.

Menciones de honor

Los siguientes sitios web de fuentes gratuitas parecen un poco desactualizados, y a decir verdad algunas de las fuentes también lo hacen, pero podría decirse que son algunas de las bases de datos más grandes de fuentes gratuitas que existen hoy en día:

• Dafont
• /li>

¿Qué formato de fuente necesito?

Los formatos de fuente OpenType (OTF) y TrueType (TTF) han sido el estándar durante mucho tiempo, y todavía se usan mucho en el diseño gráfico hoy en día. Pero dicho esto, los formatos WOFF tienen una mejor compresión en la Web (especialmente WOFF2, que ahora es compatible con el 94.49% de los navegadores web según caniuse.com De hecho, el nuevo código de incrustación de fuentes de Google ahora solo ofrece el formato WOFF2.

En resumen:

• WOFF2 para incrustaciones web
• TTF / OTF para todo lo demás

¿Qué estilo de fuente necesito?

Hoy en día, realmente no importa porque las normas se han tirado por la ventana un poco. Por ejemplo, las fuentes Serif pueden tener un toque moderno ahora (piense en medio).

En su lugar, deberíamos centrarnos más en la claridad:

• Legibilidad (lo fácil que es distinguir los caracteres)
• Legibilidad (lo fácil que es leer oraciones en su conjunto)

Parte de esto se reduce a la fuente en sí, por lo que uno debe ser observador al decidir qué fuentes usar, pero otras veces se reduce a cómo la fuente es el estilo (en términos de tamaño, peso, etc.).

En caso de duda, el WCAG 2.0 / 2.1 (Pautas de accesibilidad al contenido web) tiene todo lo que necesita saber sobre la tipografía y sus muchos atributos, como el espaciado de línea, el ancho de línea, la altura de línea, el tamaño de la fuente, etc.

Conclusión

Las fuentes son súper útiles, y a menudo son todo lo que se necesita para lograr la cantidad correcta de atractivo visual y emocional sin crear más y más desorden visual. De todos modos, tu diseño necesita texto, así que ¿por qué no convertirlo en el aspecto más sobresaliente de él?