02 - Tipografía

Este proyecto tiene una aproximación diferente al resto de proyectos en los que habitualmente trabajo. La premisa de mantener el proyecto simple y reducir los tiempos de carga ha influido totalmente en el aspecto tipográfico.

Fuente

body {
    font-family: system-ui, sans-serif;
}

Escala

:root {
    --font-size-small: .9rem;
    --font-size-base: 1rem;
    --font-size-medium: 1.2rem;
    --font-size-large: 2rem;
    --font-size-huge: 3rem;
    --font-size-base-relative-small: .5em;
    --font-size-base-relative: 1em;
}

font-size-small

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

font-size-base

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

font-size-medium

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

Otros tamaños de letra

font-size-large y font-size-huge Están reservados para titulares.

font-size-base-relative-small y font-size-base-relative-small tienen un tamaño relativo que depende directamente del tamaño del elemento padre.

font-weight

:root {    
    --font-weight-regular: 300;
    --font-weight-semibold: 400;
    --font-weight-bold: 600;
}

font-weight-regular

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

font-weight-semibold

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

font-weight-bold

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

line-height

:root {
    --line-height-small: 1.3;
    --line-height-base: 1.6;
}

line-height-small

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

line-height-base

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti sapiente, molestiae, esse explicabo quae ipsum veniam odio totam dolore.

Titulares

Estilos para titulares y distancias con el resto del contenido.

heading-1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus vero odio quos ipsum est fuga itaque tempore. Commodi, dolores.

heading-2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus vero odio quos ipsum est fuga itaque tempore. Commodi, dolores.

heading-3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus vero odio quos ipsum est fuga itaque tempore. Commodi, dolores.