Systeemfonts: roeien met de riemen

17 juni 2009 om 15:13

Inleiding

roeien_met_de_riemen_klein

In vorige artikelen heb ik een aantal technieken laten zien waarmee de designer en front end developer een bredere keus heeft in lettertypes op het web. Hoewel technieken als SIFr, webfonts en FLIR werken, hebben ze zo hun nadelen: ze vereisen plugins, worden nog niet (goed) ondersteund in elke browser van vandaag de dag, veroorzaken allerlei problemen op het gebied van usability en accessibility en kosten tijd om te implementeren. Bovendien lenen deze technieken zich meer voor kopteksten, niet de broodtekst op een pagina.

Websafe

We kunnen er altijd voor kiezen om te “roeien met de riemen die we hebben”: de fonts die op het systeem van de bezoeker geinstalleerd zijn. “Websafe” lijsten zoals die van Ampsoft, Code Style en aPaddedCell geven een goed overzicht van welke fonts dat kunnen zijn.

Vaak beperken designers en front-enders zich vandaag tot de standaard beschikbare fonts die meegeleverd worden bij marktleider Windows XP. Echter groeit langzaam maar zeker het marktaandeel van Vista en Windows 7 staat voor de deur. Ook het marktaandeel van Apple blijft groeien. Veel mensen maken gebruik van nieuwe software waarbij nieuwe fonts zijn gebundeld. Wanneer deze worden geïnstalleerd zijn deze fonts vrijwel altijd ook beschikbaar voor de internetbrowser. Kortom, de bezoekers van je website hebben mogelijk meer fonts op het systeem geïnstalleerd dan alleen de fonts uit de safe lists.

De doelgroep

De beslissing om zo’n font te gebruiken in een ontwerp hangt af van de doelgroep van de webapplicatie. Niet elke computergebruiker heeft de laatste versie van Windows of Microsoft Office. Mac gebruikers hebben standaard een aantal fonts geïnstalleerd die niet op Windows beschikbaar zijn, en vice versa. Bijvoorbeeld:

Uiteraard is het mogelijk dat de doelgroep toch niet het door jou gespecificeerde font heeft geïnstalleerd. Het kan bijvoorbeeld zo zijn dat hij of zij de webapplicatie bekijkt vanaf een voor de doelgroep anders geconfigureerde computer (in een bibliotheek, internetcafe of bij iemand anders thuis). Gelukkig biedt CSS voor dit soort situaties de mogelijkheid om alternatieve fonts te specificeren, zodat de content leesbaar en toegankelijk blijft.

Microsoft

In sommige gevallen weten we dat de doelgroep vrijwel uitsluitend een bepaald OS gebruikt. Denk bijvoorbeeld aan een kantoor waarbij elke werknemer werkt met hetzelfde door de systeembeheerder vastgetimmerd OS. Of de gemiddelde lifehacker die over het algemeen Mac-freak is. Er zijn manieren om er achter te komen welk OS het populairst is onder de doelgroep, zoals het het raadplegen van statistieken van de bestaande of vergelijkbare sites.

Vrijwel altijd zullen die cijfers je hetzelfde vertellen: Windows, Windows en nog eens Windows. En of we dat nu willen of niet, Microsoft heeft altijd een grote vinger in de pap gehad als het om lettertypen op het web gaat, en vandaag de dag is dat nog steeds zo.

Windows Vista en Windows 7

Hoewel Vista niet het meest populaire OS is op het moment groeit het aantal gebruikers ervan sinds eind 2006 langzaam, maar wel zeker. Bij dit OS zijn een aantal interessante fonts geleverd, en het lijkt aannemelijk dat we deze terug zullen vinden in Windows 7, wanneer het OS in october dit jaar op de markt komt.

Gek genoeg vinden we deze nieuwe fonts nog steeds maar zelden in de stylesheets terug. Dat is jammer, want de fonts zijn beter leesbaar en esthetisch gezien mooie dan de fonts die ze in feite vervangen. Christian Montoya deed in 2007 al een oproep aan front –enders om de fonts te specificeren en suggereerde daarbij een aantal font-declaraties.

Wanneer je als designer of ontwikkelaar niet onder Vista werkt of geen nieuwe versie van Office hebt geinstalleerd kun je de fonts krijgen door de Powerpoint Viewer of de Office Compatibility Pack te downloaden.

Alle XP fonts, waaronder dus ook de fonts die we als “safe” beschouwen, hebben hun weg gevonden naar deze nieuwe versie van Windows. Hier volgt een lijst van de nieuwkomers (gezet in mijn favoriete pangram):

Calibri

pangram_calibri

