¿Cómo influye el tipo de fuente en el diseño de una web?

¡Holaaaaaaaaaaaaaaaaaaaaaas!

Últimamente estoy que me tiro de los pelos con muchas páginas web que he visto. Entiendo que no todo el mundo puede diseñar páginas web como hacemos en Ensalza, pero es que hay cada cosa por ahí que asusta.

De hecho, hablando con otros compañeros / colegas del sector noto que se tiene demasiada preocupación por elementos como la cajita de suscripción, los botones de compartir en redes o los odiosos banners y pop-ups vende-mierdas.

¿Y quién se preocupa de lo importante? ¡NAIDE SINIORA, NAIDE!

¿Qué es lo que realmente importa en el diseño web?

Las cosas que MÁS influyen en el buen diseño de una web:

• Elección y optimización de las imágenes
• Un dominio con sentido
• Un puñadito de consejos SEO
• Estructura lógica de los contenidos en cluster de navegación
• Un poquito de gusto y estética
• UNA BUENA TIPOGRAFÍA

Consejos para elegir una buena tipografía para tu página web

#1. ¿Qué tipo de fuente elijo?

Primera gran y difícil pregunta. Si se trata de elegir qué fuente será la definitiva para tu página web te adelanto que estarás unas horas dando vueltas para decidirte por una. Y aun así no te va a convencer.

Y escucha, es normal. Subestimamos el poder y el carácter que aporta uno u otro tipo de letra a nuestro sitio web cuando la realidad es que hay fuentes que hablan por sí solas.

Esto va para el que piense que un tipo de letra u otro no influye en el diseño. En el listado de la izquierda, a ver si no percibes esto:

• Fuente 1: Rap / Graffitis
• Fuente 2: Película de miedo / pánico
• Fuente 3: Marca de auriculares / mundo música
• Fuente 4: Código da Vinci claramente / Diablo
• Fuente 5: Galicia Calidade
• Fuente 6: ¿Vale para un restaurante griego?

#2. Si es para una web, una fuente que se lea has de escoger

L E G I B I L I D A D. No hay cosa que me resulte más frustrante que querer leer y no ver un pijo. (¿Quizá por eso sigo eligiendo el libro físico que el eBook?). Tanto en un blog, como en una web corporativa, tienda online… El usuario no tiene tiempo para esforzarse al máximo en leer lo que le quieres contar. Más te vale dejárselo claro y ponérselo fácil o se marchará. Y sobre todo: qué pena llamar la atención porque hayas hecho una buena labor de copy pero que al final salgas por patas porque terminas hasta el higo de dejarte la vista.

Para poder leer bien no solo tenemos que elegir una buena fuente. Es fundamental que el color de la misma y el fondo destaquen uno sobre el otro. Lo más empleado es fondo blanco con letras negras o grises oscuras, y la verdad que creo que es lo que mejor se lee. Por mucho que te guste el verde, no hagas esto:

Voy a poner un texto que se lea fatal para que los usuarios se sientan súper frustrados.

Reúnete con tu equipo para tomar esta decisión y pensad si vuestra fuente va a tener o no serifas, revisad bien cómo se ve en los distintos dispositivos y tamaños, mayúsculas, tildes y otros símbolos como interrogaciones y demás.

Consejo: elige lo que se conocen como ‘fuentes seguras’ que son aceptadas y correctamente interpretadas por cualquier navegador y dispositivo

#3. Diferencia claramente los títulos

Lo ideal es que escojas DOS fuentes distintas: una de ellas para los títulos desde H1 al H4; la otra, para los párrafos / texto en general. Si, como mucho, quieres incluir una tercera fuente para las citas o enlaces, vale. Pero no más porque vuelves loco al usuario. En cuanto a los tamaños, Google acepta como mínimo legible 16px, así que si tienes el texto de tu web más pequeño te recomiendo que lo aumentes. En cuanto al resto de títulos:

• H1: 36px
• H2: 30px
• H3: 24px
• H4: 18px:
• Cuerpo: 16px

#4. Errores que evitar al elegir la fuente

Aunque algunos los hemos ido viendo en los anteriores puntos, estos son algunos de los errores más frecuentes:

• Tamaño: como decíamos antes, elige un tamaño para el cuerpo de al menos 16px para asegurar que se lee bien y no te queda ridículamente pequeño.
• Fuentes: lo ideal es que combines dos fuentes con las que diferenciar los títulos del resto del texto. Sirve también para darle dinamismo al texto y separar visualmente los párrafos, facilitando la lectura.
• Mayúsculas: aunque, para rizar más el rizo, dependerá del tipo de fuente que elijas, escribir todo en mayúsculas en internet se siente agresivo, parece que estás ‘gritando’. No abuses de ellas.
• Fondos: como hemos visto antes, no utilices fondos sobre los que no se lea bien la letra
• Excesivas cursivas, negritas, subrayado: estos elementos te sirven para destacar algunas partes del texto como palabras clave o ideas que deban quedar claras. Sin embargo, si abusas de ellas provocarán el efecto contrario.
• Utilizar fuentes inapropiadas como las que hemos visto en el primer punto: evitaremos fuentes con carácter claramente marcado.
• Abusar del texto centrado: y yo añadiría también el texto justificado. Evidentemente, dependerá del diseño general de la web pero ten siempre en la mente que se lea lo mejor posible.

#5. Dos herramientas fabulosas que no conoces

Bueno, a lo mejor he sido un poco pretenciosa con el título pero yo no las conocía y me han parecido ¡ A L U C I N A N T E S ! Por un lado, Fontbase es una herramienta que te permite de forma gratuita y online cambiar al vuelo todo el texto de una web y probar distintas fuentes para ver cuál te gusta más. De veras, comodísimo.

La segunda herramienta es Pair & Compare y te permite combinar las fuentes de títulos y cuerpo para ver cómo lucen entre ellas. Es también muy cómoda para probar y probar hasta dar con las perfectas.

¡Y hasta aquí! Espero que te haya gustado y / o servido. Si te ha gustado lo suficiente y piensas que puede ser interesante para los demás, ¡compártelo! Si tienes alguna duda, déjame un comentario y te respondo ASAP! ¡Un abrazooooooooooo!