Ok, de titel heeft een klein beetje uitleg nodig. Ik heb ooit het vak typografie gehad op de Kunstacademie van een vakidioot waar ik achteraf toch wel van hield. Typografie is het vak van letters en lettertypes (fonts). Hij legde uit dat als je letters leest, dus als het storend is voor je ogen, dat dan de typografie slecht gedaan was. Met andere woorden, 9 van de 10x lees je over de letters heen en ben je niet bewust van de lettertypes en dat is maar goed ook!

Ik moest toen een onderzoek doen naar typografie en ik besloot het boek Letterfontein te kopen. Daar heb ik diverse dingen van geleerd. Later heb ik 3 jaar als DTP’er gewerkt en veel magazines en boeken opgemaakt. Hierdoor is mijn Letterliefde nog meer aangewakkerd. Inmiddels vertaal ik dit soort old-scool typografische kennis naar het web en hieronder dus 12+1 tips om je teksten op de website of in je branding beter te laten ogen. Waardoor je dus er overheen leest, in de goede zin van het woord.

1. Maximale woord-breedte per regel

Dit zou tussen de 8-12 woorden moeten zijn. Uitgaand van een desktop. Op een tablet is dat alleen maar minder en op mobiel nog minder. Oftewel als gevolg daarop voor ideale leesbaarheid hanteer je ruime wit-marges (witmarges). Dit geeft je ogen rust en maakt het fijner leesbaar. En gebruik echt nooit uitvullen op een klein scherm. Het lijkt mooier om de tekst in een blokvorm te presenteren maar je krijgt een gatenkaas aan spaties tussen je woorden.

2. Ideale leesbaarheid op desktop

Voor ideale leesbaarheid hanteer op desktop website voor leestekst 18px grootte. Voor smartphone 60-75% grootte van de desktop versie, dus 10 – 13,5px. Uiteraard verschilt dit per lettertype. Lettertypes met een hoge x-hoogte (Uitleg link Wikipedia) hebben minder regelafstand nodig omdat zulke tekst beter leesbaar is.

De term komt van het opmeten van de letter ‘x’, x is een maateenheid voor alle kleine letters zonder uitsteeksels. Zoals de a, c, e, i, m, n, o, r, s, t, u, v, w, x, z. Een b, d, f, g, h, j, k, l, p, q, y zijn dus uitstekende letters. Ook wel stok of staart genoemd. Stok is een lijn uitstekend naar boven, staart naar onderen.

3. High—end look met koppen

Gebruik voor een high—end look schreeflettertypes voor de koppen en zet ze in FULLCAPS (HOOFDLETTERS/KAPITALEN). Of kies bewust voor iets anders wat afwijkend is. Ja dat komt schreeuwerig over misschien maar je maakt een statement! Dare to be BOLD!

4. #KISS; Keep it stupid simple, maximaal 2 fonts*

Gebruik voor de juiste style een mix van maximaal 2 fonts waarbinnen je het simpel houdt. O en een font is Engels voor lettertype. Voor online gold vroeger dat je een web-font (webfont, wwf of eof) moest kiezen en beperkt was. Sommige zweren bij 1 font, dit zou de snelheid van je website ten goede komen. Dat is opzich waar, maar een goed design scoort uiteindelijk ook op de gebruiksvriendelijkheid en een paar miliseconden langer doet daar niet zoveel aan af. Zegmaar een goede User Experience (UX-Design) komt ook door een mooi font.

*ps. Master the rules before you break the rules.

5. Gratis Google Fonts

Tegenwoordig kan je met Google Fonts een scala aan gratis fonts kiezen. Je design ziet er al snel beter uit als je afwijkt van de standaard fonts. Kies voor leestekst wel een leesbaar font, anders wordt lezen vermoeiend en haken mensen af. Koppen kunnen wel in een fancy font.

6. Kies voor een mix van 2 verschillende fonts

Kies wel versies die niet op elkaar lijken. Dus bijvoorbeeld alternatief + sans-serif.

