Lettertype website: zo kies je het juiste font

Een lettertype is de vormgeving van een complete set letters, cijfers en tekens. Denk aan Arial, Georgia of Roboto. Elk lettertype heeft een eigen karakter, van zakelijk en strak tot warm en speels.

Een font is strikt genomen één bestand binnen dat lettertype, in één dikte en stijl. Roboto Bold en Roboto Italic zijn dus twee fonts van hetzelfde lettertype. In het dagelijks gebruik zeggen mensen font en lettertype door elkaar.

Een letterfamilie is de hele groep: alle diktes, breedtes en cursieve varianten bij elkaar. Kies je een familie met veel varianten, dan heb je volop ruimte voor koppen, tekst en knoppen.

Er bestaan duizenden lettertypes. Ze vallen grofweg in zes soorten, elk met een eigen gevoel en een eigen plek op je website.

1. Schreef (serif)Letters met kleine voetjes aan de uiteinden, zoals Georgia, Merriweather of Playfair Display. Ze voelen klassiek, betrouwbaar en verfijnd. Sterk voor advocaten, notarissen, restaurants en merken met een chique uitstraling.
2. Schreefloos (sans-serif)Strakke letters met rechte uiteinden, zoals Inter, Roboto of Open Sans. Ze lezen prettig op schermen en voelen modern en helder. De meeste websites gebruiken een schreefloze letter voor de lopende tekst.
3. Slab serifEen schreef met dikke, blokvormige voetjes, zoals Roboto Slab of Rockwell. Stevig en opvallend. Past goed bij bouw, techniek en merken die stoer en solide willen overkomen.
4. ScriptLetters die op handschrift of kalligrafie lijken, zoals Pacifico of Great Vibes. Persoonlijk en sierlijk. Gebruik ze spaarzaam, voor een logo of een korte kop.
5. DisplayOpvallende letters voor groot formaat, zoals Bebas Neue of Abril Fatface. Ze geven karakter aan koppen en banners. Voor lange teksten kies je een rustigere letter.
6. MonospaceElke letter is even breed, zoals bij Courier of JetBrains Mono. Bekend van code en typemachines. Handig voor technische merken, prijslijsten of een bewust retro gevoel.

Een goed lettertype kiezen begint bij de lezer. Je bezoeker wil snel en prettig lezen, op een telefoon net zo goed als op een groot scherm. Daarna komt de vraag welk gevoel je merk uitstraalt.

1. Leesbaarheid eerstKies voor lopende tekst een letter met open vormen, een ruime x-hoogte en duidelijk verschil tussen tekens als l, I en 1. Zo blijft tekst prettig leesbaar, ook op een klein scherm.
2. Past bij je merkEen tandarts wil rust en vertrouwen uitstralen, een skatewinkel energie. Leg drie woorden vast die je merk beschrijven en kies een letter die daar visueel bij past.
3. Ken je doelgroepOudere lezers waarderen een grotere, rustige letter. Een jong publiek staat open voor meer karakter in de koppen. Stem je keuze af op wie je klant is.
4. Volledige tekensetCheck of het lettertype alle tekens heeft die je gebruikt, zoals ë, é, ï en het euroteken. Nederlandse teksten vragen om goede trema's en accenten.
5. Genoeg diktesEen familie met minstens een regular, een semibold en een bold geeft je ruimte voor tekst, tussenkoppen en knoppen.
6. Test het in het echtZet je eigen teksten in het lettertype en bekijk ze op je telefoon, tablet en laptop. Een letter die mooi oogt in een voorbeeld, voelt in een lange alinea soms anders.

Twee letterfamilies is voor de meeste websites de beste keuze. Eén voor de koppen en één voor de tekst. Met meer families oogt een pagina snel onrustig en laadt hij trager.

Een veilige combinatie is een schreef voor de koppen met een schreefloze letter voor de tekst, of andersom. Het contrast maakt direct duidelijk wat een kop is en wat leestekst.

Werk je liever met één familie, dan maak je het verschil met dikte en grootte. Een bold kop en een regular tekst van dezelfde familie geven een rustig en strak geheel.

