Elegir la fuente perfecta nunca es fácil. Y cuando tu elección puede marcar la diferencia entre una interfaz encantadora y fácil de usar o esa nueva aplicación que todo el mundo ama odiar, el reto es aún mayor. Aquí te enseñamos a elegir la tipografía adecuada para tus usuarios.
Elegir la fuente correcta para una interfaz de usuario plantea desafíos únicos. Después de todo, no estás solo buscando una tipografía que encaje con tu marca o que tenga un impacto visual arrollador.
Buscas una tipografía todoterreno. Una fuente que funcione bien en distintos contextos y dispositivos. Una que se vea igual de bien a 72px que a 10px. Una fuente que permita distinguir fácilmente la I mayúscula de la l minúscula.
¿Por qué? Porque después de todo el tiempo que has dedicado a que tu interfaz sea clara y fácil de usar, no querrás que tu texto —que, al fin y al cabo, está ahí para ayudar a la gente— termine confundiéndola.
Con esto en mente, aquí tienes lo que debes buscar en una fuente para tu interfaz.
1. Altura de la x generosa
En tipografía, la altura de la x mide la distancia entre la línea base (la línea imaginaria sobre la que "se sientan" la mayoría de las letras) y la altura media de las letras minúsculas, sin contar los trazos ascendentes como los de la H o la T.
¿Por qué fijarse en la altura de la x de tu fuente? Porque una altura de x mayor suele traducirse en una mejor legibilidad cuando se usa en tamaños pequeños.
En el diseño de interfaces, rara vez tienes espacio para mucho texto en tamaño grande, así que la composición tipográfica consiste en encontrar el equilibrio entre el tamaño del texto y su legibilidad. Una fuente con una altura de x generosa te permitirá reducir el tamaño sin perder claridad.
2. Formas de letras fácilmente distinguibles
Realmente no fue diseñada para tamaños pequeños en pantallas. Palabras como "mililitro" pueden ser muy difíciles de descifrar. Si alguna vez has tenido que leer o escribir una contraseña con 1, i, l o I, ya conoces el problema.
–Erik Spiekerman sobre las dificultades de usar Helvetica en interfaces de usuario
Los alfabetos permiten una asombrosa capacidad de expresión con un conjunto muy pequeño de elementos gráficos. Eso es genial, pero el efecto secundario desafortunado es que algunas formas de letras son muy fáciles de confundir, especialmente cuando se muestran en tamaños pequeños.
Aquí tienes los culpables más comunes de la confusión entre letras:
- a c e o (es decir, A, C, E y O)
- Il1 (I mayúscula, l minúscula y el número 1)
- O0 (O mayúscula y cero)
Este problema puede ser especialmente pronunciado en fuentes geométricas (como Futura, Avenir, Circular, etc.), así que piénsalo bien antes de elegir una de ellas para tu interfaz.
La próxima vez que evalúes tipos de letra para una interfaz, asegúrate de comparar estas letras para ver qué tan fácil es distinguirlas.
3. Legibilidad general
También es importante alejarse un poco de las formas de las letras individuales y considerar la legibilidad general de una fuente a nivel de palabra. Con una buena fuente para interfaz, deberías poder distinguir las palabras sin esfuerzo.
Al comparar Brush Script MT con Source Sans Pro, es fácil ver que las formas complejas de la fuente script requieren más tiempo y esfuerzo para descifrarse que las formas relativamente simples de la sans serif. Esta comparación también destaca el valor, ya mencionado, de una altura de x grande; aunque no lo creas, ambas fuentes están configuradas al mismo tamaño y, sin embargo, Source Sans se ve enorme en comparación.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
4. Flexibilidad total de la familia
Esto no es estrictamente necesario —puedes diseñar toda una interfaz con una sola fuente—, pero es increíblemente útil tener a tu disposición una variedad de pesos y estilos. Los diseñadores de tipos se dieron cuenta hace mucho tiempo de que ciertas variaciones de diseño funcionaban mejor en tamaños grandes que en pequeños, y viceversa; por eso verás estilos variantes de una fuente como display, caption, condensada, etc.
Así que, si tu interfaz incluirá una variedad de tipos de contenido como etiquetas, textos de ayuda, leyendas y titulares, será increíblemente útil que tu fuente admita todos esos tipos de texto diferentes. Es una ventaja tanto para otros diseñadores de tu equipo como para tus clientes, ya que te permite usar la tipografía de forma expresiva sin arriesgar la cohesión de tus diseños.
Incluso puedes ir un paso más allá y buscar una superfamilia, una fuente que incluya múltiples estilos, como una serif, una sans serif y una monoespaciada. Eso amplía aún más tus opciones para una tipografía expresiva, permitiendo al mismo tiempo una sensación muy armoniosa.
Un ejemplo clásico es la superfamilia Thesis de Luc(as) de Groot, que actualmente incluye una serif, una sans, una híbrida serif/sans, una monoespaciada, una hairline y una árabe.
5. Idoneidad para tu propósito
Muchas fuentes fueron diseñadas pensando en un uso particular, así que vale la pena elegir una fuente creada para adaptarse al propósito de tu sitio.
Por ejemplo, las sans-serif se han convertido prácticamente en la opción preferida para interfaces de usuario centradas en tareas. Pero si estás creando una aplicación enfocada en la lectura, quizás prefieras usar una tipografía serif, ya que la larga asociación ha convertido a esa clasificación en el estándar. En esa misma línea, si estás creando un sitio de noticias, probablemente querrás elegir una fuente serif con variantes para titulares, leyendas y cuerpo de texto, y quizás un miembro de la familia sans-serif para elementos de interfaz y metadatos.
También vale la pena señalar que los estudios han demostrado que las tipografías serif se consideran más confiables —es decir, la gente tiende a encontrar más creíbles las afirmaciones escritas en una serif que la misma afirmación impresa en una sans.
Más allá de ese hallazgo, vale la pena notar que no existe respaldo científico para la afirmación común de que las fuentes serif son mejores para la lectura de textos largos. Es más probable que las serif se perciban como más "acordes a la marca" para la lectura extensa, ya que siguen siendo el tipo de fuente (abrumadoramente) dominante en los libros.
6. Alineación con la marca
Finalmente, y muy importante, debes asegurarte de que la fuente de tu interfaz se alinee con la marca general de tu sitio.
Si lo tuyo es el contenido peculiar y divertido, una fuente excéntrica podría ser justo lo que necesitas; solo recuerda que las formas de letras extravagantes pueden ser subóptimas en las interfaces de usuario. Pero si buscas la respetabilidad de un New York Times, querrás optar por una serif sin dudarlo. A menos, claro, que intentes reinventar el concepto de las noticias; en cuyo caso, ¡adelante y dale un toque sans!
Por lo general, puedes tener una idea clara de la "marca" de una fuente y cómo se relaciona con la de tu sitio con solo un vistazo. Pero no querrás limitar esta evaluación a ti mismo: como tu respuesta a una fuente es subjetiva, querrás preguntar a otros qué les parecen tus posibles opciones.
También te puede interesar investigar la historia de la tipografía: el contexto en el que se creó y el propósito que buscaba el tipógrafo al diseñarla. Si estás creando un blog de literatura feminista, Mrs. Eaves sería una elección muy acertada. ¿Escribes sobre la vida en San Francisco? Mission Gothic y Mission Script de Lost Type Co-op podrían ser la combinación perfecta.
Eso sí, no te pases con estas asociaciones: el sitio web de tu restaurante japonés no necesita una tipografía que imite la caligrafía japonesa. Y el sitio de tu cliente sobre jeroglíficos egipcios tampoco pide a gritos esa... tipografía que no debe ser nombrada.
¿Cuáles son tus tipografías de interfaz favoritas?
Nos encantaría saber cuáles son tus tipografías de interfaz favoritas y por qué. ¡Cuéntanoslo en los comentarios!
