• Door naar de hoofd inhoud
  • Spring naar de eerste sidebar
  • Home
  • Websiteontwikkeling
  • ZZP’en
  • Fysiek fit
  • Over mij

W.S. Spoelstra

Learning through blogging

Het beste lettertype voor je website kiezen

28 maart 2015 by Willem-Siebe Spoelstra 7 Reacties

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:

  • Lato voor de normale tekst;
  • Raleway voor de titels.

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!

Lettertype website stroomdiagram

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 Sacramento en Alice

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 Crete Round en ABeeZee

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 Oswald en Open Sans

Lettertype website Rokkitt & Roboto

Een mooie combinatie voor ecommerce websites.

Lettertype website Rokkit en Roboto

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 Amatic en Andika

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 Antic Didone en Arapey

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 Flamenco en Asap

Lettertype website Abel & Ubuntu

Professionele en moderne combinatie voor technisch gerelateerde websites, grote en kleine bedrijven, ecommerce en meer.

Lettertype website Abel en Ubuntu

Lettertype website Medula One & Lato

Goede combinatie voor een restaurant, bar, koffiewinkel, een winkel met exotische goederen of een persoonlijke blog.

Lettertype website Medula One en Lato

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 Squada One en Allerta

 Lettertype website Roboto en Fjalla One

Past goed bij een magazine design of een persoonlijk blog.

Lettertype website Roboto en Fjalla One

 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 Sintony en Libre Baskerville

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 Rambla en Sanchez

Lettertype website Monda en Offside

Het meest geschikt voor technisch georiënteerde websites, maar ook voor blogs.

Lettertype website Monda en Offside

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 Grand Hotel

Lettertype website ABeeZee en Patrick Hand SC

Geschikt voor een persoonlijk blog die niet erg serieus van aard is.

Lettertype website ABeeZee en Patrick Hand SC

Lettertype website Archivo en Mouse Memoirs

Geschikt voor bijna alle blogs en websites, maar vooral voor die met een jonger publiek.

Lettertype website Archivo Narrow en Mouse Memoirs

Lettertype website Domine en Fjalla One

Deze combinatie is geschikt voor een moderne nieuwsgerelateerde blog.

Lettertype website Domine en Fjalla One

Lettertype website Domine en Libre Baskerville

Geschikt voor websites die een nieuwsblad vertegenwoordigen.

Lettertype website Domine en Libre Baskerville

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 Rambla en Mouse Memoirs

Lettertype website Bree Serif en Imprima

Lettertype website Bree Serif en ImprimaEen moderne look voor een website met een jong en vrouwelijk publiek.

Lettertype website Montserrat en Pontano Sans

Lettertype website Montserrat en Pontano SansEen Google Font combinatie geschikt voor jonge bedrijven, webdesign bedrijven of een portfolio.

Lettertype website Oswald en Muli

Lettertype website Oswald en MuliPopulair voor landingpagina’s.

Lettertype website Volkorn en Raleway (Light)

Lettertype Volkorn en Raleway (Light)Geschikt voor designs met een luxe uitstraling.

Lettertype website Roboto Sans en Roboto Sans (Light)

Lettertype Roboto Sans en Roboto Sans (Light)Voor designs met een jonge uitstraling.

Lettertype website Josefin Slab en Maven Pro

Lettertype website Josefin Slab en Maven ProZeer geschikt voor fashion websites.

Lettertype website Paytone One en Droid Sans

Lettertype website Paytone One en Droid SansGoede keuze voor blogs over eten.

Welke lettertype combinatie gebruik jij en waarom?

Gerelateerd

Dit delen:

  • Tweet
  • E-mail

Gerelateerd

Categorie: Websiteontwikkeling Tags: Webdesign

Lees Interacties

Reacties

  1. Adriaan zegt

    30 september 2016 om 15:20

    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

    Beantwoorden
  2. Brian zegt

    7 februari 2016 om 11:23

    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

    Beantwoorden
    • Willem-Siebe Spoelstra zegt

      7 februari 2016 om 11:40

      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!

      Beantwoorden
      • Brian zegt

        7 februari 2016 om 21:31

        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

        Beantwoorden
        • Willem-Siebe Spoelstra zegt

          10 februari 2016 om 20:11

          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.

          Beantwoorden
  3. Ad Bouwen zegt

    6 januari 2016 om 09:46

    Hartelijk dank voor het vele (uitzoek)werk om tot dit heel bruikbare overzicht te kunnen komen!

    Beantwoorden
    • Willem-Siebe Spoelstra zegt

      6 januari 2016 om 19:28

      Graag gedaan, dank voor je bericht!

      Beantwoorden

Geef een reactie Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Primaire Sidebar

Waar wil je wat over weten?

Meest gelezen berichten laatste 48 uur

  • Het verschil tussen b, strong, i & em plus tips voor WordPress en SEO
  • Sterren in Google: de complete uitleg!
  • Hoe je in Gmail autoresponder e-mails maakt
  • Winkelwagen buttons verwijderen in WooCommerce

Meest recente berichten

  • Zakelijke kosten, investeringen en afschrijvingen
  • Affiliate disclosure voorbeelden
  • Websiteontwikkeling links
  • Lijstje: recepten zonder pakjes & zakjes
  • Gewicht: doel versus realiteit

Recente reacties

  • ramona op Hoe je in Gmail autoresponder e-mails maakt
  • ramona op Hoe je in Gmail autoresponder e-mails maakt
  • Rob Stolk op Klassieke opzet (web)server, simpele uitleg!
  • Willem-Siebe Spoelstra op Klassieke opzet (web)server, simpele uitleg!
  • Henk op Klassieke opzet (web)server, simpele uitleg!

Categorieën

  • Fysiek fit (2)
  • Websiteontwikkeling (42)
  • ZZP'en (2)

Mis niks, volg mij via Facebook!

Mis niks, volg mij via Facebook!

Tags

Boekhouden (1) HTML (3) Webdesign (1) Webdevelopment (6) WooCommerce (2) WordPress (11) Zoekmachine optimalisatie (SEO) (4)

Mis niks meer…

Meld je aan op mijn e-mail lijst en je krijgt simpelweg een mailtje als ik weer wat gedeeld heb over webdevelopment, WordPress of SEO!

Aanmelden

Copyright © 2023