Foundations

Typography

Fonts

Headings, body copy, accents and pull quotes.

--font-heading"Hanken Grotesk", sans-serif

The quick brown fox jumps over the lazy dog

--font-body"DM Sans", sans-serif

The quick brown fox jumps over the lazy dog

--font-accent"Space Mono", monospace

The quick brown fox jumps over the lazy dog

--font-quote"Playfair Display", serif

The quick brown fox jumps over the lazy dog

Display and headline sizes, phone to desktop.

--text-displayclamp(3rem, calc(4.2857vw + 2.1429rem), 6rem)48 → 96px

The quick brown fox jumps over the lazy dog

--text-headline-xlclamp(2.25rem, calc(3.2143vw + 1.6071rem), 4.5rem)36 → 72px

The quick brown fox jumps over the lazy dog

--text-headline-lgclamp(1.875rem, calc(2.6786vw + 1.3393rem), 3.75rem)30 → 60px

The quick brown fox jumps over the lazy dog

--text-headline-mdclamp(1.75rem, calc(1.7857vw + 1.3929rem), 3rem)28 → 48px

The quick brown fox jumps over the lazy dog

--text-headline-smclamp(1.625rem, calc(1.25vw + 1.375rem), 2.5rem)26 → 40px

The quick brown fox jumps over the lazy dog

--text-headline-xsclamp(1.5rem, calc(0.7143vw + 1.3571rem), 2rem)24 → 32px

The quick brown fox jumps over the lazy dog

Body and small text, phone to desktop.

--text-body-3xlclamp(1.375rem, calc(0.5357vw + 1.2679rem), 1.75rem)22 → 28px

The quick brown fox jumps over the lazy dog

--text-body-2xlclamp(1.25rem, calc(0.3571vw + 1.1786rem), 1.5rem)20 → 24px

The quick brown fox jumps over the lazy dog

--text-body-xlclamp(1.125rem, calc(0.1786vw + 1.0893rem), 1.25rem)18 → 20px

The quick brown fox jumps over the lazy dog

--text-body-lgclamp(1rem, calc(0.1786vw + 0.9643rem), 1.125rem)16 → 18px

The quick brown fox jumps over the lazy dog

--text-bodyclamp(1rem, calc(0vw + 1rem), 1rem)16px

The quick brown fox jumps over the lazy dog

--text-body-smclamp(0.875rem, calc(0.0893vw + 0.8571rem), 0.9375rem)14 → 15px

The quick brown fox jumps over the lazy dog

--text-captionclamp(0.8125rem, calc(0.0893vw + 0.7946rem), 0.875rem)13 → 14px

The quick brown fox jumps over the lazy dog

--text-fineclamp(0.75rem, calc(0.0893vw + 0.7321rem), 0.8125rem)12 → 13px

The quick brown fox jumps over the lazy dog