Als er één ding het belangrijkst is voor de branding en het uiterlijk van je website, kan dit eigenlijk alleen maar lettertypen zijn. Een zorgvuldig gekozen lettertype kan persoonlijkheid overbrengen, lange tekstpassages beter leesbaar maken en jouw merk in de hoofden van mensen verstevigen.

Je kan niet zomaar een oud lettertype downloaden en op jouw website gebruiken. Er zijn nogal wat dingen waarmee je rekening moet houden.

Waar kan je weblettertypen vinden, welke lettertypen zijn compatibel met HTML en welke zijn “webveilig” én kunnen op elke website worden gebruikt? We zullen ze allemaal in dit artikel verkennen.

Laten we beginnen!

HTML lettertypen: wat zijn weblettertypen?

Lettertypen kennen een rijke geschiedenis, maar lettertypen zoals we ze vandaag kennen werden pas op grote schaal gebruikt met de komst van computers en internet. Digitale lettertypen hadden een speciale behandeling nodig om op schermen weer te geven. En toen er verschillende schermformaten en apparaten in het spel kwamen, werd het alleen maar ingewikkelder.

Google Fonts is een verzameling trendy weblettertypen

Google Fonts is een verzameling trendy weblettertypen

Als het om digitale lettertypen gaat, zijn er een paar verschillende soorten. Sommige lettertypen zijn voornamelijk bedoeld voor print en grafisch ontwerp. Deze zijn meestal groot en niet geschikt voor websites, maar zijn perfect voor het maken van afbeeldingen. Er zijn ook “webveilige” lettertypen, ook wel web safe fonts genoemd. Dit zijn lettertypen die je op de meeste computers aantreft.

Voor webdesign moet je zoeken naar weblettertypen, lettertypen die speciaal zijn ontworpen om perfect weer te geven op het internet en op verschillende apparaten. Je kan weblettertypen ook gebruiken voor e-mails of andere online diensten.

Er zijn een paar dingen waardoor weblettertypen verschillen van je standaard downloadbare desktop-lettertype. Ten eerste kunnen ze vaak niet worden gebruikt met programma’s op je computer; ze moeten naar een server worden geüpload en je kan ze alleen op internet gebruiken.

Ze zijn daarnaast ontworpen om leesbaar te zijn op verschillende schermen en voor verschillende formaten. Ze kunnen worden gestileerd met CSS (zoals het toepassen van vet of cursief, kleuren en andere attributen) en bieden vaak ondersteuning voor bepaalde dingen, zoals weergave van rechts naar links.

Hoewel weblettertypen niet op de apparaten van jou of jouw bezoekers zijn geïnstalleerd, zijn er speciale manieren om ze toch weer te geven zodat iedereen die jouw site bezoekt, ze kan zien.

Je kan deze lettertypen simpelweg downloaden en naar jouw server uploaden of je kan een speciale hostingservice voor weblettertypen gebruiken die ze op jouw site insluit zonder dat je ze hoeft te downloaden.

Als je de branding en het uiterlijk van jouw site belangrijk vindt, is het een cruciale stap in je ontwerpproces om ervoor te zorgen dat je een webveilig lettertype gebruikt.✨ Vind hier 10 geweldige opties 👇Click to Tweet

Welke lettertypen kan je in HTML gebruiken?

Sommige lettertypen zijn niet bedoeld om op internet te worden gebruikt, maar welke kunnen dan wel aan jouw HTML site worden toegevoegd?

In wezen kan je elk downloadbaar lettertype op je site gebruiken. Het enige dat je hoeft te doen is het lettertype uploaden en correct configureren. Als je dit juist doet, zou het op je website moeten worden weergegeven.

Het krabbellettertype is niet praktisch voor webpagina's

Het krabbellettertype is niet praktisch voor webpagina’s

Hoewel je technisch gezien elk lettertype op jouw site kan gebruiken, is dit niet altijd het beste idee. Je moet specifiek zoeken naar weblettertypen, niet naar lettertypen die bedoeld zijn voor gebruik in print of grafisch ontwerp. Sommige lettertypen zijn zo gestileerd of bedoeld voor zulke grote tekstgroottes dat ze niet correct zullen worden weergegeven op jouw site. Met een weblettertype is dit geen probleem.

Er zijn ook licentieproblemen waar je je zorgen over moet maken wanneer je desktoplettertypen op jouw site gebruikt (of weblettertypen gebruikt voor afdrukontwerp). Als je een lettertype op een ander medium gebruikt dan waarvoor je het hebt gekocht, kan je in de problemen komen. Zorg ervoor dat je de licentie van jouw lettertype zorgvuldig leest voordat je deze aanschaft.

