De 20 beste HTML fonts voor websites

Lettertypes spelen een grote rol in de algehele uitstraling van een website. Een zorgvuldig gekozen lettertype helpt de juiste boodschap over te brengen en zorgt voor een consistente merkuitstraling.

Om dat te bereiken moet een goed weblettertype leesbaar én web-safe zijn. Dat betekent dat het lettertype correct wordt weergegeven op verschillende apparaten, browsers en besturingssystemen.

Toch is het kiezen van een geschikt lettertype niet altijd eenvoudig. Je komt vaak lettertypes tegen die er visueel aantrekkelijk uitzien, maar niet web-safe zijn – of juist andersom.

Om je hierbij te helpen, hebben we een overzicht samengesteld van de 20 beste HTML fonts voor je website.

Wat is een web-safe lettertype

Web-safe lettertypes zijn lettertypes die standaard zijn geïnstalleerd op de meeste besturingssystemen. Daardoor worden ze weergegeven zoals bedoeld, ongeacht het apparaat of de browser die iemand gebruikt.

Bekende voorbeelden van web-safe lettertypes zijn Arial, Times New Roman en Helvetica.

Wat zijn de categorieën HTML-lettertypes

In de typografie hoort elk lettertype bij een van de vijf lettertypefamilies. Deze families zijn ingedeeld op basis van overeenkomsten in ontwerp en vormgeving. Dat zijn de volgende categorieën:

Cursive

Cursieve lettertypes bootsen handschrift na, waarbij de letters vaak vloeiend in elkaar overlopen.

Veel mensen associëren dit type lettertype met individualiteit, expressie en kalligrafie. Je gebruikt cursieve lettertypes het best voor koppen, taglines en blogtitels op je website, en niet voor de hoofdtekst. Als cursief wordt gebruikt als standaardlettertype, kan de tekst namelijk lastig leesbaar worden.

Fantasy

Lettertypes uit de Fantasy-familie hebben meestal decoratieve kenmerken per teken. Deze fonts zijn populair bij fictiewerken en helpen om direct een bepaald genre over te brengen en de lezer in de sfeer te trekken.

Deze lettertypecategorie wordt bijvoorbeeld veel gebruikt in fantasy- en sciencefictionfilms zoals Star Wars, Harry Potter en Frozen.

Serif

Het meest herkenbare kenmerk van serif-lettertypes is de aanwezigheid van kleine extra streepjes aan de uiteinden van de letters. Oorspronkelijk werd dit type letter gebruikt voor drukwerk met inkt, maar tegenwoordig wordt het vooral geassocieerd met een formele en elegante uitstraling.

Websites gebruiken serif-lettertypes vaak voor bodytekst, omdat ze goed leesbaar zijn en lezers helpen om langere teksten snel te scannen.

Bekende serif-lettertypes zijn Times New Roman, Cambria en Garamond.

Sans-serif

Als tegenhanger van serif-lettertypes hebben sans-seriflettertypes geen extra streepjes aan de letters

De meeste lettertypes binnen deze familie hebben een vergelijkbare letterbreedte en ogen modern en minimalistisch.

Schreefloze lettertypes blijven goed leesbaar in elk formaat, waardoor ze geschikt zijn voor zowel drukwerk als digitaal gebruik.

Monospace

Bij Monospace-lettertypes hebben alle letters en symbolen exact dezelfde breedte.

Doordat deze lettertypes consistent zijn en tekens makkelijk van elkaar te onderscheiden zijn, worden ze vaak gebruikt als standaardlettertype voor typemachines en computerterminals.

De 20 beste HTML fonts voor websites

Hieronder staan 20 webveilige HTML-lettertypen die je kunt toepassen op je inhoud.

1. Arial

Arial is een veelzijdig schreefloos lettertype met een moderne uitstraling. De letters zijn stevig en duidelijk gevormd, wat zorgt voor een strakke en minimalistische look.

Arial is al jarenlang een populair schermlettertype dankzij de goede leesbaarheid in elk formaat. Het is zelfs het standaardlettertype in Google Documenten.

Daarnaast wordt dit lettertype veel gebruikt in gedrukte media, zoals kranten en advertenties.

Kortom, zoek je een klassiek en betrouwbaar lettertype dat geschikt is voor de meeste websites, dan is Arial een uitstekende keuze.

2. Arial Narrow

Arial Narrow is een van de 38 stijlen binnen de Arial-lettertypefamilie. Vergeleken met de standaardvariant heeft deze stijl een slanker en compacter ontwerp.

De letters zijn smal en staan dicht op elkaar, wat Arial Narrow geschikt maakt voor minimalistische websites of ontwerpen met beperkte ruimte.

