Toon fallbacktekst snel wanneer lezers de woorden nodig hebben om een pagina te gebruiken. Kies alleen voor tijdelijke verberging bij een klein element waarvoor een specifiek lettertype echt nodig is. Voor een pagina die je op een Mac beheert, legt deze gids uit hoe je een beleid kiest en het effect ervan op de tekstindeling test.

Wat verandert er precies terwijl een lettertype wordt geladen?

Een fallbacklettertype geeft dezelfde tekst weer in een ander lettertype zolang het aangevraagde lettertype niet beschikbaar is. Tijdelijk verborgen tekst komt overeen met de blokkeerperiode voor het laden van lettertypen: de browser maakt de indeling met een onzichtbaar fallbacklettertype. De laadperiode begint wanneer de browser voor het eerst probeert het downloadbare lettertype te gebruiken. De uitleg van MDN over font-display beschrijft deze fasen.

Dat onderscheid is belangrijk wanneer je een pagina beoordeelt. Een lege kop betekent niet dat de uiteindelijke afmetingen ervan zijn gereserveerd. Tijdens de blokkeerperiode gebruikt de browser nog steeds de indeling van het fallbacklettertype; het verbergen van de letters bepaalt niet waar de regels van het gedownloade lettertype uiteindelijk worden afgebroken. Beoordeel de zichtbaarheid en de stabiliteit van de indeling afzonderlijk.

De relevante instelling is de descriptor font-display binnen een @font-face-regel. Deze hoort bij de definitie van het lettertype, niet bij een gewone alineaselector. Dit is een keuze bij het maken van de pagina: gebruik de stylesheet of lettertype-instellingen die beschikbaar zijn voor de pagina die je beheert. MDN legt uit waarop font-display van toepassing is.

Welke waarde voor font-display past bij de taak van de lezer?

Bepaal twee dingen voordat je iets aanpast: moeten de woorden snel in een ander lettertype verschijnen, en is het acceptabel als dat lettertype later wordt vervangen? De volgende tabel vertaalt de gedocumenteerde laadperioden naar keuzes voor een algemene openbare pagina. De definities van MDN voor de verschillende waarden beschrijven het onderliggende gedrag.

Waarde Zolang het lettertype niet beschikbaar is Mogelijkheid om het fallbacklettertype te vervangen Geschikt uitgangspunt
swap Zeer korte blokkeerperiode, daarna zichtbaar fallbacklettertype Onbeperkte vervangingsperiode Een korte kop waarbij het beoogde lettertype belangrijk is
fallback Zeer korte blokkeerperiode, daarna zichtbaar fallbacklettertype Korte vervangingsperiode Leestekst waarbij een vroege verandering acceptabel is
optional Zeer korte blokkeerperiode Geen vervangingsperiode Tekst waarbij het behoud van het eerste zichtbare lettertype het belangrijkst is
block Onzichtbaar fallbacklettertype tijdens een korte blokkeerperiode, daarna zichtbaar fallbacklettertype Onbeperkte vervangingsperiode Een klein element dat afhankelijk is van een specifiek lettertype
auto Door de browser gekozen beleid Door de browser gekozen beleid Het standaardgedrag van de browser accepteren

Dit zijn beleidscategorieën, geen exacte timers die je kunt instellen. De huidige werkversie van CSS Fonts Level 4 van de W3C beveelt gebruikelijke tijdsduren aan, maar staat expliciet variatie tussen browsers toe. Ook beperkt die versie block tot kleine stukjes tekst waarvoor het specifieke lettertype nodig is voor de bruikbaarheid. Alleen de voorkeur voor het uiterlijk van een kop is geen goede reden om die leeg te laten. W3C: de weergave van lettertypen per font-face regelen.

Begin voor een voorbeeldpagina met een kop met de naam “Sample Collection”, navigatie met de naam “Section One” en enkele alinea’s met fallback als optie voor leestekst. Overweeg swap voor de korte kop als het belangrijk is dat uiteindelijk het bijbehorende lettertype wordt gebruikt. Kies optional wanneer het behoud van de eerste zichtbare weergave voorrang heeft. Deze aanbevelingen passen het gedocumenteerde beleid toe op de taak van de lezer; het zijn geen meetresultaten.

Gebruik een hulpmiddel om zichtbaarheid en tekstverspringing te beoordelen

