Hoe ik een nieuw lettertype koos

Misschien was het de trouwe lezer al opgevallen, maar sinds deze week ziet mijn site er iets anders uit.

Het verschil zit in het lettertype.

Lettertype?

Lettertypes zijn belangrijk.

Net als een logo of bepaalde kleurstelling kan een lettertype — een font — iets zeggen over de identiteit en daarmee herkenbaarheid van een website of product.

En zo kun je van een nieuwsartikel — zonder het te lezen — vaak toch direct zeggen of het van het NRC, Trouw, NY Times of De Morgen komt. Dit komt door het font.

Maar fonts zijn ook belangrijk voor de legitimiteit van content. Zo zal een nieuwsbericht in Comic Sans door weinig mensen serieus worden genomen. Toch?

En als laatste en misschien wel het allerbelangrijkste: fonts dragen bij aan de leesbaarheid van een artikel. Wat voor content deel je: grote lappen tekst of juist lijstjes of quotes? En leest je publiek vooral op een smartphone of computer? Het maakt allemaal uit voor welk font je kiest, want het font bepaalt grotendeels hoe leesbaar je content is voor je publiek.

Font fetisjisme

Ik heb iets met fonts. Wanneer ik op een onbekende website kom, kijk ik vaak eerst even met WhatFont welke fonts de site gebruikt. Tenzij ik al kan zien dat het Merriweather, Georgia, Verdana of Roboto is.

Een font is vaak de eerste én laatste visuele weergave van de gedachten en ideeën van de schrijver voordat het door de retinas van de lezer wordt opgenomen en een eigen leven gaat krijgen in het hoofd van de lezer.

Dit gebeurde ook met de zin die je net las.

Een goed font kiezen is dus belangrijk. En, het is iets waar ik misschien wel veel te veel tijd in stop én waar ik eigenlijk nooit over tevreden ben.

Zo gebruik ik op mijn tech site — na heel veel iteraties — Fira Sans (kopjes) + Mulish (tekst), voor een wat eigenzinnige, goed leesbare en vooral strakke uitstraling. Maar ik ben er nog steeds niet echt tevreden over.

En *deze* site gebruikte tot nu toe altijd Source Sans Pro (kopjes) en PT Serif (tekst). En ondanks dat er nog nooit iemand over begonnen is of naar gevraagd heeft, vond ik het tijd voor verandering!

Het werd tijd voor een sans-serif font.

Waarom?

Eerst even wat achtergrond.

Serif vs. sans-serif

Voor de niet-kenner: lees hier het verschil tussen serif en sans-serif.

Er waren verschillende reden waarom ik de combinatie Source Sans Pro + PT Serif gebruikte.

• Deze combi is stiekem overgenomen van één van beste blogs op het internet: Seth Godin’s blog. Steal from the best.
• Mijn WordPress template (Independent Publisher) gebruikt standaard Georgia. Een zeer bekend en gewaardeerd — soms ietwat hoekig — serif font. Het voelde gek om dit in een sans-serif font te veranderen, want het hele template is immers gebouwd rond een serif font.
• Ik wou per se een serif font voor de tekst, want het staat professioneler of; meer legitiem. Al die kranten die ik eerder noemde gebruiken allemaal serif fonts.
  Maar als ik eerlijk ben, vind ik een serif font voor het soort content dat ik maak niet direct bijdragen aan de leesbaarheid.

Maar er waren meer redenen:

• De backend van WordPress gebruikt een sans-serif font. Iemand die mijn site bezoekt ziet niet precies wat ik zag bij het maken van een artikel. Ik vond dit altijd wat raar. Omdat het bijna niet anders kan, dan dat wat ik maak ook deels beïnvloed wordt door het font.
• Vrijwel alle blogs die ik zelf lees, gebruiken een sans-serif font voor hun content. En dit is logisch. Dit soort fonts lezen nou eenmaal soepeler op smartphones en computerschermen.
• Ik gebruik vaak quotes in mijn blogs: en die sprongen er niet echt uit omdat deze, net als de hoofdtekst, een serif font is. Ik wou dus een duidelijker onderscheid krijgen tussen tekst en quotes.

Dus om al die redenen wou ik een ander font. En wel een sans-serif font.

Ik was redelijk tevreden over Source Sans Pro (met gewicht 900). Maar voor de balans: serif + sans heb ik hier het Source Serif Pro zusje gekozen. Dit was een makkelijke keuze. Source Pro heeft een professionele uitstraling, soepele vormen (je ziet geen pixels) en oogt daardoor wat speels én toch ook strak. Allemaal elementen die ik goed bij mijn blog vind passen.

Maar de font voor de tekst was een stuk lastiger. Dit was PT Serif en moest nu een sans-serif font worden. Maar welke?!

Sans-serif fonts

Gelukkig kun je met WordPress heel makkelijk verschillende fonts uitproberen. Hier volgt een lijst van de fonts die ik heb geprobeerd en wat ik er van vond.

System fonts

Ik moet dit lijstje wel beginnen met de system fonts. Roboto, Segoe UI en het Apple system font.

