El éxito de una marca o de un sitio o aplicación a veces depende simplemente de la tipografía. La tipografía (del griego τύπος [típos], 'golpe' o 'huella', y γράφω [gráfο], 'escribir') es una piedra angular del diseño UX.

Más del 90% de la información en línea está en forma de texto. Por eso también siempre recalcamos la importancia de tener un buen equipo de UX writers.

La disciplina de diseño de la tipografía, o elección de la misma, no es solo elegir una fuente estética y atractiva. Hay muchos aspectos a considerar. Empecemos por entender algunos términos.

Fuente: Medium

¿Qué es la tipografía?

La tipografía es una disciplina del diseño que implica el uso de tipos de letra y la organización de esos tipos de letra para crear interfaces o experiencias legibles, utilizables e, idealmente, fáciles de usar.

La tipografía efectiva mejora la usabilidad, capta la atención del usuario, aumenta las tasas de conversión. Genera emociones positivas o negativas en el usuario. Por eso es clave su buen uso.

https://images.unsplash.com/photo-1522896696058-236b2f7fb361?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb

10 principios básicos

1# Aprende los términos y conceptos:

2# Jerarquía

Siempre hay palabras, en todas las interfaces. En general en los diseños de interfaz de usuario encontramos estos elementos: texto, rectángulos/cuadros, botones e iconos. Lo que hacemos con estos elementos puede llevar al éxito o al desastre de una experiencia de usuario.

La jerarquía ayuda a mejorar la escaneabilidad y la legibilidad de una interfaz. Lo que tenemos que lograr es que el usuario encuentre rápidamente lo que busca. Y enfoque en lo importante.

Para cosas importantes, texto en mayor tamaño o en negrita. Para cosas menos importantes, texto más pequeño y más claro.

3# Altura y longitud

La altura y el ancho de línea son esenciales para garantizar que los bloques de texto se puedan leer fácilmente en diferentes tamaños de dispositivos.

4# Legibilidad

Es necesario asegurarse de que la tipografía sea legible y accesible para las personas con algún tipo de discapacidad (daltonismo, discapacidad auditiva, etc.). Para esto es recomendable seguir las Web Content Accessibility Guidelines (WCAG).

Aquí hay algunos estándares que optimizarán la interfaz de usuario para una óptima legibilidad. Hay más en Accessible.org. En Argentina, los organismos estatales difunden estas directivas que también pueden resultarte útiles.

5# Limitar el número de tipos de letra

Mezclar demasiados tipos de letra diferentes puede hacer que la aplicación parezca fragmentada y desprolija. Nadie quiere eso.

Utiliza familias de fuentes. Las mismas están diseñadas para trabajar juntas, por lo que son consistentes y guardan una coherencia entre sí.

6# Define pautas de escala tipográfica ****

Si no quieres crear pautas tipográficas desde cero, una opción es probar un generador de escala para tamaños de fuente para párrafos, encabezados, botones, etc.

7# Usa palabras y frases reconocibles

Las reglas y métodos mejorar la legibilidad y la estética de la interfaz. Pero también hay que tener en cuenta la comprensibilidad de las palabras de la interfaz.

Estos son algunos tips:

8# Resalta la información importante

No todo es relevante. Esto lo enseñan en la escuela, por eso subrayamos y resaltamos. Esto también mejora con la práctica.

Puedes enfatizar información con el peso, los colores y el tamaño de la fuente. Esto mejora la capacidad de escaneo de una interfaz y permite a los usuarios realizar las acciones deseadas rápidamente sin aumentar la carga cognitiva.

9# Ten en cuenta que tu idioma no es el único

Este es un factor que puede cambiar drásticamente los diseños si no se tiene en cuenta adecuadamente. Hay que tener en cuenta la longitud de las palabras según los idiomas. También la alineación, ya que algunos alfabetos se leen de derecha a izquierda, como el árabe.

Esto requiere ajustes en el espacio entre líneas y la alineación para que la tipografía funcione bien en la misma interfaz de usuario para todos los idiomas.

10# En caso de duda, utiliza fuentes del sistema

iOS y Android tienen tipos de letra nativos del sistema que admiten una variedad de pesos, tamaños, estilos e idiomas, por lo que se puede diseñar experiencias de lectura estéticas y fáciles en cualquier aplicación.

iOS utiliza San Francisco (SF) y Nueva York (NY). En Android, su fuente principal es Roboto y Noto es el tipo de letra predeterminado para todos los idiomas que no cubre Roboto.

Puedes consultar más información, aquí.

Por si tienes un rato libre y quieres profundizar:

https://www.youtube.com/watch?v=Z37lEQMfPtg

Por si tienes un rato libre y quieres salir del aburrimiento:

https://www.youtube.com/watch?v=gntgnhlK0X8

Si quieres invitarnos un cafecito, entra aquí