Apple presenteerde onlangs de iPhone 4. Een mooi staaltje techno­logie. Het nieuwe scherm met 316 ppi vind ik de aller mooiste toe­voeg­ing. Het is haarscherp. Het is alsof je een gedrukt boek leest, zo mooi is het.

De hoge resolutie zorgt voor veel betere leesbaarheid omdat je kleine letters beter en sneller kan identificeren. Helaas laat Apple nog enkele steken vallen op het gebied van leesbaarheid bij de iPhone en iPad. Een beperking is dat Apple een klein aantal lettertypes met de iPhone en iPad meelevert en dat je zelf geen fonts kan toevoegen. Van dat kleine aantal zijn er ook nog eens maar weinig goed leesbaar op een beeldscherm. Hier zijn nou juist specifieke ‘beeldscherm’ lettertypes nodig om teksten op een klein scherm of op een scherm met lage resolutie goed leesbaar te maken.

Hoe beter een lettertype de informatiestroom naar de lezer communiceert des te laag­drempeliger de gebruiker de informatie opneemt en met plezier leest. Vandaar mijn aandacht voor goed leesbare lettertypefamilies. Kenmerken van deze lettertypes zijn: (1) grote openingen (bijvoorbeeld bij c of e); (2) grote x‑hoogte (de hoogte van de kleine letters zoals a, e, c en u); en (3) gemakkelijk te herkennen vormen (goed onderscheid tussen op elkaar lijkende letters). Deze drie kenmerken maken dat elke individuele pixel op het scherm optimaal het lezers comfort vergroot.

Font Stacks & Embedden

Vooral de body teksten (e.g. paragrafen, lijsten, blokquotes) op je website, die wil je zo leesbaar mogelijk hebben. Dan ben je meteen beperkt door de drie genoemde kenmerken voor lettertypes. Je kan ook nog eens alleen kiezen uit de standaard, bij Microsoft Windows, Mac OS of Linux distributies, mee­geleverde lettertypes. Elk operating systeem, sterker nog, elke individuele versie daarvan, bevat weer andere standaard fonts. Een enorm gepuzzel om uit te vinden welke fonts je het best kunt gebruiken voor je website. Voor een webbouwer is de keuze klein.

Een gedeeltelijke oplossing is om een font in een website te ‘embed­den’. De web­browser herkent dan dat een font op de webserver staat en laat de tekst van de website in dat lettertype dat op de webserver staat, zien. Alleen mag je niet zomaar, rechtenvrij, een font embedden op je eigen website. Dit zou namelijk betekenen dat iedereen fonts gratis kan downloaden waar ze eigenlijk voor zouden moeten betalen. Er bestaan wel gratis fonts waarmee dit toch mag, maar de kwaliteit van deze lettertype­families is nog onder­maats of deze letter­types hebben zich nog niet voldoende bewezen. Veel beter is het om nog steeds uit te gaan van de kwaliteitsfonts die een operating systeem meelevert. Daarnaast bestaan er webbrowsers die embedded fonts niet tonen (e.g. door download beveiliging of geen onder­steun­ing). Het embedden van een font is dus gelimiteerd en niet ‘fullproof’.

Een professionele oplossing voor het probleem van de beschik­baar­heid is om ‘font stacks’ te maken. Een font stack is een gestructureerde lijst met namen van lettertypes. De webbrowser kijkt of het eerst genoemde font uit de lijst beschikbaar is op de computer van de bezoeker, zo niet, dan kijkt de web­browser naar het volgende font enzovoorts. Zo’n gestructureerde lijst is een verzameling van fonts, die zowel bij alle operating systemen te vinden zijn als dat ze goed op elkaar lijken. Zelfs als je fonts op je website embed is het nog steeds verstandig om een font stack te gebruiken, zodat je website fullproof is.

Zo maak je een font stack

