• slidebg1

CONSIDERACIONES TIPOGRÁFICAS EN UI


Sería justo decir que la tipografía es una de las partes más difíciles y determinantes del diseño de interfaz de usuario.

Está continuamente acompañándonos durante el uso de cualquier producto digital. Se trata de la conexión más directa entre el usuario y el contenido.

Debido a la importancia de esta, se han establecido muchas normas y teorías que tener en cuenta para realizar un uso correcto. En este artículo, se proponen algunos consejos prácticos y trucos que puedes usar en tus proyectos.

 

SOBRE LEGIBILIDAD 

En tipografía y diseño gráfico, es la capacidad que tiene un texto de leerse con facilidad y en consecuencia, entenderse. A mayor legibilidad, mayor facilidad para percibir el texto de una manera correcta y de entender el mensaje que transmite.

Cuestiones como distinguir un título de un subtítulo, tener continuidad de lectura en lo que a longitud de párrafos se refiere, distinguir caracteres con facilidad... 

Realmente es un arte de contraste, color, tamaño, composición y pequeños detalles que resulta en una mejor experiencia de lectura.

La legibilidad es una medida de lo fácil que es distinguir una letra de otra en una tipografía en particular. Es micro tipografía que se centra en el tipo de letra, las letras y los detalles. Naturalmente, este es uno de los factores más esenciales. No todos los tipos de letra se crean con legibilidad como función de diseño primario.

A continuación, exponemos algunos consejos que nos ayudarán a seleccionar y utilizar bien una determinada tipografía en un proyecto concreto.

 

1 _ Altura de la X 

En tipografía, la altura de la x hace referencia a la altura de las letras en minúscula (caja baja) sin tener en cuenta ni los ascendientes ni descendientes. Se mide desde la línea base hasta el punto más alto de las letras sin ascendientes. 

El 95% de las letras que leemos son minúsculas. Las proporciones de letras más grandes entre mayúsculas y minúsculas tienden a dar como resultado una tipografía más legible.

 

 

2 _ Huecos 

También tenemos espacio en blanco dentro de las letras (llamados ojales, huecos...). Estos espacios nos ayudan a reconocer rápidamente los diferentes caracteres, facilitando una lectura fluida.

Muchos profesionales coinciden en que estos espacios internos son lo que realmente facilita la comprensión de la forma (lleno/vacío).






3 _ Peso (Grosor)

Cuando hablamos del peso de una tipografía hacemos referencia al grosor que existe en sus trazos que puede ser mayor o menor.

Una tipografía light (ligera) tiene mucho menos peso que una bold (o negrita).

Tipos de letra más ligeros suelen ser más legibles que pesos más pesados de tipo, siempre que hablemos de textos de lectura. Esto no impide el uso de tipografías bold para titulares o textos cortos.

El mejor grosor de trazo es aproximadamente el 18% de la altura x.

 

4 _ Proporción

La proporción es la relación existe entre la anchura y la altura de un carácter. 

En general, es preferible una letra amplia sobre una estrechada (condensed) para un mejor reconocimiento de letras y gracias a eso para una mejor legibilidad.

El uso de tipografías de este ámbito se limita a situaciones muy concretas, donde realmente se esté buscando un objetivo concreto donde cobre sentido la elección de estas características.

 

5 _ Tracking (Espaciado entre caracteres)

No existe una forma definitiva de calcular el espaciado entre letras.

Una norma generalizada es que a mayor tamaño del texto menor espacio entre caracteres.

En diseño de UI se trabajará en base a la idea de no ver tipografías demasiado “separadas / juntas” velando por la legibilidad del texto. Las pruebas de lectura son esenciales para dar con la fórmula correcta para según que casos.

Debemos tener en cuenta que cada utilización del texto (titulares, texto continuado, botón, llamadas la acción…) requiere de un tracking concreto en función de su tamaño.

A veces el tracking se utiliza como recurso para buscar atribuir determinadas características a un texto. Es habitual encontrar trackings mayores cuando el texto va a ir sobre un botón.

 

6 _ Serifa / Sin serifa

La historia nos dice que la serifa (o remate) ayuda a que los textos sean más legibles.

Su utilización proviene de la imprenta y el texto impreso donde realmente mejoran la experiencia de lectura para grandes bloques de texto donde la continuidad del texto se acentúa mediante el uso de la serifa.

La historia es diferente en la actualidad y sobretodo si nos centramos en el ámbito digital. Hay varias tipografías sin serifa (o “de palo seco”) que son legibles y el estado actual del diseño visual ha desencadenado en el uso formas de letra más simples y concisas.

