Webwevers hebben presentatiemogelijkheden waar de grondleggers van de typografie en de grafische vormgevers van vóór de internetexplosie niet eens over droomden. Toch blijkt bij elke surfbeurt dat een erg oude, maar beproefde regelgeving heeft stand gehouden, waarbij de inhoud, net zoals bij drukwerk, duidelijk, overzichtelijk, evenwichtig en aantrekkelijk is. In tegenstelling tot drukwerk komt daar nog de toegankelijkheid bij, maar deze uitdaging is meer van technische aard.

Typografie en vormgeving
op het net

Dit artikel is vooral bedoeld voor beginnende webwevers die veel tekst aanbieden, en die op de eerste plaats informatie willen overbrengen. Niet alle websites beogen dit, en gelukkig maar, want het Internet is het terrein van de vrijheid, en dat moet zo blijven. Ik ben wel overtuigd dat een beginnende webmaker met eenvoudige middelen, maar met een basiskennis van volgende regelgeving even sterk kan overkomen als de ervaren webmaster die zich in flitsende trucs heeft bekwaamd.

Lettersoorten

Broodtekst is het blok met een grote tekstmassa, zoals de tekst die je nu leest. Teksten als titel, kop, slogan of aandachtstrekker, vallen buiten deze categorie. Er bestaan duizenden lettertypen, maar het aantal dat voor broodtekst op het web wordt gebruikt, is beperkt gebleven. Spelbrekers zijn de pc en de browser. Ontbreekt op het besturingssysteem van de bezoeker het gekozen lettertype, dan krijgt hij een ander te zien. Inmiddels zijn voor dit probleem oplossingen in de maak, zoals het inbedden van lettertypen, maar dit wordt uitzonderlijk gebruikt. Veel webmakers nemen graag genoegen met enkele goede basislettertypen die hun deugdzaamheid hebben bewezen.

Lettertekens worden op verschillende manieren ingedeeld. Specialisten kwamen tot ingewikkelde schema's en benamingen zoals vroeg-classicistisch en egyptiennes. Nationale schriftsoorten zoals de afgeronde Ierse unciaal worden nog zelden gebruikt. Laat ik het simpel houden. Belangrijke letterstammen zijn de klassieke letters (waaronder de Times en de Garamond), de fantasieletters (waaronder men ook de schriftletters onderbrengt) en de gelijkledigen. Gelijkledigen hebben geen contrastrijke dun-dikverhoudingen. Uit deze groep komen typen voort die het openbare beeld van de twintigste eeuw hebben bepaald. Denk maar aan zaken als de richtingaanwijzers, verkeersborden, straatnaamborden, huisnummers en deurplaatjes.

Schreef of schreefloos

Bij een andere indeling wordt onderscheid gemaakt tussen letters met schreven en letters zonder schreven, zonder korte dwarslijntjes of kleine uitsteeksels. Klassieke letters en letters die daarop gebaseerd zijn (zoals de bekende Times New Roman), hebben schreven. Schreefletters kunnen al of niet gelijkledig zijn. Voor drukwerk is het voordeel van de schreefletter aangetoond. Hij zorgt voor een constante lijn en biedt het oog een houvast. Op het web gaat dit voordeel, zeker bij kleine corpsen verloren, omdat de fijne gedeelten door de beeldschermpixels niet scherp genoeg worden weergegeven.

Van alle stammen hebben enkele lettertypen in de webwereld de bovenhand gekregen. Veel gebruikte zijn Times New Roman (op klassiek gebaseerd en met schreef) en Univers, met zijn moderne variant de Arial (gelijkledig, zonder schreef). De Times werd in 1932 door Stanley Morison voor het dagblad The London Times getekend. Zijn elektronische versie is de standaard voor Microsoft. De Univers werd in 1957 door Adrian Frutiger ontworpen.

Sinds 1994 is ook de Verdana verschenen, een creatie van Matthew Carter en Tom Rickner. Dit lettertype werd na een recente wetenschappelijke studie in de VS uitgeroepen tot de meest geliefde webletter. De letter oogt op het eerste gezicht als een gelijkledige, schreefloze letter. De grootste verdienste is dat de letterogen vrij groot en breed zijn. De extra ruimte tussen de letters onderling maakt hem erg geschikt voor websites.

