Om dan een stapje verder te gaan is het van belang te weten hoe een letter is opgebouwd en wat voor verschillende soorten letters er zijn.

Transcriptie

1

2 Typografie Typografie, van het Griekse tupos (slag, vorm, afdruk) en graphein (schrijven), betekent het zetten en drukken en vormgeven van teksten voor functionele doeleinden. Hoe is het schrift ontstaan? Wanneer zijn we begonnen met schrijven, tekenen? Hoe hebben we door de eeuwen heen met elkaar gecommuniceerd? een beknopte geschiedenis van het ontstaan van het schrift, het boek en de druktechnieken leert je de weg van de letters. Om dan een stapje verder te gaan is het van belang te weten hoe een letter is opgebouwd en wat voor verschillende soorten letters er zijn. Om die letters in een goede vormgeving te zetten moet je weten hoe je tekst het beste kan opmaken. En er is daarbij een verschil tussen drukwerk en beeldscherm. In deze reader wordt algemene tekstopmaak en beeldschermvormgeving behandeld. Oorspronkelijk was het belangrijkste medium voor de typografie het boek. Anders dan voor boeken is typografie tegenwoordig niet weg te denken van formulieren, reclameteksten of waarschuwingsborden. Ook webpaginaʼs en interactieve Cdromʼs/DVDʼs zijn een onmisbare bron van communicatie geworden. Daarom wordt in deze reader ook de typografie voor het beeldscherm behandeld. Bij de bronnen kun je je door middel van linkjes en films verder verdiepen als je meer wilt weten over typografie en tekstopmaak. Linda Pieke EHvA Amsterdam

3 Inhoud Het schrift: Oorsprong & evolutie Het Alfabet: Oorsprong & tijdslijn Het Boek: Het ontstaan van druktechnieken Blokdruk Boekdruk Veranderingen door mechanisch zetten De letter Anatomie van de letter Corps De EM Font De vijf lettertype families Lettertypen en classificaties Kapitalen Tekstopmaak Lay-out Regelval Interlinie Initialen Samenvatting tekstopmaak / checklist Typografie voor het Web Lettertype keuze Anti-alias Letterspatiëring Regellengte & regelafstand Hoofdletters Uitlijning Grafische elementen Plaatsing subtitel Mouse-over effecten Beeldschermvormgeving & Webdesign Pagina opmaak en lay-out Doelstelling & Doelgroepverkenning Samenvatting beeldschermvormgeving / Checklist Bronnen over typografie 3

4 He t schrift: Oorsprong & e volutie Voordat er van boekdruk gebruik werd gemaakt om informatie over te brengen waren er andere manieren om te communiceren. Mondeling, door middel van verhalen, dans, kleding (kleur), liederen droegen bij aan het overdragen van kennis. en rituelen Boodschappers moesten soms lange afstanden overbruggen die niet helemaal zonder gevaren waren. Omdat er niets vastgelegd werd, was men aangewezen op de mondelinge informatie van de boodschapper. Om beter duidelijk te maken wat er overdragen moest worden, ontstond eerst het beeldschrift. Tekens en schilderingen op wanden in tempels en grotten geven nu ons een beeld van de levensstijl uit de oudheid. Toen het beeldschrift werd uitgevonden hoefde men niet meer te vertrouwen op wat er mondeling doorgegeven werd. Naast dat het schrift een makkelijker en betrouwbare manier was om kennis en informatie door te geven, kon het ook nog eens later worden ingezien door iemand anders en verbeterd of aangevuld worden. 4