De meeste tekst die jij de hele dag online leest, wordt waarschijnlijk gepresenteerd in één van deze drie fonts. Dit zijn de fonts die horen bij de besturingssystemen van Google, Microsoft of Apple.

Veel sites defaulten naar deze fonts. Dit is bijvoorbeeld de CSS code van de WordPress backend.

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif; }

Dit soort CSS zie je heel veel. Een site maker leunt dus op de font van een besturingssysteem. Dit heeft veel voordelen, zo weet je zeker dat al je gebruikers deze fonts hebben.

Roboto in het bijzonder.

Roboto kom je namelijk tegen van YouTube tot Marktplaats tot mijn boekensite. A-ll-e-maal gebruiken ze standaard Roboto (en vaak niet eens als system font). En wanneer je dus op een Google device (Android of Chromebook) op het internet surft dan is Roboto ook nog eens het system font, dus dan zie je Facebook, Instagram en LinkedIn ook allemaal in Roboto.

Wanneer je die laatstgenoemde sites op een Windows device bezoekt dan is het font meestal Segoe UI en op een Apple is het meestal San Francisco.

Enfin, ik had dus nu Roboto kunnen kiezen als font en klaar kunnen zijn. Iedereen gebruikt het, zal wel goed zijn toch? Maar dit was een te makkelijke optie.

Er zijn veel naast system fonts heel veel sans fonts. Ik heb me bij de volgende gehouden. De plaatjes komen van Font Squirrel of Wikipedia.

Web Safe fonts

Web Safe fonts zijn fonts die in ongeveer alle browsers zitten. Dit lijkt heel erg op system fonts, alleen dan specifiek voor je browser. Dus je gebruikers hoeven, net als system fonts, deze niet eerst te downloaden wanneer ze je site bezoeken (dat maakt je site ook weer wat sneller) en je weet zeker dat het er overal hetzelfde uit ziet. Zeker een groot voordeel.

Dit zijn drie bekendste sans-serif web safe fonts

• Arial: het hele bekende font met name voor Word. Maar ook de Google resultaten op Windows worden in Arial gepresenteerd. Het is een prima font voor tekstverwerking, voor blogs vind ik deze minder geschikt. Het is een blog, geen Word Document.
• Verdana: als het goed genoeg is voor Reddit of Hacker News (waar ik veel tijd doorbreng) waarom zou het dan niet goed genoeg zijn voor mijn site? Verdana is een zeer bekend font, maar iets te wijd naar mijn smaak.
• Tahoma: ook een aloud en zeer bekend font van Microsoft. Lijkt heel veel op Verdana, maar iets minder wijd. Ik heb lang over deze getwijfeld, maar deze had net iets te veel een 90s vibes. Want voor de oplettende kijker, dit is het font van bijvoorbeeld Windows XP en 2000.

• PT Sans: het broertje PT Serif. Klinkt als een logische keuze toch? Van de serif naar de sans versie. Maar ik vind dit font net even wat minder sterk, de kleine letter ‘l’ en de ampersand bevallen me bijvoorbeeld niet. Kijk maar.

• Hind: een font bedoelt voor interfaces, maar doet het ook goed met stukken tekst. Oogt fris! Ik weet niet meer hoe ik er op kwam, maar de site heeft een paar dagen hier op gedraaid.

• Inter: Een redelijk nieuw font, dat tussen de honderden fonts die er zijn toch een eigen plekje heeft weten te bemachtigen. Dat komt omdat het een heel opinionated font is. Maar daardoor toch ook een beetje fantasieloos font in mijn ogen, noem het gerust saai want het is veel te strak.

• Open Sans: vriendelijk heelveelgebruikt font, waar eigenlijk weinig op af te dingen valt. Het is het font dat bijvoorbeeld mijn RSS lezer gebruikt, dus het is in mijn geval het font waar ik veel online content in lees.

• Noto Sans: Het font voor de wereld. En het font van GitHub. Heeft veel positieve eigenschappen. Redelijk modern. Kijk maar naar de ‘g’.

Lato: een heel goed leesbaar, eigentijds font met niet te veel, niet te weinig lucht tussen de tekst. Het heeft iets eigenzinnigs maar misschien komt dat ook omdat het net even anders is dan Roboto.

Uiteindelijk heb ik daarom voor Lato gekozen.

Conclusie

Misschien heb je nu wel wat geleerd. Misschien denk je, dit ging allemaal veel te ver! Of denk je: al die lettertjes lijken toch precies op elkaar!

Dat kan allemaal.

En zoals hierboven al staat: niemand is er ooit over begonnen en niemand heeft er ooit naar gevraagd, maar ik vind het wel belangrijk. En voor zo lang het duurt ben ik nu tevreden over de fonts. Mijn site heeft nu iets meer een eigen uitstraling én het leest hopelijk wat prettiger.

Dus dit blijft het voor nu, maar dat kan zomaar weer veranderen.

Nu nog even over dat groene kleurtje bij de linkjes…