Beste Lettertypen voor Websites (2026): 15 Gratis Google Fonts, Gerangschikt

De beste lettertypen voor websites in 2026: 15 gratis Google Fonts gerangschikt voor broodtekst en koppen, met de licentie, ontwerper, CSS-terugvalstack en combinatie van elk lettertype, plus hoe je lettertypen kiest, combineert en snel laadt.

Veelgestelde vragen

Wat is het beste lettertype voor een website?

Voor broodtekst zijn Inter, Source Sans 3 en Roboto veilige, goed leesbare keuzes: grote x-hoogten, veel gewichten en brede taalondersteuning, allemaal gratis op Google Fonts onder de SIL Open Font License. Voor koppen met persoonlijkheid combineer je een van hen met een serif zoals Lora of Playfair Display. Het beste lettertype is het lettertype dat goed leest op 16 tot 20px op een telefoon met je echte content.

Hoeveel lettertypen moet een website gebruiken?

Eén of twee lettertypefamilies zijn genoeg voor bijna elke site: één voor koppen en één voor broodtekst, of één familie in verschillende gewichten. Elke extra familie voegt visuele ruis en extra bestanden toe om te downloaden.

Welk lettergrootte moet broodtekst op een website hebben?

16px is de gangbare basis en de standaard in de meeste browsers. Veel sites gebruiken 17 tot 20px voor lang leeswerk. Houd de regellengte rond 50 tot 75 tekens en de regelafstand rond 1,5 voor broodtekst.

Zijn Google Fonts gratis te gebruiken op commerciële websites?

Lettertypen in de bibliotheek van Google Fonts zijn uitgebracht onder open licenties, de meeste onder de SIL Open Font License, die commercieel gebruik toestaat. Controleer altijd de vermelde licentie van het specifieke lettertype. Lettertypen van gieterijen of Adobe Fonts hebben hun eigen voorwaarden.

Serif of sans-serif voor een website?

Beide zijn leesbaar op moderne schermen. Sans-serifs voelen doorgaans neutraal en modern; serifs kunnen redactioneel, traditioneel of premium aanvoelen. Kies op basis van de toon die je wilt en test de leesbaarheid op je werkelijke broodtekstformaat, in plaats van een oude regel te volgen dat schermen sans-serif nodig hebben.

Moet ik lettertypen zelf hosten of laden vanaf Google Fonts?

Beide werken. Zelf hosten houdt verzoeken op je eigen domein, geeft volledige controle over caching en voorkomt dat bezoekersgegevens naar een derde partij gaan, wat sommige teams om privacyredenen verkiezen. Welke je ook kiest, gebruik WOFF2-bestanden, laad alleen de gewichten die je gebruikt en stel font-display in.

De beste lettertypen voor websites lezen goed op 16 tot 20px op een telefoon, zijn er in genoeg gewichten, ondersteunen je talen en zijn gelicentieerd voor webgebruik. Onze keuzes hieronder zijn allemaal gratis op Google Fonts en zijn, volgens het licentieveld in de vermelding van elk lettertype in de Google Fonts-repository (gecontroleerd op 28 september 2026), alle 15 uitgebracht onder de SIL Open Font License, die commercieel gebruik en zelf hosten toestaat. De ranglijst is onze redactionele beoordeling op basis van de criteria in deze gids, niet een testresultaat. Na de lijst behandelt de rest van deze gids hoe je lettertypen kiest, combineert en snel laadt.

De beste lettertypen voor websites, gerangschikt

Probeer elke combinatie live, met je eigen tekst, in het gratis lettertypecombinatie-hulpmiddel. De CSS-stack na elke naam is de terugval die we aanbevelen zodat tekst er nog goed uitziet voor (of zonder) het laden van het webfont.

Best voor broodtekst

