El uso de la fuente adecuada puede tener un gran impacto en como nuestros usuarios tienen una buena experiencia de usuario (UX) o una mala experiencia.
La comunicación desempeña un papel vital en el diseño, es esencial establecer una conexión clara entre el sitio web y el usuario y ayudar a sus usuarios a lograr sus objetivos. Cuando hablamos de comunicación en el contexto de diseño web, por lo general se traslada al texto. Las fuentes juegan un papel vital en este proceso:
Una buena tipografía hace que el acto de leer sea fácil, mientras que la tipografía deficiente desmotiva a los usuarios. Como afirma Oliver Reichenstein en su artículo "Web Design es 95% fuentes":
En otras palabras: optimizar tus fuentes también optimiza tu interfaz de usuario. En este artículo, proporcionaré un conjunto de reglas que te ayudarán a mejorar la legibilidad y la legibilidad del texto en tu contenido.
1. Mantener el número de fuentes utilizado a un mínimo.
El uso de más de 3 fuentes diferentes hace que un sitio web parezca no estructurado y poco profesional. Ten en cuenta que demasiados tipos de tamaños y estilos a la vez también puede arruinar cualquier diseño.
 |
| Para evitar situaciones como esta, limita el numero de fuentes al minimo |
En general, limitar el número de familias de fuentes a un mínimo (dos es suficiente, una es suficiente) y se adhieren a los mismos a través de todo el sitio web. Si utilizas más de una fuente, asegúrate de que las familias de fuentes se complementen basándose en el ancho de los caracteres. Tomemos el ejemplo de combinaciones de fuentes abajo. La combinación de Georgia y Verdana (izquierda) comparten valores similares que crea un emparejamiento armonioso. Compare eso con la combinación de Baskerville y Impact (derecha) donde el peso pesado de Impact eclipsa ampliamente su contrapartida serif.
 |
| Asegurate que las fuentes se complementen una a la otra. |
2. Intenta utilizar fuentes estándar
Los servicios de inclusión de fuentes (como Google Web Fonts o Typekit) tienen muchas fuentes interesantes que pueden dar a sus diseños algo nuevo, fresco e inesperado. También son muy fáciles de usar. Tomemos Google por ejemplo:
- Elije cualquier fuente como Open Sans.
- Genera el código y pégalo en el <head> de tu documento HTML.
- ¡Hecho!
Entonces, ¿qué puede salir mal?.
En realidad, este enfoque tiene un serio problema: los usuarios están más familiarizados con las fuentes estándar y pueden leerlas más rápido.
A menos que tu sitio web tiene una necesidad imperiosa de una fuente personalizada, como para fines de marca o para crear una experiencia de inmersión, por lo general es mejor quedarse con las fuentes del sistema. La apuesta segura es usar una fuente del sistema: Arial, Calibri, Trebuchet, etc. Tenga en cuenta que las buenas fuentes atraen al lector al contenido.
3. Límite de la Línea
Tener la cantidad correcta de caracteres en cada línea es clave para la legibilidad del texto. No debe ser el diseño que dicta el ancho del texto, sino que también debe ser una cuestión de legibilidad. Considera este consejo sobre la legibilidad y la longitud de línea del Instituto Baymard:
"Se debe tener alrededor de 60 caracteres por línea si se desea una buena experiencia de lectura. Tener la cantidad correcta de caracteres en cada línea es clave para la legibilidad del texto."
 |
