Tipografía

Los tamaños, jerarquías y usos donde las tipografías se utilizan para diversos contextos.

Montserrat es la tipografía utilizada para el ecosistema de marca AIEP, una familia muy amplia que permite una muy buena lectura en diversos tamaños.

Tiene cualidades que se alinean perfectamente a los principios de Malta: cercana, simple, fácil de leer, buen contraste en sus contraformas y una construcción geométrica, permitiendo un uso en diversas combinaciones entre sus pesos y tamaños.

Jerarquías

Los contrastes de pesos y tamaños en las tipografías utilizados en los componentes y en los productos de AIEP, permiten énfasis y jerarquías en las lecturas. Para eso definimos un limite de tamaños y pesos para unificar el ecosistema.

Para Malta seleccionamos un tamaño grande para Display (H1) y tres versiones de tamaños para titulares (H2, H3, H4). Esto permite que los titulares principales que no deben ser extensos, sean un aporte gráfico a la página, otorgándole énfasis y ritmo a la lectura.

Para el cuerpo del texto (Body 1), es decir, todos los textos extensos como párrafos, el principal tamaño es de 16px y de espaciado 26px (interlinea), lo que permite una lectura agradable para las pantallas con un ancho de la caja de texto como máximo utilizado en esta pagina de Malta. También definimos dos tamaños más para textos que se incluyen abajo de una imagen, o al margen mas pequeño (Body 1). El tamaño mas pequeño es de 12px (Small) para ser utilizado en textos menores o en botones o vínculos de menor tamaño.

El último tamaño corresponde a la etiqueta de los botones, con el mismo tamaño de 16px, con eso los botones tienen una mayor presencia y legibilidad para un amplio número de personas.

Aplicando tipografías

Cuadros de Diálogo

Los contrastes de pesos y tamaños en las tipografías de los componentes y en los productos de AIEP permiten una compresión de lo que es mas importante al escanear el componente y su contenido. En este caso podemos comprender que en los módulos de diálogo simple (texto y botones)

Detalles de estilos:

  1. Título Mediano: Montserrat Extrabold, 24px tamaño / 32px espaciado
  2. Cuerpo Grande:Montserrat Medium, 16px tamaño / 26px espaciado
  3. Etiquetas Botón: Montserrat Semibold, 16px tamaño / 26px espaciado

Tarjetas Verticales

Los contrastes de pesos y tamaños en las tipografías de los componentes y en los productos de AIEP permiten separar visualmente entre textos informativos y descriptivos con botones interactivos. En esta tarjeta de formato vertical con contenido full se incluye y se separa el título, los chips que etiquetan el contenido, fotografía, texto descriptivo y el botón de la acción.

Detalles de estilos:

  1. Título Mediano: Montserrat Extrabold, 24px tamaño / 32px espaciado
  2. Cuerpo Mediano:Montserrat Semibold, 14px tamaño / 24px espaciado
  3. Cuerpo Grande: Montserrat Medium, 16px tamaño / 26px espaciado
  4. Etiqueta Botón: Montserrat Semibold, 16px tamaño / 26px espaciado

Tarjetas horizontales

En este caso para tarjetas de menor tamaño y horizontales, incluye dos estilos.

Detalles de estilos:

  1. Título Mediano: Montserrat Extrabold, 24px tamaño / 32px espaciado
  2. Cuerpo Mediano:Montserrat Semibold, 14px tamaño / 24px espaciado

Diálogos

Para este módulo de diálogo con apertura en una hoja inferior, estos son los siguientes estilos tipográficos aplicados:

  1. Título Mediano: Montserrat Extrabold, 24px tamaño / 32px espaciado
  2. Cuerpo Mediano:Montserrat Semibold, 14px tamaño / 24px espaciado

Tipografía