HTMLhulp.nl logo

Typografie bepaalt de leesbaarheid, uitstraling en gebruikerservaring van je website. Met CSS kun je lettertypes, groottes, regelafstand en uitlijning eenvoudig aanpassen.

Lettertypes instellen

EigenschapBeschrijvingVoorbeeld
font-familyKies lettertype en fallbackfont-family: Arial, sans-serif;
WebfontsExterne fonts laden<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Tekstgrootte en schaal

EigenschapBeschrijvingVoorbeeld
font-sizeGrootte van de tekstfont-size: 16px;
Relatieve unitsSchalen op basis van parent of rootfont-size: 1.2em; / 1rem
clamp()Responsive fontsfont-size: clamp(14px, 2vw, 20px);

Gewicht en stijl

EigenschapBeschrijvingVoorbeeld
font-weightDikte van lettersfont-weight: bold; of 400, 700
font-styleCursieffont-style: italic;
text-transformHoofdletters/kleine letterstext-transform: uppercase;

Uitlijning en spacing

EigenschapBeschrijvingVoorbeeld
text-alignUitlijning teksttext-align: left; center; right; justify;
line-heightHoogte tussen regelsline-height: 1.6;
letter-spacingAfstand tussen lettersletter-spacing: 2px;
word-spacingAfstand tussen woordenword-spacing: 5px;

Tekstopmaak

EigenschapBeschrijvingVoorbeeld
colorTekstkleurcolor: #333;
text-decorationOnderstrepen, doorhalentext-decoration: underline;
text-shadowSchaduw op teksttext-shadow: 2px 2px 4px rgba(0,0,0,0.3);
white-spaceOmgang met spaties en regelswhite-space: nowrap;

Koppen en hiërarchie

HTML heeft 6 kopniveaus (<h1>–<h6>). Gebruik ze logisch en semantisch:

<h1>Hoofdtitel (één per pagina)</h1>
<h2>Subtitel</h2>
<h3>Kleinere kop</h3>

Best practice: gebruik H1 voor de paginatitel en lagere niveaus voor secties.

Toegankelijkheid & best practices

  • Gebruik voldoende contrast (min. 4.5:1).

  • Zorg dat tekst niet te klein is (minimaal 16px op mobiel).

  • Gebruik rem/em i.p.v. px voor schaalbaarheid.

  • Beperk het aantal verschillende fonts (max. 2–3).

  • Zorg dat koppen en paragrafen een duidelijke visuele hiërarchie hebben.