Je kan ook zoeken naar bepaalde hosts waarmee je een eenvoudige call in de HTML kan gebruiken om hun lettertypen op jouw eigen website weer te geven via gratis of betaalde abonnementen.

Hoe dan ook, zolang het lettertype dat je gebruikt correct is geüpload en het juiste bestandstype heeft:

Met deze lettertypebestandstypen kan je deze vervolgens overal op jouw site gebruiken en opmaken met HTML en CSS.

Ook zijn er webveilige lettertypen die meestal universeel werken in alle browsers en programma’s.

Wat zijn webveilige lettertypen?

Een probleem met de meeste weblettertypen is dat er geen garantie is dat ze correct op je website worden weergegeven. In tegenstelling tot standaard grafisch ontwerp, waar je gewoon een afbeelding in een programma kunt maken en deze kunt afdrukken voor distributie, moet een browser weblettertypen weergeven telkens wanneer iemand de pagina opent. Als jouw lettertypen niet worden geladen, kan je een lege, defecte website krijgen.

Om die reden kiezen sommige website-eigenaren ervoor om alleen te vertrouwen op webveilige lettertypen. Deze zijn vooraf geïnstalleerd op de meeste systemen dus ze worden gegarandeerd correct weergegeven op alle apparaten, behalve de meest obscure. Ze hebben ook de neiging om veel sneller te laden dan standaard weblettertypen, die soms traag worden weergegeven.

Arial is een veelgebruikt webveilig lettertype

Arial is een veelgebruikt webveilig lettertype

Als je je vaak zorgen maakt over het maximaliseren van de prestaties en er absoluut voor wilt zorgen dat jouw site lettertypen correct weergeeft, dan zijn webveilige lettertypen iets voor jou.

Hier is een lijst met webveilige lettertypen die over het algemeen prima te gebruiken zijn.

Er zijn ook tientallen andere webveilige lettertypen, maar deze zijn het meest voorkomend op alle apparaten.

Van al deze zijn Arial, Times New Roman, Helvetica en Courier New de
“veiligste”. Ondanks dat ze allemaal als internetveilig worden beschouwd, werken sommige van bovenstaande lettertypen niet op bepaalde besturingssystemen.

Het probleem is dat – tenzij je zoiets als een overheidssite of een eenvoudige informatiesite beheert – het niet de moeite waard is om jouw branding op te offeren door je alleen te richten op de meest standaard lettertypen en de rest te vermijden. Webveilige lettertypen zijn misschien wel leesbaar maar ook erg algemeen en dus een beetje saai.

Het is veel beter om een mooiere, meer unieke set lettertypen te kiezen voor gebruik op je website. Vooral omdat er een oplossing bestaat voor het probleem dat weblettertypen niet worden geladen: fallback-lettertypen.

Een opmerking over lettertype-stacks

Lettertype-stacks, ook wel fallback-lettertypen of font stacks genoemd, zijn de reden dat je zonder problemen bijvoorbeeld vetgedrukte en creatieve weblettertypen kan gebruiken.

Wat je ook doet of welke voorzorgsmaatregelen je ook neemt, er is altijd iemand die jouw lettertypen niet kan laden. Misschien hebben ze Javascript uitgeschakeld zodat jouw gehoste lettertypen niet correct worden weergegeven of er gaat iets mis in de code die verhindert dat de lettertypen die je hebt geüpload, worden weergegeven. Of misschien is een bepaald lettertype niet compatibel met iemands apparaat.

Dankzij fallback-lettertypen is het gemakkelijk om een webveilig lettertype te laden als er iets misgaat. Dit werkt door een lettertype te selecteren dat de gebruiker heeft geïnstalleerd op basis van de lettertypefamilie:

Onthoud dat lettertype-stacks een “stapel” zijn; het is heel goed mogelijk om meerdere fallback-lettertypen onder elkaar te hebben. Zorg ervoor dat je altijd een webveilig lettertype aan het einde van de stapel hebt. Je hebt nog steeds de kans om je branding over te brengen met een soortgelijk lettertype als het hoofdlettertype faalt.

.

Zo voeg je lettertypen toe met HTML

Als je een weblettertype aan je site wilt toevoegen, heb je een paar opties.