• Begin met een veel voorkomende lettertypefamilie, zodat je website op de meeste computers hetzelfde eruitziet.
• Plaats fonts met jouw voorkeur boven in de lijst.
• Zet vergelijkbare standaard fonts uit verschillende operating systemen in je font stack.
• Zet fonts die op elkaar lijken dichter bij elkaar in een stack. Soms zijn lettertypes exacte kopieën van elkaar, zet die dus direct onder elkaar, met de populairste als eerste.
• Laat webbrowsers zo min mogelijk zoeken in een font stack. Zet belangrijke treffers zo hoog mogelijk in de stack.
• Eindig met een zeer generieke lettertypefamilie, als laatste alternatief.

Categorieën

Het maken van font stacks is dus een heel gepuzzel. Vaak sluiten regels elkaar uit en moet je keuzes maken. Voor een goed begin geef ik je in deze blog de tien font stacks die ik zelf graag gebruik.

• Neo-Grotesk voor koppen
• Geometrisch voor koppen
• Humanistisch voor body & navigatie
• Humanistisch voor koppen
• Renaissance voor koppen
• Renaissance voor koppen & body
• Neoklassiek voor koppen
• Romantisch voor koppen
• Schots roman voor koppen & body
• Monospace voor code

Op Google’s Android systeem staan standaard maar drie fonts geïnstalleerd: Droid Sans; Droid Serif; en Droid Sans Mono. Deze laat ik buiten beschouwing. Door de opzet van een font stack (met een gestandaardiseerde noodoplossing) kiest Google Android automatisch de meest geschikte fonts.

Neo-Grotesk voor koppen

Helvetica is het bekendste voorbeeld van een neo-grotesk lettertype. Een neo-grotesk lettertype is een sans-serif (realist) lettertype en bestaat uit lijnen met vrijwel gelijke diktes. Het contrast tussen de lijnen is erg laag. Je herkent (neo)groteske lettertypes ook vaak aan de kleine openingen bij de ‘c’ of ‘e’. Onder andere omdat deze openingen al zo summier zijn, zijn dit soort letters in het klein minder goed te lezen. Gebruik deze lettertypes dus liever niet voor body teksten. Neo-grotesk lettertypes kan je het best toepassen bij koppen. Als je een neo-grotesk lettertype voor je website wilt gebruiken is de volgende stack het meest geschikt.

Arial, Helvetica, "Helvetica Neue", "Nimbus Sans L", FreeSans, sans-serif;

Helvetica is wel mooier dan Arial, maar Microsoft Windows geeft Helvetica erg slecht weer. Begin daarom alle neo-grotesk font stacks met Arial. Voor Mac OS gebruikers is het dus verstandig om Arial uit te zetten (met Font Book in de Applications folder), zodat de webbrowser automatisch Helvetica toont in plaatst van Arial.

De laatste ‘sans-serif’ in de font stack is geen lettertype, maar een gestandaardiseerde noodoplossing. Zodra de webbrowser geen van de lettertypes kan vinden kiest het systeem van de bezoeker zelf voor een sans-serif lettertype.

In tabel 1 zie je hoe vaak elke font geïnstalleerd staat op een computer.

Geometrisch voor koppen

Geometrische lettertypes, zoals de naam al aangeeft, bestaan voor het blote oog uit strakke rechte lijnen en perfecte cirkels. Een erg geschikt lettertype om koppen mee op te maken. Ze worden zo nu en dan ook voor body tekst op papier gebruikt. Echter doordat deze letters uit voornamelijk twee basis­vormen bestaan (i.e. rechte lijn en cirkel), zijn sommige letters in het klein vaak lastig uit elkaar te halen, bijvoor­beeld de ‘a’ en ‘o’. Gebruik geo­metrische lettertypes dus alleen voor koppen.

In de geometrische font stack komen ook lettertypes voor die deels geo­metrisch zijn, zoals ‘Gill Sans’. Dit is om een betrouwbare font stack te maken die ervoor zorgt dat de look van de website zoveel mogelijk in takt blijft zodra de eerste fonts niet geïnstalleerd staan. Neo-grotesk lettertypes kunnen als goede laatste alternatieven functioneren. De geometrische font stack kan er als volgt uitzien.