Schreeuwen en fluisteren

Letters zeggen volgens sommigen iets over iemands persoonlijkheid. Ze kunnen kracht en mannelijkheid suggereren, of een gevoel van subtiliteit en vrouwelijkheid geven. De niet-proportionele letter zou een ouderwetse indruk maken, omdat hij refereert aan bibliotheken en naakte gegevensinvoer. Als men zichzelf ziet als een snelle, vrouwelijke yup, zou men zachte en welgevormde letters gebruiken. Helvetica en Arial staan voor veiligheid en anonimiteit, terwijl uit het gebruik van een Comic Sans durf en vriendelijkheid zouden blijken.

Typografie leent zich tot het oproepen van gevarieerde emoties. Vooral in titels, koppen en logo's kunnen letters elegantie oproepen, of intrigerend nieuwsgierig maken. Ze kunnen schreeuwen en fluisteren, rust en onrust brengen. Ook in websites over gewichtsproblemen en zwaarlijvigheid doet een mager of smal, en delicaat lettertype wonderen. In webpagina's over kunst, antiek en geschiedenis wordt nog altijd naar een klassieke 'boekletter' gegrepen. Gelijkledigen zijn aangewezen voor de zakenwereld en de techniek, terwijl fantasieletters het uitstekend blijven doen op sites voor de jeugd.

Mengen

Over het mengen van lettertypen op broodtekstniveau zijn de vuistregels duidelijk. Op regelniveau, dus horizontaal, niet doen, tenzij je er een bijzondere reden voor hebt. Meng met mate verticaal. Wie in de tijd van mijn opleiding (meer dan 30 jaar geleden) twee families uit éénzelfde stam mengde, kreeg een onvoldoende. Dit werd als inbreuk op één van de basisregels van lay-out beschouwd. Probeer het aantal verschillende letterstammen en -soorten te beperken. Drie of meer fantasieletters op één pagina kunnen een rommelige indruk geven. Als men koppen of titels met een grafisch programma maakt, is het een uitstekend idee om in de letterkeuze ofwel naar eenheid, ofwel naar contrast met het lettertype van de broodtekst te streven.

Lettergrootte

