Font: duidelijke en consistente typografie
Gepubliceerd · Bijgewerkt
Font beïnvloedt leesbaarheid, hiërarchie, merkuitstraling, performance en lokalisatie van een toepassing. Deze gids laat zien hoe je een consistent typografiesysteem bouwt, passende lettertypes kiest, schaal en spacing definieert, responsive en meertalige tekst ondersteunt, loading optimaliseert en met echte inhoud test.
Definieer eerst een typografiesysteem
Definieer eerst alle tekstrollen: paginatitel, sectiekop, body, label, knop, tabel, foutmelding, caption, nummer en metadata. Iedere rol hoort een duidelijke hiërarchie en herbruikbare stijl te hebben. Wanneer ieder scherm eigen maten en gewichten verzint, verdwijnt ritme en wordt onderhoud moeilijk. Een klein gedocumenteerd systeem geeft designers en builders één gedeelde taal.
Scheid hiërarchie van decoratie. Een kop hoort belangrijk te lijken door maat, gewicht, ruimte en positie, niet omdat iedere pagina een ander lettertype gebruikt. Maak tokens voor body, small, label, subtitle, section, page title en display. Daardoor kunnen globale veranderingen veilig worden uitgevoerd en kunnen accessibility of redesign zonder losse patches worden toegepast.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Kies lettertypes op basis van functie
Kies een lettertype op basis van echte leesomstandigheden. Een marketingheadline mag meer karakter hebben dan een dichte tabel, formulier of lange documentatie. Voor body zijn duidelijke vormen, goede interpunctie, bruikbare gewichten, herkenbare cijfers en stabiele rendering op kleine maten belangrijk. Test echte interface-inhoud en niet alleen grote voorbeeldkoppen.
Beperk het aantal families. Eén familie met voldoende gewichten kan vaak het hele product dragen; een tweede kan voor displaytitels dienen. Iedere extra familie verhoogt visuele complexiteit, downloads en onderhoud. Wanneer een merkfont verplicht is, leg vast waar het past en waar een robuuste fallback beter is.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Bouw een consistente typeschaal
Bouw een typeschaal in plaats van maten per scherm te kiezen. Start met comfortabele body, bepaal kleinere ondersteunende tekst en vervolgens headingniveaus. De onderlinge relatie is belangrijker dan één exact getal. Te veel bijna gelijke maten verzwakken hiërarchie; enorme sprongen maken het luid. Koppel ieder niveau aan gewicht en line-height.
Maat werkt samen met gewicht, line-height, letter-spacing, kleur en hoofdletters. Een label kan kleiner maar sterker zijn; een grote kop kan een strakkere line-height nodig hebben; paragrafen hebben meer lucht nodig. Tabular figures kunnen getallen in tabellen beter uitlijnen. Documenteer deze regels voor alle componenten.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Beheer spacing en regellengte
Regellengte heeft grote invloed op leesbaarheid. Zeer brede regels maken de sprong naar de volgende regel moeilijk, terwijl smalle kolommen te veel afbreken. Geef lange inhoud een praktische maximale breedte. Kies line-height op basis van font, maat en script en niet als één universele waarde.
Let ook op verticaal ritme tussen koppen, paragrafen, lijsten en formuliervelden. Ruimte vóór een kop markeert vaak een sterkere scheiding dan ruimte erna. Gebruik spacing tokens in plaats van willekeurige margins. Verandert fontmaat of line-height, controleer dan ook omliggende spacing.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Ontwerp responsive typografie
Responsive typografie hoeft geen nieuw systeem per device te zijn. Grote displaytitels kunnen kleiner worden op mobiel, terwijl body binnen een comfortabele band blijft. Gebruik breakpoints of fluid sizing met duidelijke minima en maxima. Test echte lange koppen omdat wrapping complete sectiehoogtes kan veranderen.
Controleer knoppen, tabs, labels, navigatie en tabellen in smalle layouts. Bepaal bewust of tekst mag wrappen, truncaten, scrollen of het layoutpatroon veranderen. Test browserzoom en grotere systeemtekst. Een interface die alleen op standaardzoom werkt is onvoldoende robuust.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Ondersteun meerdere talen goed
Meertalige producten moeten echte karakterdekking testen. Een goed Latijns font kan Arabisch, Tsjechische diacritics of andere scripts missen en onverwachte fallback veroorzaken. Dat verandert breedte, hoogte en gewicht. Gebruik echte vertalingen, want labels en titels kunnen veel langer worden dan Engelse placeholders.
Right-to-left scripts vragen aandacht voor richting, uitlijning, interpunctie, cijfers en gemengde tekst. Kopieer letter-spacing en line-height niet blind vanuit Latijn. Wanneer verschillende scripts verschillende families gebruiken, kies vergelijkbare metrics om layoutverschuiving te beperken.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Optimaliseer loading en fallback
Laad alleen gewichten en stijlen die werkelijk worden gebruikt. Iedere extra fontfile vergroot de pagina. Gebruik moderne formaten en wees voorzichtig met subsetting zodat benodigde karakters niet verdwijnen. Het doel is snel zichtbare tekst met zo weinig mogelijk layout shift wanneer het custom font de fallback vervangt.
Definieer een leesbare fallbackstack met vergelijkbare verhoudingen. Test trage verbinding, geblokkeerde requests en eerste bezoek zonder cache. Self-hosting geeft controle maar brengt verantwoordelijkheid voor bestanden, caching, licenties en updates. Meet performance voordat je kiest.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Test en onderhoud typografie
Test typografie met echte productie-inhoud: lange titels, formulieren, tabellen, fouten, empty states, cijfers, vertalingen en user-generated content. Zoek clipping, overlap, overmatig wrappen, laag contrast en inconsistent gewicht. Een nette demo laat de onvoorspelbare teksten van productie niet zien.
Onderhoud een referentie met families, gewichten, maten, line-height, letter-spacing, toepassingen, fallbacks en loadingstrategie. Controleer vóór een nieuwe stijl of een bestaande stijl volstaat. Bij een nieuwe familie moet wrapping op meerdere schermen worden vergeleken voordat de wijziging wereldwijd wordt toegepast.
Test ook user-generated content zoals namen, adressen, opmerkingen en geïmporteerde data. Die kunnen veel langer zijn dan ontwerpvoorbeelden. Iedere component heeft bewust overflowgedrag nodig. Probeer lange woorden, grote getallen, strings zonder spaties en gemengde interpunctie, vooral in tabellen, cards, badges en mobiele headers.
Accessibility is meer dan contrast. Test zoom, grotere systeemtekst en browserinstellingen die fonts wijzigen. Betekenis mag niet alleen van gewicht of kleur afhangen. Hiërarchie moet begrijpelijk blijven wanneer het custom font niet laadt en een andere fallback verschijnt.
Test ook user-generated content zoals namen, adressen, opmerkingen en geïmporteerde data. Die kunnen veel langer zijn dan ontwerpvoorbeelden. Iedere component heeft bewust overflowgedrag nodig. Probeer lange woorden, grote getallen, strings zonder spaties en gemengde interpunctie, vooral in tabellen, cards, badges en mobiele headers.
Accessibility is meer dan contrast. Test zoom, grotere systeemtekst en browserinstellingen die fonts wijzigen. Betekenis mag niet alleen van gewicht of kleur afhangen. Hiërarchie moet begrijpelijk blijven wanneer het custom font niet laadt en een andere fallback verschijnt.
Test ook user-generated content zoals namen, adressen, opmerkingen en geïmporteerde data. Die kunnen veel langer zijn dan ontwerpvoorbeelden. Iedere component heeft bewust overflowgedrag nodig. Probeer lange woorden, grote getallen, strings zonder spaties en gemengde interpunctie, vooral in tabellen, cards, badges en mobiele headers.
Accessibility is meer dan contrast. Test zoom, grotere systeemtekst en browserinstellingen die fonts wijzigen. Betekenis mag niet alleen van gewicht of kleur afhangen. Hiërarchie moet begrijpelijk blijven wanneer het custom font niet laadt en een andere fallback verschijnt.
- Sistema claro
- Estilos reutilizables
- Jerarquía consistente
- Pruebas reales
Vragen
Hoeveel fontfamilies gebruiken?
Vaak is één hoofdfamilie genoeg, eventueel aangevuld met één displayfamilie.
Wat is belangrijk voor bodytekst?
Duidelijke vormen, comfortabele maat, line-height, regellengte, taalondersteuning en stabiele rendering.
Alle gewichten laden?
Nee, alleen werkelijk gebruikte gewichten en stijlen laden en fallback testen.
Hoe meertaligheid testen?
Gebruik echte vertalingen en controleer tekens, richting, wrapping, line-height en fallback.