Sommige woorden zien er raar uit zonder dat je kunt aanwijzen waarom. Er valt een gat tussen twee letters, of juist twee letters plakken aan elkaar. Bij een gewone tekstregel merk je dat nauwelijks. Bij een logo of een grote kop springt het er meteen uit.
Dat komt door kerning: de ruimte tussen twee specifieke letters.
Het speelt vooral bij letters met schuine of ronde vormen. Een hoofdletter A naast een V bijvoorbeeld, of een T naast een kleine letter o.
Bij een logo-ontwerp besteed ik daar tijd aan. Een merknaam zie je duizenden keren, op je website, je bestelbus en je facturen. Een gat tussen twee letters blijft dan irriteren. Ook al kan niemand benoemen wat er precies wringt.
De ruimte tussen twee letters, en waarom die soms wringt.
Wat is kerning?
Kerning is het aanpassen van de letterafstand tussen twee specifieke letters. Het gaat dus niet over de hele tekst, maar over een enkel paar.
Elk lettertype heeft die informatie ingebouwd. De ontwerper heeft vastgelegd hoeveel ruimte er hoort tussen een A en een V. En tussen honderden andere combinaties.
Waarom het nodig is
Omdat letters geen blokjes zijn. Een T heeft bovenaan een dak en onderaan een smalle voet. Zet je daar een a naast, dan ontstaat er onderaan een gat.
Optisch klopt gelijke afstand dus niet. Je oog wil gelijke ruimte zien, en dat is iets anders dan gelijke afstand meten. Dat heet optisch uitlijnen.
Het verschil met tracking
Die twee worden vaak verward. Kerning gaat over een enkel letterpaar. tracking gaat over de ruimte in een hele tekst.
In webdesign werk je bijna altijd met tracking. Je stelt in dat een grote kop iets strakker staat. Of dat hoofdletters juist iets ruimer mogen.
Echte kerning per letterpaar doe je zelden in een browser. Dat is werk voor een logo of voor drukwerk.
Wanneer je er iets aan doet
Drie momenten die ertoe doen
Bij het ontwerpen van een logo, letter voor letter.
Bij grote koppen, waar afstanden meeschalen en dus opvallen.
Bij losse woorden in hoofdletters, want die staan van nature te ruim.
Bij lopende tekst laat je het met rust. Het lettertype doet zijn werk en jij hoeft niets bij te stellen.
Instellen op een website
In CSS regel je dit met een eigenschap voor letterafstand. Je geeft een waarde op in em, zodat het meeschaalt met de lettergrootte.
Ik gebruik daarvoor negatieve waarden bij grote koppen, meestal rond de min twee honderdsten. Bij kleine tekst laat ik het op de standaard staan.
Leg die keuzes vast in je design system, samen met je lettergroottes. Anders verschilt elke pagina net iets.
Leesbaarheid
Te strak is erger dan te ruim. Letters die aan elkaar plakken kosten je lezer moeite, ook al ziet het er strak uit.
Voor mensen met dyslexie of een visuele beperking weegt dat zwaarder. Overdrijf het strakke dus niet, zeker niet in lopende tekst. Dat hoort bij accessibility.
De leesbaarheid wint het altijd van de esthetiek. Kijk daarnaast ook naar je lettertype zelf, want daar begint het.
Waarom je logo eruit springt
Een merknaam wordt vaak in hoofdletters gezet, en die staan van nature te ruim. Lettertypen zijn namelijk ontworpen op gemengde tekst.
Bij een logo loont het daarom om per letterpaar te kijken. Dat is werk van een uur dat je duizenden keren terugziet.
Test het op klein formaat
Verklein je logo naar de grootte van een favicon en kijk of het nog klopt. Gaten en botsingen vallen dan het duidelijkst op.
Doe daarna hetzelfde op groot formaat, bijvoorbeeld op een bestelbus. Wat in het midden goed staat, kan aan beide uitersten wringen.
Meer vragen over Kerning
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Kerning gaat over een enkel letterpaar. Tracking gaat over de ruimte in een hele tekst.
Dat onderscheid is belangrijk omdat je ze op andere momenten gebruikt. Kerning pas je aan bij het ontwerpen van een logo, letter voor letter.
Tracking stel je in voor een hele kop of een hele alinea. Bijvoorbeeld dat je grote koppen iets strakker staan, of dat losse woorden in hoofdletters juist ruimer mogen.
In webdesign werk je bijna altijd met tracking. Echte kerning per letterpaar doe je zelden in een browser, want dat is nauwelijks te beheren.
Dat is werk voor een logo of voor drukwerk, waar je met een ontwerpprogramma per letter kunt bijstellen. Op een website is dat overdreven en onhoudbaar.
Onthoud het als paar tegenover geheel. Kerning is een letterpaar, tracking is een hele tekst. Dat onderscheid voorkomt de meeste verwarring in een gesprek met je ontwerper. Gebruik die woorden ook zo in je gesprek, dan praat je over hetzelfde.
Wat is het verschil tussen kerning en tracking?
Kerning is het aanpassen van de ruimte tussen twee specifieke letters. Het gaat dus niet over je hele tekst, maar over een enkel letterpaar.
Elk lettertype heeft die informatie ingebouwd. De ontwerper heeft vastgelegd hoeveel ruimte er hoort tussen een A en een V, en tussen honderden andere combinaties.
Dat is nodig omdat letters geen blokjes zijn. Een T heeft bovenaan een dak en onderaan een smalle voet. Zet je daar een a naast, dan ontstaat er onderaan een gat.
Optisch klopt gelijke afstand dus niet. Je oog wil gelijke ruimte zien, en dat is iets anders dan gelijke afstand meten.
Bij lopende tekst merk je het nauwelijks. Bij een logo of een grote kop springt het er meteen uit, ook al kan niemand aanwijzen wat er precies wringt.
Je hoeft hier zelf niets mee te doen bij een gewone tekstpagina. Het speelt bij je logo en je grote koppen, en daar is het een detail dat blijft opvallen.
Wanneer pas je letterafstand aan?
Op drie momenten, en verder eigenlijk niet.
Bij het ontwerpen van een logo. Een merknaam zie je duizenden keren, dus daar is elke letter het bekijken waard.
Bij grote koppen. Daar schalen afstanden mee, waardoor gaten die op klein formaat onzichtbaar zijn ineens opvallen.
En bij losse woorden in hoofdletters. Die staan van nature te ruim, want lettertypen zijn ontworpen op gemengde tekst.
Bij lopende tekst laat je het met rust. Het lettertype doet zijn werk en jij hoeft niets bij te stellen.
Dat is de belangrijkste regel. Wie aan de letterafstand van zijn broodtekst gaat sleutelen, maakt het bijna altijd slechter in plaats van beter.
Laat de letterafstand van je lopende tekst met rust. Wie daaraan gaat sleutelen, maakt het bijna altijd slechter in plaats van beter. Vertrouw op het lettertype, want de ontwerper heeft dit werk al voor je gedaan. Beperk je aandacht tot je logo en je grote koppen.
Hoe stel je letterafstand in op een website?
In CSS regel je dit met een eigenschap voor letterafstand. Je geeft een waarde op in em, zodat het meeschaalt met de lettergrootte.
Dat laatste is belangrijk. Werk je met vaste pixels, dan klopt de verhouding niet meer zodra je kop op een telefoon kleiner wordt.
Ik gebruik negatieve waarden bij grote koppen, meestal rond de min twee honderdsten. Bij kleine tekst laat ik het op de standaard staan.
Voor woorden in hoofdletters gebruik ik juist een positieve waarde, want die staan anders te krap op elkaar.
Leg die keuzes vast in je design system, samen met je lettergroottes. Anders verschilt elke pagina net iets en zie je dat terug als onrust.
Gebruik altijd een waarde die meeschaalt met je lettergrootte. Werk je met vaste pixels, dan klopt de verhouding niet meer op een klein scherm. Leg die waarden vast per koptype, dan blijft het over je hele site gelijk.
Beinvloedt letterafstand de leesbaarheid?
Zeker, en te strak is erger dan te ruim.
Letters die aan elkaar plakken kosten je lezer moeite, ook al ziet het er strak en modern uit. Je oog moet dan werk doen om woorden te scheiden.
Voor mensen met dyslexie of een visuele beperking weegt dat zwaarder. Zij hebben juist baat bij iets meer ruimte tussen letters en woorden.
Overdrijf het strakke dus niet, zeker niet in lopende tekst. Een kop mag strak staan, een alinea van tien regels niet.
De leesbaarheid wint het altijd van de esthetiek. Twijfel je? Lees je eigen tekst dan een keer op een telefoon in fel daglicht. Dat is de strengste situatie die je hebt. Meer daarover lees je bij accessibility.
Lees je eigen tekst een keer op een telefoon in fel daglicht. Dat is de strengste situatie die je hebt, en daar zie je meteen of het te strak staat. Vraag ook iemand van boven de vijftig om mee te lezen, dat is een strenge en eerlijke test.
Ziet jouw logo of je koptekst er net niet gelijkmatig uit? Stuur me een afbeelding of de link naar je website via het formulier hieronder. Ik kijk waar de letterafstand wringt en wat eraan te doen is. Vaak zit het in een enkel letterpaar. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Letterspatiering, onderlinge letterafstand