Het nieuwe standaard font van Office 2007. Ontworpen door onze “eigen” Lucas de Groot, deze vriendelijk ogende schreefloze kunnen we beschouwen als de nieuwe Arial.

Cambria

pangram_cambria

Een mooie schreefletter, een alternatief voor Times New Roman die het ook goed doet als kop.

Candara

pangram_candara

Dunne lijnen, mooi rond. Het alternatief voor Trebuchet.

Consolas

pangram_consolas

Deze eveneens door Lucas de Groot ontworpen monospace is een mooi alternatief voor Courier.

Constantia

pangram_constantia

Een schreefletter met een klassieke uitstraling, ontworpen voor zowel scherm als papier.

Corbel

pangram_corbel

Een mooie, licht geometrische letter, met een heel typische u. Het alternatief voor Verdana.

Segoe UI

pangram_segoe_ui

Segoe UI is een subset van het lettertype dat Microsoft tegenwoordig gebruikt voor Vista en andere uitingen. Een pikant detail is dat Segoe verdacht veel lijkt op de klassieker Frutiger. Helaas is dit font niet standaard beschikbaar onder OS X na installeren van Office for Mac.

Over de auteur

Carsten Altena
Carsten Altena is een grafisch ontwerper met een affiniteit voor clean, lean, user-centered en toegankelijk webdesign. Naast grafisch ontwerp heeft hij ook veel ervaring als front-end developer, en was hij een van de eersten in Nederland die webstandaarden zoals XHTML en CSS omarmden. http://www.carstenaltena.nl/creeert/
  • Rik

    Interessant artikel, het blijft echter wel zo dat deze fonts specifiek ontworpen zijn voor systemen waar ClearType aan staat. Zodra ClearType uitgeschakeld is wordt het font een stuk minder leesbaar.

  • Pim Derks

    Gewoon Cufon gebruiken voor text-replacement indien je toch “unieke” fonts wilt gebruiken, werkt zonder plugins en ondersteunt door alle grote browsers (zelfs in IE6 werkt het goed en snel). De uitvinding van het jaar wat mij betreft.

  • http://www.carstenaltena.nl Carsten Altena

    Thanks, Rik. Gelukkig staat cleartype standaard aan bij Vista, en als ik me niet vergis ook in IE7. IE6 is een ander verhaal… maar laten we hopen dat die snel uitsterft!

    Pim, Cufon is een mooie techniek maar heeft nog steeds haar nadelen. Zie http://tinyurl.com/np8oce

  • http://www.carstenaltena.nl Carsten Altena

    En dan hebben we het nog niet over de copyright issues bij Cufon. Bovendien gaat dit artikel over wat je kunt doen als je juist, om wat voor reden ook, geen plugins etcetera wil gebruiken.

  • Pim Derks

    Carsten, heb je helemaal gelijk in – Cufon heeft ook nog zijn zwakke punten. Naar mijn idee is het echter een veel mooiere (en vooral handiger/sneller te implementeren) oplossing dan SIFR of werken met server-side afbeeldingen genereren. En wat betreft copyright issues – op websites als Smashing Magazine staan regelmatige gratis open source fonts e.d.

    Maar je hebt gelijk, voor broodtekst is het absoluut geen oplossing :)

  • http://www.carstenaltena.nl Carsten Altena

    True, Pim! Idd, er zijn hele mooie rechtenvrije fonts te krijgen.

    Tuurlijk zie ik een tehcniek als Cufon graag verbeteren, toch hoop ik dat straks de gestandaardiseerde techniek van Webfonts oplossingen als Cufon, SIFr en FLIR overbodig maakt.

  • Pim Derks

    Oh absoluut, zodra dingen als @font-face werken in alle grote browsers zal het hemels zijn om geen canvas/flash/images meer nodig te hebben om een ander font te gebruiken dan de standaardfonts. Maar ik gok zo dat dat nog wel enige jaren zal duren jammer genoeg…

  • http://www.carstenaltena.nl Carsten Altena

    Yep, da’s helaas met bijna elke technologie op het web…

  • http://www.twitter.com/Jeromche Jeroen gitaarrrrrrmuziek

    Bedankt voor het artikel Carsten, moet ik maar eens gaan gebruiken in m’n projektjes.

    Ik gebruik trouwens al een poosje Consolas op 11pt om in the programmeren. Hardstikke fijn. Wie nou nog Courier New gebruikt…. oh oh oh.

  • http://www.twitter.com/Jeromche Jeroen gitaarrrrrrmuziek

    Aaah zit een tweede pagina bij het artikel. Never mind.

  • Rik

    “Thanks, Rik. Gelukkig staat cleartype standaard aan bij Vista, en als ik me niet vergis ook in IE7. IE6 is een ander verhaal… maar laten we hopen dat die snel uitsterft!”

    Het klopt dat dit in IE7 standaard aan staat (maar het is net als javascript uit te schakelen).

    Ik heb even een kort onderzoekje (XP IE6) gedaan:

    Het blijkt dat de bovenstaande fonts een fallback variant (simuleert cleartype) hebben die gebruikt wordt als ClearType uit staat. Deze variant is echter nog steeds niet erg leesbaar, pas vanaf 20px en groter begint het ergens op te lijken. Voor mensen met dyslexie is deze variant denk ik eerder niet leesbaar dan slecht leesbaar.

    Dus tot de tijd dat iedereen cleartype aan heeft staan (of dat je dit kunt detecteren met javascript) EN Internet Explorer 6 niet meer ondersteund hoeft te worden is dit dus een techniek die je niet zomaar toe kunt toepassen. Het lijkt me niet gewenst dat bezoekers van je website je content niet goed kunnen lezen aangezien ze een van bovenstaande fonts geinstalleerd hebben.

  • http://www.carstenaltena.nl Carsten Altena

    Dank je Rik! Dit is inderdaad iets om in gedachten te houden als je doelgroep voornamelijk bestaat uit XP/IE6 gebruikers.

    Gelukkig zijn ze een "dying breed" als we cijfers moeten geloven: http://tinyurl.com/5vgqfa http://tinyurl.com/lryabk en zal de komst van IE8 en Windows 7 het gebruik van IE6 nog verder verminderen. De diverse anti IE6 campagnes en "friendly IE6 warning-pages" zullen daar de nodige handjes bij helpen.

  • Martin

    Dying breed of niet, feit blijft dat IE6, in welk geval ook, voorlopig een behoorlijk marktaandeel blijft behouden. Het is zeker aan te moedigen om IE6 minder te ondersteunen, maar alleen wanneer de toegankelijkheid daar niet onder lijdt. Vermindering van leesbaarheid is gelijk aan het verlagen van toegankelijkheid.

    Bovendien, vaak wordt er zoveel energie gestoken in het ondersteunen van browsers met een kleiner marktaandeel die wel werken volgens standaarden etc, want dat is belangrijk, je mag ze niet benadelen. Maar wanneer het neerkomt op het benadelen van gebruikers met IE6 heeft niemand er problemen mee? Maar wie zegt dat die IE6 gebruiker zelf voor de browser heeft gekozen?

  • http://www.carstenaltena.nl Carsten Altena

    Zoals gezegd in het artikel: het hangt er maar van af waar je doelgroep uit bestaat. Sommige gebruikers hebben inderdaad geen keuze (vastgetimmerde systemen op de werkvloer bijvoorbeeld). En wie houd je bovendien tegen om IE6 een andere stylesheet te voeren, met "safe" fonts?

    Er zijn uitzonderingen, maar in de meeste gevallen maak ik me niet meer zo druk over IE6. Een browser die al lang zijn houdbaarheidsdatum is gepasseerd. Toen Webstandards.org 6 jaar geleden de "Browser Upgrade Campaign" startte had ik als front end developer in de eerste instantie ook wat moeite met het laten zitten van Netscape 4.7 gebruikers, maar kwam ik tot inzicht dat juist dit soort acties nodig zijn voor de ontwikkeling van het web. BUC werd een succes.

    Een soortgelijke trend zien we onstaan in de vele "IE6 warnings" en anti IE6 campagnes. Deze acties zullen bijdragen aan het uitbannen van IE6.

    Men moet dus zelf weten of we IE6 gebruikers onwetend laten, of dat we ze bewust maken van het feit dat er veiligere, gebruikersvriendelijkere en snellere alternatieven zijn voor IE6 en dat het gebruik van IE6 de ontwikkeling van het web in de weg staat. Ik heb in ieder geval al een besluit gemaakt.

  • http://www.mauvage.nl Sieger Miedema

    Nice Carsten,

    Erg goed artikel, ik ben de laatste tijd veel op zoek naar andere opties om goede lettertypes in m'n webdesigns te implementeren! SIFr is een leuke optie maar inderdaad alleen goed te gebruiken voor headers (knoppen wil ook nog wel), maar ik merk toch dat het niet altijd helemaal goed gaat. Bedankt voor je research en duidelijke verhaal! Ik ga er zeker gebruik van maken!

    B.t.w. je krijgt deze week m'n stuk! :)

    Cheers mate

    • http://www.carstenaltena.nl Carsten Altena

      Ha Sieger! Leuk dat je mijn artikel hebt gelezen. Check eens mijn andere artikelen over Lettertypes op het web (zie gerelateerde artikelen). Check ook eens Typekit.com.