Tipografía

Al utilizar una escala tipográfica clara y concisa, mantenemos un patrón de jerarquías visuales fácil de seguir para cualquier usuario. Definimos una escala tipográfica para el diseño de emails, legible en dispositivos desktop y mobile.


Familias tipográficas

Roboto + Roboto Slab

Tipografías diseñadas para entornos digitales, de carácter moderno y fácil lectura, su estética sobria no interfiere con el contenido. Buen funcionamiento en tamaños pequeños, y 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

Rr
  • Regular
  • Italic
  • Medium
  • Medium Italic
  • Bold
  • Bold Italic
Descargar Roboto launch

Roboto Slab

Rr
  • Regular
  • Medium
  • semibold italic
  • semibold
  • Bold
Descargar Roboto Slab launch

Alternativas de respaldo

Para casos en que Roboto y Roboto Slab no se carguen correctamente, se deben asignar Arial y Georgia respectivamente como reemplazo. Estas son tipografías de carga segura en todos los navegadores.

Roboto > Arial

Rr
  • Regular
  • Italic
  • Medium
  • Medium Italic
  • Bold
  • Bold Italic

Roboto Slab > Georgia

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

Escala tipográfica mailing

Ejemplo
color
peso
tamaño
line
spacing
--
Display
Bold
34px
44px
0px
h1
Título
Bold
30px
40px
0px
h2
Título
Bold
26px
36px
0.18px
h3
Título
Bold
23px
32px
0.18px
h4
Título
Bold
20px
38px
0.2px
h5
Título
Bold
18px
24px
0.1px
h6
Título
Bold
16px
24px
0.1px
p
body
Regular
16px
24px
0.5px
p small
body small
Regular
14px
20px
0.5px
a
Medium
16px
24px
0.5px
a small
body link small
Medium
14px
20px
0.5px
span
subtítulo
Medium
14px
16px
1px
quote
Cita
Bold
18px
28px
0.2px
#000000
#0176DE
#FFFFFF
#707070