5 H e t A lfa b e t: O o rs p r o n g & tijd s lijn Hieronder volgt een tijdslijn hoe de evolutie van het alfabet plaats heeft gevonden. Ca BC De oudste vorm van schrift is het pictografische schrift of beeldschrift. Door middel van tekeningen kon men ideeën en objecten weergeven. Rond 3300 werd dit in Sumer (Irak) uitgevonden en ontwikkelde zich later tot het spijkerschrift. Ook de Egyptische hiëroglyfen zijn een voorbeeld van beeldschrift. Ca BC De Feniciërs baseerden hun alfabet op de klanken van de spraak. Een A werd afgeleid van Aleph, hetgeen Os betekent, terwijl de B van Beth kwam, wat Huis betekent. Alle woorden die gebruikt werden in het alfabet van de Feniciërs hadden te maken met het drijven van handel. Ca. 800 BC Ook de Grieken gebruikten het Fenicische alfabet. Voor hen was het gebruik van schrift een mogelijkheid om kennis op te slaan. Ze pasten de klanken aan, zodat het een Griekse toon had. Aleph werd Alpha en Beth werd Beta. Zo ontstond ook het woord Alfabet. Ca. 500 BC Vanuit Griekenland werd het alfabet later weer toegepast door de Etruskiers, die het vervolgens weer overleverden aan de Egyptenaren, waardoor de hiëroglyfen vervangen werden. De Romeinen gebruikten het Etruskische alfabet als basis voor hun eigen versie van het alfabet. Een aantal letters werden gewijzigd en een aantal toegevoegd. In plaats van Alpha, Beta, Gamma etc. te gebruiken werden de woorden afgekort tot A, B C, zoals wij deze nu vandaag de dag nog kennen. Ca AC Rond 200 na Chr. verschijnen de eerste boeken. Die bestaan uit papyrusvellen die aan elkaar worden geplakt tot stroken van 3 tot 20 meter lang. Daarna worden ze opgerold bewaard. Later worden vellen gebundeld in boeken zoals wij die nu kennen. 5

6 De monniken zijn de overleveraars van kennis uit de tijd van de middeleeuwen en schreven soms hun hele leven boeken. Deze worden in kloosters bewaard en mochten niet worden meegenomen naar buiten. De meeste mensen van die tijd konden niet lezen en schrijven, met uitzondering van geleerden en geestelijken. Stadsomroepers (herauten) en muzikanten (troubadours) brachten informatie over aan de bevolking. Dit voorbeeld hiernaast, Illuminated manuscript van Jost Amman von Ravensburg (circa 1440), laat zien dat een boek een kostbaar handwerk was, letter voor letter getekend en voorzien van initialen en randmotieven in blauw, groen en goud. 6