"Century Gothic", "URW Gothic L", Futura, "Gill Sans", "Gill Sans MT", "Trebuchet MS", Arial, Helvetica, "Helvetica Neue", "Nimbus Sans L", FreeSans, sans-serif;

In tabel 2 vind je terug hoe vaak elk font geïnstalleerd staat op een computer.

Ik raad aan om voorzichtig te zijn met koppen in bold of italic/oblique te zetten. Soms zijn deze variaties niet geïnstalleerd, maar nog veel belangrijker, vaak misvormt het een lettertype. Lettertypes zijn in eerste instantie voor ‘normaal’ of ‘roman’ ontworpen, niet voor bold. Daaren­tegen kan je voor een aantal serif lettertypes er juist wel voor kiezen om italic te gebruiken. Voor een speelser beeld.

Humanistisch voor body & navigatie

Humanistische sans-serif lettertypes zijn meer dan andere sans-serif letter­types opgebouwd uit vloeiende lijnen als subtiele kalligrafie. Hiernaast ver­schillen lijndiktes van de letters meer dan van bijvoorbeeld de neo-grotesk of geometrische sans serif fonts.

Een aantal humanistische sans-serif lettertypes (e.g. Lucida Sans, Verdana) worden standaard meegeleverd met bijna alle operating systemen. Ontwerpers van operating systemen kiezen vaak voor dit soort human­istische lettertypes in menu’s, filenamen en andere elementen van de user interface, vooral omdat deze (e.g. Lucida en Verdana) speciaal zijn ontwikkeld om goed leesbaar te zijn op beeldschermen of prints in een lage resolutie.

Lucida Sans en Verdana, twee vaak gebruikte humanistische lettertypes, zijn tevens zo ontworpen dat de individuele letters niet meer opvallen, maar het accent op de tekst zelf komt te liggen. Perfect voor body tekst. Ze zijn minder geschikt voor koppen, als kop zien ze er ‘los’ of ‘doelloos’ uit. Een wijd­verspreid humanistisch lettertype dat weer wèl geschikt is om koppen mee weer te geven is “Trebuchet MS”. Straks meer hierover. De ‘Lucida Sans en Verdana’ font stack is dus vooral bedoelt voor body tekst en voor user interface elementen zoals de navigatie, formulieren en buttons. De font stack kan er zo uitzien:

Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;

In tabel 3 vind je terug hoe vaak elk font geïnstalleerd staat op een computer.

Humanistisch voor koppen

Veel humanistische lettertypes zijn ook goed te gebruiken als kop. Helaas bestaat er maar één humanistisch lettertype met ‘display’ kwaliteiten (i.e. goed voor koppen) en die ook nog eens vaak geïnstalleerd is, namelijk Trebuchet MS. Als je ervoor kiest om een kop in een humanistisch letter­type weer te geven raad ik je aan om ook minder populaire, maar wel mooie, alternatieven in de font stack te zetten, bijvoorbeeld Gill Sans of Myriad. Je kunt deze bovenaan zetten maar dan ben je minder zeker van hoe de eind­gebruiker het zal zien. Test je website dus altijd met de alternatieven. Dan geef ik nog graag de tip om de neo-grotesk lettertype stack als laatste alternatief er gewoon achter te zetten.

Bedenk dat het maken van een font stack altijd een kwestie van voorkeur blijft (e.g. design versus consistentie). Een font stack met humanistische lettertypes voor kopteksten zou er zo uit kunnen zien:

"Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "Trebuchet MS", Arial, Helvetica, "Helvetica Neue", "Nimbus Sans L", FreeSans, sans-serif;

In tabel 4 vind je terug hoe vaak elke font geïnstalleerd staat op een computer.

Renaissance voor koppen

