Lettertypes op het web, deel 1
Pagina’s: 1 2
Inleiding
Hoewel designers bij het ontwerpen van een brochure, advertentie of ander drukwerk volledige vrijheid hebben in de keuze en plaatsing van hun lettertypes, is dat minder vanzelfsprekend bij het ontwerpen van een HTML website. Veel van de typografische effecten zijn in de geschiedenis van het web gesimuleerd met behulp van afbeeldingen van tekst, die weliswaar voor het menselijke oog er uit ziet als lettervormen, maar dat voor de computer eigenlijk niet zijn. Hoe dan ook, een bitmap afbeelding van de letter “a” is voor de computer niet meer dan een verzameling pixels.
In een volmaakte wereld…
Een dergelijke oplossing introduceert dus nieuwe problemen op het gebied van toegankelijkheid, bruikbaarheid en manipuleerbaarheid van de tekst. In een volmaakte wereld zou elk typografisch element op een webpagina zich gedragen als systeemtekst, in de gestalte van een voor het systeem toegankelijk font: selecteerbaar, manipuleerbaar, schaalbaar. Echter, de standaard technologie op het web belemmert dat enigzins.
Beperkingen van systeemtekst
Enkele voorbeelden van beperkingen met betrekking tot het vormgeven van systeemtekst in moderne browsers zijn:
- Qua keuze van lettertypes zijn we beperkt tot een lijst van fonts die min of meer algemeen beschikbaar op het systeem van de bezoeker.
- Het roteren van tekst of het laten lopen van tekst op een gekromd pad is niet mogelijk (zoals dat mogelijk is in bijvoorbeeld Illustrator).
- Het door de browser intelligent af laten breken van woorden is niet mogelijk.
En zo zijn er wel meer beperkingen te bedenken. Gelukkig kunnen we dankzij de vindingrijkheid van ontwikkelaars het standaard gedrag van moderne browsers uitbreiden. De focus van dit artikel is het onderzoeken van een oplossing voor het eerste punt in bovenstaande lijst, namelijk het doorbreken van de beperking van het aantal lettertypes dat we tot onze beschikking hebben.
De goede oude dagen
Wat typografie op een HTML pagina betreft hadden designers tot nog niet zo heel lang geleden de interessante uitdaging om met heel weinig toch heel veel te doen. Met een handjevol “Core fonts for the web” (Arial, Courier, Georgia etcetera) die Microsoft in 1996 beschikbaar stelde voor Windows en Mac OS X gebruikers probeerden zij copy smaakvol en leesbaar vorm te geven.
Als er dan een klant was die perse een “exotische” lettertype wilde zien op zijn of haar website, exporteerden de designers bitmaps van de blokken tekst, die gezet waren in dat gewenste lettertype. Soms alleen van de koppen, in andere gevallen complete pagina’s. De webpagina bevatte dus geen systeemtekst, maar een <img />-element.
FIR en andere CSS technieken
In latere tijden werden blokken systeemtekst verborgen en vervangen door achtergrondplaatjes met behulp van een van de vele CSS image replacement technieken, waardoor de HTML broncode semantisch gezien correcter werd. Niettemin leverden deze technieken op het gebied van toegankelijkheid en bruikbaarheid een aantal praktische problemen op.
De problemen van bitmap tekst
De designer heeft typografische vrijheid wanneer de uiteindelijk te bouwen webpagina gedeeltelijk of volledig zou bestaan uit bitmaps. Vroeger gebeurde dat vaker dan men zou denken. Vandaag de dag zien we het vrijwel niet meer gebeuren, omdat we ons bewust zijn van de problemen van deze manier van werken; op het gebied van onderhoud, accessibility, usability en performance.
- Wijzigingen. Bij elke tekstuele wijziging moet de designer ingeschakeld worden. Elke wijziging in tekst betekent een wijziging in het originele grafisch ontwerp in bijvoorbeeld Photoshop.
- Ontoegankelijkheid. Tekst in een bitmap kan niet zomaar gelezen worden door screenreaders, zoekmachines en dergelijke. OK, het alt-attribuut kan dit probleem enigszins oplossen, al zal niet elke content manager zo gedisciplineerd zijn om dat te doen. Binnen een alt-tekst is het bovendien niet mogelijk om “inline” tekst semantisch te verrijken, zoals bijvoorbeeld woorden benadrukken of woorden hyperlinken.
- Selecteerbaarheid. Tekst in een bitmap kan niet zomaar geselecteerd, gecopieerd en geplakt worden, bijvoorbeeld in een word-document of emailtje. Je kopieert de pixels, niet de tekst. Ook hier moet wel gezegd worden: als de contentmanager de discipline heeft om een alt tekst toe te voegen, word de alt-tekst vaak mee gekopieerd.
- Aanpasbaarheid. Tekst in een bitmap kan in een aantal browsers niet door de gebruiker geschaald worden, wat problemen opleverd voor mensen met een visuele handicap. Sommige gebruikers kiezen liever zelf hun favoriete font; helaas werkt dit niet meer bij gebruik van bitmapped tekst.
- Bandbreedte. In de tijd dat breedband nog niet eens bestond voor de gemiddelde consument was het natuurlijk niet verstandig om alle copy als bitmaps op de webpagina te plaatsen. Een tekstbestand in textformaat is vanzelfsprekend kleiner in kB’s dan een afbeelding van dat tekstbestand opgebouwd uit pixels. En ja, tegenwoordig is dit, sinds de komst van breedband internet, niet meer zo’n grote issue. Al is het vanuit economisch oogpunt altijd verstandig om serveractiviteit en bandbreedte zo efficient mogelijk te houden.
Pagina’s: 1 2
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.
| Website | http://www.carstenaltena.nl/creeert/ |
| @carstenaltena |
(Nog geen stemmen uitgebracht)
Loading ...
Geplaatst op 
Tags: 
