Webtypografie websave 2010

Letters op het beeldscherm

Webtypografie

1donderdag 14 oktober 2010

Typografie 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/


http://www.youwillnotbelieve.us

http://www.youwillnotbelieve.us

http://media.twitter.com

http://media.twitter.com

Richtlijnen voor web typografie

CONTRASTTekst 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 leukVoor een kort tekstje. Maar erg vermoeiend voor lange tekst.



GROOTTEVormgevers 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


Richtlijnen voor webtypografie

HIËRARCHIEAandachtspunten 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




WITRUIMTELaat je tekst ademenGeen vrees voor lege ruimteRegelafstand van (best) 140% van je tekstgrootte leest vlotter



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.



9

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

donderdag 14 oktober 2010


font-family: Arial, Helvetica, sans-serif; font-family: ‘Arial Black’, Gadget, sans-serif; font-family: ‘Bookman Old Style’, serif; font-family: ‘Comic Sans MS’, cursive; font-family: Courier, monospace; font-family: ‘Courier New’, Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: ‘Lucida Console’, Monaco, monospace; font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif; font-family: ‘MS Sans Serif ’, Geneva, sans-serif; font-family: ‘MS Serif ’, ‘New York’, sans-serif; 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

De browser gaat eerst op zoek naar het eerste lettertype, kan hij deze niet vinden dan neemt hij de tweede enz.

Kande browser geen enkel vinden, dan gaat hij het standaard lettertype van de OS gebruiken. (zoals Times)

donderdag 14 oktober 2010


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.


De 5 font familie sets

FONT FAMILY STACKSLettertypes 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 effect 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.


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;}


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 Hoffmann 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;}


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 Zapff 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;}


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;}


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;}


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)


Bitmap - Vector


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


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.


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 ff, ! 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.


Georgia: web schreefletter

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.


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) 18puntGeorgia (met schreef) 18 punt

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


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.


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/


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

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

http://minifonts.com/mini7.html

http://minifonts.com/mini7.html

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

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

http://code.google.com/intl/nl/apis/webfonts/

http://code.google.com/intl/nl/apis/webfonts/

Education

Webtypografie websave 2010