Typografie richtlijnen — pro j8

Een compacte set regels voor lettergebruik, schaal en toepassing zodat uw merk consistent en leesbaar blijft op drukwerk en digitaal. Geschikt voor merken, presentaties en UI-systemen.

Primair en secundair lettergebruik
Typografische schaal & hiërarchie
Toegankelijkheid en responsive tips

Op maat advies Privacy

Lettertypen en gewichten

Primaire font

Zorgt voor merkidentiteit en hoofdcommunicatie. Gebruik voor koppen en korte teksten.

Voorstel: "Inter" (Variable) — gewichten 400 / 600 / 700

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp — Voorbeeldtekst in primair lettertype.

Secundaire font

Gebruik voor langere leesteksten en captions; neutraal en goed leesbaar.

Voorstel: "Merriweather" of "Source Serif 4" — gewichten 300 / 400 / 600

Dit is een voorbeeldparagraaf met het secundaire lettertype om leesbaarheid en sfeer te tonen.

Typografische schaal & hiërarchie

Standaard schaal geeft structuur aan content en maakt responsive aanpassingen voorspelbaar.

Gebruik voor paginahoofding of hero; sterk gewicht 600–700. Spatiëring: margin-top 0, margin-bottom 0.5rem.

Sectietitels en belangrijke subkoppen. Gewicht 600. Gebruik consistente kleur en letterspatiëring.

Hoofdtekst: 15–18px afhankelijk van medium; regelafstand 1.4–1.6 voor optimale leesbaarheid.

Element	Desktop	Mobiel	Toepassing
H1	36px	28px	Hero / belangrijkste titels
H2	28px	22px	Sectietitels
Body	16px	15px	Algemene tekst
Caption	13px	12px	Bijschriften, labels

Praktische richtlijnen — gebruik en misbruik

Do's

Maximaal twee letterfamilies in één layout.
Consistente hiërarchie met vaste marges.
Voldoende contrast voor tekst > AA niveau.

Don'ts

Geen meerdere lo-fi fonts door elkaar gebruiken.
Vermijd te nauwe line-heights onder 1.3.
Geen kleine tekst (<12px) op kleurrijke achtergronden.

Auteur

Maya de Vries — Hoofdontwerper

Toegankelijkheid & contrast

Contrast waarden

Gebruik WCAG AA minimum: tekst/groot 3:1, tekst/klein 4.5:1.

Primaire tekst: #FFFFFF op donker materiaal
Secundaire tekst: rgba(255,255,255,0.72)

Responsive tips

Gebruik relative eenheden (rem) voor schaalbaarheid.
Verhoog lettergrootte op kleinere schermen indien nodig.
Vermijd lange regels boven 75-90 tekens.

Resources & downloads

Stijlgids

Download het PDF-stijlgids met voorbeelden, CSS-snippets en letterinhoud.

Download PDF View CSS

Kleur & Codes

Primair: #ff59ff · Secundair: #00e0ff · Neutraal: #0f1724

Hulp nodig?

Wij begeleiden implementatie, font-licenties en productievoorbereiding. Neem contact op voor een offerte.