Cómo crear un sistema tipográfico perfecto

Diseño UX
30/6/2021
|
Torresburriel Estudio
Cómo crear un sistema tipográfico perfecto

Una parte muy importante de un diseño de interfaz de producto es la tipografía, ya que determinará gran parte del aspecto visual de la información. Puede ocurrir que una aplicación no tenga iconos o fotografías, pero lo que sí que tiene que tener es texto. 

Con la tipografía conseguimos que el texto sea legible y atractivo para el usuario. Para conseguirlo, hemos de tener en cuenta varios aspectos para crear un sistema tipográfico perfecto:

  1. Tipo de letra
  2. Tamaño base
  3. Escalas
  4. Interlineado base
  5. Ajustes de interletrado 
  6. Colores 

Elegir un tipo de letra

Cómo norma general utilizar un único tipo de letra es suficiente, aunque también se pueden mezclar dos tipos diferenciando los títulos y el cuerpo. La clave está en garantizar que los textos sean legibles y que el estilo sea acorde con el producto que estamos diseñando.

En Google Fonts puedes encontrar todo tipo de tipografías y sus diferentes estilos, así como sugerencias para posibles emparejamientos.

Establecer el tamaño base

El tamaño base se refiere al tamaño de la fuente del cuerpo. Es muy importante que lo definas para que todas las partes estén equilibradas y sean legibles. 

Normalmente el tamaño estándar suele ser de entre 16 y 18 píxeles, garantizando que el contenido se adapte a casi todos los dispositivos y resoluciones.

Crear escalas y pesos

A partir del tamaño base que hayamos elegido tendremos que crear una escala de tipografía. Lo recomendable es utilizar entre 2 y 3 pesos diferentes, ya que si utilizamos más el diseño puede parecer caótico. 

También debemos evitar los pesos elevados (a partir de 700) y los ultraligeros ya que, aunque pueden parecer estéticos, pueden dificultar la legibilidad.

ejemplo de los pesos

Ejemplo de los pesos de la letra Roboto en Google Fonts

Establecer el interlineado

Aunque una de las partes más importantes de la legibilidad es el tamaño de la fuente, el interlineado también juega un papel muy importante, ya que facilita el reconocimiento de las líneas individuales en un texto

Dar aire a los textos a través del interlineado ayudará a la legibilidad, pero también a la arquitectura de la información y el escaneo de la misma

Ajustar el interletrado para cada tamaño

Al igual que el interlineado en sí, el factor que apliquemos al interlineado también es importante para la legibilidad.

En este sentido, la recomendación habitual es que el interlineado sea 1,5 veces el tamaño de la fuente. ¿Por qué? Para que haya espacio para los elementos ascendentes y descendentes de las letras. 

Ojo, esto puede variar en función de la altura base definida para cada tipografía, así que tenlo en cuenta también a la hora de elegir bien cuál usarás en tu proyecto.

Definir los colores

En vez de llamar a los colores por su nombre (verde, rojo o azul) hay que ponerles nombres significativos que ayuden a reconocer el propósito de cada uno de ellos, como por ejemplo éxito, error o color primario. Las opciones más utilizadas son:

  • Principal: Será el color utilizado en la mayor parte del texto de la interfaz.
  • Secundario: Normalmente tendrá un contraste reducido (por ejemplo un color gris) y se utilizará para añadir información complementaria.
  • Botones: Es el color que se utilizará en los botones, enlaces o etiquetas. 
  • Éxito: Usualmente es un color verde para denotar que la acción que se ha realizado es correcta.
  • Error: Generalmente es un color rojo con abundante contraste en su entorno significa que alguna acción no se ha ejecutado como debería. 

En conclusión, la creación de un sistema tipográfico es necesario para perfeccionar la experiencia de lectura de las personas usuarias de nuestro producto, facilitando al máximo la legibilidad, pero también ayudando a la organización jerárquica de la información. Y teniendo en cuenta, también, los objetivos de nuestro producto. Podemos cambiar la tipografía de nuestra web, pero siempre es mejor hacerlo bien desde el principio.

Artículo actualizado en marzo de 2022

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.