Wat is het beste lettertype voor je website? Een moeilijke keuze die je zelf of samen met een webdesigner moet maken. In dit artikel vertel ik niet alleen uit welke lettertypes je kunt kiezen voor je website, maar krijg je ook inspiratie welke lettertypes of combinaties het beste passen bij het doel van je website.
Omdat het mij al een aantal malen gevraagd is hieronder de lettertypes die ik op dit moment van schrijven (10-12-2015) gebruik:
Lettertypes voor je website kiezen
Voorheen moest het gekozen lettertype aanwezig zijn op de computer van de bezoeker, anders kon deze niet worden getoond in de browser. Dit heeft geleid tot een aantal lettertypes die worden verondersteld aanwezig te zijn op alle computers en mobiele apparaten. We noemen dit Web Safe Fonts. Populaire Web Safe Fonts zijn Arial, Helvetica en Verdana. Met een totaal van ongeveer 16 fonts blijft de keuze echter zeer beperkt.
Gelukkig heeft het web zich verder ontwikkeld en kunnen we nu kiezen uit vele moderne lettertypes die veilig gebruikt kunnen worden. Dit noemen we Webfonts. Er zijn meerdere spelers op deze markt die webfonts aanbieden. Onder andere Google heeft zich voorgenomen het web mooier, leesbaar en toegankelijker te maken door gratis webfonts ter beschikking te stellen.
De lettertypes van Google noemen we Google Fonts en kun je snel en makkelijk gebruiken op elke website. Op dit moment zijn er maar liefst 629 lettertypes waar je uit kunt kiezen (pssstt… dit artikel heb ik eigenlijk als geschreven in 2013 toen ik zelf helderheid en duidelijkheid nodig had inzake lettertypes voor een website, het zijn er nu dus waarschijnlijk meer!).
We weten nu dus dat je tegenwoordig super veel lettertypes veilig kunt gebruiken op je website. De hoeveelheid aan Web Safe Fonts en Web Fonts maakt het echter ook erg lastig om een keuze te maken. Zeker als je lettertypes wilt combineren op je website.
We hoeven gelukkig niet zelf het wiel uit te vinden. Net als bij kleurencombinaties wordt er op het internet veel geschreven over de meest populaire lettertypes. Maar dat is meteen ook het probleem. Een lettertype kan prachtig zijn, maar past dit ook bij de website die je voor ogen hebt? Er is immers een groot verschil tussen een persoonlijk blog of een zakelijke website.
Ik ben daarom specifiek op zoek gegaan naar informatie waar ze bij de keuze voor een lettertype ook rekening houden met het doel van de website. Onderstaand overzicht voor Web Safe Fonts en Google Font combinaties is het resultaat.
Web Safe Fonts kiezen
Als je geen gebruik wilt maken van Google Fonts, kun je kiezen uit een aantal Web Safe Fonts. Ik heb een eenvoudig stroomdiagram van BaseKit gevonden die je helpt bij het beste lettertype voor je website. Het uitgangspunt is het type website dat je wilt bouwen, wel zo eenvoudig!
Google Fonts combinaties
Via Google kun je veel websites vinden die uitvoerig ingaan op prachtige Google Fonts combinaties. Zoals aangegeven beperkt ik me echter tot auteurs die ook durven aan te geven bij welk type websites deze combinaties het meest geschikt zijn. Het lettertype moet immers wel passen bij het doel van de website. Mijn overzicht is samengesteld op basis van onderstaande artikelen:
- 10 Great Font Combinations from Google Web Fonts – 11 maart 2013 door Haris Bacic;
- 10 Great Google WebFont Combinations For Your Next Project – 20 mei 2013 door Nikki Clark;
- 10 Best Google Font Combinations You Haven’t Tried Yet – 2 juni 2013 door Emmanuel Torres.
Lettertype website Sacramento & Alice
Een goede combinatie voor een (banket)bakkerij, ijssalon, cateringbedrijf of elk ander lief en vriendelijk etablissement. Ook geschikt voor babykleren of elk ander jeugdig design.
Lettertype website Crete Round & ABeeZee
Een goede combinatie voor een persoonlijk blog of een vriendelijke website van een kleine onderneming. Ook geschikt voor design die zich richten op een jeugdig publiek.
Lettertype website Oswald & Open Sans
Een moderne combinatie die geschikt is voor een veelheid aan projecten en vele branches. Van technische website tot websites van kleine ondernemers, non-profit organisaties tot een persoonlijk blog.
Lettertype website Rokkitt & Roboto
Een mooie combinatie voor ecommerce websites.
Lettertype website Amatic & Andika
Een toegankelijk, vriendelijk en jeugdige combinatie geschikt voor jeugdige designs. Zou prima passen voor webshops die unieke items verkopen, persoonlijke blogs en sites met handgeschreven elementen.
Lettertype website Antic Didone & Arepey
Goede combinatie voor een fashion- of magazinedesign. Denk bijvoorbeeld ook aan de verkoop van luxe items zoals juwelen en sieraden.
Lettertype website Flamenco & Asap
Goed voor exotische en dansgerelateerde designs. Denk ook aan designs met een vrouwelijke touch. Tevens geschikt voor bakkerijen of websites over cupcakes.
Lettertype website Abel & Ubuntu
Professionele en moderne combinatie voor technisch gerelateerde websites, grote en kleine bedrijven, ecommerce en meer.
Lettertype website Medula One & Lato
Goede combinatie voor een restaurant, bar, koffiewinkel, een winkel met exotische goederen of een persoonlijke blog.
Lettertype website Squada One & Allerta
Niet geschikt voor erg lange stukken tekst. Daarmee rekeninghoudend geschikt voor portfolio’s, blogs en retro-gerelateerde designs.
Lettertype website Roboto en Fjalla One
Past goed bij een magazine design of een persoonlijk blog.
Lettertype website Sintony en Libre Baskerville
Geschikt voor de meeste blogs, maar voornamelijk wetenschappelijk georienteerde blogs die toegankelijk moeten zijn, maar ook authoriteit uit moeten stralen.
Lettertype website Rambla en Sanchez
Past goed bij blogs over een bepaald thema, maar kan ook gebruikt worden voor blogs in het algemeen.
Lettertype website Monda en Offside
Het meest geschikt voor technisch georiënteerde websites, maar ook voor blogs.
Lettertype website ABeeZee en Grand Hotel
Geschikt voor een persoonlijke blog of bij designs rondom een thema, zoals een ijs, drinken, bakkerij, cake enzovoorts.
Lettertype website ABeeZee en Patrick Hand SC
Geschikt voor een persoonlijk blog die niet erg serieus van aard is.
Lettertype website Archivo en Mouse Memoirs
Geschikt voor bijna alle blogs en websites, maar vooral voor die met een jonger publiek.
Lettertype website Domine en Fjalla One
Deze combinatie is geschikt voor een moderne nieuwsgerelateerde blog.
Lettertype website Domine en Libre Baskerville
Geschikt voor websites die een nieuwsblad vertegenwoordigen.
Lettertype website Rambla en Memoirs
Geschikt voor vele websites, maar vooral die met een jonger publiek en inhoud die niet te serieus van aard is.
Lettertype website Bree Serif en Imprima
Een moderne look voor een website met een jong en vrouwelijk publiek.
Lettertype website Montserrat en Pontano Sans
Een Google Font combinatie geschikt voor jonge bedrijven, webdesign bedrijven of een portfolio.
Lettertype website Oswald en Muli
Populair voor landingpagina’s.
Lettertype website Volkorn en Raleway (Light)
Geschikt voor designs met een luxe uitstraling.
Lettertype website Roboto Sans en Roboto Sans (Light)
Voor designs met een jonge uitstraling.
Lettertype website Josefin Slab en Maven Pro
Zeer geschikt voor fashion websites.
Lettertype website Paytone One en Droid Sans
Goede keuze voor blogs over eten.
Welke lettertype combinatie gebruik jij en waarom?
Mooi artikel. Vooral de combinaties van lettertypes wordt vaak te weinig aandacht aan besteed en je hebt een paar mooi combinaties laten zien. Die ga ik zeker proberen.
Ik maak zelf vaak gebruik van http://fontpair.co hier staan ook veel goede google font combinaties
Mooi overzicht Willem. Wat ik mis (lees: waar ik op zoek naar ben) is de bijbehorende letterhoogte. Heb je hier ook informatie over ?
Groeten,
Brian
Hoi Brian, ik weet niet zeker of ik je vraag helemaal begrijp. Letterhoogte of de grootte van het lettertype is iets wat je met CSS kunt aanpassen. Of ben je opzoek naar informatie welke lettergrootte je moet gebruiken voor de beste leesbaarheid? Kijk dan bijvoorbeeld eens naar het filmpje Face the font over leesbaarheid van teksten. Lees wel ook even mijn reactie op de video!
Dat is inderdaad wat ik zoek Willem. Letterhoogte is dus het best op12 in te stellen. Moet nu nog even uitzoeken hoe deze automatisch optimaal aan het beeldscherm aangepast wordt.
Bedankt voor je hulp!
Groeten,
Brian
Hoi Brian, in mijn vorige reactie gaf ik je de tip wel even mijn reacties op de video te lezen. Daarin geef ik aan dat 14px tegenwoordig meer de standaard is.
Hartelijk dank voor het vele (uitzoek)werk om tot dit heel bruikbare overzicht te kunnen komen!
Graag gedaan, dank voor je bericht!