Goede combinaties zijn robuustere schreefloze lettertypes zoals Verdana en Geneva.

3. Times

Times is een zeer goed leesbaar serif-lettertype, dankzij het duidelijke contrast en de compacte vormgeving.

Veel mensen herkennen dit lettertype omdat het voorkomt in uiteenlopende media, zoals boeken, berichtenapps en commerciële publicaties.

Oorspronkelijk werd Times vooral gebruikt in gedrukte media zoals kranten, waardoor het sterk wordt geassocieerd met journalistiek en academisch schrijven.

Daardoor is dit lettertype zeer geschikt om een vertrouwde en formele uitstraling aan je website te geven.

Daarnaast werkt Times goed op websites met lange tekstblokken, zoals online nieuwsplatforms en blogs.

4. Times New Roman

Times New Roman is een variant van het Times-lettertype en behoort tot de serif-lettertypes.

Het is een veelgebruikt tekstlettertype in gedrukte media, zoals tijdschriften en boeken, maar ook een populair HTML font vanwege de combinatie van veelzijdigheid en leesbaarheid.

Door de professionele uitstraling wordt Times New Roman vaak gebruikt voor formele content op nieuwswebsites en educatieve platforms.

5. Helvetica

Helvetica is een veelzijdig HTML font waarvan het strakke ontwerp geschikt is voor vrijwel elk type scherm.

Het is een populair schreefloos lettertype dat wordt gebruikt door veel bekende merken. Zo gebruiken Jeep, Microsoft, Motorola en BMW Helvetica in hun logo’s.

Ook de Amerikaanse overheid maakt gebruik van Helvetica, onder andere op belastingformulieren.

Daarnaast is dit lettertype ontworpen voor gebruik in kleinere formaten, zoals tekst op e-readers en mobiele apparaten, waar leesbaarheid extra belangrijk is.

6. Courier

Courier is een van de bekendste lettertypes binnen de slab serif-categorie en wordt standaard meegeleverd met alle gangbare besturingssystemen.

Dit HTML font is ook lange tijd de standaard geweest voor filmscenario’s. Is je website dus gericht op film of scenarioschrijven, dan is Courier zeker het overwegen waard binnen je ontwerp.

Omdat dit lettertype als decoratief wordt gezien, gebruik je het bij voorkeur alleen voor koppen en titels, en niet voor langere teksten.

7. Courier New

Courier New is een dunner en beter leesbaar alternatief voor Courier. Daarom wordt dit lettertype veel gebruikt op elektronische apparaten.

Daarnaast valt Courier New onder de zogeheten typemachine-lettertypes, wat goed past bij websites met een retro of klassiek ontwerp.

Courier New is beschikbaar in vier stijlen: normaal, cursief, vet en vet cursief.

8. Verdana

Verdana is een uitstekend schermlettertype dankzij de goede leesbaarheid in kleine formaten en op schermen met een lage resolutie. Dit komt vooral door de brede letters en de ruime afstand tussen de tekens.

Dit lettertype wordt niet alleen gebruikt voor schermtypografie. Zo gebruikt het bekende meubelmerk IKEA Verdana zowel op de website als in de gedrukte catalogi.

Zoek je een HTML font met een hoge leesbaarheid, dan is Verdana een zeer betrouwbare keuze.

9. Candara

Candara werd geïntroduceerd met het Microsoft Vista-besturingssysteem om de leesbaarheid op LCD-schermen te verbeteren.

Dankzij de ruime letterafstand is dit font goed leesbaar, waardoor het zeer geschikt is als display-lettertype.

Daarnaast heeft Candara een moderne uitstraling door de ronde vormen en open letters. Dat maakt het lettertype geschikt voor informele toepassingen, zoals blogtitels en taglines op websites.

10. Geneva

Geneva heeft een strakke en moderne uitstraling dankzij de consistente lengte, breedte en letterafstand.

Het lettertype is veelzijdig en wordt veel gebruikt voor zowel schermtekst als bodytekst. De slanke lijnen en duidelijke vormgeving zorgen ervoor dat Geneva goed leesbaar blijft in elk formaat, met voldoende spatiëring voor een prettige leeservaring.

11. Calibri

Calibri is een veelgebruikt en populair lettertype. Het is een standaardlettertype in verschillende bekende softwarepakketten, zoals de Microsoft Office-suite en Google Docs.

Dit lettertype oogt modern en warm, dankzij de ronde vormen en de strakke afwerking.

Daarnaast werkt Calibri goed in uiteenlopende tekstgroottes. Het blijft prettig leesbaar en is geschikt voor zowel digitale displays als beeldschermen.

Door het neutrale en strakke ontwerp past dit lettertype bij vrijwel alle soorten websites.

12. Optima

