The typography settings provide responsive, scalable text styles that emphasize clarity and accessibility, using a consistent font and line-height system.
By default it uses the 'Red Hat Display' font with a weight range from 300 to 900 for flexible emphasis and optimized loading with font-display: swap.
@font-face {
font-family: 'Red Hat Display';
font-weight: 300 900;
font-display: swap;
src: url(/assets/font/Red_Hat_Display.woff2) format('woff2');
}
Headings h1 through h6 and their utility classes .h1 to .h6 have responsive font sizes, weight of 500, and customizable colors.
h1, .h1 { font-size: min(calc(1.5rem + 1.8vw), 4.125rem); }
h2, .h2 { font-size: min(calc(1.4rem + 1.5vw), 3.625rem); }
Paragraphs p and class .p have a responsive font size, margin, and line height for readability.
p, .p {
font-size: min(calc(.9rem + .3vw), 1.1rem);
margin-block: 0 .5rem;
}
This typography system ensures that text is adaptable, legible, and harmonized across your layout.