Introducción
Una de las preguntas más frecuentes que nos hacen es: ¿Dónde encontrar combinaciones de fuentes? Vamos a responder esa pregunta y vamos a ir un poco más lejos. Sus fuentes, es decir, la tipografía de su sitio, es inmensamente importante. Le vamos a acercar un par de sitios donde encontrar las mejores combinaciones de fuentes para su sitio.
Las fuentes de un sitio no solo son importantes, son mucho más importantes de lo que se piensa. Se realizó un experimento en el New York Times, donde se sirvió el mismo artículo en diferentes y se evaluó la credibilidad del mismo según la fuente utilizada. Los resultados fueron clarísimos, la fuente influyo de forma determinante en la credibilidad del texto.
Se usaron fuentes comunes del momento y si lo pregunta la ganadora fue Garamond, lo que sorprendió a quienes «apostaban» por Times New Roman. La que peor afecto a la credibilidad fue, esta vez para sorpresa de nadie, Comic Sans.
Es importante conocer la diferencia entre fuente y tipografía, y conocer por qué, para el diseño web, nos interesan particularmente las fuentes de Google.
ATENCIÓN: Es muy posible que este artículo necesite una pequeña actualización pronto. La justicia de la Unión Europea ha declarado como ilegal usar la CDN de Google para servir las fuentes. Esto se debe a que Google obtiene datos de los usuarios que visitan estas webs, por lo tanto, serian ilegales en Europa. ¿Qué puede implicar fuera de Europa?
Es probable que los temas WordPress se vean obligados a subir las fuentes al servidor en vez de usar la CDN de Google. Debe quedar claro que el problema no es emplear las fuentes de Google en sí, sino el cargarlas directamente desde, justamente, la CDN de Google. Así que donde encontrar combinaciones de fuentes sigue siendo un artículo relevante, así como las herramientas que mostramos. Cuando halla certeza de que pasará, actualizaremos la publicación debidamente.
¿Cuál es la diferencia entre fuente y tipografía?
La palabra tipografía se usa describir caracteres que comparten aspectos de diseño comunes. Por ejemplo, Helvetica es una tipografía con caracteres que comparten características de diseño usuales. Del mismo modo, Times New Roman es otra tipografía con caracteres que comparten características de diseño comunes. Dentro de una misma tipografía se encuentran los distintos «pesos» o grosores de las fuentes, así también, por ejemplo, las itálicas.
Una fuente es un peso, estilo, tamaño y efecto particular de una tipografía. La mayoría de las tipografías incluyen una serie de fuentes
Tutplus
¿Por qué nos interesan las fuentes de Google?
Donde encontrar combinaciones de fuentes: en Google Fonts. ¿Por qué? Hay muchos motivos, tienen muchas ventajas y algunas desventajas que veremos sin complicarnos.
Muchas de las ventajas (y potencialmente su principal desventaja) tienen que ver con que, para bien o para mal, se han vuelto prácticamente un estándar de facto en la web. Veamos cómo se llega a esta situación.
Web Safe Fonts
No hace mucho tiempo atrás, diseñar un sitio web implicaba tener en cuenta lo que se conocía como «web safe fonts», básicamente fuentes que ya estuvieran instaladas en la inmensa mayoría de los ordenadores, por eso las páginas web se limitaban a Times New Roman, Verdana, Futura, incluso la infame Comic Sans y otras pocas. Si el navegador no encontraba la fuente en su sistema, la reemplazaba por otra, a veces con resultados desastrosos.
Font Face
En el 2010 se impone en CSS el «font face» que permitía al sitio descargar las fuentes que iba a usar y rápidamente se empezó a usar (y abusar de) esa posibilidad. Pero aún quedaban problemas por resolver.
Para empezar eso añadía tiempo de carga a los sitios, los ralentizaba sensiblemente. Por otro lado, si bien había ya muchísimos sitios como Font Squirrel donde obtener fuentes gratuitas, la gran mayoría eran de baja calidad y dudoso gusto. Las fuentes realmente buenas eran muy caras… realmente diseñar una fuente completa (ni hablar de toda una tipografía) es un trabajo arduo y para el cual no cualquiera está capacitado.
Google Fonts
En el mismo 2010 surgía Google Fonts como servicio de incrustación de fuentes y, como decíamos, se convertiría en una estándar de facto. Motivos no faltaban.
Ventajas y desventajas de usar Google Fonts
Ventajas
- Son completamente gratis y de libre uso, inclusive para uso comercial.
- Incluyen (hacia fines de octubre de 2022) 1455 familias de fuentes.
- Se ven de igual forma en distintos navegadores, sistemas operativos y dispositivos (eso ante no pasaba).
- Tienen una CDN propia, lo que acelera los tiempos de carga. Recuerde: la velocidad importa. Además, alivianan la tarea de su servidor.
- Uso ilimitado. A diferencia de otros servicios, no ponen limitaciones en el número de páginas servidas.
- Son diseñadas para «ser livianas», es decir, no aumentar demasiado el tiempo de carga de la página.
- Tienen una interfaz amigable para elegir las fuentes.
- Por su popularidad hay infinidad de recursos para trabajar con ellas y elegirlas como veremos a continuación. Como veremos hay muchos sitios donde encontrar combinaciones de fuentes, entre otras cosas.
- Es sumamente sencilla insertarlas en el sitio. Si usa WordPress es muy probable que su tema las tenga integradas, solo debe elegirlas.
- Se puede elegir el conjunto de caracteres a cargar: por ejemplo, si su sitio fuera en inglés no hay razón para cargar la «ñ», pero si su sitio es en español no tiene por qué cargar, por ejemplo, los caracteres cirílicos.
- Si usa una fuente muy popular, por ejemplo Roboto, es muy probable que el navegador ya la tenga en su caché y no haya que cargar nada. Aquí está la lista oficial de las fuentes más empleadas.
- La cantidad de fuentes crece constantemente a un ritmo vertiginoso.
- La calidad de las fuentes ha mejorado con el paso del tiempo
Desventajas
- Algunas de las fuentes son mediocres
- No incluye las fuentes más famosas, sino alternativas a estas. Por ejemplo, no está Helvética. Hay fuentes similares…
- Están muy comprimidas, muy pensadas para ser livianas, no tienen demasiados detalles
- Como la mayoría son muy utilizadas, no suele ser buena idea usarlas para la identidad de marca, por ejemplo para el logotipo.
- Es un poco débil en cuanto a fuentes con serifa, al menos según la opinión de algunos expertos.
- Sí usamos la CDN de Google, aumentará el número de peticiones de nuestro sitio.
Nótese que las pocas desventajas que tienen «se diluyen» si su presupuesto es limitado.
Donde encontrar combinaciones de fuentes
Normalmente, conviene utilizar un tipo de letra para los títulos y otro para el texto simple. Las estrategias para elegirlas pueden variar, pero normalmente se busca un contraste armonioso.
Pero antes de ver donde encontrar combinaciones de fuentes, veamos algunas tendencias sobre como usarlas en 2022, en esta página nos dan algunas buenas ideas, no siempre fáciles de implementar en la web, pero vale la pena mirarlas detenidamente.
Es un asunto complejo, por lo que en lugar de detenernos es disquisiciones vamos a pasarle unos enlaces donde encontrar combinaciones de fuentes, con pares de tipografías seleccionadas que van muy bien juntas. Úselos como inspiración, o directamente elija un par e impleméntelo o solicítelo a su diseñador. Vamos al punto: Donde encontrar combinaciones de fuentes, pues aquí.
https://www.fontpair.co/all este es un gran directorio de combinaciones de fuentes, no puede faltar en un artículo sobre donde encontrar combinaciones de fuentes y es posible que sea todo lo que necesite, incluso tiene una extensión para Chrome que le informa que fuentes (y que colores) usa un sitio web determinado.
Otro lugar imprescindible es https://typespiration.com/ bastantes combinaciones destacables.
Otra lista imprescindible con diseños y elecciones más «arriesgados».
https://www.pagecloud.com/blog/best-google-fonts-pairings pageclouds nos ofrece una lista curada de las que consideran las 50 mejores combinaciones de fuentes de Google de manera muy visual, no sabemos si son las mejores, pero que son buenas parece indiscutible.
https://digitalsynopsis.com/design/best-font-combinations-typeface-pairings-guide/ nos muestra hermosas combinaciones con ejemplos concretos de tamaños (para la jerarquía visual) y ejemplos de diseños, en general con una imagen de fondo.
En este caso tenemos 15 combinaciones de fuentes de Google, y otras que no. Lo interesante de esta lista no está solo en la calidad de las combinaciones sino en la originalidad de la fuente de título.
Esta página toma un enfoque algo distinto, presentan una lista de tipos de letras y con cada una nos dan opciones de con cuál otra combinarla, por supuesto nos muestra el resultado.
BeFonts nos presenta otra lista que nos encanta, también con ejemplos con imagen de fondo, esta vez más enfocados en artículos, en todo casos BeFonts debe estar en sus marcadores.
Aquí se nos presenta otra buena lista, de combinaciones con acento en la legibilidad, especial para títulos largos.
No es exactamente una lista de combinaciones de fuentes, pero ya veremos cómo se pueden encontrar fácilmente compañeras para las seleccionadas por este diseñador. La incluimos en la lista por la calidad y la originalidad de la selección. No son fuentes muy utilizadas, los cual es sin dudas un plus a tener en cuenta.
Esta es otra lista, un tanto dispar, a tener en cuenta.
Esta lista, además de seleccionar las fuentes elegidas, destaca las características fundamentales de la combinación, son solo 10 combinaciones, pero valen la pena.
Esta página no solo ofrece algunas combinaciones, sino que además nos da unas reglas sencillas para elegirlas, o al menos determinar si una combinación es recomendable o no.
Combinaciones de fuentes con un método para importarlas y código CSS.
Si una fuente es muy elegida, es una indicación de su calidad, o al menos de su versatilidad, aquí nos brindan una lista de las combinaciones más populares de fuentes de Google, con una descripción de la fuente, su éxito y su creación. A tener en cuenta.
Otra lista de fuentes modernas, muy bien presentadas.
Sugerencia para su uso y algunas combinaciones de fuentes, una lectura rápida.
Esta página es imprescindible, no solo las combinaciones son hermosas y funcionales, su presentación es espectacular. Incluye además enlaces directos de descarga y código CSS para pegar en su hoja de estilos. Gran trabajo de Lou Levit.
Otra selección bien hecha con algunas fuentes poco conocidas, de nuevo no son combinaciones, pero vale la pena darse una vuelta por esta página.
Acá se nos muestra como la fuente de un sitio afecta su credibilidad, basándonos en el mencionado experimento en el New York Times, y por supuesto, en función de esto se nos sugieren algunas combinaciones de fuentes.
Elementor, el famoso y polémico constructor de páginas, nos acerca sus recomendaciones. A nosotros no nos impresionaron, pero quizás a usted le sirvan.
Si la cuestión es donde encontrar combinaciones de fuentes no podían faltar las recomendaciones de Canva. Por supuesto, con hermosos ejemplos.
Una lista tan corta como exquisita, son solo 5 combinaciones, pero si su estilo buscado se ajusta al de esta diseñadora, no lo dude, son excelentes. Menos es más.
Una lista más basada en tipografías que en fuentes, ideal para casos en que desee «jugar» con fuentes de la misma familia. Si no se entendió cuando visité la página lo va a entender.
Cada tipo de sitio tiene requerimientos especiales para las fuentes, esto se tiene muy en cuenta en esta selección.
Para un estilo serio y minimalista puede darse una vuelta por esta página donde no solo seleccionan, no solo las mejores fuentes, sino una larga lista de combinaciones recomendadas.
Sí, por el contrario, necesita un estilo más «soft» puede ver estas opciones.
37 combinaciones con ejemplos, otra lista a tener en cuenta.
Si su pregunta completa es donde encontrar combinaciones de fuentes para un logo, pruebe aquí. Es posible que encuentre lo que necesita.
Otra opción es buscar «combinaciones de fuentes», o mejor «fonts combinations» en Pinterest, hay mucha variedad.
Como elegir combinaciones de fuentes
Herramientas para combinar fuentes
Si este se preguntó donde encontrar combinaciones de fuentes, seguramente se habrá preguntado ¿hay alguna herramienta que me ayude a elegir por mi mismo la combinación de fuentes? Afortunadamente, la respuesta es sí.
Fontjoy
¿Qué tal si le dijera que existe una herramienta para elegir usted mismo las combinaciones de fuentes que desea asegurándose de que combinen bien?
Pues bien, esa herramienta existe y funciona de maravillas. Y con una ventaja extra, en vez de combinar dos fuentes en esta herramienta se pueden combinar tres, una para el título, una para el subtítulo y una para el texto principal.
Lo único que hay que hacer es deslizar botón para elegir cuanto contraste se desea entre la fuente del título, la fuente del subtítulo y la fuente del texto principal y hacer clic en generar. Puede repetir esto cuantas veces desee, puede variar el contraste. Además, el texto es totalmente editable.
Si, de pronto, encontró una fuente o dos que quiere seleccionar, pero quiere cambiar la otra o las otras, puede hacer clic en el candado de la izquierda para fijar esa fuente (o esas fuentes) y seguir buscando la combinación perfecta para su sitio.
Typespiration
Si usted ya tiene elegida una fuente, ya sea para el cuerpo del texto como del título, puede ingresarla aquí y la herramienta le sugerirá combinaciones posibles.
Design.ai
Esta herramienta brinda un mecanismo idéntico al de fontjoy.
Matcherator
Si usted tiene una imagen de una fuente y necesita saber qué fuente es, entonces puede recurrir a Matcherator, esta herramienta está diseñada justamente para eso. Es imposible garantizar los resultados al 100 %, pero es una herramienta que los puede sacar de un apuro.
A modo de conclusión
Si hicimos este artículo tan detallado, sin entrar en cuestiones técnicas, es por qué sabemos que cuando alguien se pregunta donde encontrar combinaciones de fuentes, está abriendo la puerta a un tema mucho más relevante que el simple donde encontrar combinaciones de fuentes…
Las fuentes utilizadas, y la forma en que se combinan, pero sobre todo la relación entre fuente y mensaje, es un asunto de importancia capital.
Esperamos que este artículo, que implicó bastante esfuerzo realizar, le haya sido útil. Ahora puede decir que sabe dónde encontrar combinaciones de fuentes.
Este artículo es prueba de tu experiencia y dedicación a la calidad del contenido. Es exhaustivo, bien investigado y atractivo.
Disfruté mucho este artículo.