Typography

Roosevelt OPS gebruikt een twee-font systeem: Fascinate voor branding en Outfit voor alle UI-tekst.

Fonts

Rol	Font	Weights	CSS Variable	Tailwind
Logo / Branding	Fascinate	400 (enige)	`--font-logo`	`font-logo`
Body / Headings / UI	Outfit	100–900 (variable)	`--font-sans`	`font-sans`

ℹ

Waarom Fascinate?

Art Deco logotype met hoog contrast. Kleur #5F2104 op wit geeft 12.31:1 — ruim WCAG AAA. Alleen voor branding, nooit voor body tekst.

Type Scale

Scale	Size	Line Height	Weight	Tailwind	Gebruik
Caption	12px	18px	400	`text-caption`	Metadata, timestamps
Body	14px	20px	400 / 500	`text-body`	Standaard body tekst
Subtitle	16px	26px	500 / 600	`text-subtitle`	Subheadings, labels
Title	16px	26px	600	`text-title`	Card titels, sectie headers
Title L	24px	32px	600	`text-title-l`	Pagina titels
Display	39px	1.1	600	`text-display`	Hero sectie titels
Hero	49px	1.1	700	`text-hero`	Landing page hero

WCAG Contrast

Combinatie	Ratio	Level
`#5F2104` (brand) op wit	12.31:1	AAA
`#0A0F1A` (label-primary) op wit	17.4:1	AAA
`#334155` (label-secondary) op `#F8FAFC`	~7:1	AAA
`#C4854A` (brand dark) op `#0a0a0a`	4.6:1	AA

Code Voorbeelden

Branding

<h1 class="font-logo text-brand text-display">Roosevelt</h1>

Body tekst

<p class="font-sans text-body text-label-primary">
  Standaard body tekst in Outfit.
</p>

Heading hiërarchie

<h1 class="text-title-l font-semibold">Pagina Titel</h1>
<h2 class="text-title font-semibold">Sectie Titel</h2>
<p class="text-subtitle font-medium text-label-secondary">Subtitle</p>
<p class="text-body">Body tekst</p>
<span class="text-caption text-label-tertiary">Metadata</span>

⚠

Fascinate beperkingen

Fascinate heeft slechts één weight (400) en is bedoeld voor korte, grote tekst. Gebruik het nooit voor body tekst of kleine formaten.

Typography

On this page