Voor WordPress gebruikers is de gemakkelijkste manier om lettertypen op jouw site te krijgen het gebruik van een plugin. De twee meest populaire zijn Easy Google Fonts en Use Any Font. De eerste vereenvoudigt het proces van het toevoegen van Google Fonts aan je website, terwijl UAF je in staat stelt om lettertypen rechtstreeks naar jouw site te uploaden.

Als je WordPress niet gebruikt of niet op een plugin wilt vertrouwen, vereist het proces wat handmatig sleutelen.

Ten eerste kan je lettertypen gebruiken die elders worden gehost, zoals bij Google Fonts. De instructies hier zijn afhankelijk van de service die je kiest. Met Google Fonts moet je het lettertype dat je wilt gebruiken insluiten in jouw <head> en moet je het oproepen wanneer je het wilt gebruiken.

Je kan ook lokaal op jouw website lettertypen hosten die je van het internet hebt gedownload. Dit kan de voorkeur hebben omdat je niet afhankelijk bent van diensten van derden.

Gelukkig is dit heel gemakkelijk te doen zolang je een correct geconfigureerd weblettertype hebt. Upload de bestanden gewoon naar jouw server en gebruik vervolgens de @font-face regel in jouw stylesheet om deze te definiëren. Bijvoorbeeld:


@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

Vervolgens kan je de tag font-family gebruiken om jouw lettertype aan te roepen waar je maar wilt in het HTML document.

Lettertypen opmaken met HTML en CSS

Zodra je lettertype veilig naar jouw website is geüpload, kan je het opmaken met HTML en CSS. Zelfs als je weinig programmeervaardigheid bezit is het opmaken van een lettertype vrij eenvoudig. Je kan de tekstkleur, achtergrondkleur, grootte, stijl of gewicht wijzigen.

Opmerking: als je met oudere HTML versies hebt gewerkt, ken je de <font> tag wellicht nog. Deze wordt niet langer ondersteund en zou niet mogen gebruikt worden. In plaats daarvan kan je tekst opmaken met CSS of een HTML stijlelement.

Allereerst kan je het lettertype wijzigen met kleurcodes. Je kan een kleurnaam zoals “red”, een RGB-code of een HEX-waarde gebruiken. Dit wordt zo ingesteld met de color eigenschap:


p {

color: blue;

}

Of in een individueel HTML-stijlelement:


<p style="color:blue;">Text.</p>

De achtergrondkleur is hetzelfde maar het gebruik van de kleur-attributen.


p {

background-color: blue;

}

Het volgende is de lettergrootte. Dit kan in pixels, percentages of ems zijn (wat goed is voor het ontwerpen van responsieve sites).

 p {

font-size: 16px;

}

Of:

<p style="font-size:200%;">Text.</p>
De lettergrootte instellen met CSS

De lettergrootte instellen met CSS

Als laatste zijn de lettertypestijl en -gewicht, of cursief en vetgedrukt. Gebruik voor schuine tekst de tag “italic”.

.italic {

font-style: italic;

}

And for bold: 

.bold {

font-weight: bold;

}
De lettertypestijl instellen met CSS

De lettertypestijl instellen met CSS

Je kan in plaats daarvan ook HTML tags gebruiken. Voor cursief gebruik kan je deze gebruiken als je ergens de nadruk op wil leggen:

<em>

Voor tekst die visueel onderscheidend moet zijn, kan je dit gebruiken:

 <i> 

En voor vet lettertype:

<b> or <strong>

Bijvoorbeeld:

<b>Bold Text</b>

of

<strong>I'm of special importance.</strong>

Waar vind ik HTML lettertypen?

Of je nu extern een lettertype wil hosten of deze wilt downloaden, je moet weten waar de beste plaatsen zijn om lettertypen te vinden. Er zijn honderden distributeurs waarvan een flink aantal bekend staat als betrouwbare bronnen voor het verkrijgen van lettertypen. Hier zijn er een paar:

Je eigen lettertypen hosten? Onze prestatie-geoptimaliseerde hosting bevat een CDN dat HTTP/2 ondersteunt, inclusief gratis bandbreedte. Bekijk onze pakketten

Google Lettertypen

Google Lettertypen

De top 10 HTML lettertypen

Er zijn duizenden weblettertypen beschikbaar, maar waar moet je beginnen? Hier zijn tien eenvoudige HTML lettertypen die er op elke website geweldig uitzien. Deze zijn allemaal webveilig dus ze zouden op bijna alle apparaten moeten werken. Het zijn vaak ook geweldige fallback-lettertypen.

Als je iets spannender nodig hebt, hebben we tal van artikelen over cursieve lettertypen, kalligrafielettertypen en moderne lettertypen.

