Webtypografie websave 2010

Webtypograﬁe
Letters op het beeldscherm

1
donderdag 14 oktober 2010

Typograﬁe op het web

1991 Tim Berners-Lee – ontstaan van het world wide web

Met Internet Explorer 1.0 is er geen sprake van web typogra e

Vandaag is er reeds de mogelijkheid om met o.a. Google, Typekit... te kiezen uit
een bibliotheek van 100-den fonts welke zich op je website zonder problemen en
helemaal legaal kunnen vertonen op eender welk beeldscherm.

Web pagina’s kunnen we eindelijk tot leven wekken met goede typogra e.

voorbeelden:
http://www.youwillnotbelieve.us/
http://media.twitter.com/

2

Richtlijnen voor web typograﬁe

CONTRAST
Tekst bestaat om leesbaar te zijn!
Zorg voor voldoende contrast tussen letters & achtergrondkleur.
TIP: contrast test = converteer je pagina met photoshop naar grijswaarden.

Witte tekst op zwart is leuk
Voor een kort tekstje.
Maar erg vermoeiend voor lange tekst.

3


GROOTTE
Vormgevers hebben een voorliefde voor kleine korpsgrootte.
Maar iemand met een 15inch Mac Book zal dankbaar zijn als hij de teksten nog
steeds goed kan lezen.
Kies best geen bodytekst met corps onder 10px

4

Richtlijnen voor webtypograﬁe

HIËRARCHIE
Aandachtspunten moeten opvallen en de aandacht vasthouden.
De bezoeker moet je elementen in een hiërarchie scannen.
Wissel af met lettertypes voor kop en bodytekst.
Gebruik nooit meer dan 2 lettertypes tegelijk.
Wissel af met verschillende stijlen; Kapitalen, italic, schreef/schree oos, kleur

5


WITRUIMTE
Laat je tekst ademen
Geen vrees voor lege ruimte
Regelafstand van (best) 140% van je tekstgrootte leest vlotter

7


WEB SAVE FONTS
Tijdens het het bouwen van een website kom je een keer op punt dat je
‘Fonts’ (lettertypes), vaak in CSS, moet gaan de niëren.

Wanneer je een leuk lettertype voor je website hebt gevonden dat je uiteindelijk
gaat gebruiken, moet je jezelf gaan afvragen of de gebruikers/bezoekers dit
lettertype op hun computer hebben staan.

Hebben ze dat niet, dan zal de OS het standaard lettertype voor de website
gebruiken. Dit kan je website ongevraagd drastisch veranderen.
Daarom is het altijd best geweest ‘font-save’ lettertypes te gebruiken die standaard
op elke OS aanwezig zijn.

Maar! Er is dus een vernieuwing aan de gang met typekit & google dat nu fonts kan
hosten.
8


Dit is een lijst met de meest
voorkomende Web-Save-Fonts.

9


font-family: Arial, Helvetica, sans-serif; De browser gaat eerst op zoek
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif; naar het eerste lettertype, kan hij
font-family: ‘Comic Sans MS’, cursive; deze niet vinden dan neemt hij de
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
tweede enz.
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
Kande browser geen enkel vinden,
font-family: ‘Lucida Console’, Monaco, monospace; dan gaat hij het standaard
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif; lettertype van de OS gebruiken.
font-family: ‘MS Sans Serif ’, Geneva, sans-serif;
font-family: ‘MS Serif ’, ‘New York’, sans-serif; (zoals Times)
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

10


CSS geeft de mogelijkheid tussen 5 font families:

schreef / schree oos / cursief / fantasie / monospace

Om voor te stellen aan de browser indien geen van de voorgestelde fonts aanwezig
zijn.

11

De 5 font familie sets

FONT FAMILY STACKS
Lettertypes onderscheiden zich o.a in het verschil van X-hoogte.
Lettertypes zoals verdana hebben een grote x-hoogte dit bevorderd de
leesbaarheid.
Maar heeft ook het eﬀect de letters groter te maken dan andere types van dezelfde
puntgrootte.
Dit vangt men op door een kleinere corpsgrootte; maar veroorzaakt dat
vervangende lettertypes weer onleesbaar worden.

