Typografie

In journalistieke producten draait het altijd om de leesbaarheid. Leesbaarheid van het artikel, de pagina, de alinea, het woord en de letter. Het boek Beeldtaal, geeft in hoofdstuk 8, Typografie, tekst en uitleg over de laatste vier aspecten.

Typografie voor het web

Websites bieden minder typografische opties dan drukwerk. Het grote voordeel van digitale artikelen op het wereldwijde web is dat ze op allerlei apparaten te lezen zijn. Dat heeft een prijs. Zo moeten de lettertypen waarmee het artikel is opgemaakt op het apparaat van de bezoeker aanwezig zijn. Is dat lettertype er niet, dan wordt het vervangen door een font dat wel beschikbaar is.

In te stellen opties voor webpagina’s zijn: lettergrootte, regelafstand, letterafstand, woordafstand, klein kapitaal, inspringende eerste regel, inspringende alinea, vet, cursief, regellengte, kolombreedte, uitlijnen en uitvullen. En natuurlijk de kleur van tekst en van de achtergrond.

Nogmaals, zorg voor lekker leesbare teksten. Door met regellengte, lettertype en lettergrootte te varieren, kom je uit op 50 tot 55 tekens, 10 tot 12 woorden per regel.
Voor beeldscherm geldt een minimale regelhoogte van 1.3 em. Voor een beetje lucht tussen de regels. (= 130% van hoofdletter M)

Veilige lettertypen

Gebruik voor de broodtekst veilige webfonts: beschikbaar op iedere computer.
Times New Roman [win] en Times [mac]:
The quick brown fox jumps over the lazy dog 1234567890
Arial [win] en Helvetica [mac]:
The quick brown fox jumps over the lazy dog 1234567890
Georgia:
The quick brown fox jumps over the lazy dog 1234567890
Verdana en Geneva:
The quick brown fox jumps over the lazy dog 1234567890
Trebuchet MS:
The quick brown fox jumps over the lazy dog 1234567890
Impact:
The quick brown fox jumps over the lazy dog 1234567890
Comic Sans MS:
The quick brown fox jumps over the lazy dog 1234567890
• Calibri:
The quick brown fox jumps over the lazy dog 1234567890
• Cambria:
The quick brown fox jumps over the lazy dog 1234567890

Steeds meer font-families zoals Verdana, Calibri en Cambria worden speciaal gemaakt voor beeldscherm. Ze bestaan uit meerdere fonts [regular, bold, italic], die, afhankelijk van de lettergrootte, getoond worden.

Voor deze pagina staat ingesteld: font-family: ‘Droid Sans’, arial, sans-serif;

Meer lettertypen

Er zijn steeds meer mogelijkheden om lettertypen te importeren in je website. En om te embedden in je pagina. Je maakt dan een link naar Microsoft WEFTGoogle’s WebfontsAdobe’s TypekitOpentype Fonts of WOFF fonts. Van daaruit worden de fonts in de browser van de bezoeker geladen.

En dan maar hopen dat de browser van de bezoeker er weg mee weet. Dat werkt nog niet optimaal.

Dit is bijvoorbeeld Original Surfer, geïmporteerd van Google.

Welk lettertype te kiezen

Er is al veel geschreven over de beleving van lettertypen. Uitganspunt is je doelstelling. En, nogmaals, leesbaarheidLesbarkeit und Ästhetik.

Naar aanleiding van de wereldwijde discussie (en gescheld) over het het gebruik van Comic Sans is er onderzoek gedaan naar de effectiviteit van fonts [onderzoek.pdf]

Interessant voor beginners: dit artikel in The Daily Egg.

Waarbij het advies is om maximaal drie verschillende lettertypen per website te gebruiken.

Kijk verder