Kerning vs Letter Spacing: Wat Is Het Verschil Eigenlijk?

Ik hoor het vaak genoeg: "Joh, geef die tekst gewoon wat meer ruimte, toch?" Maar als je wilt dat je website eruitziet als een digitale parel en niet als een mislukte hobby-site, moet je het verschil weten tussen kerning en letter-spacing (ook wel tracking genoemd). Zeker in CSS (de taal die je website stijl geeft) maken deze kleine details het grote verschil.

Kerning: Focus op de Details

Kerning is chirurgische precisie. Het gaat om de ruimte tussen twee specifieke letters.

• In Design Software: Je schuift die 'A' en 'V' handmatig naar elkaar toe.
• In CSS: Je gebruikt font-kerning: normal;. Hiermee vertel je de browser om de slimme kerning-info te gebruiken die de font-ontwerper heeft meegegeven.

Letter Spacing: De Grove Bezem

Letter spacing pas je toe op je hele tekst. Het schuift álle letters even ver uit elkaar of naar elkaar toe.

• In CSS: Je gebruikt letter-spacing: 0.05em;.
• Gebruik: Ideaal om een headline wat meer autoriteit te geven of een tekstblok 'rustiger' te maken.

De Grote Verschil-Tabel

Waarom moet je dit weten voor je website?

Als je letter-spacing te enthousiast gebruikt op je website, vallen woorden uit elkaar. Gebruikers moeten dan 'puzzelen' in plaats van lezen. Aan de andere kant: zonder font-kerning op je grote homepage-titel zie je direct dat er gaten vallen bij hoofdletters, wat gewoon slordig staat.

De Animator's Web-Hacks

1. Gebruik em-units: Voor letter-spacing in CSS gebruik je bijna altijd em. Dat schaalt mee als je de lettergrootte aanpast.
2. Minder is meer: Een heel klein beetje extra letter-spacing (bijvoorbeeld 0.02em) kan een tekst al veel luxer laten ogen.
3. Check mobiel: Wat op je 27-inch scherm lekker ruimtelijk oogt, kan op een iPhone een drama worden. Altijd even checken!

Wil je een website die niet alleen goed werkt, maar er ook typografisch top uitziet? Stuur de Animator een berichtje!