Cuando se trata de sitios web y aplicaciones, la buena tipografía es más que solo un bonito tipo de letra. La escritura tiene que ser altamente legible – y analizable – mientras brinda una sólida conexión visual al contenido.
Es una tarea difícil, pero es algo que muchos diseñadores pueden hacerlo con una pequeña práctica.
Ahora, vamos a ver 10 reglas que puedes seguir y te ayudarán a crear una experiencia de usuario increíble.
Reglas de legibilidad
La idea de que tienes que utilizar un “sans serif” de tipografía web es anticuado, pero la idea detrás de esto es muy importante: El texto debe ser fácil de leer.
Querrás evitar las tipografías que son difíciles de leer, con frecuencia están en la escritura, en la familia de las fuentes “novelty” o “blackletter” (la excepción aquí es cuando se trata de utilizarlo es un estilo más adornado por “arte”).
Las tipografías más legibles son analizables, y no crean una mayor atención sobre ellas. Estas tipografías casi “invisibles” son comprensibles para un usuario que no piensa mucho en las letras… simplemente funcionan.
Deja suficiente espacio entre las líneas de texto
Unas de las claves que crean una experiencia que el usuario amará es el interlineado. Este es particularmente importante para la lectura móvil, donde casi un exagerado interlineado puede contribuir a una fácil lectura.
La cantidad de espacio entre línea de texto tiene las siguientes variables:
- Tamaño del texto.
- Cantidad del texto.
- Estilo de letra.
- Amplitud de la pantalla.
No existe una formula – lo sentimos – pero si se encuentran algunas cosas que puedes hacer:
- Para la mayoría de los sitios web, configurar el interlineado alrededor de 125 por ciento del tamaño del texto.
- Para dispositivos móviles, configurar el interlineado alrededor de 150 por ciento del tamaño del texto.
- Utiliza un espacio entre párrafos sueltos – igual al “retorno” – para hacer párrafos más fáciles de explorar.
- Aplica la prueba del ojo para ver como luce la pantalla y así “soltar o apretar” el texto basado en la “sensación”.
Opta por letras con grandes cuencos y redondeados
Las letras redondas y grandes son fáciles de leer. También lo son las letras con grandes cuencas – ese espacio dentro de la forma de la letra, como el círculo dentro de una “o”.
Los tipos de letras compactas son muy difíciles de leer, estilos más amplios, como el tipo utilizado en este post, son fáciles de comprender porque es posible diferenciar las letras de las demás. Los tipos de letras redondas son más parecidas a las formas a las que están expuesto los niños cuando aprenden a leer y escribir; esa estética se queda en los usuarios para toda la vida.
Darle a las letras algo de tamaño
Cuando tengas dudas, ve un poco más grande con el texto para sentirte cómodo. ¿Cuán grande o pequeño debe ir el texto? Eso depende de cuanto texto tengas para trabajar; pon particular atención en lo largo del bloque de texto.
Mientras diferentes diseñadores tengan diferentes ideas en cuánto texto deberías utilizar, la mayoría está de acuerdo que un óptimo número de caracteres se encuentra entre los 45-60 por línea. Esto se contrae considerablemente para tipografía móvil donde la mitad de lo anterior es lo comúnmente utilizada.
Buscar la altura de “x-heights”
La altura de las letras – particularmente las minúsculas – pueden significativamente afectar que tan fácil es para los usuarios moverse a través del contenido.
El “x-heights” significa como es la altura de una minúscula conforme a la letra “x”, razón del nombre. La tipografía con una altura de “x-heights” es generalmente fácil de leer, significa que las letras minúsculas son cercanas a la altura de las letras mayúsculas. Busca un juego de caracteres donde el “x-heights” es de dos tercios a tres cuartas partes de la altura de las mayúsculas.
Aprender de “kern” como un visualizador de texto
Un buen “kerning” o interletraje es igual a una buena tipografía.
No tendrás tiempo y no lo necesitas para realizar “kern” en el cuerpo de un trabajo. Pero cuando se trata de texto en una pantalla, necesitas la distancia “kern”. Querrás que cada pareja de letras se establezcan juntas como si fueran hechas una para la otra. Este detalle ayudará a colocar tu tipo de pantalla lejos de aquellos sitios web que olvidan este paso.
Pensar en proporciones
Al crear estilos de letras para un proyecto, eso puede ayudar a pensar en proporcionalmente todo. Mientras esto puede sonar algo matemático, logra hacer tu trabajo más fácil.
Regresemos al interlineado, eso es una proporción. Piensa acerca del tamaño que has seleccionado para el cuerpo del texto, subtítulos, títulos y la copia de la pantalla grande. Enlázalos proporcionalmente para facilitar la determinación de qué tamaño darás a las letras y para crear una sentido de armonía visual. Puede ser un poco complicado al inicio, pero Tuts Plus tiene un excelente tutorial para ayudarte a darle más sentido.
Los movimientos uniformes son ideales
Cuando se trata de formas de letras, los anchos del trazo son importantes. Las letras con trazo súper delgado pueden ser difíciles de leer debido a la falta de contraste; un ancho de trazo demasiado grueso presenta problemas similares debido a que son difíciles para la vista. Del mismo modo, las letras con un contraste dramático entre un trazo grueso o delgado también puede presentar problemas.
La solución: Ajustarse a una forma de letra con un ancho de trazo relativamente uniforme. Estos estilos son fáciles de usar, no limita tus opciones de fondo y son generalmente confiables en términos de legibilidad.
Límite de usabilidad de tipografías
Dos tipografías, dilo una vez más: dos tipografías.
Esa debería ser la meta en cada proyecto. Muchas tipografías volverán locos a los usuarios. Es difícil para los ojos. Convierte a la lectura en dificultosa. Y es una completa molestia.
Elige dos familias de tipografías – puedes tener una tipografía más para elementos artísticos, si es necesario – y apégate a ellos. Establece como deberías utilizar cada uno de ellos, esto incluye determinar color, tamaño y la colocación de las tipografías en el diseño. Deben ser consistentes de página a página y por cada tipo de dispositivo.
Amplificar el contraste
Hay un puñado de tendencias de diseños con un contraste mínimo entre el fondo y las letras. Mientras esto puede parecer genial, no es fácil de usar y se dificulta la lectura.
Tu contenido es lo que hace especial e importante tu sitio web. Ampliar el contraste entre el fondo y la tipografía de modo que los usuarios puedan leer cada palabra en la pantalla con facilidad. (Esta es la razón por la que fondos blancos o con luz con letras negras o grises son tan populares).
Entre más texto incluya tu sitio, esto se vuelve más importante. Si tienes que entrecerrar los ojos todo el tiempo que veas el texto, el contraste probablemente no funcione (o las letras son muy pequeñas). Un color seguro es una gran herramienta que puede ayudarte a crear una combinación que incluya una relación de contrastes cercanos que sean perfectos.
La tipografía es solo uno de los muchos elementos que van a crear una fantástica experiencia de usuario.
