Hay más de 1000 fuentes en Typekit y otras 682 en Google Fonts. De alguna manera, tienes que elegir las mejores para tu sitio y asegurarte de que combinen bien. ¿Por dónde empezar?
Con tantas fuentes disponibles, es normal sufrir parálisis por análisis y terminar usando siempre la misma de siempre. Pero si quieres que tu diseño destaque, ha llegado el momento de explorar nuevas opciones tipográficas.
Si te tomas el tiempo de aprender el arte de elegir fuentes, adquirirás una habilidad que te pondrá por encima de otros diseñadores. Y lo mejor de todo es que es increíblemente fácil de aprender.
Existen muchas estrategias útiles para elegir fuentes hermosas. Con el conocimiento que verás a continuación, cientos de fuentes web profesionales empezarán a cobrar sentido para ti.
Estrategias para elegir fuentes
Al elegir una fuente, tu objetivo principal es seleccionar una que se alinee con la intención de tu diseño, no simplemente la que "mejor se vea".
La mayor parte del contenido web es texto. Eso significa que el texto es el vehículo principal para transmitir las ideas y emociones de un sitio, así que debes adoptar un enfoque que priorice el contenido (no la estética). Enfócate en cómo se verá el contenido en la página y luego diseña a partir de eso.
Ten esto en cuenta mientras exploramos las siguientes estrategias.
Considera el tamaño de la fuente
La legibilidad es fundamental: el contenido no sirve de nada si no se puede leer. La legibilidad del texto depende en gran medida del tamaño de la fuente, así que siempre prueba la fuente en el tamaño más pequeño que se utilizará en tu sitio. Asegúrate de tener en cuenta los dispositivos móviles. Ahí es donde siempre debes empezar al probar si una fuente es adecuada. Una vez que tengas un "tamaño pequeño" adecuado, puedes ajustarlo para los encabezados y otros elementos.
Los lectores con discapacidad visual agradecerán especialmente que te esfuerces por hacer que el contenido sea legible, ¡pero es algo que beneficia a todos los que visitan tu sitio!
Esto plantea otra dinámica: algunos usuarios querrán aumentar el tamaño de la fuente, así que considera probar tu diseño también en tamaños más grandes. Si tu sitio se ve mal cuando el tamaño de la fuente aumenta unos puntos manualmente, considera añadir más espacio en blanco a tu diseño.
Considera los dispositivos y entornos
La gente leerá el contenido de tu sitio web en una gran variedad de dispositivos y condiciones. Asegúrate de que la fuente y el grosor elegidos sigan siendo legibles en pantallas móviles y mantengan claridad y definición en todos los sistemas operativos, incluidos OS X, iOS y Windows (que tienden a renderizar las fuentes de forma diferente).
También vale la pena señalar que las fuentes no siempre se renderizan de forma idéntica en todos los navegadores, y es muy posible que una fuente que se ve genial en uno tenga problemas de interletraje (espaciado entre letras) o de grosor en otro. Prueba la apariencia de la fuente en diferentes navegadores y dispositivos móviles. Puedes usar una herramienta como BrowserStack para previsualizar cómo se ve un diseño en los navegadores y dispositivos más populares.
Considera el tono de tu contenido
Cada fuente evoca una respuesta emocional particular, ya sea juguetona, seria o informativa, o una combinación de sentimientos.
La mejor forma de saber si una tipografía encaja con lo que quieres transmitir es... prepárate... leer el contenido con la fuente elegida. Simplemente tienes que experimentar, porque elegir una fuente es más un arte que una ciencia. Así que lee tu contenido con la fuente seleccionada un par de veces. Luego, pide a un compañero que lo lea también y, sin darle ninguna pista, pregúntale qué tono le transmite. Después, cambia la fuente, vuelve a maquetar el contenido y observa su reacción. Haz esto varias veces y toma nota de sus comentarios.
Los resultados podrían sorprenderte: lo que para ti es una fuente divertida, para otros puede parecer infantil. La clave es ponerse en la piel del usuario, no limitarse a elegir lo que "queda bien".
¡Un extra! Aquí tienes una de mis fuentes favoritas: Brandon Grotesque. Una sans-serif limpia, redondeada y muy interesante. Cuando la veo en tamaños grandes y en negrita, no puedo evitar pensar en la época de El gran Gatsby.
Cómo combinar fuentes
Un aspecto clave al elegir tipografías es saber cómo interactúan entre sí, ya que probablemente querrás usar más de una en tu sitio web. Es una oportunidad fantástica para dar rienda suelta a tu creatividad como diseñador.
Aunque es divertido dar personalidad a un diseño con varias fuentes, no te pases poniendo una distinta en cada sección o página. Una regla de oro es limitar el número de fuentes en tu diseño a unas dos o tres para evitar confusiones y mantener la coherencia. No satures a los usuarios con demasiados elementos nuevos; haz que navegar por tu web sea algo natural y sencillo.
A continuación, te doy un par de consejos útiles para combinar fuentes.
Contrasta los estilos tipográficos
Existen cuatro estilos principales de fuentes, cada uno con sus propias variantes:
- Serif – Times New Roman, Georgia
- Sans-serif – Arial, Open Sans, Montserrat
- Script – Great Vibes, Indie Flower
- Decorativas – Wingdings
Combinar estilos diferentes, como una serif para los títulos y una sans-serif para el cuerpo de texto, suele funcionar muy bien. Aporta riqueza gracias al contraste. Esta práctica no solo abre la puerta a una paleta tipográfica más creativa, sino que crea una dinámica que define el tono emocional de tu diseño.
Siempre que puedas, combina fuentes de la misma "superfamilia", como Museo (serif) y Museo Sans (sans-serif) en el ejemplo de abajo. Esto genera una diferenciación más natural y es un recurso excelente cuando no quieres complicarte buscando fuentes distintas que combinen bien.
Ya que hablamos de contraste, la forma más sencilla de lograrlo es mediante el tamaño. Apuesta siempre por diferenciar tamaños antes que fuentes para mantener la sencillez estética. Un título grande contrasta con un cuerpo de texto pequeño, lo cual no solo ayuda visualmente, sino que refuerza la jerarquía de la información.
Equilibra la legibilidad entre títulos y cuerpo de texto
Los encabezados suelen ser breves y están diseñados para llamar la atención. En los encabezados, usar una fuente "interesante" (es decir, visualmente compleja) es más perdonable que usarla en el cuerpo del texto, donde la legibilidad es lo más importante.
Para el cuerpo del texto, puede resultar tentador evitar las fuentes "muy usadas" porque realmente quieres que tu diseño destaque. Pero muchas fuentes son comunes por una buena razón: ya han demostrado ser eficaces en una gran variedad de diseños y entornos. Esto suele reducirse a la simplicidad visual —por ejemplo, estar libre de ligaduras y relieves sofisticados—, lo que significa que son más fáciles de leer. Y como ya hemos aprendido, la legibilidad es la reina.
En pocas palabras, una fuente con más detalles intrincados en su diseño será más difícil de interpretar para nuestro cerebro a gran velocidad y, por tanto, es menos adecuada para el cuerpo del texto, que puede contener ideas complejas y miles de palabras. Facilita al máximo que tus usuarios consuman tu contenido principal.
Prueba combinaciones
Puede resultar agotador descargar y probar un montón de fuentes juntas, así que aquí tienes algunos recursos fantásticos para visualizar rápidamente posibles combinaciones de fuentes:
- FontPair — una herramienta que muestra una variedad de combinaciones de fuentes sugeridas, permitiendo insertar texto personalizado para cada una.
- typeconnection — un juego de citas tipográficas. Responde a una serie de preguntas para que te sugieran tu pareja ideal.
- Just My Type — una serie de combinaciones de fuentes sugeridas.
- Font Combinations — una herramienta que sugiere combinaciones basadas en la fuente principal (de Google) que quieras usar. Incluso puedes previsualizar un diseño sencillo e intercambiar el texto para hacerte una idea de cómo quedará tu contenido.
Muchas de las fuentes que aparecen en los sitios anteriores están disponibles en Google Fonts y Adobe Typekit — muchas son incluso totalmente gratuitas.
Si usas Webflow, es muy divertido previsualizar fuentes de Google y Typekit dentro de la configuración de tu sitio: si ves una fuente en Typekit o Google Fonts, puedes usarla al 100% en Webflow. ¡Boom!
Si aprendes mejor de forma visual, aquí tienes un resumen rápido del poder de estilo tipográfico que ofrecemos a los diseñadores:
Tutorial de Webflow para el estilo tipográfico. Consulta más información en nuestro Centro de ayuda.
Bastante increíble, ¿verdad? Normalmente es más fácil experimentar con ajustes de interfaz en una herramienta de diseño web visual que hacerlo mediante código.
¡Bonus! Aquí tienes una de mis fuentes favoritas: Garamond Premier Pro Display. Una serif sofisticada, elegante y legible, perfecta para encabezados.
Conclusión
Como puedes ver, la tipografía es realmente un arte, no una ciencia. Si te lo tomas en serio y educas tu ojo, tus sitios pueden volverse más refinados, más profesionales y, sencillamente, más legibles. Recuerda: experimenta con fuentes y combinaciones antes de comprometerte de repente con un diseño, ya que las fuentes elegidas marcarán el tono del resto de tu trabajo.
Aquí tienes algunas fuentes fantásticas a las que recurrir para obtener ayuda a la hora de elegir tipografías y visualizar tu texto:
Ahora te toca a ti: ¿Cuáles son tus fuentes favoritas? ¿Qué sitios aprovechan la tipografía al máximo? ¡Nos encantaría ver tus enlaces en los comentarios!
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