Leesbaarheid is belangrijk bij de keuze van de lettergrootte of lettercorps, maar men moet niet overdrijven. Webbouwers die door geen enkel gevoel worden gehinderd, kiezen vaak een veel te groot corps. Zeer goed leesbaar, ongetwijfeld, maar het komt veelal onbehouwen over. De mogelijkheden voor een evenwichtige en aantrekkelijke lay-out kunnen er sterk door worden beknot. Ikzelf heb de neiging naar kleine corpsen te grijpen en wordt door slechtziende internetgebruikers terecht op de vingers getikt. (De meeste besturingsprogramma's hebben gelukkig een optie 'vergrootglas' waarmee vrijwel elk schermonderdeel in detail kan bekeken worden.)

Koppen en nadruk

Het gebruik van hoofdtitels en tussentitels (tussenkopjes) vereist een aangepaste hiërarchie. Let op het gebruik van de H-koppen in HTML. Kleine koppen, die later bij een resolutie, hoger dan 800x600, worden weergegeven, zullen bijna onleesbaar worden. Een vreemde gewoonte uit de ondoordachte tekstverwerking heeft zich naar het net overgeplaatst. Ik noem het typografisch pleonasme, te vergelijken met een zwarte neger, witte sneeuw enz. Een kop wordt in een groter corpus geplaatst. Men kan hem eventueel in vet plaatsen, maar als men hem dan ook nog in kapitalen zet, een kleur geeft en onderstreept, is dat te veel van het het goede. Om in leesteksten titels en tussentitels nadruk te geven is het beter zich tot één of twee stijlvarianten te beperken.

Titel- en alineawit

Lang geleden leerde ik evenveel aandacht besteden aan het 'wit' tussen letters, woorden, regels en lettervelden als aan de letters zelf. In het 'loden tijdperk' werd daadwerkelijk 'wit' gestoken, met andere woorden, stukjes opvulling zonder letterbeeld, stukjes lood dus. Vandaag neemt de tekstverwerker of pc deze klus voor zijn rekening en is dit probleem binnen en tussen tekstregels in broodtekst nog nauwelijks aan de orde.

Een titel wordt los in de ruimte geplaatst, maar plaats hem niet te ver van de tekst waartoe hij behoort. Bij tussentitels is het evenwichtig als het optische wit bovenaan wat groter is dan onderaan. (Hier wordt vaak in derden gerekend.) Omdat een tussentitel tot een tekstblok behoort, is het beter dat hij dichter bij dit blok staat. HTML heeft moeite met dit principe, maar sinds de invoering van Style Sheets hebben de vormgevers ook op dat gebied geen problemen meer. Als je geen andere mogelijkheden hebt, is het beter geen extra witregel tussen het kopje en de tekst te plaatsen.

Tekstbreedte

In webpagina's is de regelgeving voor boekwerk in verband met de tekstbreedte niet van toepassing. In boeken zijn tekstregels van ongeveer 40 tekens vlot te lezen, maar bij beeldschermen is het formaat en de leesafstand anders. Toch zijn er enkele punten waar men op moet letten. Tekstregels die over de hele breedte van een browservenster lopen (onafhankelijk van het aantal pixels), zijn minder vlot leesbaar. Gewoon zelf uittesten. Ook als men met frames werkt, en daardoor een soort nieuw venster creëert, is het beter de tekst niet tot aan de rand te laten lopen. Stop de tekst in een onzichtbare tabel en test verschillende breedtes en posities uit. Men merkt zelf dat het ideaal, afhankelijk van de lettergrootte, rond de 450 pixels ligt.

Lange en korte teksten

Met de uitvinding van de scrollbalk staat op de paginalengte geen maat meer. Het economische aspect van het papierverbruik in drukwerk speelt hier geen rol. Sommigen geven er de voorkeur aan één lang document te maken. Een geoefend bezoeker merkt aan het formaat van de schuifbalkgreep onmiddellijk wat hem te wachten staat. Als de boodschap in het bovenste gedeelte al niet erg aantrekkelijk is, zal hij zich niet de moeite getroosten twintig browservensterhoogtes te scrollen. Een eenvoudige regel: benut de fantastische mogelijkheden van koppelingen of links. Laat de bezoeker eerst voldoende keuzemogelijkheden in overzichten, indexen enz. Probeer zeker de tekst voor je openingspagina tot het schermformaat te beperken. Indien je lange teksten voorziet, splits ze op in verschillende gekoppelde pagina's of maak gebruik van een navigatiesysteem.

Uitlijning

Naast leesbaarheid is uitlijning in typografie en layout een sleutelbegrip. Het speelt zowel op tekstniveau, als op paginaniveau, dat wil zeggen tussen teksten en afbeelding of andere elementen. In verband met tekst heeft het te maken met de horizontale uitlijnkeuzes: links, gecentreerd, rechts of in blok en de verticale mogelijkheden kop, midden, voet. In dit artikel bijvoorbeeld is de broodtekst links uitgelijnd, met een 'Engelse regelval' om een oude benaming te gebruiken. Het is een goed idee om voor samenhangende broodtekst een zelfde uitlijning te kiezen.

Op een pagina met weinig tekst is een gecentreerde uitlijning een oplossing. Het is veilig, evenwichtig, symmetrisch en formeel. Een zogenaamde blokregelval, waarbij de tekst zowel links, als rechts uitgelijnd is, is sinds kort met Style Sheets mogelijk. Het nadeel is dat daarbij geen woordafbreking optreedt, met als gevolg een soort gatenkaas. Men hoeft geen typograaf te zijn om te zien dat dit niet altijd mooi is.

Verticale uitlijning is net zo belangrijk. Het gebruik van zichtbare, of onzichtbare tabellen biedt hier een hulpmiddel. Vooral in navigatiebalken, of in een reeks cellen geeft het een professionele indruk, als de inhoud telkens op dezelfde wijze wordt uitgelijnd.

Op de basisregel zijn, indien smaakvol toegepast, uitzonderingen mogelijk. Indien een pagina uit een aantal kleinere stukjes tekst bestaat, kan afhankelijk van de verschillende elementen (afbeeldingen, grotere titels, logo's enz.), variatie in de uitlijning aangebracht worden. Er bestaan overigens schitterende voorbeelden van pagina's zonder enige consequente uitlijning. Het geheim van een aantrekkelijke lay-out kan immers net dat beetje spanning tussen verschillende uitlijningen van elementen zijn.

De kracht van een lijn

Zeg nooit: 'Het is maar een lijn'. Naast tekst en afbeelding vormen lijnen een sterk typografisch element. Op professionele webpagina's ontbreken zelden lijnen en ze worden niet alleen toegepast om pagina-elementen te scheiden. Een tekst tussen twee lijnen die de tekstbreedte overschrijden, heeft altijd iets. De kracht van een simpel lijntje blijkt uit volgende proef. Stel een cirkelvormige afbeelding en een titel, of een klein tekstje. Hoe plaatst men zoiets op een pagina? Wat men ook probeert, boven elkaar, naast elkaar... er zal altijd iets wringen tussen de ronde vorm van de afbeelding en het uitgelijnd blokje tekst (tenzij je het nu juist zwevend wil.) Door een lijn tussen afbeelding en tekst te plaatsen gebeurt iets ingrijpends. De cirkel lijkt een steunvlak te krijgen. Om het even welke uitlijning van de tekst is dan mogelijk.

Velletje papier

Plaats niet zomaar iets, willekeurig op de webpagina. Een veel voorkomende fout is pogen om de hele pagina op te vullen. Vooral startpagina's zijn daar het slachtoffer van. Gevolg: enorm grote titels, grote ruimtes tussen de tekstregels en de rest gevuld met afbeeldingen. Dat kan een onbehouwen indruk geven. Een aantrekkelijke startpagina maakt een website uitnodigend. Probeer niet teveel op de eerste pagina te plaatsen. Laat voelen dat er nog iets achter de startpagina te beleven valt. Kies liever een mooie grafische startpagina met weinig info dan een pagina waar alle informatie wordt samengeperst.

Omdat elk ontwerp met een lijn of enkele lijnen begint, maak ik meestal gebruik van een velletje papier van 21 bij 29,7 cm. Dat is mijn tijdelijke browser. De afmetingen komen nagenoeg overeen met een doornee beeldscherm. Op papier zal men zelden in de hierboven geschetste val trappen. De werkwijze leidt er onder andere toe dat alles overzichtelijker wordt aangezet. Zou jij op papier een tekst tegen de rand laten beginnen?

Afbeeldingen

Naast tekst nemen afbeeldingen een belangrijke plaats in bij webdesign. Men besteedt terecht veel aandacht aan het maken of uitzoeken van foto's , het scannen ervan en eventueel bewerken ervan in een fotografische editor, maar hoe zit het met de grootte en de plaatsing op de pagina? Probeer voor de hele website een vooraf bepaalde regelgeving aan te houden in verband met de grootte (breedte). Wanneer een afbeelding de focus moet zijn, moet men een groter formaat kiezen, maar een foto die zo groot is dat de verticale en horizontale scrollbalk gebruikt moet worden om hem volledig te kunnen zien, is een aanslag op het geheugen en vaak storend.

Interessant wordt het, wanneer er verschillende afbeeldingen op een pagina worden gebruikt. Hebben ze op een of andere manier relatie met elkaar, zet ze dan dicht bij elkaar en lijn ze mooi uit. In verband met de witruimte rond de afbeeldingen is de optie V space en H space in HTML niet zo vormvriendelijk. Een linkermarge herhaalt zich automatisch aan de rechterkant (en hetzelfde met boven en onder). Gebruik de fantastische mogelijkheden van Style Sheets om alleen daar witruimte te laten waar men het zelf wil.

Nabijheid of groeperen

Dat brengt ons bij een andere sleutel tot een evenwichtige lay-out, namelijk nabijheid of groeperen. Van de elementen op een pagina mag men aannemen dat ze met elkaar te maken hebben. Hoe kan men dit beter zichtbaar maken dan door ze effectief bij elkaar te plaatsen. Titel, afbeelding en tekst onder elkaar, en gecentreerd plaatsen, is ook hier een veilige oplossing. Maar bedenk welke mogelijkheden er nog meer zijn. Ga er niet van uit dat een pagina volledig gevuld moet zijn. Juist de witruimte en de marges geven adem aan de pagina. Door de regelgeving van nabijheid toe te passen, ontstaan stukjes opgeruimde plekken op de pagina en die hebben net zoveel kracht als de elementen zelf.

Probeer zo veel mogelijk elementen te lijnen en de ruimte tussen de verschillende elementen gelijk te houden. Het valt onmiddellijk op wanneer deze vuistregel niet wordt toegepast. Veel beginnende webmakers vergeten wel eens dat men onzichtbare tabellen kan gebruiken en dat er een br-tag bestaat. Tussen de elementen wordt onnodig meermaals op de entertoets gedrukt, en zo worden dus alineascheidingen geplaatst. Beperk de witruimte tussen vormelementen die bij elkaar horen.

Evenwicht

De plaatsing van alle elementen op een pagina kan op verschillende manieren. Formeel evenwicht is symmetrisch. Eeuwenlang was dit hét principe voor de titelpagina's van boeken. Symmetrie wordt bereikt door elementen van gelijke waarde, grootte en gewicht aan beide zijden van het centrum te plaatsen. Dit gebeurt bijvoorbeeld wanneer je alle tekst op een pagina zou centreren. Resultaat: een gevoel van waardigheid, veiligheid en betrouwbaarheid. Een overwicht aan rechthoekige vormen werkt formeel evenwicht in de hand. De keerzijde van de medaille is dat het dikwijls te statisch en weinig creatief overkomt.

Wanneer evenwicht verkregen wordt door het plaatsen van elementen van verschillend gewicht op verschillende afstand van het centrum, dan spreekt men van informeel evenwicht. In het begin van de twintigste eeuw was dit nog een gedurfde vondst. Bij assymetrie verdeelt een verticale lijn, getrokken door het midden van een pagina, de pagina-elementen niet in twee evenwaardige delen. Dit wil echter niet zeggen dat er geen balans meer is, maar het vraagt wat meer creativiteit om die balans te bereiken. Cirkelvormen en diagonalen bieden meer mogelijkheden voor informeel evenwicht. Informele lay-out trekt sneller de aandacht, juist door het meer fantasierijk, verfrissend en dynamisch karakter.

Contrast en kleur

Naast uitlijning en nabijheid is ook contrast een sleutelbegrip in de vormgeving. Door gebruik te maken van veel kleuren ontstaat niet per se meer contrast. Dat is een groot misverstand. Kijk maar eens hoe spaarzaam professionele webmakers met kleur omspringen. Het gebeurt soms dat ik na een avondje 'kleurkladderen' verrast wordt, wanneer ik bijvoorbeeld de achtergrondkleur gewoon verwijder.

Contrast kan op verschillende manieren verkregen worden, bijvoorbeeld tussen tekststijlen en lettergroottes, of andere tekstdelen onderling, tussen tekstblokken, of tussen tekst en afbeelding; door het gebruik van contrasterende kleuren en schaduw enz. Denk in blokken. Maak een of enkele blikvangers (dat kan van alles zijn). Als het de bedoeling is dat bepaalde elementen opvallen, geef er dan een verschillende waarde aan. Dit kan met grootte, vorm, kleur of positie. Probeer bij tabellen zoveel mogelijk de strakke kaderlijnen weg te laten. Laat bewust enkele cellen leeg. Ook witruimte brengt meer contrast en werkt informeel evenwicht in de hand.
_______

Gedrukte bronnen: Br. Jan Peeters: Algemene historisch gefundeerde grafische esthetica, Higro Gent, 1969; Joris Willaert: Typografische wetenschappen, artikelreeks in Compres/Grafiek, 1991-1993.