Terug naar Home

Typography

Roel Nieksens

Roel Nieskens ook bekend als @PixelAmbacht vertelt ons over de progressie van fonts en typografie, vroeger waren de mogelijkheden mager voor typografie doordat er weinig ruimte was voor karakters en textures (Hier lees je meer over bij Niels Leenheer), alles moest zo gecomprimeerd als dat het maar kon waardoor men naar oplossingen keek zoals sprites en simplicity above comfort/detail.

Als we kijken naar het gebruik van fonts over het web maken we nog vrij weinig gebruik van de gehele typeface. We denken niet snel aan speciale tekens zoals ½ of letters in bijvoorbeeld het pools, turks, duits etc. Dit kan zorgen voor een oncomfortabele ervaring als een gebruiker de site vertaald zou bekijken, omdat de vervangende fallback font een andere style heeft. Een goede font uitkiezen wordt daarom ook snel over het hoofd gezien, we kiezen slechts de "mooiste" font voor de juiste look & feel en gaan er van uit dat hij alle karakters ondersteunt.

Glyphs zijn speciale karakters die vaak een letter of teken op een alternatieve manier de letter weergeven, dit kan bijvoorbeeld gebruikt worden om verbaal de uitspraak te verduidelijken van een andere taal. Soms zijn het ook karakters die wat extra visuele elementen toevoegen, zoals een . of een pijltje ->.

Ligatures zijn karakters die letters samenvoegt op een elegante manier waardoor het wat makkelijker leest/oogt. De beroemdste voorbeelden hiervan zijn bijvoorbeeld fj, ffi, oo, st etc. Kerning is niet hetzelfde als ligatures, kerning is de afstand tussen de letters waardoor karakters zoals AV of HD.

Tegenwoordig kunnen we gebruik maken van OpenType, wat de TypeFont meerdere opties geeft voor styling. Dit vult veel van de features die ik net heb opgenoemt. Zo bevatten ze vaak "Fractions (½ ¾)", Stylistic sets (visuele elementen voor styling), Access All Alternates (custom glyph's van de font zelf), Tabular & oldstyle figures (cijfer hoogt, breedte & positionering)

Variabele font's is wat OpenType ook ondersteunt. Dit zijn font's met een axis die geheel door de typograaf bepaald kan worden. Momenteel is het nog vrij experimenteel en wordt het weinig gebruikt, maar je kan er veel mee. De font kan 'font-feature-settings' en 'font-variation-settings' bevatten wat de font dingen kan geven zoals typgrafie animatie, breedte, hoogte, zwaartekracht, maar ook creatieve opties zoals bijvoorbeeld slijm of een gesmolten effect.