1. Playfair Display met Source Sans 3Klassieke, elegante koppen met een heldere leestekst. Mooi voor horeca, mode en interieur.
2. Montserrat met MerriweatherModerne, brede koppen met een warme, goed leesbare schreef voor lange teksten.
3. Inter met InterEén familie in verschillende diktes. Strak, zakelijk en snel, ideaal voor tech en dienstverlening.

Zet de lopende tekst op minimaal 16 pixels. Dat is de standaardgrootte van browsers en leest prettig op een telefoon. Voor lange teksten werkt 17 of 18 pixels vaak nog beter.

De regelafstand voor lopende tekst ligt meestal rond 1,5 keer de lettergrootte. Koppen mogen strakker. Houd de regellengte op ongeveer 50 tot 75 tekens, zo vindt het oog makkelijk de volgende regel.

Zorg ook voor genoeg contrast tussen letter en achtergrond. De WCAG-richtlijnen vragen een contrastverhouding van minimaal 4,5 op 1 voor gewone tekst. Deze richtwaarden zijn een goed startpunt:

Elk lettertype is een bestand dat de browser eerst downloadt. Gebruik je veel families en diktes, dan wacht je bezoeker langer op de tekst. Dat zie je terug in de laadtijd en in het Core Web Vitals-rapport van Google Search Console.

1. Kies WOFF2Het modernste formaat voor webfonts, compact en ondersteund door alle actuele browsers. Voor een moderne website is dit het enige formaat dat je nodig hebt.
2. Laad alleen wat je gebruiktTwee of drie diktes per familie zijn meestal genoeg. Elke extra dikte is een extra bestand.
3. Gebruik font-display: swapMet deze CSS-regel toont de browser de tekst direct in een systeemletter en wisselt hij naar je lettertype zodra dat geladen is. Je bezoeker kan meteen lezen.
4. Preload je belangrijkste fontMet een preload-regel in de head haalt de browser het lettertype van je tekst of koppen als eerste op. Zo staat de pagina sneller in de juiste letter.
5. Variabele fontsEén bestand met alle diktes erin. Handig als je veel diktes gebruikt, want dan laad je één bestand voor de hele familie.
6. Host je fonts zelfZet de bestanden op je eigen server. Dat scheelt een verbinding met een externe partij en geeft je volledige controle over snelheid en privacy.

Een lettertype is creatief werk en valt onder het auteursrecht. Voor een website heb je een licentie nodig die webgebruik toestaat. Een desktoplicentie geldt vaak alleen voor je eigen computer en drukwerk.

Laad je Google Fonts via de servers van Google, dan gaat het IP-adres van je bezoeker naar Google. Een Duitse rechtbank oordeelde in 2022 dat dit in strijd was met de AVG. Zelf hosten is daarom de veilige keuze.

1. Google FontsGratis lettertypes, de meeste onder de SIL Open Font License. Je mag ze gebruiken, aanpassen en zelf hosten, ook voor commerciële websites.
2. Adobe FontsOnderdeel van een Creative Cloud-abonnement. Je gebruikt de fonts op je website via een webproject, zolang je abonnement loopt.
3. Commerciële lettertypesTe koop bij letterontwerpers en sites als MyFonts. Je betaalt vaak per domein of per aantal paginaweergaven. Lees de voorwaarden goed voordat je koopt.
4. SysteemlettersLetters die al op het apparaat van je bezoeker staan, zoals Arial, Georgia of de systeemletter van Apple en Android. Ze laden direct en zijn gratis.

Bij een premium 3D-design op maat hoort een lettertype dat bij je merk past. Wij bouwen je complete website eerst gratis, in eigen code op servers van Hetzner in Duitsland.

Je ziet het resultaat in een online showcase van 15 minuten en betaalt pas als je tevreden bent. Kies je voor ons, dan staat je website binnen twee weken live. Twee maanden na livegang kies je opnieuw, met geld-terug-garantie.

Standaard zit erin: online afspraken plannen, een lead magnet voor je vak, een AI-chatbot, opvolging via e-mail en WhatsApp, review-opvolging en maandelijkse SEO. Onze klanten geven ons een 4,9 uit 5 op Google.