Fallback Font Adjuster

Een offline tool voor het aanpassen van de metrische eigenschappen van fallback-fonts. Deze tool helpt layout shifts te minimaliseren wanneer custom fonts worden geladen.

Geesteren, Twente

Ik was het zat om steeds online te moeten gaan om fonts te testen. Het telkens opnieuw uploaden en configureren voelde onhandig, en ik wilde iets dat lokaal werkt en waarmee ik volledige controle had over de instellingen.

Daarom heb ik de Fallback Font Adjuster gemaakt. Het idee was om een tool te ontwikkelen waarmee ik direct en visueel aanpassingen aan de metrics van een fallback-font kan zien, zonder afhankelijk te zijn van externe tools of platforms.

Met deze tool kun je in je eigen ontwikkelomgeving experimenteren en de fallback-fonts precies zo afstellen als je wilt. Geen gedoe meer met Node, Composer, of het opnieuw uploaden van bestanden – alles gebeurt lokaal, en je ziet de veranderingen in real-time.

De Fallback Font Adjuster is gemaakt om offline te gebruiken.

Pas het default-font aan en gebruik het in je eigen ontwikkelomgeving. Je hoeft niets te installeren; het is slechts één HTML-bestand met een beetje CSS en JavaScript.

Download: de Fallback Font Adjuster op GitHub.

Het beste kun je de Fallback Font Adjuster gebruiken in een Chrome Incognito-venster, omdat Firefox problemen kan geven als je @font-face direct in de browser aanpast, wat onregelmatige uitkomsten kan opleveren.

Dit is een proefopstelling en werkt alleen met Bitter als webfont.

Dit zijn volgens Google de font-metrics van Bitter: ascent = 93,5 descent = 26,5

De Google font-metrics is in principe een prima uitgangspunt. Google weet echter niet welke fallback-font jij gebruikt. Neem bijvoorbeeld Georgia als fallback. Deze font is iets kleiner dan Bitter, dus je zult de size-adjust een beetje moeten aanpassen. Neem dus niet alles klakkeloos over van Google.

Het is niet nodig om met size-adjust de perfecte match te krijgen; als je redelijk in de buurt komt, is dat goed genoeg.

Hoe gebruik je de Fallback Font Adjuster:

Weet je niet precies wat ascent, descent en line-gap zijn? Lees dan eerst het artikel Fallback font aanpassen met @font-face descriptors.

  • Zorg ervoor dat de metrics op de beginwaarden staan:
    • size-adjust: 100%
    • ascent-override: 100%
    • descent-override: 15%
    • line-gap-override: 0%
  • Kies het gewenste fallback-font (probeer er meerdere). Is je gekozen fallback lokaal niet beschikbaar dan krijg je een foutmelding en wordt hij gereset naar Georgia.
  • Begin met ascent-override en pas deze aan zodat de ascent goed uitlijnt met het webfont.
  • Stel size-adjust in op ongeveer de gewenste grootte.
  • Pas descent-override aan om de blauwe lijn gelijk te maken met de rode lijn (onderkant). Terwijl je dit doet, zul je waarschijnlijk ook ascent-override en size-adjust iets moeten aanpassen.
  • Ga verder met finetunen.
  • Testen, finetunen en opnieuw testen.
  • Gebruik line-gap-override als je het alleen met ascent en descent niet lukt. Of als de line-gap flink afwijkt van het webfont. Poppins heeft bijvoorbeeld een line-gap van 10.

Tussendoor kun je de metrics het beste ook testen op een echte webpagina, omdat daar vaak veel meer tekst op staat. Tekst die ook beïnvloed wordt door andere elementen of CSS kan namelijk een ander resultaat geven.

Aanpassingen die je zelf kunt maken in het Fallback Font Adjuster script

  • Verander de font-size in app.css – lijn 44
  • Voeg meer fallback-fonts toe in app.js – lijn 1
  • Verhoog de stapjes in de controls, dit staat standaard op 0,01. Om de fallback-font zo goed mogelijk te matchen zou ik de stapjes niet te groot maken.

Hoewel de Fallback Font Adjuster voor iedereen gratis is; toch een kleine disclaimer

Dit script is bedoeld als hulpmiddel voor het experimenteren met en finetunen van fallback-fonts.

Ik raad ik aan om je aanpassingen altijd grondig te testen in verschillende browsers en op verschillende apparaten. Layout shifts in op je webpagina kunnen variëren afhankelijk van de browserondersteuning, browserinstellingen en specifieke fontinstellingen. Experimenteer gerust, en pas je instellingen zorgvuldig aan voor de beste prestaties.

Dit script is uitgebracht onder de MIT-licentie, dus voel je vrij om het te gebruiken, aan te passen en te delen zoals je wilt! Ik hoor graag wat je er doet.