2025-07-02 · Redactie Baduno · 8 blog.readMin · Blog & Kennis
Webfonts voor 24 talen: lettertypekeuze, subsetten, prestaties
Een lettertype dat Duits, Grieks, Maltees en Arabisch ondersteunt? Dat is zeldzaam – en als het bestaat, is het zwaar. Strategieën voor snelle, mooie meertaligheid.
Het dekkingsprobleem
Latijns met alle EU-diakritische tekens, Grieks, Cyrillisch, plus Arabisch schrift: bijna geen lettertypefamilie dekt alles goed af. De pragmatische oplossing zijn lettertypeparen – een Latijns/Grieks/Cyrillisch-familie plus een gespecialiseerd RTL-lettertype, op elkaar afgestemd in grijswaarde en hoogte.
Subsetting bespaart enorm
Volledige Unicode-fonts wegen honderden kilobytes. Subsets per schriftsysteem – alleen geladen waar nodig – reduceren dat tot fracties: de RTL-versie laadt het RTL-lettertype, de Duitse niet.
Laden zonder verspringen
font-display:swap toont direct tekst met systeemlettertype en wisselt dan – tegen layoutsprongen helpen metrisch compatibele fallbacks en size-adjust. Zelf gehost in plaats van een extern CDN: sneller en privacyvriendelijker.
Typografie per schriftsysteem
Arabisch schrift heeft meer regelafstand nodig en vaak een punt meer; kapiteel-spatiëring werkt alleen Latijns. Een designsysteem dat dergelijke regels per schriftsysteem kent, maakt van 24 talen één lay-out – in plaats van 25 compromissen.
Variable Fonts: Flexibiliteit met obstakels
Variabele lettertypen beloven een verminderd aantal bestanden door meerdere snedes (vet, cursief, enz.) in één bestand te bundelen. Voor meertalige sites met 24 talen is dat verleidelijk: in plaats van 24 × 4 = 96 statische bestanden slechts 24 variabele? Maar let op: variabele lettertypen met een breed taalbereik (Latijn, Grieks, Cyrillisch, Arabisch) zijn zeldzaam en vaak groot. Subsetting wordt bovendien complexer omdat de variatie-assen de tekenset beïnvloeden. Een gesubsette variabele font kan afhankelijk van de asuitdrukking andere glyphs nodig hebben, zodat u ofwel alle subsets moet voorbereiden of dynamisch moet genereren. Praktisch is het gebruik van variabele fonts voor één schriftsysteemfamilie (bijv. Latijn + Grieks) en statische fonts voor de andere (bijv. Arabisch) om de bestandsgrootte te beheersen. Laad variabele fonts via font-weight: 100 900 en font-stretch: 75% 125% in plaats van afzonderlijke snedes – maar test de weergave in alle talen en browsers, omdat variabele fonts bij subsetting en rastering soms onverwachte resultaten geven.
Licentieconform lettertypegebruik in 24 talen
De juridische kant wordt vaak onderschat. Een lettertypelicentie geldt meestal voor een bepaald aantal websitebezoeken of voor een domein; bij 24 taalvarianten kunt u afhankelijk van de licentie al tegen grenzen aanlopen. Sommige aanbieders verbieden expliciet het subsetten of het inbedden in dynamische inhoud. Zorg ervoor dat de licentie alle talen dekt – met name speciale tekens zoals Turkse İ, Roemeense Ș of Maltese Ħ worden vaak als uitgebreide tekenset beschouwd en zitten niet altijd in het standaardpakket. Voor EU-projecten wordt een Unlimited- of Enterprise-licentie aanbevolen, die ook subsetten en meerdomeingebruik toestaat. Controleer ook de lettertypelicentie op geldigheid voor de door u gebruikte fonttechnologie (bijv. WOFF2). Een licentieadvies-tool (bijv. van Fontstand) kan helpen conflicten te voorkomen – noteer de licentievoorwaarden per lettertype in uw styleguide, zodat er geen aanpassingen nodig zijn.
Formaatwedstrijd: WOFF2, gesubsette variabele fonts en Unicode-Range
De keuze van het bestandsformaat beïnvloedt laadtijd en compatibiliteit. WOFF2 is tegenwoordig de standaard en biedt ongeveer 30-50% betere compressie dan WOFF. Als u variabele fonts gebruikt, moet u controleren of uw doelbrowser WOFF2 met variabele assen ondersteunt (momenteel alle moderne browsers). Voor oudere browsers (IE11) moet u statische WOFF-bestanden als fallback beschikbaar houden. Een effectieve truc: gebruik Unicode-Range in @font-face om alleen de daadwerkelijk benodigde tekenset te laden – vergelijkbaar met subsetting, maar servergestuurd. Combineer dit met font-display: swap; de laadoptimalisatie kunt u ondersteunen via preload voor kritische lettervarianten (bijv. basisfont voor Latijn). Een praktijkvoorbeeld: voor de Duitse pagina laadt u alleen de Latijn+Umlaut-subset (ca. 30 KB), voor de Griekse pagina de Latijn+Grieks-subset (ca. 50 KB), voor de Arabische pagina de Latijn+Arabisch-subset (ca. 80 KB). Zo blijven zelfs bij 24 talen de totale downloads per bezoeker onder 100 KB aan lettertypedata.
Een lettertype dat Duits, Grieks, Maltees en Arabisch ondersteunt? Dat is zeldzaam – en als het bestaat, is het zwaar. Strategieën voor snelle, mooie meertaligheid.
Geautomatiseerde kwaliteitsborging van de letterweergave
Zorg dat in alle 24 taalvarianten geen glyphs ontbreken of versnipperd lijken, door geautomatiseerde tests in uw CI/CD-pipeline op te nemen. Tools zoals FontProof, Wakamai Fondue of het Python-script fontdiff vergelijken gerenderde screenshots van elke taalversie met een referentie-screenshot. Of u gebruikt Puppeteer om elke pagina te openen, het lettertype te laden en te controleren op gaten (via de CSS-eigenschap font-family: …; font-unicode-range). Nog systematischer: extraheer alle in de HTML voorkomende Unicode-codepunten per taalversie en vergelijk ze met de in het subset aanwezige glyphs. Ontbreekt een teken, dan wordt de build afgebroken of een waarschuwing gegeven. Deze tests moeten ook de leesbaarheid van ligaturen of alternatieve tekens (bijv. Arabische beginvormen) controleren. Integreer ook een performance-budgetcheck: de lettergrootte per taal mag een bepaalde drempelwaarde niet overschrijden. Zo zorgt u ervoor dat meertaligheid niet ten koste gaat van de laadtijd.
AI-gestuurd subsetting: efficiëntie door automatisering met kwaliteitsborging
Het handmatig beheren van subsetting voor 24 talen is tijdrovend en foutgevoelig. Moderne build-tools zoals glyphhanger of HarfBuzz kunnen automatisch subsets genereren op basis van de daadwerkelijk in de content voorkomende tekens. Het proces wordt nog efficiënter wanneer u AI-modellen inzet die op basis van de taalversies de benodigde Unicode-blokken voorspellen. Een neuraal netwerk, getraind op meertalige websites, kan met hoge nauwkeurigheid bepalen welke glyphs voor een bepaalde taal nodig zijn – van Latijnse basiskarakters tot Cyrillische aanvullingen en Arabische ligaturen. De automatisch gegenereerde subset wordt vervolgens handmatig gecontroleerd door een moedertaalspreker om ervoor te zorgen dat er geen zeldzame maar belangrijke tekens (bijv. historische citaten, speciale tekens in bedrijfsnamen) ontbreken. Deze combinatie van AI-versnelling en menselijke controle reduceert het maken van subsets van dagen tot uren, met behoud van hoge kwaliteit. Integreer het script in uw CI/CD-pipeline, zodat bij elke content-update de subsets automatisch opnieuw worden gegenereerd en getest. Zo zorgt u ervoor dat lettertypebestanden altijd up-to-date zijn zonder de laadprestaties te beïnvloeden.
Taalspecifieke fallback-strategieën voor consistente typografie
Zelfs bij optimaal subsetting kan het voorkomen dat een lettertypebestand niet wordt geladen – door netwerkfouten, browserincompatibiliteit of licentiebepalingen. Dan treedt de fallback-stapel in werking. Voor 24 talen is een globale font-stack niet voldoende: een systeemlettertype dat er voor Duits goed uitziet, kan ongeschikt zijn voor Arabisch. Definieer daarom per taalversie aparte fallback-stacks die zijn afgestemd op de typische systeemlettertypen van de doelregio. Gebruik hiervoor de CSS-functie @font-face met unicode-range om voor elke lettertypefamilie alleen de tekens te laden die daadwerkelijk nodig zijn. Voor de Arabische versie kunt u als fallback 'Traditional Arabic' of 'Tahoma' opgeven, voor de Griekse 'GFS Didot' of 'Times New Roman'. Let op metrische compatibiliteit: met size-adjust en ascent-override past u het fallback-lettertype visueel aan het primaire lettertype aan, zodat layout- sprongen worden geminimaliseerd. Test deze fallbacks in alle talen met een geautomatiseerde screenshot-vergelijking om ervoor te zorgen dat de leesbaarheid ook in geval van fouten behouden blijft. Zo voorkomt u verrassingen en zorgt u voor een consistente gebruikerservaring in alle taalvarianten.
Server-side optimalisatie: Self-hosting, caching en CDN-strategieën
Het leveren van webfonts via externe diensten zoals Google Fonts of Adobe Fonts is gemakkelijk, maar brengt nadelen met zich mee voor meertalige projecten: Ten eerste moet u bij 24 taalvarianten vaak meerdere verzoeken naar verschillende servers sturen, wat de laadtijd verhoogt. Ten tweede kent u de caching-strategie van de aanbieder niet en heeft u geen controle over uitvaltijden of privacy. Daarom raden wij aan om alle lettertypebestanden zelf te hosten op uw eigen server of een dedicated CDN. Door self-hosting kunt u de lettertype-subsets precies afstemmen op uw taalversies en via HTTP/2 Server Push of Preload-hints kritieke lettertypen prioriteren. Bovendien kunt u de caching via Cache-Control-headers zo instellen dat de lettertypen voor alle bezoekers van een taalversie slechts één keer worden geladen. Een CDN met edge-servers in de buurt van uw gebruikers verkort de latentie. Voor 24 talen met verschillende doelregio's is een CDN essentieel: gebruikers in Finland laden de Finse lettertype-subset van een nabijgelegen edge-knooppunt, gebruikers in Malta op dezelfde manier. Belangrijk: Stel voor elke taalversie een aparte cache-regel in, zodat bijvoorbeeld het Duitse subset-bestand met een lange geldigheidsduur (bijv. een jaar) wordt gecached, terwijl u bij lettertype-updates de cache ongeldig maakt door de bestandsnaam te wijzigen (fingerprinting). Zo zorgt u ervoor dat de lettertypen snel worden geleverd en altijd actueel zijn, zonder dat gebruikers op updates hoeven te wachten.
Toegankelijkheid en leesbaarheid: Lettertypekeuze voor alle gebruikersgroepen
Meertaligheid betekent niet alleen tekens correct weergeven, maar ook dat het lettertype voor alle gebruikers goed leesbaar is – ongeacht zicht, schermgrootte of apparaat. Let daarom bij de lettertypekeuze op voldoende letteronderscheid, vooral bij vergelijkbare tekens zoals 'rn' vs. 'm' of '0' vs. 'O'. Voor Latijnse schriften zijn schreefloze fonts met een grote x-hoogte en open vormen geschikt; voor Arabische schriften zijn fonts met duidelijke verbindingen en voldoende binnenruimte belangrijk. Zorg ervoor dat het lettertype bij vergroting tot 200% niet rafelig wordt of dat de tekenafstanden verspringen. Gebruik in CSS font-size-adjust: from-font of stel expliciete fallback-lettertypen in met vergelijkbare verhoudingen om layoutverspringen bij zoomen te voorkomen. Een ander aspect is het contrastniveau: tekst op achtergrond moet minimaal WCAG-AA (4,5:1) halen, bij kleine tekst beter AAA (7:1). Voor 24 talen betekent dit: test elke taalversie met een contrastchecker, omdat sommige lettertypen bij bepaalde lijndiktes of in cursieve stijlen aan contrast verliezen. Ook de regellengte en regelafstand moeten per taal worden aangepast – Arabische teksten hebben vaak meer regelafstand nodig dan Latijnse. Integreer deze tests in uw geautomatiseerde kwaliteitsborging (zie paragraaf 4) om ervoor te zorgen dat alle gebruikers – ook ouderen of slechtzienden – uw inhoud optimaal kunnen waarnemen.
blog.faqT
Kan ik Google Fonts gebruiken voor meertalige EU-pagina's?
Technisch gezien wel, maar privacyrechtelijk problematisch omdat Google de IP-adressen van bezoekers registreert. Voor EU-pagina's is een zelf gehost lettertype aanbevolen. Bovendien biedt Google Fonts slechts een beperkte selectie aan meertalige lettertypen; u zou mogelijk meerdere families moeten combineren, wat de laadtijd verhoogt.
Hoe controleer ik of mijn lettertype alle benodigde glyphs dekt?
Gebruik tools zoals GlyphChecker of de Unicode-bereiktest van Wakamai Fondue. Voer de karakters van uw doeltalen in (bijv. Turkse İ, Roemeense Ș). Als alternatief kunt u uw contentmanagementsysteem parsen en alle Unicode-codepunten per taalpagina extraheren om ze met het lettertype te vergelijken. Zo ontdekt u gaten voordat de site live gaat.
