Tipografía

Al utilizar una escala tipográfica clara y concisa, se mantiene un patrón de jerarquías visuales fácil de seguir para cualquier usuario.

Para cada elemento de la estructura de un gráfico se ha definido una familia y los estilos de tipografía.


Familias tipográficas

Una familia tipográfica es un conjunto de fuentes tipográficas diferentes con una clara raíz común, en las que varía el grosor o la anchura. Esto permite que se puedan usar combinadas aportando contrastes, pero manteniendo la armonía.   

Roboto

Rr
  • Regular
  • Italic
  • Medium
  • semibold italic
  • semibold
  • Medium Italic
  • Bold
  • Bold Italic

Tipografía para elementos de texto

Tipografía diseñada para entornos digitales, de carácter moderno y fácil lectura, la estética sobria de Roboto no interfiere con el contenido. Funciona bien en tamaños pequeños, y tiene buena legibilidad en pantallas de baja resolución.

Es la tipografía por defecto del sistema operativo Android, lo que acelera los tiempos de carga en estos dispositivos.

Roboto Mono

01
  • Regular
  • Italic
  • Medium
  • semibold italic
  • semibold
  • Medium Italic
  • Bold
  • Bold Italic

Tipografía para elementos numéricos

Roboto Mono es una adición monoespaciada (letras y caracteres ocupan exactamente la misma cantidad de espacio horizontal) a la familia tipográfica Roboto. Al igual que los otros miembros de la familia Roboto, las fuentes están optimizadas para pantallas en una amplia variedad de dispositivos y entornos de lectura.

Roboto Mono facilita la comprensión de las cifras gracias al espaciado de los caracteres de punto (.) y coma (,).


Familias tipográficas alternativas

En caso de no contar con Roboto o Roboto Mono se deben utilizar las siguientes tipografías:  

Arial

Rr
  • Regular
  • Italic
  • semibold italic
  • semibold
  • Bold
  • Bold Italic

Tipografía para elementos de texto

Incluida en el sistema operativo Windows, Arial se ha convertido en una de las fuentes predeterminadas favoritas debido a su gran legibilidad y sencillez de diseño. Sutiles curvas y espacios entre las letras la hacen más legible en las pantallas de diferentes resoluciones.  

Consolas

01
  • Regular
  • Italic
  • semibold italic
  • semibold
  • Bold
  • Bold Italic

Tipografía para elementos numéricos

Tipografía monoespaciada pensada exclusivamente para programación. Optimizada para la tecnología ClearType que permite una mejor lectura en pantallas TFT, la Consolas resulta más económica en espacio que otras tipografías similares, como Courier, y posee una menor altura.

Al igual que otras fuentes monoespaciadas, facilita la comprensión de las cifras gracias al espaciado de los caracteres de punto (.) y coma (,).


Estilos tipográficos

Una familia tipográfica es un conjunto de fuentes tipográficas diferentes con una clara raíz común, en las que varía el grosor o la anchura. Esto permite que se puedan usar combinadas aportando contrastes, pero manteniendo la armonía.

Escala base de tamaños

40px
32px
20px
18px
16px
14px
12px

Estilos para textos

Familia tipográfica: Roboto

Ejemplo
color
peso
tamaño
line
spacing
Título
Bold
40px
48px
0px
Título
Medium
32px
36px
0.23px
Título
Medium
20px
24px
0.25px
Párrafo large
Regular
18px
32px
0.5px
Párrafo normal
Regular
16px
24px
0.5px
Párrafo small
Regular
14px
20px
0.28px
Enlace
Medium
16px
24px
0.5px
Título de eje
Bold
14px
20px
0.5px
Label
Regular
12px
16px
0.5px
Leyenda
Regular
14px
20px
0.5px
Tooltip
Bold/Regular
14px
20px
0.5px
Fuente info
Bold/Regular
14px
20px
0.5px
#000000
#0176DE
#FFFFFF
#707070

Estilos para números

Familia tipográfica: Roboto Mono

Ejemplo
color
peso
tamaño
line
spacing
KPI XL
Bold
28px
32px
-0.5px
KPI: 123.456.789
Bold
18px
24px
-0.5px
Label: 123.456.789
Regular
12px
16px
0px
Tooltip: 123.456.789
Bold/Regular
14px
20px
-0.5px
#000000
#0176DE
#FFFFFF
#707070

Estilos para textos

Familia tipográfica: Arial

Ejemplo
color
peso
tamaño
line
spacing
Título
Bold
40px
48px
0px
Título
Regular
32px
36px
0.23px
Título
Regular
20px
24px
0.25px
Párrafo large
Regular
18px
32px
0.5px
Párrafo normal
Regular
16px
24px
0.5px
Párrafo small
Regular
14px
20px
0.28px
Enlace
Regular
16px
24px
0.5px
Título de eje
Bold
14px
20px
0.5px
Label
Regular
12px
16px
0.5px
Leyenda
Regular
14px
20px
0.5px
Tooltip
Bold/Regular
14px
20px
0.5px
Fuente info
Bold/Regular
14px
20px
0.5px
#000000
#0176DE
#FFFFFF
#707070

Estilos para números

Familia tipográfica: Consolas

Ejemplo
color
peso
tamaño
line
spacing
KPI XL
Bold
28px
32px
-0.5px
KPI: 123.456.789
Bold
18px
24px
-0.5px
Label: 123.456.789
Regular
12px
16px
0px
Tooltip: 123.456.789
Bold/Regular
14px
20px
-0.5px
#000000
#0176DE
#FFFFFF
#707070

Estilos tipográficos aplicados

Se presenta un ejemplo de uso de los distintos estilos, que además permite reconocer el nombre de los elementos. 

  1. Título de la visualización
  2. Label (etiqueta)
  3. Título de eje
  4. Tooltip (globo de información)
  5. Leyenda
  6. Fuente de información