Optima is geïnspireerd op klassieke Romeinse hoofdletters en wordt vaak gebruikt om een gevoel van elegantie over te brengen, dankzij de royale letterafstand en evenwichtige lijnen.

Met Optima kun je ook de ruimte tussen de afzonderlijke tekens instellen.

Hoewel alle varianten goed leesbaar zijn, komt dit lettertype het best tot zijn recht bij een iets ruimere spatiëring.

Optima wordt vooral gebruikt voor displaytoepassingen, zoals logo’s van luxe merken als Estée Lauder en Marks and Spencer.

13. Cambria

Cambria is ontworpen met zeer gelijkmatige verhoudingen en spatiëring, wat zorgt voor een prettige leeservaring op het scherm, zelfs bij kleinere lettergroottes.

Dankzij de horizontale schreven, die de uiteinden van elke letter duidelijk accentueren, is dit lettertype zeer goed leesbaar.

Daarnaast is Cambria bijzonder veelzijdig. Je kunt de verschillende stijlen combineren en het lettertype inzetten voor koppen, titels en bodytekst.

Cambria is beschikbaar in de varianten normaal, vet, cursief en vet cursief.

14. Garamond

Garamond behoort tot de old-style serif-lettertypes.

Het is een klassiek font dat veel wordt gebruikt in zowel drukwerk als digitale toepassingen, waaronder de boeken van Dr. Seuss, de Harry Potter-reeks en het logo van Google.

Dit lettertype is ideaal als je je website een klassieke, tijdloze uitstraling wilt geven.

15. Perpetua

Perpetua is een formeel, klassiek en elegant lettertype. Het werd ontworpen door een Engelse beeldhouwer die zich liet inspireren door monumentale en herdenkingsletters.

De kenmerken van dit lettertype hebben onder andere Penguin Classics en de University of Pennsylvania ertoe aangezet om Perpetua in hun publicaties te gebruiken.

Al met al kan een educatieve of informatieve website veel voordeel halen uit het gebruik van dit lettertype.

16. Monaco

Monaco is het lettertype dat wordt gebruikt in de Terminal- en Xcode-apps van macOS.

Dit lettertype behoort tot de monospace-familie en heeft een duidelijk, enigszins pixelachtig ontwerp.

Door de uitgesproken stijl gebruik je Monaco het best voor decoratieve teksten op websites over programmeren of gaming.

17. Didot

Didot is een neoklassiek lettertype met een klassiek ontwerp en een moderne twist.

Het unieke ontwerp van dit lettertype is onder andere te zien bij CBS News en The Late Show with Stephen Colbert.

Didot staat bekend om het hoge contrast en de sterke spanning tussen dikke en dunne lijnen, waardoor het direct opvalt. Zoek je een display-lettertype voor koppen, taglines of titels op je website, dan is Didot het overwegen waard.

18. Brush Script

Brush Script is een modern scriptlettertype met een informele en casual uitstraling.

Het heeft een kalligrafische stijl die is gebaseerd op handschrifttechnieken. Daardoor is Brush Script MT een decoratief maar goed leesbaar lettertype voor je website.

Dit lettertype is geschikt voor landingspagina’s en nieuwsbrief-pop-ups. Door het uitgesproken karakter gebruik je Brush Script het best spaarzaam en in grotere formaten.

19. Lucida Bright

Lucida Bright is geclassificeerd als een serif-lettertype en is een van de Lucida-varianten met meer contrast.

Dankzij het smalle ontwerp wordt de beschikbare ruimte efficiënt benut, wat dit lettertype geschikt maakt voor zakelijke rapporten, documentatie en tijdschriften.

Een bekende gebruiker van Lucida Bright is het tijdschrift Scientific American.

20. Copperplate

Copperplate behoort tot de monotone lettertypes en bestaat uitsluitend uit hoofdletters. Het wordt vooral gebruikt als display-lettertype voor visitekaartjes en briefpapier.

Op webpagina’s is dit lettertype zeer geschikt voor koppen en titels.

Copperplate werd breed bekend nadat het werd gebruikt in de huisstijl van Who Wants To Be a Millionaire.

Oneervolle vermelding: Comic Sans

Comic Sans is gebaseerd op belettering uit stripverhalen en werd oorspronkelijk ontworpen om vriendelijk en ongedwongen over te komen.

Toch wordt dit lettertype door veel mensen gezien als onprofessioneel en kinderlijk. Er bestaat zelfs een community die pleit voor het volledig verbannen van Comic Sans als lettertype.

De reden dat Comic Sans vaak als onaangenaam wordt ervaren, is het gebrek aan visuele consistentie. De letters verschillen sterk in spatiëring, breedte en hoogte, wat de leesbaarheid en uitstraling negatief beïnvloedt.