Met CSS speci ceer je alternatieve fonts met gelijkaardige x-hoogte.

12

De 5 font families

De brede schree oze set

Verdana is ontworpen door Matthew Carter en Tom Rickner voor Microsoft.
Geneva is ontworpen door Kris Holmes en Suzan Kare voor Apple.

Beide lettertypes hebben een grote x-hoogte, wat zorgt voor breder uitlopende
zinnen.
In deze set komen verdana, en geneva voor op de familie schree ozen.

body{
font-family:Verdana,Geneva,sans-serif;
}

13

De 5 font families

De smalle schree oze set

Tahoma is ontworpen door Matthew Carter en Tom Rickner voor Microsoft.
Arial is ontworpen door Robin Nicholas en Patricia Saunders voor Monotype.
Helvetica is ontworpen door Edouard Hoﬀmann en Max Miedinger.

Deze 3 lettertypes hebben een normale x-hoogte, wat zorgt voor breder uitlopende
zinnen. Hoewel Tahoma een iets grotere x-hoogte heeft.
In deze set komen deze 3 lettertypes voor op de familie schree ozen.

body{
font-family:Tahoma,Arial,Helvetica,sans-serif;
}

14

De 5 font families

De brede schreef set

Georgia is ontworpen door Matthew Carter en Tom Rickner voor Microsoft.
Utopia is ontworpen door Robert Slimbach voor Adobe.
Palatino of palatino Linotype is ontworpen door Herman Zapﬀ voor Linotype.

Deze 3 types hebben een grote x-hoogte, en verschijnen dus breed uitgesmeerd in
vergelijking met anderen. Deze set bevat 3 lettertypes die voorafgaan aan de familie
schreven.

body{
font-family:Tahoma,Arial,Helvetica,sans-serif;
}
15

De 5 font families

De smalle schreef set

Times New Roman is ontworpen door Starling Burgess, Victor Lardent, en Stanley
Morison voor Monotype.
Times was ontworpen door Stanley Morison en Walter Tracy voor Linotype.

Beide zijn normale schreef lettertypes, en zijn bijna identiek. Deze set bevat naast
deze twee types ook de familie schreven.

body{
font-family:'Times New Roman',Times,serif;
}

16

De 5 font families

De vaste spatiëring set

Courier New is ontworpen door Howard Kettler voor Ascender.
Courier was ontworpen door Howard Kettler voor Linotype.

Beide hebben een vaste spatiëring , geschikt als voorbeeld van computer
programmeer code. Deze set bevat naast deze twee types ook de familie monospace.

body{
font-family:'Courier New','Courier',monospace;
}

17

Bitmap uitvoering
Voor Webtypogra e kan men zich best beperken tot lettertypes waarvan de bitmap
uitvoering geschikt is voor langere teksten.
Schreven (zoals bij de Times, of Bodoni) zijn hier niet goed voor, omdat
geprobeerd is met de beschikbare pixels de schreef weer te geven.

• Schreven worden sterk met drukwerk geassocieerd en hebben een complexe
vorm die zich moeilijk tot een opbouw uit pixels verhoudt.
Dit leidt over het algemeen tot een onrustig tekstbeeld.

• Schree ozen (zoals Verdana ) lenen zich in de meeste situaties op het
beeldscherm beter voor de weergave van langere teksten.

Dit is een tekst in de Times (10 punt)
Dit is een tekst in Verdana (10 punt)

18

Bitmap - Vector

19

Webletter / printletter

Op papier kun je de Times aangenaam lezen, maar op het scherm verliest deze
typische krantenletter al gauw zijn kenmerkende details.

In het grove pixelgrid van een beeldscherm is geen plaats voor een Times 12 met
fraaie dik/dun verschillen of een subtiele schreef.

Times New Roman (12 punt)

