Cuando se trata de webs y de apps, una buena tipografía es mucho más que un bonito tipo de letra. El texto debe ser fácil de leer – y escanear – al mismo tiempo que debe proveer de una conexión visual sólida con el contenido.
Es algo que parece más fácil de lo que es, y te recomiendo que te asesores con un diseñador. Pero en esta entrada voy a darte 10 «normas» tipográficas que te ayudarán a crear una increíble experiencia del usuario. Y ejemplos que las muestran estupendamente.
1. Reglas de legibilidad
La idea de que tienes que utilizar tipografía sans serif (las de tipo «palo», como la que estás leyendo ahora) como tipografía para web está ya anticuada, pero el concepto tras ese idea sigue siendo importantísimo: el texto debe ser fácil de leer.
Evita tipos de letra que son difíciles de leer, excepto si el objetivo es conseguir un estilo más embellecido para algo artístico.
Las tipografías más leíbles son escaneables, y no dirigen demasiado la atención a ellas mismas. Estas tipografías «invisibles» son tan leíbles que los usuarios no pensarán en las letras para nada… simplemente porque cumplen su objetivo.
2. Deja un montón de espacio entre líneas
Una de las claves para crear una experiencia que los usuarios amarán es el interlineado. Esto es particularmente importante para la lectura en dispositivos móviles, donde un interlineado puede contribuir a facilitar la lectura.
¿Qué espacio debes dejar entre líneas? Hay muchas variables a tener en cuenta:
- Tamaño del texto
- Cantidad de texto
- Estilo de las letras
- Anchura de la pantalla
No hay ninguna fórmula mágica – lo siento – pero sí hay cosas que puedes hacer:
- Para la mayoría de sitios web, configura el interlineado alrededor de 125% del tamaño del texto.
- Para los dispositivos móviles, ajústalo en torno al 150% del tamaño del texto.
- Utiliza un espacio entre párrafos sueltos – igual a un «retorno o intro» – para hacer que los párrafos sean más fáciles de escanear.
- Aplica el test de los ojos para ver cómo se ve el texto en la pantalla y aumentar o disminuir el interlineado basándote en la «sensación» que tengas.
Una herramienta que suelo utilizar para determinar cuánto espacio dejar entre las lineas es Golden Ratio Typography Calculator.
3. Opta por big bowls y letras redondeadas
Las big bowls son letras grandes y redondeadas fáciles de leer. También lo son las letras con grandes bowls – ese espacio que hay dentro de las letras, como el círculo dentro de una «o».
Las tipografías más apretadas y condensadas son mucho más difíciles de leer. Los estilos más amplios, como el de la tipografía utilizada en esta entrada, son más fáciles de leer porque las letras son más fáciles de diferenciar una de otra. Unas letras más redondeadas se parecen más a esas letras con las que los niños aprenden a leer y escribir.
4. Dale a las letras un buen tamaño
En caso de duda, dale a las letras un poco más de tamaño que con el que te sentirías cómodo. Cómo de grande o pequeño debe ser tu texto depende de la cantidad de texto con la que tengas trabajar; por lo que deberías prestar especial atención a los bloques de texto largos.
Aunque los diseñadores web tenemos ideas diferentes sobre cáanto texto deberías utilizar, la mayoría coincidimos en que el número ideal de caracteres se sitúa entorno a los 45-60 caracteres por línea. Este número se desploma si consideramos una tablet o un smartphone, para los que el número ideal de caracteres habitualmente aceptado es la mitad del anterior.
5. Mírate la altura de las letras
La altura de las letras – particularmente la de las minúsculas – afecta considerablemente a la facilidad que tienen los usuarios de moverse a través de tu contenido.
Para esto se utiliza el parámetro de la altura-x, que es cómo de alta es la letra «x», de allí el nombre. Las tipografías con mayores alturas-x son generalmente más fáciles de leer, lo que supone que las minúsculas tienen una altura similar a las mayúsculas. Mi consejo: que la altura-x sea ⅔ o ¾ de la altura de las mayúsculas.
6. Aprende a poner un interletraje óptimo
Al espacio entre las letras se le llama kern. Y se dice que un buen kerning equivale a una buena tipografía.
Puede parecer una pérdida de tiempo, pero quieres que cada par de letras se dispongan juntas como si estuvieran hechas la una para la otra. Este «detalle» hará que tu tipografía sea más fácil de leer y se diferencie por esto de la mayoría de webs que no piensan en el kerning.
7. Piensa en proporciones
En el momento de pensar en las tipografías que utilizaré en un proyecto, me ayuda pensar en todo proporcionalmente. Aunque puede sonar muy matemático, me ayuda a que mi trabajo sea más fácil.
¿Recuerdas el interlineado que hemos comentado antes? Eso es una proporción. Piensa en cada uno de los tamaños que seleccionas para la tipografía del cuerpo, de los subtítulos, títulos y destacados. Ahora piensa en todos a la vez, globalmente, para pulir proporcionalmente los tamaños para crear una armonía visual. Es un poco complicado al principio, pero es cuestión de práctica. Por ejemplo, no tiene sentido poner títulos enormes y luego un cuerpo de texto pequeño. Todo tiene que ser proporcional.
8. Los trazos uniformes son ideales
Cuando se trata de las formas de las letras, el grosor de los trazos es importante. Letras con trazos super finos pueden ser difíciles de leer por la falta de contraste; un problema similar al que pueden presentar trazos muy gruesos ya que también son duros para el ojo. Las letras con un alto contraste de trazos finos y gruesos también pueden presentar inconvenientes.
La solución: quédate con formas de letras con trazos con grosores relativamente uniformes. Estos estilos son fáciles de utilizar, no limitan tus opciones y son generalmente fiables en términos de facilidad de lectura.
9. Limita el número de tipografías
Dos tipografías. Dilo otra vez: 2 tipografías.
Este debe ser el objetivo para cualquier proyecto. Demasiadas tipografías harán que tus usuarios enloquezcan. Les provocaría dificultad en la lectura, dolores en los ojos y una molestia increíble.
Escoge 2 familias de tipografías – puedes escoger una más para elementos artísticos, si es necesario – y quédate con ellas. Mira cómo deberías utilizar cada tipografía: determina el color, el tamaño y el lugar de cada tipografía en el diseño. Y asegúrate que haya consistencia de una página a otra y de un dispositivo a otro.
Échale un vistazo a font-pair.co, tiene cantidad de combinaciones con parejas de tipografías. ¡Seguro que encuentras la tuya!
10. Amplifica el contraste
Existen muchos diseños con un contraste mínimo entre el fondo y las letras. Puede que piensas que es guay y todo, pero no es user friendly y dificulta la lectura.
Tu contenido es lo que hace que tu web sea especial e importante. Amplifica el contraste entre el fondo y las letras para que los usuarios puedan realmente leer con facilidad cada palabra en la pantalla. Sí, este es el motivo por el que la combinación de un fondo blanco claro con letras negras u oscuras es la más popular.
Cuanto más texto incluya tu web, más importante es esta norma.
¡Y hasta aquí!
Espero que estas 10 normas despierten tu interés en la tipografía, pues es importante para la experiencia del usuario (UX). Al mismo tiempo, es sólo uno de los muchos elementos que deben trabajarse para crear una UX fabulosa.
Experimenta con lo que te he comentado pues beneficiará a la web de tu negocio. Y, si quieres que trabajemos juntos en tu próxima página web en WordPress, no dudes en contactarnos.
Cualquier comentario que quieras dejarme, ¡puedes hacerlo en la cajita situada debajo!
¡Hasta la próxima!
Lectura extra: Guía para aumentar el tráfico de tu web.