Garamond is het bekendste renaissance lettertype. Er bestaan enorm veel verschill­ende versies in verschillende kwaliteiten. Apple heeft lange tijd een eigen versie van Garamond gebruikt voor hun logo en promoties. Andere renaissance lettertypes zijn bijvoorbeeld Hoefler Text en Palatino. Deze twee zijn in de vorige eeuw ontworpen maar volgen duidelijk de renaissance stijl. Dit soort lettertypes zijn enorm fijn om van papier te lezen. Ze bestaan uit veel humanistische vormen die er voor zorgen dat je een regel plezierig kan volgen. Renaissance letter­types kan je goed herkennen aan de binnenste vormen, deze staan duidelijk gekanteld ten opzichte van de regel. Dit vanwege de hoek van de pen waarmee letters getekend zijn. Je ziet dit goed terug in bijvoorbeeld de letter ‘O’.

Echter is Garamond door de uitgebreide kalligrafie en gematigde x-hoogte niet een heel geschikt lettertype om van het beeldscherm te lezen, daarvoor is de resolutie van beeldschermen te laag. Prima geschikt dus voor grote koppen, maar niet voor body tekst. Als je mooie renaissance lettertypes wilt gebruiken voor alleen koppen raad ik je de volgende font stack aan.

"Hoefler Text", "Adobe Garamond Pro", "Adobe Garamond", "Garamond Premier Pro", "Garamond Premier", Garamond, Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Palladio, Georgia, serif;

Speel bij deze vooral met de volgorde naar eigen inzicht. In tabel 5 vind je terug hoe vaak elke font geïnstalleerd staat op een computer.

Renaissance voor koppen & body

Zoals ik al eerder aangaf zijn renaissance lettertypes lastig van het beeld­scherm te lezen en dus vooral geschikt voor grote koppen. Palatino, ont­worpen door Hermann Zapf in 1948, is echter een uitzondering. Alhoewel dit lettertype in eerste instantie niet voor computers is bedoeld, is het toch een zeer leesbaar ‘renaissance’ lettertype op beeldschermen. Veel kopieën van Palatino zijn in omloop, onder verschil­lende namen zoals Book Antiqua of Palladio. Deze alternatieve staan ook opgenomen in de font stack. De font stack kan er als volgt uitzien.

Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Palladio, Georgia, serif;

In tabel 6 vind je terug hoe vaak elke font geïnstalleerd staat op een computer.

Neoklassiek voor koppen

Neoklassieke letters lijken erg op die van uit renaissance maar zijn meer gestileerd. Ze zien er minder uit alsof ze met de hand zijn getekend, ook doordat binnenste vormen nu veelal rechter op de regel staan. De neoklassieke font stack ziet er als volgt uit.

Baskerville, "Baskerville Old Face", "Goudy Old Style", "Bell MT", "Nimbus Roman No9 L", "Times New Roman", Times, serif;

Nimbus Roman No9 L staat voor Times New Roman in de font stack omdat zodra Firefox op Ubuntu de naam Times New Roman in een font stack ziet automatisch voor een minder geschikt alternatief kiest en Nimbus Roman No9 L negeert.

In tabel 7 vind je terug hoe vaak elke font geïnstalleerd staat op een computer. Om een goed beeld te krijgen van deze lettertypes verwijs ik je naar webfonts-stack-neoklassiek.pdf.

Het lettertype Baskerville wordt steeds populairder. Toch zullen veel gebruikers Times (New Roman) zien met deze font stack. Het is daarom aan te raden om je website ook goed in Times (New Roman) te testen. In deze stack is Times (New Roman) een beter (terugval) alternatief dan bijvoorbeeld Georgia of Palatino, omdat de Times (New Roman) dichter bij de neoklassieke stijl staat. Times (New Roman) is tevens prima geschikt voor koppen (niet voor body tekst op het web).

Romantisch voor koppen

Het idee van humanistisch getekende letters is totaal niet meer van toepassing op romantische lettertypes. Ze zijn erg meetkundig vorm gegeven. Het contrast tussen dikke en smalle lijnen in letters is tevens erg groot. Doordat de dikke lijnen loodrecht op de regel staan en het verschil tussen lijnen zo groot is, leiden de letters de ogen van de lezer niet van links naar rechts maar vooral van boven naar beneden. Romantische letter­types zijn dus niet geschikt voor body tekst op zowel het scherm als op papier. Door hun persoonlijkheid is het wel uiterst geschikt als kop of titel. Een romantische font stack kan er als volgt uitzien:

"Bodoni MT", "Bodoni SvtyTwo OS ITC TT", "Bodoni 72 Oldstyle", Bodoni, Didot, "Modern No. 20", "Nimbus Roman No9 L", "Times New Roman", Times, serif;

In tabel 8 vind je terug hoe vaak elke font geïnstalleerd staat op een computer. Om een goed beeld te krijgen van deze lettertypes verwijs ik je naar webfonts-stack-romantisch.pdf.

Net als bij de neoklassieke font stack is het aan te raden om je website ook in (Times new Roman) te testen. In deze stack is Times New Roman een beter (terugval) alternatief dan bijvoorbeeld Georgia of Palatino, omdat de Times (New Roman) dichter bij de romantische stijl staat. Het contrast tussen lijnen is groter en de serifs zijn platter van Times (New Roman).

Schots roman voor body & koppen

De schotse roman lettertypes gebruiken het sterke van de klassieke lettertypes en de soberheid van de romantische lettertypes. Ze lijken veel op de realist serif lettertypes, zoals Clarendon, door de dikke serifs en de teardrop terminals. Schotse lettertypes zijn sober, geschikt voor body en koppen, en toch zeer elegant. Een mooi voorbeeld is Miller. Echter staat Miller nauwelijks op computers geïnstalleerd en is het dus niet geschikt voor in een font-stack. Een vergelijkbaar lettertype dat weer wel op veel computers staat geïnstalleerd is Georgia.

Matthem Carter ontwierp in 1993 (in opdracht van Microsoft) Georgia speciaal voor beeldschermen. Omdat er zo weinige serif lettertypes bestaan die zo goed op een beeldscherm te lezen zijn, is Georgia zeer populair. Op bijna alle Windows, Mac OS, iOS computers staat het geïnstalleerd. Op Linux is het font ook erg populair, maar iets minder. Daarom kan je beter ook het font ‘Bitstream Charter’ in de font stack te zetten. Bitstream Charter is weer erg populair op Linux systemen en lijkt op Georgia. Het is tevens net als Georgia ontworpen door Matthem Carter.

Georgia is voor zowel body als koppen geschikt. Voor koppen is Century Schoolbook echter een goed alternatief. Je zou ervoor kunnen kiezen om Century Schoolbook boven in de font stack te zetten voor alle headings en Georgia te gebruiken voor alle body teksten. Voor body kan een schotse roman font-stack er als volgt uitzien.

Georgia, "Bitstream Charter", "Century Schoolbook", "Century Schoolbook L", "Nimbus Roman No9 L", "Times New Roman", Times, serif;

In tabel 9 vind je terug hoe vaak elke font geïnstalleerd staat op een computer. Voor koppen kan een schotse roman font-stack er zo uitzien.

"Century Schoolbook", "Century Schoolbook L", Georgia, "Bitstream Charter", "Nimbus Roman No9 L", "Times New Roman", Times, serif;

Monospace voor code

De laatste font stack is voor monospace lettertypes. Alle letters van een monospace lettertype nemen precies dezelfde ruimte in, de ‘m’ is even breed als de ‘i’. Ze worden veelal gebruikt om code te presenteren omdat je makkelijker smalle en voor programmeren belangrijke karakters opmerkt (e.g. ‘!’). Tevens geeft het programmeurs een beter overzicht van de codestructuur. Een monospace font stack kan er als volgt uitzien:

"Andale Mono", "Lucida Console", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Monaco, Courier, "Courier New", "Nimbus Mono L", monospace;
In tabel 10 vind je terug hoe vaak elke font geïnstalleerd staat op een computer.