Het boek van de maand september is het Handboek HTML5 & CSS3, waarvan net de 4e bijgewerkte editie is verschenen. Deze maand publiceren we op dit blog een aantal voorproefjes uit deze 4e editie van dit Handboek HTML5 en CSS3.
Dit voorproefje behandelt de keuze tussen de systeemfonts – de fonts op je computer – en online fonts. Een interview met Peter Doolaard vind je HIER. Twee andere voorproefjes uit het boek vind je HIER en HIER.(H.F.)

Lettertype: systeem- of online fonts?

Om de open deur nog maar eens een trap na te geven: tekst is nog steeds voor het gros van de websites het belangrijkste ingrediënt – ondanks veel (aangenaam) visueel geweld. Dat die tekst de lezer natuurlijk boeit en in zijn informatiebehoefte voorziet, is net zo’n open deur. Hoe die tekst eruitziet krijgt echter vaak minder aandacht, terwijl een goed gekozen lettertype met een ‘juiste’ weergave voor een belangrijk deel de uitstraling van de pagina bepaalt. Nu is ‘juist’ een nogal vaag begrip waarvan de betekenis van geval tot geval verschilt, maar waarschijnlijk begint u zelf ook niet aan een pagina met priegelige tekst of een woest fantasielettertype. Hoe dan ook, we laten de keus van de lettertypen op uw site graag aan uw goede smaak over. Hier gaat het om de vraag waar u lettertypen vandaan haalt en hoe u ze op uw site krijgt.

Jarenlang is gebruikgemaakt van de lettertypen die tegelijk met het besturingssysteem op de computer van de ontwerper waren geïnstalleerd. Niet omdat dit de beste optie was; het was de enige optie. Het had namelijk weinig zin om zelf een ander lettertype te installeren en voor de website te gebruiken als niet zeker was de bezoeker hetzelfde lettertype had geïnstalleerd. Tegenwoordig bevatten besturingssystemen meer lettertypen en is de keus wat groter, maar het blijft behelpen.

Web fonts

Er is echter een nieuwe bron van lettertypen beschikbaar gekomen: internet. Hoewel, nieuw. Het principe om gebruik te kunnen maken van gedownloade lettertypen bestaat al lang, maar was in de praktijk nutteloos omdat niet alle belangrijke browsers ermee overweg konden en doordat de manier waarop het werkte per browser verschilde. In de nieuwe generatie webbrowsers is het wel op een gestandaardiseerde manier ingebouwd en bruikbaar. Dat is goed nieuws, want nu kunt u zich onderscheiden met goed gekozen lettertypen die niet al op elke website te zien zijn. Ook een ander probleem dat het gebruik van gedownloade lettertypen afremde, copyright en betaling voor het gebruik ervan, is inmiddels opgelost.

Voor weblettertypen zijn verschillende bestandsformaten beschikbaar, maar voor moderne browsers hebt u er maar één nodig: WOFF of WOFF2. WOFF staat voor Web Open Font Format en de specificatie is sinds 2012 een W3C-aanbeveling (WOFF File Format 1.0). WOFF2 (WOFF File Format 2.0, zie www.w3.org/TR/WOFF2/) is een doorontwikkeling van WOFF met een betere compressie. WOFF is niet een lettertypeformaat zoals TrueType of OpenType (TTF en OTF). Het is een container voor lettertypen met een opbouw zoals TTF en OTF, maar de informatie wordt gecomprimeerd en aangevuld met metagegevens over bijvoorbeeld toegestaan gebruik. Vooral dat comprimeren is belangrijk om de hoeveelheid te transporteren data en daarmee de download zo klein mogelijk te houden. (Van WOFF2 wordt gezegd dat het 30 tot soms 50% betere compressie geeft dan WOFF.) Na het downloaden pakt de browser het lettertype uit om het te kunnen gebruiken in de website. Het lettertype wordt niet geïnstalleerd op het apparaat van de bezoeker. Zo wordt voorkomen dat commerciële lettertypen zonder betaling worden doorgegeven.

De volgende paragraaf gaat over de CSS-regel waarmee lettertypen worden gedownload en voorbereid op gebruik. U hebt die informatie niet nodig wanneer u de standaard systeemlettertypen gebruikt die op elk apparaat beschikbaar zijn. Het gebruik van weblettertypen is echter zo algemeen, dat we adviseren om deze informatie niet over te slaan.

Er zijn veel leveranciers van web fonts op internet te vinden. Twee aanbieders noemen we met name:

• Google Fonts, te vinden op www.google.com/fonts/. Hier kunt u gratis gebruikmaken van lettertypen. U krijgt ze niet in bezit, maar verwijst ernaar vanuit uw webpagina. In feite hebt u het lettertype te leen.
• Adobe Typekit, te vinden op typekit.com/. Een groot aanbod van lettertypen, waarvan een deel gratis gebruikt kan worden. De volledige bibliotheek is beschikbaar als onderdeel van de abonnementsdienst Adobe Creative Cloud. Hier huurt u lettertypen voor de duur van het abonnement.

Er is een website die bij het boek hoort: handboek-html-css.nl, met code uit het boek, verbeteringen en nieuws en tips. Meer lezen over webdesign op dit blog? HIER en HIER vind je een tweetal voorproefjes uit het boek Web Development Library Javascript 2e editie.

Hans Frederiks

Hans Frederiks is journalist en fotograaf en hoofdredacteur van blog.computercreatief.nl. Hij schrijft over ontwikkelingen op het gebied van computers, van vormgeving op het web en print, en fotografeert al zijn hele leven lang. Zijn specialisaties zijn panorama’s, landschappen en podiumfotografie. Zijn blog vind je HIER, zijn boeken vind je HIER.