Een font stack is de geordende lijst lettertypes die je aan een browser geeft, met daarin welk lettertype eerst gebruikt moet worden en waarop teruggevallen wordt als dat ontbreekt. De browser leest van links naar rechts, pakt het eerste lettertype dat hij kan vinden en stopt daar. Het is een regel in je stylesheet, maar het bepaalt wat miljoenen bezoekers echt te zien krijgen.
Een goede vergelijking is een reserveplan voor het avondeten. Je eerste keuze is het restaurant dat je hebt geboekt; is het vol, dan heb je een tweede plek in de buurt in gedachten, en als alles misgaat is er altijd de keuken thuis. Een font stack werkt net zo. Je zet je merklettertype eerst, daarna een paar breed beschikbare alternatieven, en tot slot een generieke familie als sans-serif die elk apparaat bezit. Zo blijft je typografie intact, zelfs als een eigen webfont traag downloadt of geblokkeerd wordt. De slimme zet is fallbacks kiezen die dicht bij je merklettertype liggen, zodat de wissel nauwelijks opvalt.
Het laatste item telt het zwaarst. Door de lijst met een generieke familie af te sluiten verdwijnt tekst nooit, hij verschijnt gewoon in de default van het apparaat. Er is een bekende valkuil die de flash of unstyled text heet. Terwijl het webfont laadt, toont de browser soms even een fallback en springt dan naar het merklettertype, waarbij de lay-out kan verspringen. Afstanden zoals letter spacing kunnen tussen lettertypes ook verschuiven, dus ontwerpers testen hoe elke fallback leest.
Bij TopDevs leggen we voor elk project een verstandige font stack vast, vaak opgeslagen als een design token, zodat je merklettertype verschijnt als het kan en leesbare tekst altijd verschijnt als het niet kan.