Especialmente en dispositivos móviles vemos muchos más, no existen como norma general bloques de texto excesivamente amplios debido al tamaño de los dispositivos que manejamos y eso repercute en un mayor uso de tipografías sin serifa.

Todo depende del proyecto y de cómo los usuarios se relacionarán con su contenido. Por ejemplo, un noticiario tiene sentido que tenga serifa, mientras que en una app tipo “twitter” ,donde los mensajes son más directos y cortos, una tipografía sin serifa tiene más sentido.

La combinación de ambas suele tener un agradable resultado.

 

7 _ Interlineado 

¿Cúal es el espacio correcto entre líneas para una lectura fluida?

Este tamaño viene relacionado directamente con el tamaño de la letra.

Existe una “proporción áurea” que podemos calcular rapidamente y conseguir un interlineado perfecto.

Multiplica el tamaño de letra por 1.618.

Aunque la proporción áurea nos ayuda, no siempre tendrá el resultado que esperamos y nos tocará ajustar manualmente para conseguir un interlineado que facilite la lectura de una manera cómoda (algo similar a lo que hacemos con la pruebas en cuanto al tracking).

Otra práctica válida para los cuerpos de letra más habituales es que el interlineado sea superior en dos puntos al cuerpo de letra.

 

8 _ Longitud de línea

Anchura máxima de la composición de una línea de texto, se puede establecer un promedio mínimo 50 caracteres por línea y nunca más de 70.

Una línea de texto de más de 70 caracteres hará que nuestros ojos tengan dificultades para encontrar la siguiente línea de texto.

Una línea de texto de menos de 50 caracteres hará que nuestros ojos tengan que saltar de línea en línea más habitualmente, rompiendo el ritmo de lectura demasiadas veces.

Pero estamos hablando de bloques de texto dinámicos, que modificará en muchas ocasiones el tamaño de la caja de texto en función del dispositivo. Esto hará que tengamos que hacer diferentes pruebas para ver que el texto se comporta como teníamos pensado.

Algunas cuestiones a evitar en la medida de lo posible:

Viuda: la línea corta de un párrafo que queda aislada como primera línea de la siguiente columna. 

Huérfana: primera línea de un párrafo que queda aislada como última de una columna.

 

9 _ Color

Depende del proyecto, pero hay un truco que muchos diseñadores usan habitualmente.

En lugar de usar colores grises puros (o negros) elige tu color principal y trabaja en función de él. 

Los colores que van más allá del negro y saturan con algún otro color dan un aspecto más atractivo a las tipografías.

 

 

10 _ Espaciado entre bloques de texto 

Ese es un tema extenso sobre el que no hay una uniformidad de opinión y muchas veces va relacionado con la estética del diseño, la composición y el peso de los diferentes elementos en pantalla. 

Para trabajar con tipografía debemos entender este espacio como el elemento que separa los diferentes bloques de texto evitando que recibamos demasiada información de una vez.

No ayuda a digerir el texto y a que no nos sobrecargue con contenido. El espacio en blanco guía nuestros ojos a través del diseño y crea sensación de orden y elegancia.

 

11 _ Jerarquía

La jerarquía define cómo leer el contenido.

Nos hace distinguir el encabezado del subtítulo y el cuerpo del texto.

Podemos lograr esto mediante el uso de diferentes contrastes, rellenos, márgenes, tamaños, etc. Es una técnica importante que debe trabajarse para lograr una buena legibilidad.



POR ÚLTIMO… 

Debemos recordar que, además de la estética, tenemos usuarios. 

Hay cuestiones importantes a la hora de seleccionar un tipografía: 

La fuente que usará debe ser versátil. Debe ofrecer variedad de pesos, una amplia gama de símbolos especiales y debe renderizarse muy bien en los diferentes dispositivos. 

Es importante prestar atención a estos aspectos para que sus usuarios no sufran las consecuencias de no hacer un buen uso tipográfico.¡

Una buena tipografía pasará desapercibida, pero una mala elección de esta será siempre tema de conversación. 

Entender lo que hace que las letras sean legibles nos brinda una mejor opinión a la hora de elegir una fuente para nuestra interfaz.

 

BIBLIOGRAFÍA

Cómo diseñar el diseño en la interfaz

Lin Simon

https://medium.com/as-a-product-designer

Typography In Mobile Design — 15 Best Practices To Excellent UI

Trista liu

https://blog.prototypr.io/typography-in-mobile-design-15-best-practices-to-excellent-ui-ecbc692bde9f 

Manual de tipografía: del plomo a la era digital

Libro de José Luis Martín Montesinos y Montse Mas Hurtuna

 

Públicado el 15/11/2017

Comparte este post: