Foundations

Typography

Two Google-served variable fonts power the site: Raleway for headings and interactive labels, Geologica for body copy and uppercase navigation.

heading

Raleway

H1–H3, buttons

Weights 600 / 700

body

Geologica

Body copy, nav labels (uppercase, letter-spaced)

Weights 300 / 400

Type scale

text-xs

NAV LABEL

12px / 16px · 300

text-sm

Shop All Skincare

15px / 20px · 600

text-base

Body copy default

16px / 24px · 400

text-lg

Section heading

18px / 27px · 600

text-2xl

Welcome to the Pore Playground

28px / 36px · 700

text-4xl

Hero headline

36px / 43px · 700

Set type with the font-heading / font-body utilities and the text-* scale tokens rather than picking a font-family or a pixel size by eye.

·Use Raleway (font-heading) for headings, buttons and other interactive labels.
·Use Geologica (font-body) for paragraph copy and uppercase nav-style labels.
·Pick the closest scale token (text-xs…text-4xl) instead of an arbitrary pixel value.

Don't

·Don't introduce a third typeface — the whole system is built on just these two.
·Don't drop body copy below weight 400 at small sizes; legibility suffers fast.
·Don't swap the two fonts' roles (e.g. Geologica for a headline) — the pairing is what reads as the brand.