Este proyecto tiene una aproximación diferente al resto de proyectos en los que habitualmente. 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;
}
Escala
--font-size-small: .9rem;
--font-size-base: 1rem;
--font-size-large: 1.3rem;
--font-size-base-relative-small: .5em;
--font-size-base-relative: 1em;
Titulares
:where(h1, h2, h3, h4) {
line-height: var(--line-height-small);
}
:where(h1) {
font-weight: var(--font-weight-bold);
}
[data-template="home"] h1 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
}
[data-template="home"] h2 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
}
main :is(h2, h2 a) {
font-weight: var(--font-weight-bold);
}
main :where(h3, h2) {
margin-block-start: var(--headings-distance);
}
main :where(h3) {
font-weight: var(--font-weight-semibold);
}