Inter (sans, door Rasmus Andersson). Ontworpen voor schermen, zeer grote x-hoogte, variabele gewichten van dun tot zwart. De standaard veilige keuze voor productsites en kleine bedrijven. font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
Source Sans 3 (sans, door Paul D. Hunt). Vriendelijker en iets smaller dan Inter; uitstekend voor lang leeswerk. Past bij zijn broer Source Serif 4. font-family: "Source Sans 3", system-ui, sans-serif;
Roboto (sans, door Christian Robertson, ParaType and Font Bureau). Android's langdurige systeemlettertype, dus het voelt vertrouwd; uitgebreide taalondersteuning. font-family: "Roboto", system-ui, Arial, sans-serif;
Open Sans (sans, door Steve Matteson). Neutrale, open lettervormen, leest goed op kleine formaten. font-family: "Open Sans", system-ui, Arial, sans-serif;
Lato (sans, door Łukasz Dziedzic). Warm, licht afgerond; goed voor dienstverlenende bedrijven. font-family: "Lato", system-ui, Arial, sans-serif;
Nunito Sans (sans, door Vernon Adams and others). Zacht en benaderbaar; geschikt voor kinderen, wellness en horeca. font-family: "Nunito Sans", system-ui, sans-serif;
IBM Plex Sans (sans, door Mike Abbink and Bold Monday). Technisch, licht werktuiglijk; onderdeel van een superfamily met Plex Serif en Plex Mono. font-family: "IBM Plex Sans", system-ui, sans-serif;
Merriweather (serif, door Sorkin Type). Stevige tekstserif gebouwd voor schermen; de beste serif voor broodtekst op blogs en juridische of financiële sites. font-family: "Merriweather", Georgia, "Times New Roman", serif;
Lora (serif, door Cyreal). Kalligrafische, leesbare serif die werkt voor broodtekst of koppen. font-family: "Lora", Georgia, serif;

Best voor koppen en merkkarakter

Playfair Display (hoog-contrast serif, door Claus Eggers Sørensen). Elegante koppen voor restaurants, mode en bruiloften. Te fijn voor broodtekst. font-family: "Playfair Display", Georgia, serif;
Montserrat (geometrische sans, door Julieta Ulanovsky and others). Brede, zelfverzekerde koppen; combineer met een smaller broodtekstlettertype. font-family: "Montserrat", system-ui, sans-serif;
Poppins (geometrische sans, door Indian Type Foundry and others). Rond en modern; populair bij startups. Gebruik medium tot vetgedrukte gewichten voor koppen. font-family: "Poppins", system-ui, sans-serif;
DM Sans (laag-contrast geometrische sans, door Colophon Foundry). Schoon en compact; werkt voor koppen en korte UI-tekst. font-family: "DM Sans", system-ui, sans-serif;
Work Sans (grotesque, door Wei Huang). Karaktervol op grote formaten, rustiger op kleine. font-family: "Work Sans", system-ui, sans-serif;
Space Grotesk (eigenzinnige grotesque, door Florian Karsten). Onderscheidende koppen voor tech, ontwerpstudio's en creatieve merken. font-family: "Space Grotesk", system-ui, sans-serif;

Snelle combinaties uit de lijst

Kop	Broodtekst	Sfeer	Geschikt voor
Playfair Display	Source Sans 3	Elegant, klassiek	Restaurants, bruiloften, boetieks
Lora	Inter	Warm redactioneel	Blogs, coaches, consultants
Montserrat	Open Sans	Zelfverzekerd, strak	Ambachtelijke bedrijven, bureaus
Space Grotesk	Inter	Modern, technisch	SaaS, studio's
Merriweather	Source Sans 3	Betrouwbaar	Recht, financiën, uitgeverij
Inter 700	Inter 400	Neutraal, snel (één familie)	Alles; de veiligste standaard

Licentiefeiten

Elk bovenstaand lettertype is vermeld met license: "OFL" in zijn vermelding in Google's eigen Google Fonts-repository (github.com/google/fonts), gecontroleerd op 28 september 2026. De SIL Open Font License staat gebruik op commerciële websites, insluiten en zelf hosten toe; je kunt de lettertypebestanden niet op zichzelf verkopen.
Een klein aantal Google Fonts gebruikt in plaats daarvan de Apache 2.0- of Ubuntu Font-licentie. Controleer de licentie die wordt weergegeven op de pagina van het lettertype op fonts.google.com voordat je een lettertype gebruikt dat niet op deze lijst staat.
Lettertypen van Adobe Fonts of commerciële lettergieterijen hebben hun eigen weblicenties; een desktoplicentie alleen dekt geen website-insluiting.

Stap 1: Kies eerst het broodtekstlettertype

De meeste sites kiezen een kopletter waar ze van houden en zoeken dan iets wat erbij past. Doe het andersom. Broodtekst is wat mensen het meest lezen, en moet werken op kleine formaten op goedkope schermen.

Waar je op let bij het testen van een broodtekstlettertype:

Grote x-hoogte. De hoogte van kleine letters ten opzichte van hoofdletters. Een grotere x-hoogte leest beter op kleine formaten. Vergelijk Inter of Source Sans 3 met een fijne display-serif op 16px en het verschil is duidelijk.
Duidelijke lettervormen. Typ "Il1 O0 rn m" en controleer of de tekens makkelijk uit elkaar te houden zijn. Dat is belangrijk voor prijzen, codes en e-mailadressen.
Open tegenvormen. De omsloten ruimtes in letters zoals e, a en o mogen op kleine formaten niet dichtlopen.
Genoeg gewichten. Minstens regular, een medium of semibold en bold. Cursief als je lange content schrijft.
Taalondersteuning. Als je niet-Engelse pagina's hebt of plant, controleer dan of het lettertype die schriften en tekens met accenten dekt.

Test met je echte content op een telefoon, niet met "Lorem ipsum" op een desktopmonitor.

Stap 2: Laat het lettertype passen bij de toon van je merk

Lettertypen roepen associaties op. Gebruik ze bewust.

Gewenste toon	Lettertypestijl die meestal past	Voorbeelden (gratis op Google Fonts)
Neutraal, modern, product	Grotesque of neo-grotesque sans	Inter, Roboto, IBM Plex Sans
Vriendelijk, benaderbaar	Humanistische of afgeronde sans	Nunito Sans, Source Sans 3, Figtree
Redactioneel, betrouwbaar	Tekstserif	Merriweather, Source Serif 4, Lora
Premium, elegant	Serif met hoog contrast (alleen koppen)	Playfair Display, Cormorant
Technisch, ontwikkelaar	Monospace (alleen accenten)	JetBrains Mono, IBM Plex Mono
Gedurfd, energiek	Smalle of zware sans (koppen)	Oswald, Bebas Neue, Archivo

Een advocatenkantoor, een bedrijf voor kinderfeestjes en een ontwikkelaarstool horen er niet hetzelfde uit te zien. Vraag: als het logo weg was, zou de typografie dan nog steeds hinten op wat voor soort bedrijf dit is?

Stap 3: Combineer op contrast, niet op gelijkenis

Als je twee lettertypen gebruikt, moeten ze duidelijk verschillen, anders lijken ze een fout. Twee gelijkende sans-serifs naast elkaar zien er toevallig uit; een serifkop boven een sans-broodtekst ziet er bedoeld uit.

Betrouwbare manieren om te combineren:

Serifkop, sans-broodtekst. Playfair Display met Source Sans 3. Lora met Inter.
Sanskop, serif-broodtekst. Goed voor lang leeswerk: Inter-koppen met Source Serif 4 als broodtekst.
Superfamilies. Families ontworpen met serif- en sansversies die dezelfde structuur delen, zoals IBM Plex Sans en IBM Plex Serif, of Source Sans 3 met Source Serif 4. Ze passen bijna automatisch bij elkaar.
Eén familie, veel gewichten. Inter op 700 voor koppen en 400 voor broodtekst. De eenvoudigste en snelste optie, en vaak de beste.

Vuistregel: één lettertype voor persoonlijkheid, één voor het werk. Laat het kopfont het karakter dragen en het broodtekstfont uit de weg blijven.

Stap 4: Stel een typografische schaal in voor consistentie

Consistentie van lettertypen op een website komt van een kleine, vaste set formaten die overal wordt gebruikt, niet van het per pagina kiezen van formaten. Een typografische schaal vermenigvuldigt een basisformaat met een verhouding.

Met een basis van 16px en een verhouding van 1,25 (vaak een grote terts genoemd):

Rol	Formaat
Kleine tekst, bijschriften	13px
Broodtekst	16px
H4	20px
H3	25px
H2	31px
H1	39px

Grotere verhoudingen zoals 1,333 geven dramatischere koppen; kleinere zoals 1,2 passen bij dichte interfaces. Op mobiel voorkomt een kleinere verhouding dat koppen in vijf regels omslaan. Met de CSS-functie clamp() schalen formaten vloeiend tussen telefoon en desktop:

``css :root { --font-body: "Source Sans 3", system-ui, sans-serif; --font-heading: "Lora", Georgia, serif; } body { font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; } h1 { font-family: var(--font-heading); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.15; } ``

Definieer deze één keer als variabelen of designtokens en hergebruik ze. Zo houd je elke pagina consistent.

Stap 5: Zorg voor de juiste spatiëring

Het lettertype doet er minder toe dan hoe het wordt gezet. Met deze waarden leest de meeste lettertypen goed:

