⏱️ Leestijd: ca. 5 min.

Basis typografie & tekst-eigenschappen

Als grafisch vormgever weet je dat typografie de ruggengraat is van elk goed ontwerp. Het kiest niet alleen de toon en de sfeer van een merk, maar bepaalt ook hoe vlot een bezoeker je boodschap kan lezen.

Op het web hebben we helaas niet altijd de controle die we in Adobe InDesign of Illustrator gewend zijn: schermen verschillen in grootte, resolutie en geïnstalleerde lettertypes. Gelukkig geeft CSS ons krachtige gereedschappen om de typografie van een website tot in de puntjes te verfijnen.

In deze les leer je de zes belangrijkste CSS-eigenschappen voor tekstverwerking: font-family, font-size, font-weight, line-height, text-align en color.

1. Lettertype kiezen (font-family)

Met de eigenschap font-family bepaal je welk lettertype de browser moet gebruiken voor jouw tekst.

Omdat niet elke computer of smartphone dezelfde lettertypes geïnstalleerd heeft, werken we in CSS met een zogenaamde Font Stack (een reserve-lijst). De browser leest de lijst van links naar rechts en kiest het eerste lettertype dat beschikbaar is op het apparaat van de bezoeker.

p {
    /* Probeer 'Helvetica Neue', valt anders terug op Arial en ten slotte op een generieke sans-serif */
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

De 5 Generieke Font-families

Eindig een font-family regel altijd met een generiek reserve-lettertype:

Tip: Bevat de naam van een lettertype spaties (zoals 'Times New Roman' of 'Helvetica Neue')? Zet de naam dan altijd tussen enkele of dubbele quotes!

2. Lettergrootte instellen (font-size)

Met font-size bepaal je de grootte van de letters. In webdesign gebruiken we hiervoor verschillende eenheden, waarvan px (pixels) en rem de bekendste zijn.

h1 {
    font-size: 32px; /* Vaste grootte van 32 pixels */
}

p {
    font-size: 1rem; /* 1rem is standaard gelijk aan 16px */
}

Welke eenheid kies je?

3. Letterdikte (font-weight)

Met font-weight bepaal je hoe dun of dik de letters worden getoond (van ultradun tot extreem vetgedrukt).

Je kunt dit instellen met sleutelwoorden of met getallen op een schaal van 100 tot 900:

.lichte-tekst {
    font-weight: 300; /* Light */
}

.normale-tekst {
    font-weight: normal; /* Gelijk aan 400 (standaard) */
}

.vetgedrukte-tekst {
    font-weight: bold; /* Gelijk aan 700 */
}

.extra-vet {
    font-weight: 900; /* Black / Heavy */
}
Opgelet: Een getal zoals 300 of 900 werkt enkel als de gekozen font-family die specifieke gewichten ook daadwerkelijk ondersteunt en geladen heeft!

4. Regelafstand & Leesbaarheid (line-height)

In de grafische wereld noemen we dit interlinie of leading. De eigenschap line-height bepaalt de hoogte van een regel tekst en de verticale ruimte tussen opeenvolgende regels.

Een goede regelafstand is cruciaal voor de leesbaarheid van langere teksten:

p {
    font-size: 16px;
    line-height: 1.6; /* 1.6x de lettergrootte (oftewel 25.6px) */
}
Beste Praktijk: Gebruik voor line-height bij voorkeur geen eenheid (geen px of rem), maar een vermenigvuldigingsfactor (zoals 1.5 of 1.6). Voor lopende leestekst is een factor tussen 1.4 en 1.6 de gouden standaard op het web. Voor grote koppen (h1) kies je juist een krappere waarde (bijv. 1.1 tot 1.2).

5. Tekstuitlijning (text-align)

Met text-align bepaal je hoe tekst horizontaal wordt uitgelijnd binnen zijn container.

.links {
    text-align: left; /* Standaard in westerse talen */
}

.gecentreerd {
    text-align: center; /* Mooi voor koppen, quotes of korte kaarten */
}

.rechts {
    text-align: right; /* Handig voor getallen in tabellen of datumstempels */
}

.uitgevuld {
    text-align: justify; /* Lijn zowel links als rechts strak uit */
}
Grafische waarschuwing: Wees heel voorzichtig met text-align: justify; op het web. Anders dan in desktop publishing software zoals InDesign, kan de browser tekst nog niet slim afbreken met koppeltekening. Dit leidt vaak tot lelijke "gaten" en "rivieren" van witruimte in je tekst!

6. Tekstkleur (color)

Om de kleur van de tekst zelf aan te passen, gebruik je simpelweg de eigenschap color (niet text-color!).

h1 {
    color: #1e3a8a; /* Hex-code voor donkerblauw */
}

p {
    color: #334155; /* Zacht donkergrijs (leesbaarder dan hard zwart) */
}
Ontwerptip: Gebruik voor lopende leestekst bijna nooit $100\%$ hard zwart (#000000) op een zuiver witte achtergrond. Dit geeft een te hard contrast dat vermoeidheid aan de ogen veroorzaakt. Kies liever voor een heel donkergrijs zoals #1e293b of #222222.

7. Compleet Praktijkvoorbeeld

Laten we deze typografische eigenschappen combineren in een stijlvol artikelblok:

<article class="blog-post">
    <h2>De Kracht van Typografie</h2>
    <p class="intro">Typografie is niet zomaar het kiezen van een mooi lettertype. Het is de kunst van het visueel ordenen van informatie.</p>
    <p>Goede typografie leidt de lezer moeiteloos door de inhoud heen. Door slim gebruik te maken van contrast in letterdikte, grootte en regelafstand creëer je een heldere visuele hiërarchie op je webpagina.</p>
</article>

/* Algemene stijl voor het artikelblok */
.blog-post {
    max-width: 600px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 32px;
}

/* Stijl voor de titel */
.blog-post h2 {
    font-family: 'Poppins', Georgia, serif;
    font-size: 2rem;       /* 32px */
    font-weight: 700;      /* Bold */
    line-height: 1.2;      /* Krappere regelafstand voor koppen */
    color: #0f172a;        /* Zeer donkerblauw/grijs */
    margin-bottom: 16px;
}

/* Stijl voor de introductie-alinea */
.blog-post .intro {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1.125rem;   /* 18px */
    font-weight: 500;      /* Medium */
    line-height: 1.6;
    color: #2563eb;        /* Accentkleur blauw */
}

/* Stijl voor de standaard alinea's */
.blog-post p {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1rem;        /* 16px */
    font-weight: 400;      /* Normal */
    line-height: 1.65;     /* Comfortabele regelafstand voor lezen */
    color: #334155;        /* Donkergrijs voor optimaal leescomfort */
    text-align: left;
}

Samenvatting