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.

Familias tipográficas

Roboto
Roboto Slab

Descarga Roboto aquí

Descarga Roboto Slab aquí

Tipografía diseñada 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.

Escala tipográfica principal

Ejemplo Color Peso Tamaño Line Spacing
h1

Título 1er nivel

Bold 40px 48px 0
h2

Título 2do nivel

Medium 32px 36px 0.23px
h3

Título 3er nivel

Bold 24px 28px 0.18px
h4

Título 4to nivel

Bold 20px 24px 0.25px
h5
Título 5to nivel
Bold 18px 24px 0.25px
h6
Título 6to nivel
Bold 16px 24px 0.25px
p

Body

Regular 16px 24px 0.5px
a

Body link

Medium 16px 24px 0.5px
p large

Body Large (blog)

Regular 18px 32px 0.5px
p small

Body Pequeño

Regular 14px 20px 0.28px
span Subtítulo
Medium 14px 16px 1px
#000000
#707070
#0176DE
#FFFFFF
Usos alternativos
Ejemplo Color Peso Tamaño Line Spacing
p xl bold

Bajada Blog

Bold 24px 40px 0.18px
p Condensed

Body condensado

Regular 16px 24px 0px
p small extended

Body Pequeño extendido (interletra)

Medium 14px 24px 1px
span extra
subtítulo extendido
Medium 14px 16px 2px

Estilos de Cita

Ejemplo Color Peso Tamaño Line Spacing
quote_xl
Cita XL Blog
Bold 34px 48px 0px
quote
Cita Normal
Regular 24px 36px 0px
#000000
#707070
#FFFFFF