Hoi bhofkens,
Alles wat ik verwacht had van een site die BIGcreations heet, maar niet dat het zo'n loeiklein letterformaat zou zijn! :d
font-size 11px op ware grootte...
Terwijl de standaard lettergrootte van deze letter zo groot is:
default-formaat van de Times
Geen wonder dat bij 11px hoogte van een letter (inclusief hoofdletter-hoogte en inclusief staartjes-letters als de p en de g) de browsers dat niet goed kunnen renderen: er zijn geen pixels genoeg om verfijning toe te passen!
Met uitvergroten zie je wat er aan de hand is:
font-size 11px in Firefox, 5x vergroot
font-size 11px in Internet Explorer, 5x vergroot
Bij Firefox (e.a. browsers) wordt het noodgedwongen kartelig, want letters worden in html altijd puur éénkleurig afgebeeld. Html-letters hebben namelijk uit zichzelf geen anti-alias systeem.
Maar de background hoeft niet uit 1 kleur te bestaan, die kan verlooptinten hebben of uit een afbeelding bestaan.
Voor een browser zou dat anders betekenen dat om één letter te renderen, er een anti-alias overgang zou moeten worden gemaakt tussen alle combinaties van de 16 miljoen mogelijke letterkleuren en de 16 miljoen mogelijke background-kleuren. Als ik het wel heb, is dat 16 miljoen kwadraat.
Dat vergt nogal wat rekenkracht, en bij elke volgende letter moet hetzelfde nog eens gaan gebeuren.
- Voor een tekenprogramma is dat geen probleem, voor een browser wel (want die heeft naast het tekenen van de letters ook veel andere dingen te doen).
Dezelfde tekstregel met PaintShopPro gemaakt, incl. anti-alias
Idem, 5x vergroot (bij deze kleinte heeft ook PSP er moeite mee!)
heeft een zelfbedacht systeem om toch iets van anti-aliassing door te voeren, de
"Clear Type" rendering, waarbij de samenstellende kleuren van een pixel iets ten opzichte van elkaar worden verschoven, met meer of minder intensiteit. Van een afstand bekeken levert dat wat minder schrale en vloeiender letters op.
Verder hebben
Pads en Pods en dergelijke vermoedelijk een eigen rendering-systeem, waarbij de lettergrootte vertaald wordt in iets wat op het betreffende scherm goed leesbaar is.
Suggesties 1:
- Ik zou zeker het letterformaat vergroten, dat komt zowel de gebruiksvriendelijkheid als de verschijningsvorm ten goede.
- Daarbij meteen ook de vaste px maateenheid vervangen door de relatieve em maateenheid, zodat bezoekers op Internet Explorer desgewenst ook naar behoefte de letters kunnen vergroten zonder meteen op de hele site tegelijk te hoeven inzoomen (met L/R-scrollbar tot gevolg).
=====
Verder wordt als algemeen lettertype op de site de "Adobe Garamond Pro" gebruikt, die als ingesloten lettertype meegezonden wordt met de pagina. Om op alle browsers te kunnen werken, worden daarvoor verschillende formats gebruikt: een
.eot, een
.woff en een
.ttf.
Vaak zijn die ingesloten lettertypes wat minder van kwaliteit, zeker bij kleine font-sizes. En er zijn verschillen tussen browsers in de rendering, dus van het resultaat kan je niet 100% op aan.
Suggesties 2:
- Als het even mogelijk is, zou ik voor het basislettertype een op de meeste computers aanwezig type gebruiken. Onder Windows staat de gewone Garamont bij 85% van de gebruikers op de kast, op de Mac's bij 61%, onder Linux echter maar bij 5%. - Maar als "tweede keus" zijn er veel andere types die gebruikelijk zijn, en niet zo heel veel van de "Adobe Garamond Pro" verschillen.
- Overzichtjes van gebruikelijke fonts onder Windows, Mac en Linux bv. hier en hier.
- Mocht het om redenen van herkenbaarheid (bv. aansluiting bij de huisstijl op papier) toch wenselijk zijn een "eigen lettertype" op de site te gebruiken, dan zou ik dat alleen doen voor de meeste geprononceerde items, zoals de koppen op de pagina's. Die kan je dan ge-anti-aliasd via een tekenprogramma opnemen als images, zodat het er altijd hetzelfde en altijd mooi uit ziet. Voor de toegankelijkheid en voor Google kan je er een hidden text aan toevoegen.
Met vriendelijke groet,
CSShunter