7 H e t B o e k : H e t o n ts ta a n v a n d r u k te c h n ie k e n Blokdruk In China en Korea werden er vanaf omstreeks 900 al teksten gedrukt. Hiertoe werden in houtblokken tekens in spiegelbeeld gekerfd. Dan werd er inkt op aangebracht. Door vervolgens het blok op een vel papier te drukken verschenen daar de tekens op. Met deze houtblokken werden complete paginaʼs afgedrukt. De zogeheten Blokdruk. In de 15e eeuw werd deze techniek waarschijnlijk ook in Nederland toegepast. Boekdruk Gutenberg( Mainz, ca aldaar, 3 februari 1468 markeerde een nieuw begin voor het reproduceren van druktechnieken. Hij sneed kleine houtblokjes uit en kerfde in elk blokje een letter in spiegelbeeld. Met de verschillende combinaties van blokjes drukte hij woorden en zinnen af. De volgende stap was het gieten van letterblokjes in lood en tin. Deze metalen blokjes waren vele malen te gebruiken en de eerste vorm van het toepassen van druktechniek. Hij drukte o.a. gedichten, kalenders en maakte ook voor de kerk drukwerk. Daarna begon hij aan zijn meesterwerk; de Gutenberg Bijbel. Deze werd succesvol gedrukt in 1455 en veelvuldig verspreid. Boeken konden nu veel sneller geproduceerd worden. Terwijl je vroeger maanden nodig had om één boek over te schrijven, kon je nu in diezelfde tijd honderden gedrukte exemplaren maken. Boeken bleven duur, maar werden toch minder exclusief dan eerder het geval was. Veranderingen door mechanisch zetten De drukkunst heeft vele veranderingen doorgemaakt, en het handzetten van Gutenberg werd vervangen door mechanisch zetten, met behulp van de zetmachines van Monotype en later Linotype. Met een Linotype zetmachine zijn de functies van zetten en gieten verenigd. Op een Linotype wordt de tekst met behulp van een toetsenbord ingevoerd. Bij het aanslaan van een toets valt een matrijs (mal) met een letterteken uit een magazijn in een houder. Als de regel vol is wordt deze gegoten: Zo ontstaat een hele zetregel uit één stuk metaal, dat na gebruik kan worden omgesmolten en opnieuw gegoten Een Monotype zetmachine giet niet gehele regels, maar losse letters. Zetmachines leverden een grote 7

8 tijdsbesparing op in vergelijking met het handmatige letterzetten. Bovendien werd telkens nieuwe letters gegoten, zodat geen slijtage ontstond zoals bij handletters. Door de opkomst van de vlakdruk(offset) en rotatiepers verdwenen in Europa de zetmachines uit de drukkerijen. De computer maakt vandaag de dag, door het gebruik van digitaal printen, het voor iedereen mogelijk zelf teksten op te maken en de rol van typograaf te vervullen. 8

9 De le tte r De Letter heeft zich sinds het ontstaan van de druktechniek verder ontwikkeld. Om een duidelijk beeld te geven van de letter worden hieronder de belangrijkste onderdelen behandeld. Anatomie van de letter Corps De EM Font De vijf lettertype families Lettertypen en classificaties Kapitalen De anatomie van de letter De letters van het alfabet wordt onderverdeeld in: Rompletters (a, c, e, i, m, n, o, r, s, u, v, w, x, z) Stokletters (b, d, f, h, k, l, t) Staartletters (g, j, p, q, y) Over de grootte van de letter, het corps, bestaat de nodige onduidelijkheid. Bij verschillende lettertypes met een gelijke lettergrootte kan de hoogte van de letter aanzienlijk verschillen. Om dat te kunnen begrijpen moet eerst worden gekeken naar een paar lijnen die in ieder font getekend kunnen worden en de hoogte van de letter x. Allereerst is daar de basislijn. Die loopt langs de onderkant van de letter x. De ronde letters, zoals de e, steken daar een klein beetje onder uit. Dat is noodzakelijk omdat anders, door optisch bedrog, het net lijkt of deze letters te hoog staan. De hoogte van de letter x wordt de x- hoogte genoemd. De hoogte van de kapitalen is over het algemeen gelijk aan de ruimte tussen de basislijn en de stoklijn. Voor alle duidelijkheid: ʻstokkenʼ zijn de gedeelten van de letters b, d, f, h, k, l en t die boven de x-hoogte uitsteken. De ʻstaartenʼ van de letters g, j, p, q en y steken onder de basislijn uit. Corps & punten Het corps van een letter is niets anders dan een maataanduiding voor de grootte van een letter. Hiernaast is de grootte in punten te zien, zoals wij dit kennen in de verschillende tekst opmaak programmaʼs. Het corps wordt uitgedrukt in ʻpuntenʼ, maar het probleem is dat er verschillende definities van het begrip ʻpuntʼ bestaan. 9

10 Zo zijn er Pica-punten, Didot-punten en fractionele punten. Het gebruik van punten is ontstaan doordat de metalen blokjes per letter gemeten moesten worden om een juiste verdeling en grootte te krijgen van de gebruikte letters. In onderstaande tabel is precies weergegeven wat het verband tussen de verschillende maatstelsels is. Let vooral goed op het verschil tussen de Pica-punt en de Didot-punt. Het verschil bedraagt maar liefst zeven procent. Wie niet goed met de drukker of zetter communiceert welk soort punt gebruikt gaat worden, kan een veel te grote of juist veel te kleine letter krijgen. Belangrijk is om te weten dat 1 picapunt = 0,93475 Didot-punt is. Tegenwoordig maken we gebruik van beeldschermopmaak en wordt alles digitaal aan de drukker geleverd. We gebruiken de weergave van punten, maar zijn ons niet bewust van wat dit nou precies inhoudt. In Adobe Photoshop wordt tegenwoordig de grootte van een lettertype in pixels aangegeven, niet meer in punten. De EM Em spatie (Em space) De Emspatie is een belangrijke eenheid binnen de typografie. Deze spatie is net zo breed is als de letter M. Tegenwoordig meet je de Em-spatie als een vierkante omtrek van en lettergrootte (corps). Gebruik je een 12-punts letter dan is de Em-spatie ook 12 punten breed. De En spatie is de helft van de berekende Em spatie. 1 Em spatie = 0,5 En spatie. Ook de Em spatie kan weer opgesplitst worden in gelijke delen (Units, zie hiernaast) die de breedte van de letter en de ruimte ernaast bepalen. Een deel (Unit) is net zo groot als eenhonderdste deel van een Em spatie. Dus als een Em spatie 12 punten breed is, dan is een deel 1/12. Is de Em spatie 24 punten breed is, dan is een deel 1/24. De hoeveelheid delen zal nooit veranderen per lettergrootte (Corps), maar de delen zullen afzonderlijk groter worden naarmate de letter groter wordt. Fonts Een font is een lettertype en heeft zijn eigen letterfamilie en stijl. Niet verwarren met de lettertype families (wordt hierna behandeld), dat zijn de verschillende categorieën waarin alle lettertypes worden ingedeeld. De stijlen die in een lettertype familie kunnen zitten zijn bijvoorbeeld Italic of Bold. Hiernaast een voorbeeld van een Helvetica Letterfamilie. 10

11 De vijf lettertype families Er zijn vijf lettertype families die de grondleggers zijn voor het gebruik van de verschillende lettertypes. Het Old-Style lettertype verscheen as eerste en de Sans Serif als laatste. Familie Voorbeeld Old-style (1617) Weinig contrast in de lijnen, dikte van de lijnen is hoekig, de serif is gebogen en verbonden met de lijnen. Voorbeelden: Garamond, Bembo, Centaur Garamond Transitional (1757) Meer contrast dan Old-Style. Verticaler, de serifs zijn kleiner. Voorbeelden: Baskerville, Fournir Modern (Didone) (1788) Veel contrast tussen dikke en dunne lijnen, verticale as, haarlijnen als serifs. Voorbeelden: Bodoni, Didot BaskerVille Bodoni Egyptian (Slab-serif) (1924) Serifs zijn niet verbonden met de lijnen, gelijke lijnen. Voorbeelden: New Century Schoolbook, Memphis New Century Schoolbook Sans-serif (1951) Geen serifs, gelijkmatige lijnen, meestal verticaal en geometrisch. Voorbeelden: Helvetica, Frutiger Helvetica 11

12 Lettertypen en classificaties Omdat er in de 20 ste eeuw zoveel verschillende lettertypen zijn ontwikkeld, kan je soms door de bomen het bos niet mee zien en weet je niet hoe je een bepaald lettertype moet indelen en hoe je het kan gebruiken. Hieronder volgt een systeem, waarin de verschillende soorten lettertypen zijn ingedeeld. Serif Slab Serif Sans Serif Script Overig Serif (Roman) Een voorbeeld van een Serif (schreef)letter is Roman. Serif is de verzamelnaam voor een letter waar een aparte (lees)lijn is aangebracht aan het einde van de lijnen van de letter. Deze stijl is uitgevonden door de Romeinen en is daarom bekend als de stijl ʻRoman. Het is de meest gebruikte stijl voor drukwerk, omdat het erg fijn leest. Dit komt, omdat de aangebrachte lijntjes een denkbeeldige regel vormen als je leest. Slab serif (Egyptiennes) De opkomst van de industrie en de vervaardiging van drukwerk in de 19de eeuw zorgde er voor dat er zwaardere lettertypes nodig waren voor een nieuwe manier van communiceren: Reclame, posters en brochures. Omdat de Slab Serif uit strakke rechte lijnen aan de uiteinden van de letters bestaan, was deze zeer effectief om de aandacht te vragen van de lezers. Sans Serif Sans Serif (schreefloos) ontstond in de 19 de eeuw, maar werd pas populair vanaf 1920, toen de typografie beïnvloed werd door de ʻMinder is meerʼ trend, ontstaan vanuit de Bauhaus kunst richting. Deze schreefloze letters hebben een eenvoudiger en rustig uiterlijk, en zijn makkelijker te bewerken dan schreefletters, maar minder geschikt voor lange teksten op drukwerk. Voor titels is de Sans serif wel weer goed te gebruiken. Voor beeldschermvormgeving daarentegen, geeft deze letter ruimte, zodat de lezer juist een beter overzicht krijgt. Script Script letters zijn fantasie letters, ontstaan vanuit handgeschreven manuscripten uit de 17 de eeuw. De letters zijn niet zo geschikt om tekst weer te geven, maar zijn meer bedoeld om een sfeer neer te zetten, zoals bijvoorbeeld bij een menukaart. 12

13 Overig Onder overige letters worden de letters verstaan die gebruikt worden als symbolen, logoʼs en titels en worden ook wel Decoratief genoemd. Deze letters zijn niet geschikt voor het gebruik van teksten en hebben een illustratieve functie. KAPITALEN / onderkast De hoofdletters, afgeleid van de Romeinse inscripties, worden nog steeds kapitalen genoemd. Deze benamingen komen ook voort uit het gebruik van loden letters. De letters lagen geschikt in grote houten letterkasten. Ze waren ingedeeld in twee delen: bovenaan lagen de ʻhoofdlettersʼ of KAPITALEN onderaan de ʻkleineʼ letters die men daarom ʻonderkastlettersʼ noemt. De term onderkast is minder verwarrend dan ʻkleineʼ letter, omdat klein in dit verband niets te maken heeft met zijn afmeting. Geheel in kapitalen gezette woorden tussen normale (onderkast) tekst geeft vaak een te groot, ongewenst contrast. Typografen kiezen dan voor de KLEIN KAPITALEN. 13

14 Te kstopmaak Als je hebt gekozen voor een lettertype volgt automatisch de manier waar en hoe je de tekst neer gaat zetten en welke stijl je gaat gebruiken. Daarbij heb je te maken met de volgende zaken: Lay-out Regelval Interlinie Initialen Lay-out (Verdeling van een pagina) Als je een pagina opmaakt moet je kijken naar de verdeling van de tekst en illustraties op de paginaʼs. Dit wordt ook de Zetbreedte genoemd. Het bedrukte gedeelte heet Bladspiegel of Zetspiegel. Buiten dit gedeelte heb je te maken met een onbedrukte ruimte. Dit noemen we de Marge. Om een beeld te krijgen van de verschillende Lay-outs (verdelingen) van een pagina, kun je hieronder een aantal plaatjes vinden die de verschillende vormen weergeven. Van boven naar beneden: Normale marges, klassieke marges, luxe marges Regelval De manier waarop tekstregels onderling geschikt staan noemt men regelval. Blokzetsel: Wanneer regels tekst vooraan en achteraan één lijn vormen. Vlagzetsel: Wanneer de tekst alleen vooraan of achteraan één lijn vormt (ook engelse regelval genoemd). We spreken ook van links of rechts uitgelijnd. Middenschikking: Als tekst geschikt wordt op zijn centrale as. We noemen dit ook gecentreerd of symmetrisch gezet. Speciale zetvormen: Door artistieke of praktische overwegingen kan een tekst ook in allerlei vormen gezet worden, bijvoorbeeld in cirkelvorm, schuin gelijnd of aansluitend bij een figuur. 14

15 Interlinie of regelafstand Tussen de regels tekst zit een witte ruimte : de interlinie. Deze tussenruimte kan omwille van bijvoorbeeld de leesbaarheid groter of kleiner gemaakt worden. Indien er geen witregel tussen twee tekstregels geplaatst wordt spreekt men over interlinie 0. De toppen van de stokletters zullen de staarten van de letters uit de vorige regel raken op eenzelfde lijn. De ideale regelafstand, ten opzichte van de optimale leesbaarheid is ooit vastgesteld op een ruimte tussen de zichtbare x-hoogten, ter hoogte van een kapitale letter. (zoals in het middelste voorbeeld hiernaast) Initialen ls eerste letter van een hoofdstuk van een boek of het begin van een tijdschriftartikel wordt soms een grote beginletter gebruikt, initiaal genoemd. Dit gebruik dateert al van voor de boekdrukkunst. Destijds meestal op kunstzinnige wijze met de hand getekend en ingekleurd. Ook in modern vorm gegeven drukwerk kan een grote beginletter de pagina een apart beeld geven. 15

16 Same nvatting te kstopmaak / che cklist Typografie houdt zich bezig met tekstuele vormgeving, en wordt in de meeste gevallen toegepast om het doel en de inhoud van een tekst te ondersteunen. Een tekst moet onder andere prettig leesbaar zijn. Daarom worden teksten in boeken en kranten vaak uit een lettertype met schreef gezet, maar op het beeldscherm juist vaak met een schreefloos lettertype zoals Verdana opgemaakt. Voor een reclame- of waarschuwingsbord is het van belang dat woorden opvallen door ze met felle kleuren te accentueren. In een lange tekst wordt het juist als storend wordt ervaren wanneer er vetgedrukte woorden uitspringen en wordt bij voorkeur een cursieve letter (Italic) gebruikt om de lezer te attenderen. Ook met andere zaken die de leesbaarheid van een tekst beïnvloeden houdt typografie zich bezig. Bijvoorbeeld het gebruik (doelstelling & doelgroep) en de indeling van een pagina. De typograaf let op: De zetbreedte (regellengte) De breedte van een tekstblok of kolom. De typograaf let daarbij op het maximum aantal tekens of woorden per regel. Bij een tekst met te lange regels moet het oog van de lezer namelijk een te grote afstandssprong maken van het eind van de regel naar het begin van de volgende. In het algemeen worden maxima gehanteerd van gemiddeld ca. 85 tekens (inclusief spaties en leestekens) of van gemiddeld twaalf woorden. Letterfamilie(s) (lettertypen) Een keuze maken uit schreefletters of juist schreefloze letters. Welk font? Dit hangt af van wat je wilt overbrengen. Kapitalen Het gebruik van kapitalen (hoofdletters) en onderkast (kleine letters als deze) De diverse lettergroottes (corpsen) en -soorten Door een combinatie daarvan (naast o.a. kleurgebruik) kan je de diverse tekstelementen visueel laten verschillen en daarmee de inhoud ordenen. De letterspatiëring Het wit tussen de letters onderling. De woordspaties Het wit (de ruimte) tussen twee woorden. De interlinie Het wit tussen twee regels. (standaard is 1,5 mm) De leestekens Punten, kommaʼs, aanhalingstekens, uitroeptekens, enz. Kolommen Het vaste (verticale) tussenwit. (bij meerdere kolommen) 16

17 Typografie voor he t We b Tekst lezen op een beeldscherm geeft een extra moeilijkheid: Het is minder scherp dan op print. Daarom printen mensen liever paginaʼs uit, dan ze te lezen op het scherm. Het lezen van grote lappen tekst op een beeldscherm vermoeit de ogen. Een eerste leidraad voor een ontwerper van een website zou daarom de inhoud van de informatie moeten zijn. Mensen willen geen lange teksten lezen op het beeldscherm, dus is het belangrijk dat je de tekst overzichtelijk neerzet. Gebruik kolommen en beperk je tekst tot de informatie die nodig is om je boodschap over te brengen. De volgende onderwerpen worden behandeld: Lettertype keuze Anti-alias Letterspatiëring Regellengte & regelafstand Hoofdletters Uitlijning Grafische elementen Plaatsing subtitel Mouse-over effecten Lettertype keuze De meest simpele oplossing is om hetzelfde lettertype voor de titel als voor de tekst te gebruiken. Het is wat creatiever om een ander lettertype te kiezen. Technisch gezien is de makkelijkste keuze om een standaard font te kiezen dat ondersteund wordt door de meeste browsers. Maar het is zeker niet onmogelijk om hier van af te wijken. Op een beeldscherm wordt vooral gebruik gemaakt van schreefloze lettertypen. Omdat het beeld op een scherm bestaat uit een aantal puntjes wordt een lettertype in een kleine grootte (bijvoorbeeld 8 op 9 punten hoog) snel erg onduidelijk. De schreven storen hierbij. Daarom zijn kleinere letters op beeldschermen vaak beter leesbaar in een schreefloos lettertype. Zoek twee of meer lettertypes die goed bij elkaar passen, experimenteer wat en volg je gevoel. Het enige wat waar je aan moet denken is dat bepaalde lettertypes zich goed lenen voor het plaatsen van grote stukken tekst op een beeldscherm. Voorbeelden zijn: Geneva, Chicago, Monaco, Charcoal. (Door Apple ontwikkeld) en Georgia, Verdana. (Door Microsoft ontwikkeld). Deze lettertypen zijn speciaal ontwikkeld voor het beeldscherm. Wat deze schermfonts gemeen hebben zit in de grotere X-hoogte. Andere lettertypes zijn beter voor het plaatsen van titels en subtitels. Je kunt ervoor kiezen om hier plaatjes van te maken, zodat je zeker weet dat ze worden getoond zoals jij bedoelt. 17

18 Anti-alias Lettertypen voor het beeldscherm worden weergegeven in pixels, verschillende puntjes op een beeldscherm. Anti-aliasing (soms ook anti-kartelvorming genoemd) is een techniek die wordt toegepast om het zogenaamde karteleffect dat voorkomt bij figuren en tekst op het computerscherm te verdoezelen. Als je namelijk een schuine lijn, de diagonale lijnen van tekst of ander afgerond figuur zou tekenen op een computerscherm, dan wordt deze lijn afgebeeld met vierkante pixels. Hieronder krijg je een trappetjeseffect. De oplossing is om de pixels rond de rand van een afgerond figuur iets te vervagen, zodat het karteleffect minder opvalt. Door anti-aliasing toe te passen bij LCD schermen worden de letters normaal gesproken iets vetter en donkerder. Ook wordt het contrast iets hoger. Of lezen van het scherm hierdoor aangenamer wordt hangt vooral van je smaak af. Letterspatiëring Ook de ruimte tussen de letters maakt ook een groot verschil in de leesbaarheid voor een beeldscherm. Hoe meer ruimte tussen de letters, hoe makkelijker het wordt om te lezen. Letterspatiëring (verdana) Letterspatiëring (times) Regellengte & regelafstand Nog een andere manier om tekst leesbaarder te maken is rekening te houden met je regellengte en regelafstand. Zorg ervoor dat je regellengte kort is, 500 tot 750 pixels, en zorg voor een ruime regelafstand. De regelafstand is de afstand tussen de onderkant van een regel tekst tot de onderkant van de volgende regel. Een regelafstand van 120% van de corpsgrootte is een goede standaard, maar 160% kan ook. Kleur De kleur van je tekst moet altijd makkelijk te lezen zijn. Vooral bij de grote lappen is dit belangrijk. Bij de titels kun je wat gemakkelijker afwijken. Juist doordat titels vaak groter en/of vet worden geplaatst is het minder belangrijk dat het kleurgebruik duidelijk is. Ze zijn namelijk toch wel goed te lezen. Kies voor een titel dus een andere kleur. De keuze van de kleur zelf is afhankelijk van de vormgeving van de rest van de website. Probeer een kleur te gebruiken die ergens anders op de website ook voorkomt. Het beste is, om vooraf te bepalen welke onderdelen in een website je een kleur wilt geven. Hou dan die structuur aan voor de hele website. Probeer nooit te veel 18

19 opvallende kleuren te plaatsen. Twee of drie kleuren (met verschillende variaties daarop) is voor een website meestal meer dan voldoende. Er zijn een aantal regels waar op gelet moet worden met betrekking tot het gebruiken van kleuren op een beeldscherm. Wit vergroot en zwart verkleint. Een zwarte achtergrond kan rustgevend lijken, maar als dit gecombineerd gaat met een witte tekstkleur, is het voor de lezer van de tekst op een beeldscherm moeilijk om zich te concentreren. Omdat een LED scherm licht geeft, komen felle kleurvlakken snel dominant over. Het gebruik van teveel contrasten geeft het oog geen rust en nodigt niet uit tot het bekijken van de website. Contrast gebruiken is goed, maar dus niet teveel! Daarentegen, als je kleuren gebruikt die teveel op elkaar lijkt de tekst te vervagen en de lijnen worden met de achtergrond versmolten. Dit kan moeilijkheden veroorzaken bij het lezen. Op het plaatje kun je zien dat een juiste balans belangrijk is. Dus probeer de kleur van je tekst af te stemmen op de bekijker van je website. Door met kleuren te spelen zijn ook een aantal leuke effecten te gebruiken. Door bijvoorbeeld alleen het eerste woord of de eerste letter steeds een afwijkende kleur te geven krijg je een erg speels uiterlijk. Hoofdletters Ook door wel of geen CAPITALEN oftewel HOOFDLETTERS te gebruiken kun je een duidelijk verschil aangeven tussen je titels, subtitels en tekst. Uitlijning Door een titel of juist de tekst in te laten springen kun je een leuk effect bereiken. Ook kun je een titel juist aan de andere kant uitlijnen dan de tekst. Grafische elementen Het is mogelijk om een onderdeel van je logo te gebruiken. Zodoende komt je huisstijl over je hele pagina weer terug. 19

20 Door een balkje, een cirkeltje, een pijltje of juist iets heel anders voor, achter, boven of onder een titel te plaatsen kun je extra aandacht naar de titel trekken. Je hebt ook een extra mogelijkheid om kleur te gebruiken. Plaatsing subtitel Het creatief plaatsen van een subtitel kan ook een wereld van verschil betekenen voor het uiterlijk van je pagina. Meestal wordt een subtitel recht onder de titel geplaatst. Maar op het moment dat je een goed onderscheid maakt tussen titel en subtitel kunnen ze ook op een andere manier bij elkaar geplaatst worden. Mouse-over effecten Bij een weblog zie je vaak dat titels ook links kunnen zijn. Door een Mouse-over effect hier op toe te passen lijkt de titel meer op een link en heb je tevens een extra mogelijkheid om de titel van de rest van de tekst te onderscheiden. Het is een leuk idee om één van eerder genoemde elementen toe te voegen of weg te laten tijdens het Mouse-over effect. 20

21 B e e ld s c h e r m v o r m g e v in g & We b d e s ig n Om een totaal beeld te geven van de vormgeving voor beeldschermen zijn onderstaande onderdelen toegevoegd, zodat je een totaalbeeld krijgt waar je allemaal niet aan moet denken bij het maken van een website, namelijk: Pagina opmaak en lay-out Doelstelling & Doelgroepverkenning Pagina opmaak en lay-out Bij de opmaak van een webpagina is het belangrijk om 1 structuur te hanteren die op de hele website toegepast kan worden. Eenheid en rust voor het oog, maar ook de directe herkenning van navigatie menuʼs, titels, logoʼs en de platte tekst in kolommen zijn vaak de redenen voor een bezoeker om de informatie die je wilt weergeven tot zich te nemen. Ondersteunende plaatjes scheppen ruimte en afleiding, maar teveel plaatjes geven weer onrust, en kunnen het ontwerp verstoren. Doelstelling & Doelgroepverkenning Met het ontwerpen van een website zul je merken, dat als je op internet gaat kijken, er geen eenduidige stijl te vinden is. Het lijkt wel alsof alles mag. Zo wordt het natuurlijk moeilijk om een stijl te kiezen die bij jouw doelstelling past. Kijk hieronder naar de verschillende websites om je doelgroep te verkennen. Ze hebben allemaal een andere doelstelling en roepen een bepaalde groep mensen aan. Nieuws sites hebben een krantachtige vormgeving; de informatie staat voorop. Product sites laten het product zien als gebruiksvoorwerp en dit is onderdeel van hun campagne. 21

22 Merk sites geven het product weer van een bepaald merk. Dit merk heeft een bepaalde gevoelswaarde. Micro sites (Actie sites kortlopend). Aan de hand van een reclamecampagne van een bepaald merk wordt er een opvallende vormgeving neergezet met als doel het merk op een nieuwe manier te promoten. Hier wordt meestal Flash voor gebruikt. (bijv. Nivea, automerken, films) Experience sites Deze sites zijn onderdeel van een merk of een product en het gaat hierbij meer om de gevoelswaarde en beleving dan om informatie aan te bieden. Dit kan losstaan van een kortlopende actie. (het huis KPN) Webshops maken gebruik van databases en de sites zijn makkelijk toegankelijk voor iedereen; herkenbaarheid en navigatie staan voorop. Veiligheid is het allerbelangrijkste onderdeel, omdat er financiële transacties plaatsvinden! 22

23 Presentatie sites tonen een kleurrijk, avant-gardistisch uiterlijk. Jezelf onderscheiden is hier het belangrijkste. Denk hierbij aan portfolioʼs, visitekaartjes van bedrijven, artiesten e.d.) Weblogs en communities zijn op interactie gebaseerd. Men moet de informatie goed kunnen lezen. Het is dus belangrijk dat de site vooral goed leesbaar is, maar kan verder persoonlijk worden vormgegeven. Ook kan er een presentatie site van gemaakt worden, waarin het nieuwste ontwerp, film, e.d. erin wordt opgenomen. Dit type site moet goed onderhouden worden en is voorzien van databases. User generated content sites. Hier wordt de inhoud geproduceerd door de gebruiker en de vormgeving is hiervan afhankelijk. 23

