Tanto en el UX Writing, como UX/UI Design, la tipografía juega un papel fundamental.
¿Sabías que la etimología de la tipografía viene del griego τύπος [típos], 'golpe' o 'huella', y γράφω [gráfο], 'escribir'? (Fuente: https://www.pinterest.cl/)

El éxito de una marca, de una web o aplicación, a veces depende simplemente de la tipografía. Más del 90% de la información en línea está en forma de texto. Por eso nunca viene de más recalcar la importancia de tener un buen equipo de UX Writers, ya que la tipografía es una piedra angular del diseño UX.

El 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 que debes considerar: entre ellos el tamaño, la opacidad y el contraste con el fondo. La tipografía en UX debe estar adaptada a los usuarios, y por ello, empecemos por dejar claros algunos términos:

¿Qué es la tipografía?

La tipografía es una disciplina del diseño que implica el uso de tipos de letra y su organización para crear interfaces legibles. Una tipografía efectiva mejorará la usabilidad y captará la atención del usuario, aumentando las tasas de conversión. Generará emociones positivas durante la experiencia de usuario, por eso es clave que conozcas su uso.

La Tipografía es un bonito conjunto de letras, no un conjunto de letras bonitas. “Mathew Carter”.

Los 10 principios básicos de letra y tipografía

A continuación, te presentamos los principios básicos que debes tener en cuenta a la hora de elegir el tipo de letra y tipografía que mejor se adapte a tus usuarios:

#1 Aprende los términos y conceptos

  • Typeface: también conocida como familia de fuentes, la palabra "typeface" se refiere a las caras de los bloques de letras físicos. Un tipo de letra se compone de distintas fuentes.
  • Espaciado/tracking: el seguimiento o espaciado de letras se refiere a aumentar o disminuir uniformemente el espaciado horizontal entre un rango de caracteres.
  • Baseline: la línea de base es la línea invisible sobre la que descansa una línea de texto.
  • Interlineado/leading: el interlineado es el espacio vertical entre dos líneas base de tipo.
  • Peso/weight: El peso se refiere al grosor relativo del trazo de una fuente.
  • Serif/sans serif: Una serifa es una pequeña línea o trazo que se adjunta regularmente al final de una letra o símbolo dentro de una fuente o familia de fuentes en particular. Una tipografía que no incluye serifas es una sans serif (sans=sin).
Descubre los conceptos clave de la tipografía en el UX/UI Design y UX Writing.
La jerarquía de la información será la piedra angular del éxito de tu proyecto de UX/UI Design. (Fuente: https://www.staffdigital.pe/)

#2 Jerarquía

La jerarquía ayuda a mejorar la escaneabilidad y la legibilidad de una interfaz, primando que el usuario encuentre rápidamente lo que busca. Los elementos importantes siempre irán con un texto de mayor tamaño que los menos importantes. Este esquema debes respetarlo con el resto de elementos, como botones o iconos, a lo largo de tu interfaz.

#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. Ten siempre en cuenta que la experiencia digital, puede darse en multitud de pantallas completamente distintas. Usar una tipografía errónea puede echar a perder todo el trabajo de UX/UI Design.

A la hora de decidirte por una tipografía u otra, ten siempre presente la experiencia de usuario, priorizando factores funcionales por encima de estéticos. (Fuente: https://www.pinterest.es/)

#4 Legibilidad

Hasta hace relativamente poco tiempo, la inclusividad en el diseño de interfaces era sistemáticamente obviada. Dando por hecho que todos los usuarios gozan de buena vista o no sufren algún tipo de discapacidad, lo que les dejaba fuera de juego. Problemas de visión y audición son muy comunes y hay que tenerlos siempre en cuenta.

Entre las técnicas para incrementar la inclusividad en UX/UI Design encontramos:

  • Poder incrementar el tamaño del texto.
  • Opción de modo oscuro.
  • Uso de letras y tipografías con buen contraste sobre el fondo.
  • Optar por iconos universales y con texto explicativo.
  • Uso de los principios de la jerarquía visual.

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.).

Si deseas saber más sobre las leyes de la accesibilidad te recomendamos consultar este artículo: Los 10 principios del diseño ;)

#5 Limitar el número de tipos de letra

Mezclar demasiados tipos de letra diferentes puede hacer que la aplicación parezca fragmentada y descuidada. Nuestra recomendación en este aspecto es que uses familias de fuentes ya establecidas. Las mismas están pensadas y diseñadas para trabajar juntas, por lo que son consistentes y guardan una coherencia entre sí.

Las escalas tipográficas son fundamentales en el diseño de experiencia de usuario o UX/UI Design.
Dependiendo de si se trata de encabezados, subencabezados o texto normal, siempre deberás establecer un tamaño de letra y respetarlo a lo largo de toda la experiencia de usuario. (Fuente:https://kaffury.com/)

#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. Inspirarte en otras aplicaciones o páginas web te servirá también para aprender de los referentes del mercado. Consulta tus interfaces favoritas y desmenuza sus componentes.

#7 Usa palabras y frases reconocibles

Las reglas y métodos mejoran la legibilidad y la estética de la interfaz. Pero también hay que tener en cuenta la comprensibilidad de las palabras y el tono. Este siempre dependerá del usuario al que vaya dirigida nuestra solución digital. Ten siempre en cuenta la edad de tu target, además de los siguientes consejos:

  • Evita la jerga.
  • Escribe en tiempo presente.
  • Mantenlo corto y simple.
  • Comienza con el objetivo.
  • Asegúrate de que la voz sea consistente.
"Cuando se diseña una tipografía, se tienen en cuenta diversos factores que afectan a su estilo y la extensión de la familia. El primero de ellos será el uso que vaya a tener." VEGA, Eugenio. Tipografía digital. Tipografía Digital, 2013.MLA

#8 Resalta la información importante

No todo es relevante. Esto lo enseñan en la escuela, por eso subrayamos y resaltamos. Puedes enfatizar información con el peso, los colores y el tamaño de la fuente, lo que mejorará la capacidad de escaneo de tu interfaz. Permitiendo a tus usuarios realizar una lectura fluida, y las acciones deseadas rápidamente, sin aumentar la carga cognitiva.

(Alternativa)

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, permitiendo a los usuarios realizar las acciones deseadas rápidamente sin aumentar la carga cognitiva. Conseguiremos así una lectura fluida, que incrementará la experiencia de usuario y el tiempo de navegación en la web.

Factores culturales intervendrán en la experiencia de los usuarios. Tenlos siempre en cuenta en tu UX/UI Design.
Factores idiomáticos y culturales afectarán a los distintos usuarios. Ten siempre rasgos demográficos y lingüísticos muy presentes. (Fuente: https://aularagon.catedu.es/)

#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. 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.

Todo proyecto de diseño persigue un impacto operativo: afectar el conocimiento, las actitudes o las conductas de la gente. Pero además, todo objeto colocado en un espacio público, ya sea físico o digital, ejercer un impacto cultural. RICUPERO, Sergio. Diseño gráfico en el aula. Nobuko, 2007.

#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. Estos recursos te guiarán fácilmente a la hora de decidirte por una tipografía u otra, sobre todo si estás empezando en el UX/UI Design.

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.
¿Qué tipografía elegir? La que mejor experiencia de usuario reporte a tu proyecto de UX/UI Design.
Existen miles (si no más...) de fuentes a elegir. Pero recuerda que será la UX Research quien determine la más adecuada para tus usuarios. (Fuente: https://www.xn--nosotros-los-diseadores-8hc.com/)

¿Dónde encontrar tipografías gratis?

En la actualidad, como UX/UI Designer, dispones de muchos recursos online para inspirarte y descargar tipografías completamente gratis. Existen muchos más, que te invitamos a descubrir. Pero en la siguiente lista te hablamos de los más conocidos en el mundillo:

  • Dafont: De uso sencillísimo, solo tienes que escribir la temática en el buscador y te mostrará un sin fin de tipografías hermosas. Listas para descargar y editar.
  • Befont: Perfecto si quieres enamorarte de todos sus infinitos estilos de fuente y tipografías originales. Si los logos son lo tuyo, directo a tus marcadores del Chrome.
  • Google Fonts: Referencia absoluta en lo que a fuentes web se refiere, contiene un catálogo interminable. Descarga y usa a discreción una vez ya en tu ordenador.

Resumen

Como has visto, la letra y la tipografía utilizadas en el diseño de interfaces digitales es de vital importancia. No puedes olvidar que el texto, lejos de ser un acompañante, también es un elemento de diseño. Por ello, la figura del UX Writer, trabajando en consonancia con el equipo de UI Design, es tan importante en la creación de experiencias de usuario.

Una vez ya familiarizado con los principios básicos de letra y tipografía, estás listo para adentrarte un poco más en el UX/UI Design. Para ello te recomendamos consultar los enlaces que a continuación encontrarás. Ya sea tu perfil de Marketing o desarrollo, aquí tendrás toda la información que necesitas para seguir tu aventura. ¡Buen UI Design!

Citas

VEGA, Eugenio. Tipografía digital. Tipografía Digital, 2013.

RICUPERO, Sergio. Diseño gráfico en el aula. Nobuko, 2007.

Enlaces de interés

Aquí hay algunos estándares que optimizarán la interfaz de usuario para una óptima legibilidad.

Web Content Accessibility Guidelines (WCAG).

Accessible.org.

En Argentina, los organismos estatales difunden estas directivas que también pueden resultarte útiles.

BALSELLS, Ma Luz Puente; CARRERA, Francisco Viñals. Grafología digital, tipográfica y del diseño visual. Editorial UOC, 2019.