Beoordeel elke tekstsoort afzonderlijk. Een navigatielabel en een alinea kunnen hetzelfde lettertype gebruiken, maar hebben andere indelingsbeperkingen. De nuttige vraag is of een verandering van lettertype iemand verhindert de taak voort te zetten, of alleen het uiterlijk verandert.

  1. Lees de pagina met het fallbacklettertype. Kan iemand “Section One” begrijpen, de kop herkennen en de alinea’s lezen? Zo ja, dan is zichtbare fallback een goed uitgangspunt.
  2. Bekijk hoe het lettertype wordt vervangen. Krijgt de kop er een regel bij? Worden labels afgebroken? Verspringt de volgende alinea?
  3. Kies een acceptabele vervangingsperiode. Gebruik swap als een late vervanging acceptabel blijft, fallback als alleen een vroege vervanging wenselijk is, of optional als het eerste zichtbare lettertype behouden moet blijven.
  4. Eis een concrete reden voor lege tekst. Bepaal voordat je block kiest wat er in het fallbacklettertype onbruikbaar zou worden en waarom die afhankelijkheid niet kan worden weggenomen.

Stel bijvoorbeeld dat “Sample Collection” in het fallbacklettertype op één regel staat en in het gedownloade lettertype op twee. Als de kop een hypothetische regelhoogte van 40 pixels heeft, voegt de extra regel 40 pixels toe aan de hoogte, ervan uitgaande dat de tussenruimte gelijk blijft. De inhoud eronder kan daardoor verschuiven. Dit zijn illustratieve gegevens, geen browsermetingen.

Tijdelijke verberging lost die afwijking niet op. De praktische opties zijn het fallbacklettertype beter laten aansluiten, de indeling na het testen aanpassen of een beleid kiezen dat een late vervanging voorkomt. Volgens het gedrag van optional in de huidige W3C-werkversie mag, zodra fallbacktekst is weergegeven, het optionele lettertype die tijdens de levensduur van die pagina niet vervangen. De definitie van optional door de W3C.

De keuze toepassen en testen op een Mac

Gebruik een pagina waarvan je de stylesheet kunt aanpassen en waarop het bestaande weblettertype al goed wordt geladen. Behoud de bestaande verwijzing naar het lettertypebestand; voor deze vergelijking is geen nieuwe lettertypedownload of vervangend bestand nodig.

Zoek de betreffende @font-face-declaratie in de bronstylesheet van de pagina of in de ondersteunde lettertypeconfiguratie. Stel de descriptor font-display in op de kandidaatwaarde, bijvoorbeeld font-display: fallback;. Controleer ook de andere declaraties voor gewichten en stijlen, zodat de test de lettertypen omvat waar de pagina daadwerkelijk om vraagt. Het voorbeeld van MDN voor font-display laat zien waar de descriptor staat.

Druk in Chrome op je Mac op Command + Option + I om DevTools te openen. Je kunt ook met de rechtermuisknop op de doeltekst klikken en Inspect kiezen; in het paneel Elements zie je de toegepaste CSS onder Styles. De instructies van Chrome voor het openen van DevTools beschrijven beide manieren.

Voer na elke wijziging van de stylesheet de volgende vergelijking uit. Houd de vensterbreedte en zoomfactor gelijk, zodat je verschillen aan het beleid voor het laden van lettertypen kunt toeschrijven.

  1. Open Network, schakel Disable cache in, kies een lagere snelheid in het menu Throttling en laad de pagina opnieuw. Gebruik het filter Font om de aanvragen voor lettertypen te bekijken.
  2. Bekijk de kop, de navigatie en het begin van de alinea. Noteer of de tekst eerst leeg blijft, in het fallbacklettertype verschijnt en later andere regelafbrekingen krijgt.
  3. Als de overgang te snel gaat om te bekijken, schakel je Capture screenshots in bij de instellingen van het paneel Network en laad je de pagina opnieuw om de laadvolgorde te inspecteren.
  4. Schakel de snelheidsbeperking uit en zet Disable cache uit. Laad de pagina opnieuw om die bij een herhaalbezoek onder normale omstandigheden te vergelijken. Het overzicht van de Network-functies van Chrome beschrijft deze instellingen.

Test afzonderlijk wat er gebeurt als het lettertype niet beschikbaar is. Klik in Network met de rechtermuisknop op de daadwerkelijke aanvraag voor het lettertype, kies Block request en laad de pagina opnieuw. Chrome toont het bijbehorende patroon in Request conditions. Controleer of de woorden leesbaar worden en de pagina met het fallbacklettertype bruikbaar blijft. Verwijder of schakel het testpatroon daarna uit. De documentatie van Chrome over Request conditions legt uit hoe je aanvragen blokkeert en geblokkeerde aanvragen herkent.

Beoordeel de pagina ook in Safari als dat deel uitmaakt van de Mac-browsers die je wilt ondersteunen. Beschouw de Chrome-test als bewijs voor de weergave in die browser, niet als bewijs dat andere browsers dezelfde timing hebben: de specificatie staat verschillen tussen browsers toe. Houd een korte vergelijkingsnotitie bij met de browser, de kandidaatwaarde, de zichtbaarheid bij het openen en de waargenomen regelafbreking.

