La tipografía se basa en el uso de dos fuentes y un conjunto de estilos que incluyen fuente, grosor, tamaño de fuente y espaciado.

Por defecto se utilizan dos fuentes: Inter para la composición de texto estándar y encabezados, y Menlo como fuente monoespaciada. Inter está disponible en Google Fonts, y Menlo viene preinstalado en algunos sistemas operativos. Puedes cambiar estas fuentes según las directrices de tu marca.

§Parámetros de fuente

§Tamaño y espaciado

El espaciado determina el espacio entre las líneas base, y el tamaño de fuente establece el tamaño de la fuente. Estos dos parámetros determinan la legibilidad del texto.

§Grosor

El grosor se especifica para los estilos de texto (el valor por defecto para los grupos Body y Caption es 400) y los estilos de visualización (el valor por defecto para Subheader, Header y Display es 600). Por defecto, los estilos de visualización tienen más grosor. Sin embargo, puede haber excepciones.

§Grupos de estilos

§Body

Se utiliza para todo tipo de texto. Inter está configurado como valor por defecto (400).

Body 1 Short tiene un espaciado reducido y se utiliza dentro de bloques de contenido estrechos (de hasta 300-400px de ancho).

§Caption

Las fuentes más pequeñas de todas las fuentes disponibles. Se utiliza como estilos para pies de foto, notas al pie y cualquier información adicional. Inter está configurado como valor por defecto (400).

§Header

Se utiliza comúnmente como encabezados en interfaces donde la densidad de la información es crucial. Inter está configurado como valor por defecto (600).

§Subheader

Se puede utilizar como subencabezados o como acentos cuando se combina con estilos de cuerpo apropiados. Inter está configurado como valor por defecto (600).

§Display

Adecuado para situaciones donde la visualización es más importante que la densidad de la información, como en el diseño de comunicación. Inter está configurado como valor por defecto (600).

§Code

Se utiliza para mostrar código en bloques separados. Menlo está configurado como valor por defecto.

§Code Inline

Se utiliza para mostrar código incrustado en texto plano. Se utiliza un espaciado de línea reducido para compensación óptica y alineación con el texto plano. Al cambiar las fuentes, asegúrate de que el código en línea se muestre correctamente. Menlo está configurado como valor por defecto.