Je merklettertype ziet er fantastisch uit op je visitekaartje. Maar hoe ziet het eruit op een iPhone-scherm van 6 inch?
▶Inhoudsopgave
Of op een 27-inch monitor? Of in een app-notificatie van 140 karakters? Als je typografie niet specifiek is afgestemd op digitale toepassingen, verlies je precies de herkenbaarheid en uitstraling die je met zo veel moeite hebt opgebouwd. Tijd om dat recht te trekken.
Waarom je merklettertype online anders moet werken
Het lettertype dat je koos voor je logo en printmateriaal is waarschijnlijk niet automatisch geschikt voor schermen. Dat komt om een paar harde redenen.
Ten eerste: resolutie. Print draait om 300 dpi.
Schermen werken met pixels, en die pixels zijn niet overal even scherp. Een lettertype dat op papier perfect leesbaar is, kan op een scherm van 72 ppi er wazig, ongelijkmatig of gewoon te klein uitzien. Vooral fijne serifs en dunne lijnen vervagen of verdwijnen helemaal op kleinere schermen.
Ten tweede: leesafstand. Iemand leest een flyer op 30 centimeter afstand. Een website lees je op 50 tot 70 centimeter. Een mobiele app op 25 tot 35 centimeter.
Die verschillen veranderen hoe je oog informatie opneemt, en dus hoe groot, hoe vet en hoe ruim je typografie moet zijn.
En ten derde: context. Online staat je typografie in een competitieve omgeving vol afleiding.
Geen stille kantoorwand, maar een scherm vol notificaties, banners en scrollende content. Je lettertype moet harder werken om aandacht te trekken en leesbaar te blijven.
De technische basis: kies de juiste webfonts
Allereerst: je hebt webfonts nodig. Niet het lettertype van je computer, maar een specifiek voor het web geoptimaliseerde versie.
De meeste grote type foundries bieden dit aan. Denk aan Google Fonts voor gratis opties, of betaalde bibliotheken zoals Fontspring, MyFonts of Adobe Fonts voor professionele merklettertypen. Let op het bestandsformaat. WOFF2 is de standaard en wordt door 96% van alle browsers ondersteund.
Het is gecomprimeerd, laadt snel en behoudt kwaliteit. Gebruik WOFF als fallback voor oudere browsers.
TTF en EOT zijn verouderd en kun je in de meeste gevallen overslaan.
En hier wordt het belangrijk: subsetting. Een volledig lettertypebestand kan makkelijk 200 tot 500 kilobyte zijn. Als je alleen Nederlands en Engels gebruikt, heb je niet alle Cyrillische, Grieks of Arabische karakters nodig.
Door subsetting te gebruiken, reduceer je het bestand soms tot 30% van de originele grootte. Dat is een enorme verschil in laadtijd.
Font-display strategie
De CSS-property font-display bepaalt wat er gebeurt terwijl je lettertype nog laadt. De beste keuze voor merklettertypen is font-display: swap. Dit zorgt dat de browser direct een fallback-lettertype toont en jouw merklettertype vervangt zodra het geladen is.
Geen wit scherm, geen onleesbare content. Google raadt dit aan voor alle tekstlettertypen.
Lettergroottes die werken op elk scherm
Gebruik nooit vaste pixelgroottes voor je bodytekst. Pixels zijn absoluut en schalen niet mee met de voorkeuren van de gebruiker.
Gebruik in plaats daarvan relatieve eenheden. Voor bodytekst op web: begin bij 16px als basis. Dat is de standaard in vrijwel alle browsers en het minimale comfortabele leesformaat.
Voor koppen schaal je op met een schaalverhouding, bijvoorbeeld de klassieke typografische schaal: 1.125 (major second) voor subtiele hiërarchie, of 1.25 (major third) voor meer contrast. Op mobiel: zorg dat je bodytekst minimaal 14px is, maar bij voorkeur 16px.
Koppen op mobiel kunnen iets kleiner zijn dan op desktop, maar houd ze boven de 20px om ze visueel dominant te houden.
De regel van minimaal 45 en maximaal 75 karakters per regel geldt ook online, zeker op brede schermen. Gebruik max-width op je tekstblokken om dit te forceren. Line-height is net zo belangrijk als lettergrootte. Voor bodytekst: 1.5 tot 1.6.
Voor koppen: 1.2 tot 1.3. Te weinig lijnhoogte maakt tekst samengedrukt en moeilijk leesbaar. Te veel maakt het alsof de woorden zweven zonder connectie.
Hiërarchie en consistentie in digitale merkuiting
Je merk heeft een typografische hiërarchie. Die moet overal gelden, zeker als je typografie aanpast voor digitale toepassingen: op je website, in je app, in je e-mailnieuwsbrief, in je social media posts.
Maar de uitvoering verschilt per medium. Op je website heb je de meeste controle. Gebruik een vast systeem van H1 tot H4, met duidelijke stijlen voor elk niveau.
Een goed patroon: H1 tussen 32px en 48px op desktop, H2 tussen 24px en 32px, H3 tussen 20px en 24px, body tussen 16px en 18px.
Houd het tot maximaal drie lettergroottes voor bodytekst om rommel te voorkomen. In e-mail is het een ander verhaal. E-mailclients ondersteunen amper webfonts. Gmail bijvoorbeeld blokkeert lettertypen volledig.
Hierbij is het essentieel om een robuuste fallback-stack te definiëren: begin met je merklettertype, gevolgd door een web-safe alternatief zoals Georgia of Arial, en sluit af met de generieke familie serif of sans-serif. Voor social media en advertenties: je hebt vaak geen controle over lettertypen in feeds.
Maar in afbeeldingen en video wel. Zorg dat je merklettertype daar altijd leesbaar is, ook op kleine thumbnails. Test je typografie op een scherm van 500px breed. Als het dan nog leesbaar is, ben je goed bezig.
Kleur en contrast: de onderschatte factor
Typografie is niet alleen vorm, het is ook kleur. En kleur op schermen werkt anders dan op papier.
Het Web Content Accessibility Guidelines (WCAG) 2.1-standaard schrijft voor dat bodytekst een contrastverhouding heeft van minimaal 4.5:1 tegen de achtergrond. Voor grotere tekst (boven 18px of 14px bold) geldt een minimum van 3:1. Veel merken maken de fout om hun huisstijlgrijs te gebruiken voor bodytekst. Het ziet er elegant uit, maar het scoort vaak niet op contrast.
Gebruik je merkkleur voor accenten en koppen, maar kies voor bodytekst altijd een donkere tint die voldoet aan de contrastnorm. Tools zoals de Colour Contrast Analyser van TPGi checken dit in seconden.
Let ook op donkere modus. Als je website of app een dark theme ondersteunt, moet je typografie daarop zijn getest.
Wit op zwart is te fel voor langdurig lezen. Gebruik in plaats daarvan een zacht wit, bijvoorbeeld hex #E0E0E0 op een donkere achtergrond. En verlaag de letterdichtheid lichtjes door de font-weight met 50 punten te verminderen.
Testen, testen, testen
De enige manier om zeker te weten of je digitale typografie werkt, is testen op echte apparaten. Niet alleen in je browser, maar op een iPhone SE, een Android tablet, een MacBook, een Windows-laptop met 1080p-scherm.
Elk scherm geeft kleuren en scherpte anders weer. Test ook met echte gebruikers.
Laat iemand je website lezen op hun telefoon terwijl ze in de bus zitten. Vraag of ze de koppen kunnen scannen. Of ze de call-to-action zien zonder te zoomen.
Dat soort inzichten krijg je niet uit een design tool. En maak het jezelf makkelijk: documenteer je typografische keuzes in een digitaal styleguide.
Lettertypes, groottes, gewichten, lijnhoogtes, kleuren, fallback-stacks, alles. Zo werkt je team consistent, en blijft je merk herkenbaar, of je content nu op een smartwatch of een beamer verschijnt.