Regelafstand: ongeveer 1,5 tot 1,7 voor broodtekst, 1,1 tot 1,3 voor grote koppen.
Regellengte: ruwweg 50 tot 75 tekens per regel. Stel een max-width in op tekstcontainers (rond 65ch is een goed begin).
Alineaspatiëring: een tussenruimte ongeveer gelijk aan de regelafstand tussen alinea's.
Letterspatiëring: laat broodtekst op de standaard. Maak zeer grote koppen iets strakker; maak labels in hoofdletters iets ruimer.
Contrast: WCAG 2.2 vraagt om een contrastverhouding van minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst. Lichtgrijze broodtekst op wit is een veelvoorkomende fout.
Uitlijning: lijn broodtekst links uit in talen die van links naar rechts worden geschreven. Gecentreerde en uitgevulde alinea's lezen lastiger.

Stap 6: Laad lettertypen snel

Lettertypen zijn een van de makkelijkste manieren om een site te vertragen of tekst te laten springen tijdens het laden.

Gebruik WOFF2. Het is het meest gecomprimeerde webfontformaat en wordt door alle huidige browsers ondersteund.
Laad alleen de gewichten die je gebruikt. Vier gewichten van twee families zijn acht bestanden. Beperk je tot wat het ontwerp echt gebruikt.
Overweeg variabele lettertypen. Eén bestand dat een reeks gewichten dekt, kan meerdere statische bestanden vervangen.
Maak een subset. Als je alleen Latijnse tekens nodig hebt, laad dan een Latijnse subset. Google Fonts doet dit automatisch.
Stel font-display in. font-display: swap toont direct terugvaltekst en wisselt daarna naar het webfont. optional voorkomt de wissel bij trage verbindingen.
Preload het belangrijkste broodtekstlettertype met <link rel="preload" as="font" type="font/woff2" crossorigin>.
Stem je terugvallettertype af. Kies een systeemfont als terugval met vergelijkbare verhoudingen, of gebruik de CSS-descriptor size-adjust, zodat de lay-out niet verschuift wanneer het webfont arriveert. Dat helpt je score voor Cumulative Layout Shift.

Systeemfontstack als optie. Voor interfaces en dashboards gebruikt system-ui het eigen lettertype van het apparaat (San Francisco op Apple-apparaten, Segoe UI op Windows, Roboto op Android). Geen download, vertrouwd voor gebruikers, snel.

Stap 7: Controleer de licentie

Google Fonts: open licenties, de meeste onder de SIL Open Font License, die commercieel gebruik toestaat.
Adobe Fonts: inbegrepen bij Creative Cloud-abonnementen, met webgebruik gekoppeld aan het abonnement.
Commerciële lettergieterijen: weblicenties worden vaak geprijsd per maandelijkse paginaweergaven of domeinen. Lees de voorwaarden en controleer de actuele prijzen.

Een desktoplicentie voor een lettertype geeft je niet automatisch het recht om het op een website in te sluiten.

Checklist voor lettertypekeuze

[ ] Broodtekstlettertype getest op echt formaat op een telefoon met echte content
[ ] Maximaal één of twee families
[ ] Kop- en broodtekstlettertypen contrasteren duidelijk, of één familie in meerdere gewichten
[ ] Typografische schaal één keer gedefinieerd en overal gebruikt
[ ] Regelafstand, regellengte en contrast gecontroleerd
[ ] Alleen gebruikte gewichten geladen, in WOFF2
[ ] font-display ingesteld en terugvallettertype afgestemd
[ ] Licentie voor webgebruik bevestigd

Typografie is een van de grootste onderdelen van wat een goede website maakt, en consistentie doet er meer toe dan enige afzonderlijke lettertypekeuze. Als je bouwt met We.Inc, beginnen sites met ontwerpen met afgestemde lettertypecombinaties en een consistente schaal, en kun je lettertypen wijzigen door het in de chat te vragen of de code direct te bewerken. Bekijk de sjablonen om de combinaties in gebruik te zien.

Begin gratis

Bronnen (gecontroleerd op 28 sept. 2026): Google Fonts-repository-metadata voor elk lettertype, github.com/google/fonts (licentie- en ontwerpersvelden); lettertypepagina's op fonts.google.com; SIL Open Font License.

Gratis beginnen · Geen creditcard nodig

Product

AI Website Builder: Describe a site in plain English; it's live in minutes
White Label Platform: Your brand, your domain, your margin
Enterprise: SSO, custom SLAs, and dedicated support
Developer API: Embed site generation into your SaaS

Who It's For

For Agencies: Resell under your brand
For Freelancers: Your own branded builder
For Hosting Providers: Add a builder to your stack
For SaaS Platforms: Embed site creation via API
For Startups
For Financial Services
For Healthcare

Features

Resources

Company

View Sitemap