Systeemfonts: roeien met de riemen

roeien_met_de_riemen_klein_uitsnede

Windows XP & Office 2007

Gelukkig hebben XP-gebruikers die Office 2007 hebben geinstalleerd ook de beschikking over de nieuwe “Vista”-fonts, naast de gebruikelijke fonts Microsoft met Office meelevert. Zoals je kunt zien is dat ook aanzienlijke lijst.

Mac OS X & Office For Mac

Waar Windows XP er maar karig van af komt qua keuze in lettertypen worden de Mac-fanboys/girls verwend met een flinke lijst van fonts. Te veel om hier op te noemen; raadpleeg de lijst van Mac OS X fonts zelf om een idee te krijgen.

Het is natuurlijk goed mogelijk dat de Mac-gebruiker ook Office For Mac heeft geinstalleerd. Dat zou goed nieuws zijn, aangezien alle nieuwe Vista-fonts (met uitzondering van Segoe UI) dan ook geinstalleerd zijn.

Wanneer specificeer je een Mac OS X font? Zoals gezegd, bestaat je publiek vooral uit Mac gebruikers, dan is het een no-brainer. Vergeet echter niet een alternatief te specificeren voor de Windows gebruikers.

Specificeren van een alternatief in CSS

Het specificeren van een font dat minder voorhanden is vraagt natuurlijk wel om het kiezen van een alternatief uit de safe list. Waar moeten we op letten?

  • X-hoogte: vergelijk maar eens de x-hoogte van Verdana met die van bijvoorbeeld Franklin Gothic Medium, beiden met hetzelfde corps. Die laatste oogt veel kleiner.
  • Breedte: Verdana is breder dan Franklin Gothic Medium. Dit kan invloed hebben op een ontwerp waarbij het belangrijk is dat hoogte en breedte van elementen fixed is.
  • Gewicht: Verdana oogt zwaarder dan een Franklin Gothic Medium met hetzelfde corps.
  • Volgorde: Begin met “super exotisch”, gevolgd door Mac, Office, Safe list en eindig met generiek.

Conclusie

Er is meer tussen hemel en aarde dan alleen maar Arial, Times New Roman en Trebuchet. Dankzij cascading stylesheets kunnen we nu al fonts specificeren die welliswaar nog niet zo algemeen voorhanden zijn bij gebruikers, maar dat wel zullen worden op het moment dat gebruikers upgraden naar bijvoorbeeld Windows 7 of de nieuwste versie van Office. Designers kunnen nu al beginnen met het verwerken van deze lettertypen in hun ontwerpen. Typografisch gezien kan broodtekst op het web er vandaag de dag veel gevarieerder uit zien, maar het is aan designers en front end developers om deze lettertypen te durven gebruiken!

Verder

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.

Websitehttp://www.carstenaltena.nl/creeert/
1 Ster2 Sterren3 Sterren4 Sterren5 Sterren (Nog geen stemmen uitgebracht)
Loading ... Loading ...

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Reacties tot nu toe

1

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.

Rik 18 juni 2009 om 08:59
2

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.

Pim Derks 18 juni 2009 om 09:20
3

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

Carsten Altena 18 juni 2009 om 10:34
4

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.

Carsten Altena 18 juni 2009 om 10:35
5

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 :)

Pim Derks 18 juni 2009 om 12:16
6

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.

Carsten Altena 18 juni 2009 om 12:27
7

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…

Pim Derks 18 juni 2009 om 13:53
8

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

Carsten Altena 18 juni 2009 om 14:16
9

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.

Jeroen gitaarrrrrrmuziek 19 juni 2009 om 02:05
10

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

Jeroen gitaarrrrrrmuziek 19 juni 2009 om 02:07
11

“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.

Rik 19 juni 2009 om 09:47
12

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.

Carsten Altena 22 juni 2009 om 08:16
13

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?

Martin 22 juni 2009 om 11:00
14

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.

Carsten Altena 24 juni 2009 om 23:10
15

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

Sieger Miedema 18 augustus 2009 om 07:34
16

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.

Carsten Altena 10 september 2009 om 08:08

Reactie achterlaten