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.
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.
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.
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:
- TTF
- OTF
- WOFF / WOFF2
- SVG
- EOT
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.
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.
- Arial
- Brush Script MT
- Comic Sans
- Courier New
- Garamond
- Georgia
- Helvetica
- Impact
- Lucida Console
- Palatino
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
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:
- Serif-lettertypen worden gedefinieerd door kleine lijnen die aan de uiteinden van de letterregels zijn bevestigd. Deze lettertypen worden als elegant en leesbaar beschouwd.
- Sans serif-lettertypen zijn op dezelfde manier ontworpen als serif-lettertypen, maar missen lijnen. Ze zijn eenvoudiger en beter leesbaar.
- Monospace-lettertypen zijn gelijkmatig verdeeld tussen elke letter, waardoor ze een duidelijk uiterlijk krijgen.
- Cursieve lettertypen (of scriptlettertypen) geven formele, handgeschreven letters weer. Ze zijn niet erg leesbaar en beter voor koptitels of grafisch ontwerp.
- Fantasielettertypen (of decoratieve lettertypen) zijn sterk gestileerd en net als cursieve lettertypen niet geschikt als hoofdtekst.
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>
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;
}
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:
- Google Fonts is een van de beste plaatsen om lettertypen te verkrijgen. Waarom? Je kan ze eenvoudig op jouw site insluiten zonder er een te downloaden, de selectie is enorm en mooi, en vooral, het is helemaal gratis. Google servers zijn altijd snel, dus je kan erop vertrouwen dat ze de lettertypen met zo min mogelijk vertraging bezorgen.
- Adobe Fonts biedt duizenden lettertypen bij elk Creative Cloud abonnement. Bij andere services (die niet afhankelijk zijn van open source-lettertypen zoals Google Fonts), moet je je vaak zorgen maken over licenties. Deze lettertypen zijn vrijgegeven voor gebruik in elk project, persoonlijk of commercieel.
- Fonts.com heeft een brede selectie lettertypen voor zowel desktop- als webgebruik. Ze geven je de code die je nodig hebt om het op jouw site te krijgen. Het probleem is dat er verschillende licenties zijn en het een beetje verwarrend kan zijn. De betaling is gebaseerd op een eenmalige vergoeding of een terugkerend bedrag.
- TypeNetwork biedt lettertypen van hoge kwaliteit voor serieuze projecten met een verscheidenheid aan licentie-opties. Koop lettertypen voor desktop, internet, applicaties of ePub. Weblettertypen hebben ook een extra optie: gehost of zelf gehost.
- Voordat Google Font bestond, was –Font Squirrel de plek om gratis, commercieel gelicentieerde lettertypen te vinden voor gebruik in elk project. Het heeft een behoorlijke selectie maar helaas is er geen optie voor het hosten van lettertypen. Je moet de lettertypen downloaden en handmatig naar jouw site uploaden. Niet alle lettertypen zijn ook geoptimaliseerd voor internet, maar je kan de Webfont Generator proberen.
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
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
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
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
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
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
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
De minimale letterafstand op dit serif-lettertype geeft het een unieke look en feel. Je vindt het op de meeste Apple apparaten.
10. 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.
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.
Laat een reactie achter