Wat als zichtbare fallback de indeling te veel verandert?

Begin met de daadwerkelijke tekst en de beschikbare breedte. Vergelijk korte labels, de langste kop en enkele regels uit alinea’s. Een fallbacklettertype dat visueel op het weblettertype lijkt, kan nog steeds andere tekenbreedtes hebben en daardoor tot andere regelafbrekingen leiden.

Met size-adjust kun je de lettercontouren en -maten van een lettertype schalen, inclusief de tekenbreedtes. MDN laat zien hoe je een lokaal fallbacklettertype definieert en het beter laat aansluiten op een primair weblettertype. Bepaal een geschikt percentage voor de lettertypen die jij gebruikt; het percentage uit een documentatievoorbeeld is geen universele instelling. MDN: size-adjust.

Verticale maten moet je afzonderlijk controleren. De descriptor ascent-override bepaalt de maat boven de basislijn die wordt gebruikt bij het indelen van regels, maar MDN vermeldt momenteel dat deze beperkt wordt ondersteund. Beschouw die aanpassing als een verbetering en behoud een leesbare fallbackindeling in browsers die deze niet ondersteunen. MDN: ascent-override.

Laat de browser de tekstvormgeving verzorgen. Probeer een kop niet stabieler te maken door elke letter afzonderlijk te vervangen of op te meten. Bij het koppelen van CSS-lettertypen wordt speciale aandacht besteed aan grafeemclusters, zoals een basisteken met een gecombineerd accent. Controleer volledige labels en regels in hun daadwerkelijke indeling. W3C: clusters koppelen.

Verandert preload of een bibliotheek voor het laden van lettertypen de keuze?

Preloading regelt het ontdekken van bronnen. De WHATWG HTML Standard definieert preload als het vooraf ophalen en opslaan van een bron die naar verwachting nodig is voor de huidige navigatie. Deze instelling bepaalt niet het font-display-beleid voor je lettertype. Overweeg preloading pas nadat je hebt gekozen welk zichtbaar gedrag acceptabel is; eerder ophalen vervangt niet de beslissing over wat er gebeurt als het lettertype nog niet beschikbaar is. WHATWG: het linktype preload.

Begin bij gewone paginatekst met CSS. Als een bestaand project Font Face Observer gebruikt, retourneert de gedocumenteerde methode load() van die bibliotheek een promise die wordt opgelost wanneer het lettertype is geladen en wordt afgewezen als dat mislukt. De familienaam en de optionele omschrijvingen van gewicht, stijl en breedte moeten overeenkomen met het aangevraagde lettertype. De bibliotheek legt ook uit hoe je geschikte testtekst opgeeft als de standaardtekens niet in het lettertype voorkomen. Documentatie van Font Face Observer.

Een geslaagde callback van de bibliotheek geeft aan dat het laden is voltooid; je toepassing bepaalt nog steeds wat zichtbaar wordt. Als aangepaste logica tekst verbergt, leg dan vast hoe die bij een fout weer leesbare fallbacktekst toont. Anders kan een mislukte laadpoging de verbergingsregel van de toepassing actief laten. Dit is een implementatieaanbeveling op basis van de gedocumenteerde succes- en foutpaden van de bibliotheek.

De native API kent een vergelijkbare beperking. document.fonts.ready wordt pas vervuld wanneer het laden en de indelingsbewerkingen voor gebruikte lettertypen zijn voltooid. Die verzameling kan verschillen van alle gedeclareerde lettertypen, waaronder optionele lettertypen waarvan de kans om te laden voorbij is. Het bewijst dus niet dat elk bedoeld lettertype zichtbaar is. MDN: de eigenschap fonts van Document.

Ook selecteert het optionele tekstargument van document.fonts.load() passende lettertypen via hun Unicode-bereiken; het controleert niet of afzonderlijke tekens aanwezig zijn. Voltooiing van het laden en correcte weergave van het volledige voorbeeld moeten dus afzonderlijk worden gecontroleerd. MDN: de methode load() van FontFaceSet.

Kies het beleid door de trage laadversie, de versie zonder beschikbaar lettertype en de versie bij opnieuw laden van dezelfde pagina te beoordelen. Houd gewone woorden leesbaar, beslis expliciet of een late vervanging acceptabel is en sta tijdelijke verberging alleen toe voor een klein element met een aangetoonde afhankelijkheid van een specifiek lettertype. Zo kan iemand onder alle geteste omstandigheden prettig “Sample Collection” blijven lezen.

Bronnen