Voor koppen voldoet de Arial heel aardig, maar in de kleine corpsen is de spatiëring
op het scherm zo beroerd dat letters met elkaar gaan kleven. Een woord als ‘harnas’
wordt dan al gauw ‘hamas’ doordat het boogje van de ‘r’ min of meer vastgeplakt
zit aan de ‘n’.
Arial (10 punt) harnas

20

Verdana: schermfont

De voorlopige oplossing van het schermprobleem:
In 1994 gaf Microsoft aan Matthew Carter de opdracht om een systeemfont te
ontwikkelen voor Windows 95. Verdana zou uitgroeien tot één van de populairste
fonts van het internet.

Omdat de Verdana vooral op het scherm moest presteren en in mindere mate op
papier, besloot Carter de schermletter als uitgangspunt te nemen voor het
printerfont en niet andersom.
Simpel gezegd maakte hij eerst de bitmap fonts en tekende daar later de outlines
omheen voor de printerfonts.

21

Verdana / Arial

Vergeleken met de Verdana verbleekt de Arial op vele fronten.

• De Verdana heeft een grotere x-hoogte,
• bredere letters,
• grotere openingen in de karakters
• en een duidelijk contrast tussen romein en vet.
• Karakters als de onderkast i, j, l, de kapitalen I, J en L en het cijfer 1 zijn
duidelijk van elkaar te onderscheiden en er is speciale aandacht besteed aan de
uitvoering van ligaturen als ﬀ, en .
• Bovendien is de letterspatiëring extra groot zodat de onderlinge karakters elkaar
niet raken.
In een interview met Webreview zei Carter ooit dat niet alleen de spatiëring zelf
maar ook de regelmatigheid ervan de unieke eigenschappen van de Verdana
bepalen.

22

Georgia: web schreeﬂetter

Diezelfde regelmatigheid vinden we ook terug in de Georgia, een voor
het beeldscherm ontworpen schree etter die Carter in 1997 ontwierp.
Ook hier is voldaan aan alle voorwaarden waar een goed leesbare schermletter aan
moet voldoen:

• De Georgia is een heldere letter die het heel goed doet in de kleinere
corpsgroottes.
• Zelfs op een corpsgrootte van 9 punten behoudt de Georgia het karakter van
een traditionele schree etter en blijft de letter bijzonder goed leesbaar.
• Net als de Verdana kun je de Georgia ongestraft cursief zetten zonder dat de
boel onmiddellijk onleesbaar wordt.

23

BESLUIT:
Times New Roman, Helvetica en Arial zijn populair omdat ze makkelijk lezen op
papier , maar deze types zijn niet ontworpen voor een computerscherm

Microsoft heeft speciaal 2 lettertypen laten ontwerpen die ergonomisch geschikt
zijn om van een beeldscherm gelezen te worden.

Verdana (schreefloos) 18punt
Georgia (met schreef) 18 punt

Verdana (schreefloos) 10punt
Georgia (met schreef) 10 punt

24

bitmap lettertypen

de laatste jaren verschijnen links en rechts minuscule bitmap lettertypen die zich
helemaal op hun gemak voelen op de pixels van een beeldscherm.

De kunst is om op die paar pixels een consistent letterbeeld te creëren waarbij het
onderscheid tussen de afzonderlijke karakters nog duidelijk waarneembaar is.

Populaire voorbeelden zijn Silkscreen van Jason Kottke en Sevenet van Peter
Bruhn, maar de beste pixelfonts zijn afkomstig van Joe Gillespie, de vormgever en
webmaster van Web Page Design for Designers. Op basis van zijn eerste letter, de
Mini 7, heeft Gillespie inmiddels een hele familie pixelfonts afgeleverd.

25

Pixelfonts

Silkscreen - http://kottke.org/plus/type/silkscreen/

Mini 7 e.a. - http://minifonts.com/mini7.html

Webfonts

FontShop webfonts - http://www.fontshop.com/blog/?cat=80

Typekit - http://typekit.com/

Google Font API & Font directory - http://code.google.com/intl/nl/apis/webfonts/

26

Webtypografie websave 2010

Recommended

Recommended

More Related Content

Featured

Featured (20)

Webtypografie websave 2010