1. Arial

Een voorbeeld van het Arial lettertype.

Een voorbeeld van het Arial lettertype.

Arial is het meest bekend van alle lettertypen. Het is niet de mooiste maar het is eenvoudig en handig in verschillende situaties.

2. Times New Roman

Times New Roman is ook een zeer veel voorkomend lettertype. Het is het beste als je een meer formele site hebt. Dit serif-lettertype is niet bijzonder spannend maar het leidt ook niet af.

3. Palatino

Een voorbeeld van het Palantino-lettertype.

Een voorbeeld van het Palantino-lettertype.

Palatino komt je misschien bekend voor, omdat het vaak wordt gebruikt bij het drukken van boeken. Tegenwoordig is het een elegant digitaal lettertype dat standaard op veel apparaten wordt meegeleverd.

4. Verdana

Verdana staat erom bekend dat het heel gemakkelijk te lezen is en het ziet er zelfs bij grote afmetingen nog steeds geweldig uit. Deze sans serif is een goed alternatief voor Arial.

5. Courier New

Een voorbeeld van het lettertype Courier New.

Een voorbeeld van het lettertype Courier New.

Courier New doet denken aan oude typemachinetekst en is een geweldig ontwerp met een spatie, voor sites die een ouderwetse maar leesbare look willen.

6. Calibri

Een voorbeeld van het Calibri lettertype.

Een voorbeeld van het Calibri lettertype.

Calibri is een eenvoudig, mooi, schreefloos lettertype dat standaard wordt meegeleverd met programma’s zoals Microsoft Office. Het is echter een eigen lettertype, dus het wordt vaak alleen ondersteund op Windows besturingssystemen.

7. Georgia

Een voorbeeld van het Georgia lettertype

Een voorbeeld van het Georgia lettertype

Dit afgeronde serif-lettertype is geïnspireerd op het vergelijkbare webveilige lettertype Garamond. Als je een formeel lettertype nodig hebt dat niet zo serieus is als Times New Roman, is dit een goede keuze.

8. Garamond

Een voorbeeld van het Garamond-lettertype

Een voorbeeld van het Garamond-lettertype

Net als Palatino is Garamond een klassiek lettertype dat vaak wordt gebruikt voor het afdrukken van boeken. Ondanks dat het is bijgewerkt voor moderne besturingssystemen, ziet het er nog steeds redelijk ouderwets uit.

9. Didot

Een voorbeeld van het Didot lettertype.

Een voorbeeld van het Didot lettertype.

De minimale letterafstand op dit serif-lettertype geeft het een unieke look en feel. Je vindt het op de meeste Apple apparaten.

10. Tahoma

Een voorbeeld van het lettertype Tahoma.

Een voorbeeld van het lettertype Tahoma.

Dit strakke lettertype heeft gediend als het standaardlettertype voor oudere Windows besturingssystemen. Door zijn gedurfdere uiterlijk valt hij net genoeg op zonder af te leiden.

Zorg ervoor dat jouw site er niet alleen goed uitziet, maar ook goed functioneert met behulp van deze webveilige lettertypen ✨Click to Tweet

Samenvatting

Het is belangrijk om weblettertypen te kiezen op jouw website die er goed uitzien, leesbaar zijn en je merk personifiëren. Er zijn verschillende websites waar je gratis lettertypen kan installeren of tegen betaling gelicentieerde lettertypen kan downloaden. We hebben om te beginnen een paar voorbeelden van goede lettertypen gegeven.

Je hoeft niet te beperken tot saaie webveilige lettertypen die je al tientallen jaren overal op internet ziet. Dankzij fallback-lettertypen kan je elke gewenste typografie gebruiken en een fallback instellen die moet worden gebruikt als deze niet wordt geladen.

Of je deze HTML lettertypen nu op jouw website, in e-mails of in jouw logo gebruikt, zorg ervoor dat je voldoende test zodat jouw site leesbaar blijft en de typografie goed past bij de rest van jouw ontwerp.


Bespaar tijd en kosten en maximaliseer siteprestaties met:

  • Directe hulp van WordPress-hostingexperts, 24/7.
  • Cloudflare Enterprise integration.
  • Wereldwijd bereik met 28 datacenters wereldwijd.
  • Optimalisatie met onze ingebouwde Application Performance Monitoring.

Dat alles en nog veel meer, in één pakket zonder langlopende contracten, migraties en een 30 dagen geld-terug-garantie. Bekijk onze pakketten of neem contact op met sales om het pakket te vinden dat bij je past.