Tipografía digital. Guía rápida y descargas gratis.

La tipografía siempre ha ocupado un lugar preferente en el diseño gráfico. Además de ser básica para destacar el mensaje que queremos comunicar, también nos sirve para establecer una jerarquía dentro de ese mensaje.

Esta guía pretende dar indicaciones básicas para poder hacer un uso correcto enfocado al diseño web y de web Apps.

¿SERIF O SANS SERIF?

El diseño web está totalmente condicionado por la resolución de pantalla, por eso mismo procuramos utilizar las fuentes más legibles. Según Jakob Nielsen, en su artículo “serif vs Sans Serif”, concluye que la diferencia de la velocidad de lectura entre fuente sans serif y serif es muy pequeña. Por lo que no debe haber ninguna directriz de usabilidad en favor del uso de una u otra. En cualquier caso este estudio contradice a uno anterior realizado en los 90, el motivo es que las resoluciones de pantalla cada vez son mejores y esto beneficia la lectura de las serif, es decir, cuanto mejor sea la resolución de pantalla menos importante es usar una u otra, con malas resoluciones el consejo es utilizar sans.

De todos modos, si echamos un vistazo a los grandes, veremos que utilizan fuentes sans. Roboto en el caso de Google y San Francisco ahora Apple. También es muy importante el grosor de la fuente y el tracking (espaciado entre letras) que aumenta considerablemente la legibilidad.

Descargar San Francisco Descargar Roboto

ANTE LA DUDA, JUSTIFICA EL TEXTO A LA IZQUIERDA

Estamos acostumbrados (al menos en Occidente) y así lo hacemos incoscientemiente, a leer de izquierda a derecha y de arriba a abajo, esto significa, que si no hay un factor que exija lo contrario, alinear el texto a la izquierda va a ser la mejor solución para que la lectura sea más cómoda.

El ojo toma como referencia el margen izquierdo para regresar y comenzar a leer una nueva línea, cuando centramos un texto de varias líneas, esta referencia se pierde y al usuario le resulta más difícil continuar la lectura.

MENOS ES MÁS. UTILIZA UNA TIPOGRAFÍA, O NO…

Existe una máxima en el discurso del ignorante atrevido que opina de diseño (todos conocemos alguno), y es que sólo se debe utilizar una fuente, esta afirmación y la de que el rojo y el rosa no pegan son las primeras cosas que aprenden, pues bien, NO.

Si no tienes experiencia, si estás empezando, utiliza una única fuente, eso reducirá las posibilidades de que el contexto desestructure y se vuelva confuso, siempre quedarás bien y evitarás problemas.

Pero no creas nunca nada, investiga, y te darás cuenta que la combinación de fuentes puede llegar a ser además de muy vistosa, una forma de jerarquizar tus diseños y sorprender gratamente a tus usuarios. A quien le quede duda, le dejo algunos ejemplos en este artículo.

Existen sitios como Fonty, que nos permiten ver online cómo combinan varias fuentes.

NEGRITAS, MAYÚSCULAS, CURSIVA…

No es una cuestión de diseño, es simplemente utilizar correctamente las normas de redacción.
No hay nada más tedioso que leer un texto plano. La negrita ayuda a resaltar las ideas importantes, bien utilizada, nos podría permitir entender la idea de un párrafo enorme sólo fijándonos en ellas, es más, se trata de un hábito muy extendido, igual que leer los titulares de las noticias o los pies de foto, así que aprender a usar estas normas de escritura nos darán mayor usabilidad en nuestros diseños.
Es recomendable no utilizar las mayúsculas para un texto que implique lectura, es decir, reducirlo al uso de alguna palabra o acrónimo. La lectura se ralentiza mucho cuando el texto está en mayúsculas.
En conclusión, la mayúscula, la negrita, la cursiva, el subrayado, todo nos sirve para enfatizar o identificar partes del texto, usémoslo cuando haga falta.

TAMAÑO DE LAS FUENTES

Utilizar el tamaño de texto correcto, tiene un gran impacto en la experiencia del usuario.

Demasiado pequeño: además de producir tensión en el lector, provocará que omita la mayor parte de la información presentada, sobre todo en dispositivos móviles, en los que el espacio es reducido y además el brillo agrava la lectura.
Demasiado grande: provocará mayor dificultad de lectura en caso de tratarse de un texto largo, no sólo porque el desplazamiento de la mirada tiene que ser mayor, además porque provoca distracción en la lectura general.

La regla general para hacer tus textos legibles:

Para equipos de escritorio: usa una fuente de 16px o superior para el texto de cuerpo.
Para dispositivos iOS: usa un tamaño de texto de al menos 11 puntos.
Para Android: el tamaño de fuente legible mínimo es de 12 sp, pero se recomienda usar al menos 14 sp para el texto principal.

La regla del 1: 1.618

Escogemos un tamaño base para el texto, por ejemplo, 16px.
Después de eso, multiplica para obtener los tamaños siguientes para títulos, subtítulos, etc. : 16px, 26px, 42px, 68px, 110px.
Puedes ver el resultado de esta regla en Gridlover

INTERLINEADO

El tamaño de la fuente y el interlineado van de la mano a la hora de hacer más legible un texto. Como regla general, la altura de línea debe ser aproximadamente un 30% más que la altura del carácter para una buena legibilidad. Es decir, para nuestra fuente de cuerpo de 16px, aplicaremos un interlineado de unos 21px.

LIMITAR LA LONGITUD DE LÍNEA

La longitud en horizontal de una línea de texto suele ser un problema muy frecuente de diseño. La longitud definida como más cómoda para un lector (libro Typographie de Emil Ruder) en una pantalla de ordenador, es aquella que ocupa alrededor de 60 caracteres, incluyendo espacios.

En el caso de los dispositivos móviles, el ancho de pantalla es bastante menor, por lo que en estos casos, la longitud recomendada es de entre 30 y 40 caracteres.

CONTRASTE

El contraste del color de la fuente sobre el color de fondo es fundamental para una buena experiencia de usuario. En el caso de dispositivos móviles es incluso más importante, ya que en numerosas ocasiones, nuestros usuarios puede que estén en la calle accediendo a nuestros contenidos, esto supone más luz y más reflejos sobre la pantalla del dispositivo.

Según la W3C, el contraste mínimo para evitar problemas de visibilidad, ha de ser de 4,5:1, excepto en los siguiente casos:

Teto grande – en este caso la relación de contraste sería suficiente con una relación de 3:1. Se considera que el texto de 18 puntos o el texto en negrita de 14 puntos es lo suficientemente grande como para requerir una relación de contraste más baja.
Texto o imágenes puramente decorativas
Texto que forma parte del logotipo

Además del contraste texto-fondo, también tenemos que tener muy en cuenta el contraste entre fuentes, es decir, tenemos que diferenciar bien las jerarquías, distinguir bien qué es un título o un subtítulo, usar bien el peso de las fuentes (bold, narrow,…). No debemos tener miedo a la hora de utilizar estos diferentes pesos para dar más importancia a palabras o ideas. Nada más tedioso que un texto plano. Este tipo de contraste entre las fuentes de nuestro texto sirven para proporcionar una composición más interesante y producir textos más legibles.

Si necesitas una buena herramienta online para comprobar los contrastes texto-fondo de tus diseños, te recomiendo esta: CONTRAST RATIO