| Si la linea es muy larga el ojo del usuario tendrá que regresar atrás muy a menudo. Si la linea de texto es muy larga el ojo del usuario se esforzara mas sobre el texto. |
Para dispositivos móviles, se debe buscar entre 30 y 40 caracteres por línea. A continuación se muestra un ejemplo de dos sitios vistos en un dispositivo móvil. El primero utiliza 50-75 caracteres por línea (número óptimo de caracteres por línea para impresión y sitios desktop), mientras que el segundo utiliza los 30-40 caracteres óptimos.
En diseño web se puede lograr un número óptimo de caracteres por línea, restringiendo el ancho de los bloques de texto utilizando em o píxeles.
4. Elija una fuente que funcione bien en varios tamaños
Los usuarios accederán a su sitio desde dispositivos con diferentes tamaños de pantalla y resoluciones. La mayoría de las interfaces de usuario requieren elementos de texto de varios tamaños (botones, labels, encabezados de sección, etc.). Es importante elegir un tipo de fuente que funcione bien en varios tamaños y pesos para mantener la legibilidad y la facilidad de uso en todos los tamaños.
Asegúrate de que el tipo de fuente que elijas es legible en pantallas más pequeñas! Trate de evitar las fuentes que usan cursivo cursivo, como Vivaldi (en el ejemplo de abajo): aunque son hermosas, son difíciles de leer.
5. Utilizar fuentes con letras distinguibles
Muchos tipos de letra hacen que sea demasiado fácil confundir formas de letra similares, específicamente con "i" y "L" (como se ve en la imagen de abajo), y el espaciado de letra pobre, como cuando un "r" y "n" parecen un "metro". Así que al elegir su tipo, asegúrese de comprobar su tipo en diferentes contextos para asegurarse de que no va a causar un problema para sus usuarios.
6. Evita todos las mayúsculas
Todo el texto de mayúsculas - que significa texto con todas las letras mayúsculas - está bien en contextos que no implican la lectura (como acrónimos o logotipos), pero cuando su mensaje envuelve lectura, no obligue a sus usuarios a leer todo el texto de mayúsculas. Como se menciona por Miles Tinker, en su obra de referencia, Legibilidad de impresión, la impresión de todo el capital retarda mucho la velocidad de escaneo y lectura en comparación con el tipo de minúscula.
7. No minimices el espacio entre líneas
En tipografía, tenemos un término especial para el espaciado entre dos líneas de texto - líder (o altura de línea). Al aumentar el líder, se aumenta el espacio en blanco vertical entre las líneas de texto, mejorando en general la legibilidad a cambio de la pantalla de bienes raíces. Como regla general, el liderazgo debe ser cerca del 30% más que la altura del personaje para una buena legibilidad.
 |
| Un buen espaciado ayuda a mejorar la lectura |
Correctamente usando espacio en blanco entre los párrafos se ha demostrado que aumentan la comprensión hasta el 20%, como señala Dmitry Fadeyev. La habilidad de usar el espacio en blanco consiste en proporcionar a sus usuarios una cantidad digerible de contenido, luego despojando detalles extraños.
8. Asegúrate de que la fuente tiene suficiente contraste de color
No utilice el mismo o colores similares para el texto y el fondo. Cuanto más visible sea el texto, los usuarios más rápidos podrán leerlo y leerlo. El W3C recomienda las siguientes relaciones de contraste para el texto del cuerpo y el texto de la imagen:
- El texto pequeño debe tener una relación de contraste de al menos 4.5: 1 contra su fondo.
- Texto grande (con 14 pt negrita / 18 pt regular y arriba) debe tener una relación de contraste de al menos 3: 1 en contraste con su fondo.
 |
| Estas lineas de texto no utilizan correctamente el contraste de colores respecto al color de fondo |
 |
| Estas lineas de texto utilizan bien el color de contraste con el color de fondo y son fáciles de leer |
9. Evita colorear texto en rojo o verde
La ceguera de color es una condición común, especialmente entre los hombres (8% de los hombres son daltónicos), se recomienda utilizar otras señales, además de color para distinguir información importante. También evitar el uso de colores rojos y verdes por sí solos para transmitir información porque la ceguera de color rojo y verde es la forma más común de ceguera de color.
10. Evita utilizar texto intermitente
El contenido que parpadea o parpadea puede desencadenar convulsiones en individuos susceptibles. No sólo puede causar convulsiones, pero es probable que sea molesto o distraer a los usuarios en general.
Conclusión
La selección de fuentes adecuada es una gran cosa. Haciendo las opciones correctas en la selección de fuentes puede dar a tu Website una sensación del crujiente y del pulimento. Las malas opciones de selección de fuente, por el contrario, distraen y tienden a llamar la atención sobre sí mismas. Es esencial que la fuente sea comprensible y legible.
La fuente debe honrar el contenido de una manera que nunca agregue carga cognitiva al usuario.
Comentarios
Publicar un comentario