Contrast is key, net als in de mode. Als alles hetzelfde is wordt het saai, maar teveel extreem contrast wordt schreeuwerig en past niet bij elkaar, het gaat om de juiste verhouding.

7. Verder over contrast; pas variatie in groottes toe voor verschillende soorten tekst,

koppen groter, leestekst kleiner. Zo kan je met één stijl lettertype al enorm variëren zonder dat je een kermis aan letterstijlen gebruikt binnen datzelfde lettertype (bijvoorbeeld bold, cursief, CAPS, light) Keep it simple en stylish!

8. Bekende lettertypes hebben zichzelf bewezen en zijn dus in principe goed.

Zoals Times New Roman of Arial of Helvetica. Alleen wat er bij mij op het Grafisch Lyceum als eerste uitgestampt werd is dus die bekende standaard lettertypes. Ze zijn goed maar niet meer bijzonder. Je valt niet meer op. Mensen met een uitgesproken Karakter worden beter onthouden, zo ook met lettertypes.

9. Lettertypes hebben een bepaalde associatie.

Times New Roman werd voor de krant de Times ontwikkeld, een klassieker dus. Helvetica was modern en werd een poosje door Apple gebruikt. Zelf gebruikte ik vroeger Open Sans voor de leestekst en intro’s en Bebas Neue voor de koppen.

Inmiddels gebruik ik Radnika (Light) voor de paragraaf tekst, Radnika (Regular) voor koppen H2-H5 en Work Sans Heavy (900) voor de H1 koppen. Work Sans Heavy vond ik wel passen bij de Rotterdamse directheid waar ik van hou. En voor microtypografie (details) gebruik ik Antonio Regular zoals je kan zien in de comment count, hint: make it count, laat je reactie onder achter, vind ik leuk! Hoewel ik Helvetica Neue dus een mooi font vind, is het iets te cliché.

Hierbij heb ik nog een extra font voor quotes en blog koppen (zie bovenaan, Work Sans in Light versie) omdat ik onderscheid wou maken tussen inspirerende Blog content en zakelijke content.

Ik breek dus m’n eigen regels maar dat kan heel goed zolang je weet wat je doet. Bij twijfel: follow the rules!

10. Nog een tip. Speel met regelafstand en letterspatiëring.

Teveel regelafstand in Koppen ziet er niet uit. Zie lettertypes als grafische elementen waarmee je een stijl neer kan zetten. De ‘zwartheid’ van een tekst geeft een bepaalde look. Zwartheid zie je als je van een afstand naar de tekst kijkt en de letters ziet als een vlak in plaats van tekst. Hoe vetter de tekst hoe zwarter en dus hoe meer ‘into your face’. Subtiele boodschappen wil je dus licht hebben en niet vet. Dat kan dus door regelafstand en spatiëring gewoon met de tekst in Regular of Light zonder dus in Bold te zetten. Misschien een tip voor gevorderden maar je gaat het verschil merken als je het eenmaal weet.

11. Geef genoeg witruimte na een enter zodat je ziet dat een alinea over is, afgelopen dus.

Maar niet te weinig dat het bijna net zoveel is als de regelafstand. Een mooie verhouding is 1,25em — 1,5em. Waarbij 1 dan de normale regelafstand is en die 0,25/0,5 extra halve regel afstand. Dus bijvoorbeeld 18pt (punten) x 1,25 (1+0,25) = 22,5pt regelafstand. Al geldt deze verhouding vooral voor leestekst tot maximaal 16pt. Stel 12pt x 1,25 = 15pt regelafstand. Bij koppen kies ik voor minder regelafstand, zie vorig punt 10 .

12. Nog een tip. Lees je eigen teksten op je smartphone

Lees de teksten van jouw website op je smartphone, en doe net alsof jij jouw klant bent. Is het fijn leesbaar? Zonder leesbril? Begrijpelijk? Probeer het eenvoudig te houden. #KISS.

13. Finally, schrijf ook gewoon goede content.

Inhoudelijk goed en fijn opgemaakt. Maximaal 4-5 regels per alinea en gebruik voldoende enters tussen alinea’s en tussenkopjes aan het begin van een alinea.