24 Same nvatting be e ldsche rmvormge ving / Che cklist Hieronder volgt een opsomming waaraan gedacht moet worden als je een website gaat maken. Diverse onderdelen worden nogmaals in het kort neergezet, zodat je een checklist hebt als je gaat ontwerpen. Kleurgebruik Denk bij het maken van een website aan je kleurencombinaties. Gebruik niet meer dan 4 kleuren; Achtergrond; Kolommen; Titels; Platte (brood) tekst. Lettertype gebruik Gebruik niet meer dan 2 lettertypes. Titels & Platte tekst. Gebruik voor je Titels een apart eigenzinnig lettertype, maar voor de platte tekst een voor webbrowsers hanteerbaar lettertype. Lay-out Werk in kolommen en blokjes, die per pagina dezelfde lay-out hebben. Varieer dit eventueel door je Homepage als visitekaartje te maken en de layout anders te doen. Lijngebruik Werk in lijnen (diagonaal, verticaal en horizontaal), door middel van het gebruik van hulplijnen in Photoshop, Flash of Illustrator. Als je in lagen werkt zal je heel vaak alleen maar een aantal elementen hoeven te veranderen. 24

25 B r o n n e n o v e r ty p o g r a fie Font design Een kort filmpje met een stukje geschiedenis over het gebruik van fonts en hoe deze vandaag gebruikt worden voor verschillende doeleinden. Typography animation Wim Crouwel en Bureau Destruct animatiefilm waarin gespeeld wordt met cartoonachtige typografie. Wim Crouwel is een bekende typograaf. Typography Een heel mooi filmpje over typografie. Vormgeving en kennis in

26 The impact of the Gutenberg printing press Een slide show waarin wordt aangegeven wat voor veranderingen druktechnieken hebben veroorzaakt binnen de westerse cultuur. The Types Tutorial over lettertypen en hun kenmerken. Bronnen: Designing with Type - James Craig Wikipedia.org Graphic Design Tutorial - Linda Pieke Links:

27 27