Bij het maken van een website is je doel om zo effectief mogelijk indruk te maken op het publiek. Hiervoor heb je het juiste gereedschap nodig, waar we vandaag een van gaan bespreken. Jawel, we gaan het vandaag hebben over moderne lettertypes en de vele lettertypes die je kan gebruiken om de impact van je site te maximaliseren.
Maar de kans is groot dat je thema een beperkte verzameling HTML-lettertypes heeft waaruit je kan kiezen. Of je vindt de lettertypes die ze hebben simpelweg niet mooi genoeg.
In zo’n geval is het essentieel om je eigen lettertypes te kunnen installeren. We zullen in dit artikel de verschillende mogelijkheden bespreken die je hebt wat betreft lettertypes. Maar voordat het zover is, laten we eerst even naar de technische kant van het verhaal kijken.
Wat zorgt ervoor dat een lettertype modern is?
Moderne lettertypes zijn lang niet altijd nieuw. De stijl hiervoor is al ontwikkeld in de 18e eeuw. Desondanks is dit ontwerp nog altijd relevant. Je ziet ze zelfs nog overal.
Hoe zien moderne lettertypes er dan precies uit?
Moderne lettertypes zijn scherp, strak, professioneel en stijlvol. Ze zijn meestal ook sans serif, oftewel schreefloos, maar niet altijd en passen soms in de categorie cursieve lettertypes. Het ontwerp is altijd onderscheidend, en ze worden vaak gebruikt in headers en logo’s. Ze zijn duidelijk te onderscheiden als zakelijk, maar niet als agressief. Ze zien er dus gedurfd en eisen de aandacht op.
Hier zie je een voorbeeld van een portfoliosite die een modern lettertype gebruikt.
Valt het je ook op hoe compact en smal ze zijn?
Dit zijn natuurlijk algemeenheden. Moderne typografie heeft zich uiteraard ontwikkeld, en je ziet daarom ook meer stilistische voorbeelden. Maar hiermee heb je hopelijk al wel een algemene indruk van hoe een modern lettertype er in grote lijnen uitziet (en waarom je er een zou willen gebruiken).
Zo upload je gedownloade lettertypes naar WordPress
Aangepaste lettertypes (custom fonts) die je van het internet hebt gedownload, kosten iets meer moeite om op je website te krijgen, aangezien je ze niet simpelweg kan importeren zoals je zou doen met Google Fonts. In plaats daarvan moet je ze zelf handmatig uploaden of een plugin gebruiken.
Maar voordat je begint met uploaden, moet je controleren of je lettertypes web-ready zijn. Wat bedoelen we daarmee? Nou, niet alle lettertypes zijn direct web-safe of compatibel met alle webbrowsers.
Dat is op zich geen groot probleem. Je kan gewoon de gratis Webfont Generator tool gebruiken om een aangepast lettertype dat je online hebt gevonden om te zetten naar een leesbaar en bruikbaar format, dat elke browser kan gaan gebruiken.
Het doorlopen van dit proces maakt je lettertypes ook aanzienlijk sneller. Maar dit is nog niet alles. Je kunt beter nog een aantal tips volgen om ervoor te zorgen dat aangepaste lettertypes niet onnodig veel resources verbruiken of je website langzamer maken:
- Controleer de prestaties. Gebruik GTmetrix en monitor vooral het aantal verzoeken. Is dat aantal groot, dan gebruikt je website waarschijnlijk veel meer lettertypes dan je door hebt. Dat zijn dan bijvoorbeeld lettertypes die automatisch zijn geïnstalleerd samen met plugins en thema’s (dus die je niet zelf handmatig hebt toegevoegd).
- Controleer je analytics. Hier kan je zien welke lettertypeformats het meest gebruikt worden op je site. De meest voorkomende keuzes zijn EOT, TTF, WOFF en WOFF2. Wanneer je moet beslissen welke je gaat ondersteunen, kan dit je helpen bij het bepalen van je prioriteiten.
- Zorg ervoor dat lettertypes lokaal gecachet worden. Je gaat immers niet dagelijks je lettertypes veranderen. Daarom kunnen lettertypes rustig in de cache van bezoekers blijven staan. Hierdoor zal naar verloop van tijd het aantal HTTP verzoeken afnemen, zeker als je meer terugkerende bezoekers hebt.
Het handmatig uploaden van lettertypes vereist een beetje handigheid, maar ligt zeker binnen het bereik van de gemiddelde website beheerder.
- Download je favoriete aangepaste moderne lettertypes (zie voor voorbeelden hieronder).
- Maak een back-up van je website (inclusief alle content en de database), en/of gebruik een child-thema voor de volgende aanpassingen.
- Upload de lettertypebestanden in een .zip naar de map wp-content/themes/naam-van-jouw-thema/fonts. Zie je hier geen map met de naam “fonts”, maak er dan zelf één aan en zet daar je .zip bestand in. Gebruik een FTP client naar keuze om dit te doen.
- Binnen het WordPress dashboard, ga je naar Weergave > Thema-editor en open je het style.css bestand. Je zal een stukje code toe gaan voegen aan dit bestand. Voeg de relevante font family en URL toe aan het stukje code hieronder en klik op Bestand bijwerken.
@font-face {
font-family: YOUR FONT NAME;
src: url(http://sitename.com/wp-content/themes/themename/fonts/font-name.ttf);
font-weight: normal;
}Met het kleine stukje code hierboven voeg je het lettertype toe aan je site. Vervolgens moet je WordPress vertellen waar dit lettertype gebruikt moet gaan worden. Daarvoor open je style.css weer en voeg je dit stukje code toe:
.SITE ELEMENT {
font-family: "FONT NAME", Helvetica, sans-serif;
}In deze regels kan je bepalen welke elementen van je website het nieuwe lettertype moeten gaan gebruiken, en voeg je de naam van het lettertype in.
Mocht je dit handwerk liever over willen slaan, dan kan je ook een plugin gebruiken om nieuwe lettertypes aan WordPress toe te voegen. Een goede keuze is de plugin Use Any Font. Zoals de naam doet vermoeden, kan je het gebruiken om elk willekeurige aangepaste lettertype toe te voegen aan je site en toe te wijzen aan CSS elementen.
56 van de meeste moderne lettertypes die je in 2024 kan gebruiken
Nu je weet hoe je je eigen lettertypes kan optimaliseren en uploaden, geven we je een flinke lijst met moderne lettertypes waar je uit kan kiezen.
1. Intro
Intro is een vrij standaard modern lettertype met dikke lijnen en een duidelijke weergave, ideal voor headers of titels. De hele lettertypefamilie bevat 72 individuele lettertypes met 8 verschillende dikten, van dun tot dik, waardoor je meteen flink wat flexibiliteit krijgt.
2. Komoda
Komoda is compact en interessant om naar te kijken. Het zijn uitsluitend hoofdletters en is schreefloos (sans serif), met een hoekige indruk, waarbij de middenlijn van elke letter verhoogd is. En de verbindingen maken zeker een statement. Een perfecte keuze voor logo’s dus.
3. Stoked
Stoked is een andere optie als je uitsluitend hoofdletters zoekt en biedt een unieke look voor headers en logo’s. Het lettertype is spannend terwijl het tegelijkertijd goed leesbaar is. De meest opvallende feature is het gebruik van dubbele lijnen bij elke letter, naast regeleinden waardoor het er haast gestencild uitziet.
4. Classy Marisa
Verder is er ook nog Classy Marisa. Dit is een vloeiend en elegant lettertype, een dunnere en sierlijkere optie voor je logo’s en headers. Het heeft interessante verbindingen, alternatieve streken en ornamenten, en biedt zo meer karakter aan de tekst die je met de wereld deelt.
5. Canter
Canter gebruikt alleen hoofdletters en heeft compacte tussenruimtes. Er zijn zes verschillende diktes van, inclusief een 3D optie en een met duidelijke schaduw.
6. Lucky
Lucky is een modern lettertype dat zeker het overwegen waard is. Ook dit lettertype is schreefloos, en kan goed gebruikt worden als logo of header. Het is goed te gebruiken in leesmateriaal, zoals magazines en online publicaties.
7. Zafir
Ook Zafir is een modern lettertype. Het is super minimalistisch in de presentatie. Ook Zafir gebruikt alleen hoofdletters. Zafir heeft serifs met gebogen lijnen, een interessante look die goed kan werken bij logo’s en titlels.
8. Coves
Verder zou je Coves kunnen gebruiken. Het is beschikbaar in twee diktes, light en bold, en biedt een elegante en gestroomlijnde vorm voor je nieuwste projecten. Je kan het goed gebruiken voor zowel je gewone tekst als titels en headers. Het is dus een echte allrounder.
9. Azonix
Azonix is een modern lettertype, maar dan met een futuristische inslag. Het is een sans serif typeface dat vooral de geometrie benadrukt. Ook hier vind je alleen hoofdletters, en het geeft de indruk dat je het zo zou kunnen gebruiken voor de start van een sci-fi film.
10. Arkhip
Arkhip is een gratis lettertype met modern ontwerp, terwijl het tegelijk doet denken aan het verleden. Het gebruikt elementen van Russische typografie om iets moderns en nieuws neer te zetten.
11. Prime
Verder is er Prime. Het is een modern sans serif lettertype met dikke lijnen en een futuristische look. Het biedt geometrische hoeken en ziet er perfect uit op een futuristische of technologische website.
12. Glober
Glober is nog een ander modern lettertype waar je naar kan kijken. Deze lettertypefamilie bevat 18 verschillende diktes, verdeeld tussen 9 normale letters en 9 cursieve letters. Het is een sans serif lettertype dat makkelijk te lezen is en dat je in allerlei situaties kan gebruiken, zowel in titels als bodytekst.
13. MADE Gentle
MADE Gentle is een modern lettertype dat zeker het overwegen waard is. Het wordt gezien als ‘soft serif’ en is geïnspireerd door het Cooper Black lettertype. Het is een vrij stevig maar rond retrolettertype, dat doet denken aan oude boeken en drukmateriaal uit de jaren 70.
14. Nordic
Nordic is tegelijkertijd modern en klassiek, en is beschikbaar in twee types met drie diktes waar je uit kan kiezen. Het ontwerp is gebaseerd op Noorse runen en is perfect voor titels, headers en logo’s.
15. Maddac
Het lettertype Maddac is een stijlvolle optie voor je website. Het is dik, hoekig en sans serif. Het is tegelijkertijd modern qua ontwerp en uniek in de uitvoering. Elke letter heeft een subtiele hoek of schreef in het ontwerp, waardoor het er allemaal net wat meer stijlvol uitziet.
16. Croc
Croc is eigenlijk gewoon een heel cool lettertype. Het is dikgedrukt serif, met een typische stijl die nostalgisch is zonder ouderwets te zijn.
16. Aqua
Ook Aqua is een lettertype dat het overwegen waard is. Deze is wat meer art nouveau waardoor het nooit verouderd. Het is dik maar simpel, met eenvoudige versieringen en schreven waardoor het opvallender is dan soortgelijke lettertypes.
18. Manifesto
Manifesto is een lettertype als je echt een statement wilt maken. Het lettertype is gebaseerd op de Italiaanse rationalistische stijl en is duidelijk bedoeld voor serieuze teksten. Gebruik het voor headers, logo’s en titels, in zowel print als online ontwerpen. Het is dus echt heel veelzijdig.
19. Orkney
Orkney is een prachtig, professioneel ogend lettertype. Het heeft een geometrisch ontwerpen en kan in allerlei situaties gebruikt worden. Denk aan bijvoorbeeld titels of logo’s, maar ook standaardtekst werkt prima. Te gebruiken in zowel geprinte als digitale media. The sky is the limit met dit lettertype.
20. Elppa
Elppa heeft een futuristische look die opvalt en voor allerlei doelen gebruikt kan worden. Het is een vrij minimalistisch lettertype, dat een soort ruimtevaart-gevoel geeft. Gebruik het voor print of webdesigns. Het werkt goed voor logo’s en titels, meestal wat minder voor de hoofdtekst, maar juist erg goed bij visuals en afbeeldingen.
21. Corn
Corn is een interessant lettertype met afgeronde hoeken en een soort boerderij-gevoel. Het bevat 14 verschillende stijlen die je meteen kan gaan gebruiken voor titels, headers en logo’s. Sommige stijlen kan je zelfs voor je hoofdtekst gebruiken. Je kan dus een compleet webdesign bouwen met dit lettertype.
22. Koliko
Je zou ook kunnen kiezen voor Koliko, een serieus grappig lettertype dat aantrekkelijk oogt in allerlei situaties. Het bevat drie variaties, die elk een andere balans geven tussen vorm en functie.
23. Quirk
Quirk is een apart lettertype. De naam past dus goed bij het lettertype. Het bevat uitsluitend hoofdletters met grappige versieringen en stapelbare elementen.
24. Le French
Le French is een verfijnde keuze, vooral als je graag een soort Frans café gevoel aan je website wil geven. Een ideale keuze dus voor bijvoorbeeld menu’s en andere websites over eten of restaurants. Je kan het zowel voor headers, titels, logo’s of de hoofdtekst gebruiken.
25. Munich
Munich is een prachtig sans serif lettertype dat een goede keuze is voor een logo of opvallende titels. Het is groot en indrukwekkend, zonder agressief over te komen.
26. Northwest
Northwest is een modern lettertype met retro indruk. Het doet denken aan logo’s voor campingspullen of outdoor magazines. Met hoekige serifs en decoratieve elementen zou het lettertype het vooral goed doen bij content die over outdoor leven gaat.
27. Modeka
Modeka is vierkant en modern, en eigenlijk vooral heel cool. Het is een moderne keuze die op allerlei manieren gebruikt kan worden. Met extra hoeken op elke letter biedt het een unieke stijl, die wellicht precies past bij jouw volgende project.
28. Disclaimer
Disclaimer is een dik en smal lettertype dat je voor allerlei toepassingen kan gebruiken. Doordat het er supercompact uitziet lijken de letters extra groot en indrukwekkend. Ideaal dus voor een header of titel.
29. 5th Avenue
5th Avenue is gewoon echt fancy, met een klassieke indruk die goed werkt voor officiële logo’s of huisstijlen. Het is een dik lettertype dat opvalt door allerlei alternatieve letters die het stijlvoller en interessanter maken.
30. Quakiez
Quakiez is een modern lettertype met een serif. Het is duidelijk ontworpen om luxueus over te komen, maar is toch nog minimalistisch. Het bevat twee stijlen en kan vooral goed gebruikt worden voor logo’s, titels en headers.
31. Modern Outdoor
Je kan ook kiezen voor Modern Outdoor, waardoor je lezers meteen zullen denken aan kamperen en buitenleven. Het lettertype is perfect voor titels, headers en logo’s, en zou mooi staan op veel posters. Het eist de aandacht op en door de hoofdletters voelt het extra avontuurlijk.
32. Hyperbola
Hyperbola is afgerond en futuristisch. Het doet meteen denken aan de ruimte, op een goede manier. Alle hoeken zijn afgerond, terwijl het geheel er toch vierkant uitziet.
33. Boxing
Het Boxing lettertype is vierkant en strak, ideaal voor headers, titels en logo’s. Het bevat alleen hoofdletters, is groot en interessant. Daarnaast is het extreem handig en kun je het daardoor toepassen op allerlei plekken.
34. Sonder
Sonder is een echt multifunctioneel lettertype. Het is te gebruiken als sans serif, of als ‘slab serif’, met meer vierkante schreven. Er zijn verschillende diktes, en zowel een normale als ‘grove’ stijl. De grove stijl laat af en toe wat gaatjes in de letters, waardoor het er authentiek en natuurlijk uitziet. Probeer het eens, en voor je het weet kan je niet meer Sonder…
35. Lombok
Lombok is een dun en elegant lettertype. Het is sans serif met geometrische elementen waardoor het opvallend en uniek is. Het is een ideale keuze voor headers, logo’s en titels.
36. Distrito
Distrito bevat alleen hoofdletters en kent een uitgesproken stijl. Elke letter staat ietsjes scheef, wat een unieke look geeft die goed te gebruiken is in logo’s en headers. Ook dit is een lettertype met alleen hoofdletters, geïnspireerd op Colombiaans modulair ontwerp.
37. Ailerons
Ailerons ziet eruit als een lettertype dat aliens zouden gebruiken. En dat ziet er heel mooi uit. Het is sans serif met alleen hoofdletters, en maakt indruk waar je het ook neerzet, maar titels en headers zijn de meest logische plek.
38. Ethna
Ethna heeft een klassieke look met moderne stijl. Het is een sans serif lettertypefamilie met humanistisch ontwerp en combineert vintage mooi met moderne ontwerpelementen, met als resultaat iets heel eigens. Hierdoor kun je het haast overal bij toepassen.
39. Noelle
Noelle is een geometrisch serif lettertype dat altijd een goede eerste indruk maakt. Het is minimalistisch en werkt goed voor titels en headers, voor elk type bedrijf. Er zitten wat vintage elementen in, maar ziet er tegelijk fris uit. Je kan het zowel online als in geprinte materialen gebruiken. En daarnaast zit er ook een script variant bij, oftewel een handgeschreven versie.
40. Sequel
Sequel is een rond lettertype dat perfect is voor logo’s en headers. Daarnaast biedt het een hoop verfraaiingen die stijl en spanning toevoegen aan alles wat je er mee maakt. Het ontwerp is fors, maar niet bedreigend.
41. Higher
Higher is ook een verfijnd lettertype met een klassieke look. Het bestaat uit uitsluitend hoofdletters, is erg compact en eist de aandacht op, waardoor het direct stijl toevoegt aan alles wat je er mee maakt.
42. Nano
Nano is een sans serif lettertype met futuristische look en bestaat uit uitsluitend kleine letters in plaats van hoofdletters, de enige in deze lijst. De letters zelf zijn supermodern en herkenbaar, waardoor het een goede keus is voor logo’s of materialen met een duidelijke huisstijl. Het is wel aan te raden om het alleen voor korte teksten te gebruiken, omdat langere zinnen lastiger te lezen kunnen zijn.
43. Jollin
Jollin is een modern lettertype met krullende einden van sommige letters, en over het algemeen een wat chunky look. Het sans serif lettertype is er in gewoon en cursief schrift en biedt allerlei alternatieve letters, zodat je je tekst eenvoudiger of luxer kan maken als je daar zin in hebt.
44. Phenomena
Phenomena is een smal en hoekig lettertype met afgeronde randen. Het maakt een duidelijk statement en is daarom goed bruikbaar voor titels, logo’s en headers. Er zitten 7 verschillende stijlen bij, van heel dun tot dik gedrukt, waardoor er ook genoeg mogelijkheden bijzitten voor standaard teksten.
45. Calibre
Calibre is een supercompact lettertype dat op een goede manier kan uittorenen boven je content – als je dat wil. Het bestaat uit alleen hoofdletters en bevat ook nummers, glyphs en westerse karakters.
46. Sundays
Sundays is een modern serif lettertype dat tegelijkertijd een duidelijk klassieke feel heeft. Het is wat dunner en krullender dan soortgelijke lettertypes, en heeft een stijl die goed past bij koppen en titels in magazines of logo’s en headers op websites.
47. Cornerstone
Cornerstone is een hoekig lettertype met een modulair ontwerp dat op verschillende plekken kan werken, van logo’s tot headers.
48. One Day
One Day is een dun lettertype met lijnen die net niet doorgetrokken zijn, wat het een uniek uiterlijk geeft. Ook dit lettertype heeft alleen hoofdletters, maar wel met een dunne en lichte stijl. Het bevat nummers en glyphs en biedt geometrische vormen zonder vierkant te worden.
49. Kollektif
Kollektif is een klassiek modern lettertype dat op verschillende manieren gebruikt kan worden. Het heeft een geometrisch ontwerp en is beschikbaar in twee dikten. Het is geoptimaliseerd voor zowel print als web.
50. Nostalgia
Dan is er nog Nostalgia, een modern lettertype met een retro ontwerp waardoor het lijkt alsof het al tientallen jaren oud is. Het bevat 3 verschillende sub-lettertypes met alternatieve glyphs, versieringen en bloemen. Het zou een goede keuze kunnen zijn voor logo’s, titels, posters of uitnodigingen.
51. Elixia
Elixia heeft een haast etherische look, die je eerder in het hol van een alchemist zou verwachten. Het is geometrisch en bevat extra hoeken op elke letter waardoor het volledig uniek is.
52. Salmon
Je zou ook kunnen kiezen voor Salmon. Dit sans serif lettertype is gedurfd en minimalistisch. Ideaal voor titels, logo’s en headers. Ook hier weer alleen hoofdletters, en er is zowel een volledig ingevulde als geschetste versie, die je ook nog zou kunnen combineren.
53. Thinoo
Thinoo is ook sans serif. Het bevat zowel een dikke als dunne optie en alle letterstijlen, inclusief nummers, symbolen en leestekens. Het is professioneel en strak. Simpel en toch opvallend. Het zou goed kunnen werken op elke website of geprint materiaal.
54. Summer Loving
Verder zou je ook voor Summer Loving kunnen gaan, een heel ontspannen lettertype met verschillende stijlen, zodat je een volledig ontwerp kan maken met dit ene lettertype. Er is zowel een sans serif variant als een ‘penseel’-versie, die je projecten meteen onderscheidend kan maken. Het bevat ook versieringen en alternatieve letters.
55. Silverfake
Silverfake biedt een breeduit geschreven serif lettertype voor titels, headers en geprinte materialen. Dit zou bijvoorbeeld mooi staan op t-shirts en logo’s.
56. Vienna
Als laatste is er Vienna. Dit moderne serif lettertype heeft de aantrekkingskracht van een klassiek lettertype dat je op de omslag van een tijdschrift zou verwachten, met genoeg veranderingen om ook modern te zijn. Het is minimalistisch, bestaat uit alleen hoofdletters en bevat ook nummers en leestekens.
Samenvatting
Er zijn verschillende redenen waarom je aangepaste lettertypes zou willen gebruiken op je website. Of het nou beter bij je huisstijl past of zodat je content beter leesbaar is op verschillende browsers, het uploaden van je eigen moderne lettertype is zeker de moeite waard.
Het proces lijkt misschien wat intimiderend. Zo moet je een goed lettertype vinden, dat zippen, uploaden naar de goede map op je website via een FTP client. Vervolgens moet je wat stukjes code toevoegen op de goede plek in het CSS bestand van je thema. Dit kan je handmatig doen of door een plugin (of je kan een developer inhuren).
Hoe je dit proces ook aanpakt, aan het eind is het resultaat stijlvol en uniek en heeft je website opeens een echt eigen karakter. We hopen dat deze verzameling van moderne lettertypes je helpt in het vinden van het perfecte lettertype van jouw website. Of het nou dik of dun, rond of hoekig is, eenvoudig of rijkversierd, het lettertype dat je kiest maakt sowieso een impact.
(Suggestieve lectuur: Hoe verberg je de pagina en posttitels in WordPress)
Laat een reactie achter