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
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 | 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 | ||||||
| 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 | ||||||