Waarom zou je een HTML webfont gebruiken?

Het gebruik van een HTML webfont is belangrijk voor je webdesign. Het zorgt ervoor dat de tekst op je website consistent wordt weergegeven op alle apparaten.

Zonder een HTML webfont loop je het risico bezoekers te verliezen, omdat lettertypes op niet-ondersteunde apparaten kunnen worden weergegeven als onleesbare symbolen.

Dit zijn enkele redenen om een HTML font te gebruiken voor je website:

• Consistent ontwerp. Een HTML webfont zorgt ervoor dat het door jou gekozen lettertype correct wordt weergegeven in elke browser en op elk apparaat.
• Fallback-lettertype. Als je voorkeurslettertype niet goed wordt geladen in iemands browser, schakelt het HTML webfont automatisch over naar een standaardlettertype op het apparaat.
• Geen download. Je kunt HTML fonts eenvoudig insluiten via een web-safe fontprovider zoals Google Fonts, zonder dat bezoekers iets hoeven te downloaden.

HTML-lettertypes toevoegen in WordPress

Er zijn verschillende manieren om HTML-lettertypes toe te voegen in WordPress. In dit gedeelte bespreken we twee populaire methoden.

HTML-lettertypes handmatig toevoegen

Lettertypes handmatig toevoegen is een goede optie als je plugins wilt vermijden of een aangepast lettertype aan je WordPress-site wilt toevoegen.

Selecteer en download eerst een aangepast lettertype bij een webfontprovider zoals Adobe Fonts, TypeNetwork of Fonts.

Heb je een keuze gemaakt, dan converteer je het lettertype naar een webvriendelijk formaat. Hiervoor kun je de Webfont Generator gebruiken.

Na het downloaden upload je het bestand naar de map wp-content/themes/je-thema/fonts.

Handmatig lettertypes toevoegen via HTML kan lastig zijn, omdat de HTML-tag <font> in HTML5 is verouderd en niet meer wordt gebruikt. Tegenwoordig pas je lettertypes toe met CSS-eigenschappen, zoals font-family, kleur en andere typografische instellingen.

Een veelgebruikte manier om een lettertype verder te stylen is met inline CSS. Hierbij voeg je stijlen toe aan één specifiek HTML-element via het style-attribuut.

Hieronder zie je een voorbeeld van hoe inline CSS eruitziet in een HTML-element:

<h1 style="color:red;">Inline CSS in rood</h1>
<p style="font-family:Calibri; color:yellow;">Dit is een alinea in gele tekstkleur.</p>

Handmatig HTML toevoegen kan voor beginners verwarrend en overweldigend zijn. Daarom is het aan te raden om de basis van CSS en HTML te leren voordat je hiermee aan de slag gaat.

HTML-lettertypes toevoegen met plugins

Er zijn veel plugins beschikbaar waarmee je HTML-lettertypes kunt toevoegen aan je WordPress-website. Hieronder lichten we er één uit.

Use Any Font (UAF)

Met deze plugin kun je elk aangepast lettertype uploaden. UAF zet het vervolgens automatisch om naar een web-safe lettertype.

Na het installeren van de plugin verschijnt het tabblad Use Any Font in de WordPress-beheeromgeving. Klik hierop en activeer je API-sleutel.

Zodra de verificatie is afgerond, voeg je je .ttf, .otf en .woff-lettertypebestanden toe en klik je op Uploaden. UAF converteert de aangepaste lettertypes daarna naar web-safe lettertypes.

Daarnaast is UAF compatibel met Flatsome, waardoor je lettertypes live kunt aanpassen binnen Flatsome-thema’s.

Conclusie

Door een HTML webfont te gebruiken, ziet je website er consistent uit op verschillende apparaten. Daarnaast helpt het om een professionele, formele of elegante uitstraling te creëren, afhankelijk van het lettertype dat je kiest.

In dit artikel hebben we de 20 beste web-safe HTML fonts op een rij gezet om je te helpen bij het maken van de juiste keuze. Enkele voorbeelden:

• Arial – een klassiek lettertype dat geschikt is voor vrijwel alle soorten websites.
• Times New Roman – een uitstekende keuze voor nieuwswebsites en educatieve platforms.
• Cambria – een veelzijdig lettertype dat beschikbaar is in normaal, vet, cursief en vet cursief.
• Monaco – ideaal voor decoratieve teksten op websites over programmeren of gaming.

Houd er rekening mee dat elk lettertype zijn eigen uitstraling heeft. Kies daarom altijd een font dat niet alleen goed leesbaar is, maar ook past bij de identiteit en uitstraling van je merk.

Alle tutorials op deze website voldoen aan de strenge edactionele standaarden en waarden van Hostinger.