Typography

Typografie is een cruciaal onderdeel van webdesign, omdat het niet alleen de leesbaarheid beïnvloedt, maar ook de sfeer en gebruikerservaring van een website. Hieronder een overzicht van belangrijke typografische elementen, inclusief kleuren, lettertypen, koppen, lijsten en display-varianten.

1. Kleurschema (Color Scheme)

secondary primary info success warning danger

text-secondary text-primary text-info text-success text-warning text-danger

  • Primaire kleuren: Gebruikt voor koppen (headers), belangrijke tekst en accenten.
    (Bijv. donkerblauw (#1a237e) voor h1, iets lichter voor h2, etc.)

  • Secundaire kleuren: Voor subkoppen, citaten of minder belangrijke tekst.

  • Achtergrondkleur: Lichtgrijs (#f5f5f5) of wit (#ffffff) voor leesbaarheid.

  • Tekstkleur: Donkergrijs (#333333) of zwart (#000000) voor bodytekst, lichter grijs (#666666) voor subtiele tekst.

  • Linkkleuren: Contrastrijk (bijv. blauw #0066cc) met een duidelijke hover-status (donkerder blauw #004499).

2. Lettertypen (Fonts)

  • Webveilige fonts (snel laden) vs. Custom fonts (via Google Fonts, Adobe Fonts).

  • Combinaties:

    • Sans-serif (modern, schoon): Roboto, Open Sans, Arial voor bodytekst.

    • Serif (formeel, elegant): Merriweather, Georgia voor koppen of citaten.

    • Monospace (technisch): Courier New, Fira Code voor codeblokken.

Voorbeeld:

body {
  font-family: 'Open Sans', sans-serif;
}
h1, h2 {
  font-family: 'Merriweather', serif;
}
code {
  font-family: 'Fira Code', monospace;
}

3. Kopteksten (h1 t/m h6)

  • Hiërarchie: h1 is het grootst en belangrijkst, h6 het subtielst.

  • Stijlvoorbeelden:

    • h1: 2.5rem (40px), bold, donkere kleur, marge onder 1.5rem.

    • h2: 2rem (32px), iets lichtere kleur.

    • h3: 1.75rem (28px).

    • h4-h6: Kleiner, mogelijk in kapitalen of italic voor onderscheid.

CSS-voorbeeld:

h1 { font-size: 2.5rem; font-weight: 700; color: #1a237e; }
h2 { font-size: 2rem; color: #283593; }
h3 { font-size: 1.75rem; color: #3949ab; }

4. Lijsten (Lists)

  • Ongeordend (ul): Ronde of vierkante bullets, vaak in bodykleur.

     
    ul { list-style-type: square; padding-left: 1.5rem; }

  • Geordend (ol): Nummers of letters.

  • Beschrijvende lijsten (dl): Vetgedrukte termen (dt) met normale beschrijving (dd).

5. Display-varianten (Display-1 t/m Display-4)

  • Gebruik: Extra grote, opvallende tekst voor hero-secties of banners.

  • Voorbeelden (Bootstrap-stijl):

    • Display-1: 6rem (96px), lichtgewicht.

    • Display-4: 3rem (48px).

CSS:

.display-1 { font-size: 6rem; font-weight: 300; }
.display-4 { font-size: 3rem; }

6. Andere typografische elementen

  • Line-height: 1.5 voor bodytekst voor betere leesbaarheid.

  • Letter-spacing: 0.5px voor koppen voor meer elegantie.

  • Tekstschaduw: Subtiel voor accenten (bijv. text-shadow: 1px 1px 2px rgba(0,0,0,0.1)).

7. Responsive typografie

Gebruik vw-eenheden of media queries voor aanpasbare lettergroottes:

h1 { font-size: clamp(2rem, 5vw, 3rem); }

Tools en Bronnen

  • Google Fonts: Gratis lettertypen combineren.

  • TypeScale: Hiërarchie genereren (bijv. typescale.com).

  • Contrast-checkers: Zorg voor voldoende contrast (WCAG-richtlijnen).

Met deze basis kun je een visueel aantrekkelijke en gebruiksvriendelijke typografie opzetten! Wil je verdieping in een specifiek onderdeel?

Main Menu

Login Form

Older Posts