Een webfontwissel laat knoppen verschuiven

Een fallbackfont en een webfont hebben zelden dezelfde letterbreedte en regelhoogte. Wordt de tekst van een knop breder, dan groeit de knop, breekt de tekst misschien af op een tweede regel en schuift alles eronder of ernaast mee. De cursus over prestaties van web.dev is een cursus voor beginners over webprestaties als onderdeel van de gebruikerservaring. Of webfonts bij jou een prestatiekost of verschuiving veroorzaken, volgt niet uit die bron en moet je zelf meten.

Ook MDN over webprestaties rekent soepele inhoud tijdens interactie tot webprestaties, naast laadtijd en responsiviteit. Een knop die beweegt terwijl iemand erop tikt, is naar mijn inschatting een voorbeeld van dit soort ervaringsproblemen, maar de bron noemt dat geval niet letterlijk. Of een verschuiving bij jou voorkomt, hangt af van je font, je CSS en de netwerksnelheid. Daarom meet je ze zelf.

Je wilt twee toestanden van dezelfde pagina vergelijken: met fallback en met het definitieve font. Doe dat zo:

1. Open de pagina in de ontwikkeltools van je browser en schakel de cache uit zolang die tools open staan.
2. Vertraag de netwerkverbinding via de beschikbare throttling-optie, zodat het font merkbaar later aankomt. De exacte plaats van deze opties verschilt per browser en versie.
3. Blokkeer het verzoek naar het fontbestand met een functie van je ontwikkeltools (of vertraag het zwaar), laad de pagina en maak een schermafbeelding: dit benadert de fallbacktoestand. Hef de blokkade daarna weer op.
4. Heractiveer het font, laad opnieuw, wacht tot het binnen is en maak een tweede schermafbeelding.
5. Doe dit op een smalle schermbreedte, want daar breken knoppen sneller af.

Houd de vensterbreedte, zoomstand en tekstgrootte tijdens beide metingen gelijk, anders vergelijk je niet wat vergelijkbaar is.

Vergelijk de twee schermafbeeldingen niet op het oog alleen. Noteer per belangrijk element, vooral knoppen en formuliervelden:

• de breedte en hoogte van de knop in beide toestanden;
• het aantal tekstregels in de knop;
• de verticale positie van het element en van het element eronder;
• of een rij met naast elkaar geplaatste knoppen in één rij blijft.

Het verschil tussen definitief en fallback is je verschuiving. Is het nul, dan hoef je niets te reserveren. Is het groter dan de beschikbare ruimte, dan weet je meteen waar de afbreking gebeurt. Controleer ook of het verschil optreedt bij een bezoeker die de pagina een tweede keer bezoekt: een font uit de cache kan het gedrag veranderen, dus test beide situaties apart.

Het gedrag van de instelling font-display verschilt per waarde. Test het resultaat in plaats van het te veronderstellen.

De cijfers zijn verzonnen invoer om de methode te tonen. Stel: een rij met twee knoppen, "Offerte aanvragen" en "Bel ons", heeft op mobiel 300 px beschikbaar. Elke knop heeft 16 px horizontale padding aan beide zijden en tussen de knoppen zit 12 px.

• Fallback: tekst 150 px en 60 px. Knopbreedtes 182 px en 92 px. Totaal met tussenruimte: 182 plus 92 plus 12 is 286 px.
• Definitief font: tekst 168 px en 66 px. Knopbreedtes 200 px en 98 px. Totaal: 200 plus 98 plus 12 is 310 px.

Verwachte controle: 286 past in 300, 310 niet. Als de knoppen in een rij staan die mag afbreken, kan de tweede knop naar een nieuwe regel springen zodra het font binnenkomt. Controleer dat in je eigen opstelling, want dat is precies de verschuiving die je zoekt. Mogelijke keuzes: de knoppen onder die breedte onder elkaar zetten, de padding aanpassen, of het fallbackfont dichter bij het definitieve afstemmen. Meet na de aanpassing opnieuw met dezelfde twee toestanden.

Herhaal na elke aanpassing de testopstelling en vergelijk dezelfde elementen met dezelfde meetwaarden. Controleer daarnaast of de knoppen bruikbaar blijven met vergrote tekst of ingezoomd scherm. De tutorials van W3C WAI zijn bedoeld voor ontwikkelaars, ontwerpers en inhoudsbeheerders die inhoud toegankelijk willen maken, en vermelden per pagina de technieken en criteria waarop ze steunen. Gebruik ze als algemeen naslagwerk voor toegankelijke inhoud. Ze geven geen vaste drempels voor jouw knopafmetingen, dus formuleer die zelf. Deze controle bewijst geen volledige WCAG-conformiteit.

Voor de overdracht noteer je: welk font en welke fallback, de schermbreedtes, de gemeten breedtes in beide toestanden, de gekozen maatregel en de verwachte controle (verschil kleiner dan de beschikbare ruimte). Wil je ook zien welke publieke signalen je website toont, dan kun je die bekijken via Marketing Scan. Een publieke scan ziet zichtbare signalen en meet niet de fontwissel op jouw toestellen.