Lettertypes kiezen voor je blog: 5 sites vol inspiratie

Sharp Ben avatar

In:

Hoe moet je de lettertypes voor je blog kiezen? Speel je op veilig – en kies je dus voor de lettertypes waarmee je blogtheme standaard uit de doos komt – dan heb je mogelijks een wat saai blog. Zeker als je een WordPress- theme kiest dat wel populair is maar niet al te veel mogelijkheden heeft.

Leestijd: ca. 5 minuten

In dit artikel:

  • 5 websites die het kiezen van mooie lettertypes voor je blog wat makkelijker kunnen maken
  • een korte uitleg over hoe je Google fonts toevoegt aan je WordPress-blog of -website

Lettertypes kiezen voor je blog? Deze sites brengen inspiratie

Het blijft mij altijd verbazen hoeveel invloed zoiets stoms als een lettertype (font) kan hebben op de algehele look and feel van zo’n blog. En zeker wie op WordPress blogt heeft wel wat mogelijkheden. Maar het is natuurlijk altijd opletten. Want de scheidslijn tussen een blog met een mooie, onderscheidende typografie en eentje waar het gros van je lezers niet doorheen geraken is soms heel dun. Daarover zette al eerder een boompje op. Deze sites brengen je inspiratie bij het kiezen van de juiste fonts voor je blogproject. Veel plezier!

1. Google fonts

Het verhaal gaat dat Google de kakofonie aan verschillende lettertypes op het web grondig beu was en dan maar zelf een bibliotheek ging samenstellen met esthetisch verantwoorde fonts voor webgebruik. Google fonts bevat momenteel een kleine 1.000 lettertypes die iedereen gratis mag gebruiken.

Er is een zoekfunctie (tik de naam van een lettertype in en kijk hoe het eruitziet), je kan eindeloos scrollen op zoek naar iets leuks. Handig is ook dat je een eigen stukje tekst kan invoeren om een beter idee te krijgen van hoe het er in jouw praktijk komt uit te zien. De fonts kan je trouwens ook in verschillende groottes bekijken en ook getallen kan je zien. Oh, en ook handig: Google fonts geeft een indicatie hoe snel een font kan ingeladen worden.

Druk op het plusje om het stukje code te kopiëren om de letter te kunnen gebruiken op je website. Verderop in dit stuk meer over het toevoegen van custom fonts aan je WordPress-blog.

2. Google Web Fonts Typographic Project

Op Google Web Fonts Typographic Project wordt wat concreter aan de slag gegaan met een selectie van de verschillende Google fonts. Je krijgt hier vooral een zicht op hoe een en ander er kan komen uit te zien op een echte website. Compleet met kleurgebruik, achtergronden, knoppen, foto’s, mooie combinaties met andere lettertypes enzovoort. Handig als je je een visuele voorstelling wil maken.

3. Canva Font Combinations

Bijna iedereen kent Canva, maar dat het ook een speciale website heeft met mooie combinaties van lettertypes is minder geweten. Tik in de zoekbalk van Canva Font Combinations de naam van een favoriet lettertype in en je krijgt direct een aantal suggesties over welk font er mooi bij zou passen. Soms krijg je maar een of twee voorbeeldjes, soms zijn het er een vijftal. En vlak daarnaast heb je een screenshot van een site waar die bewuste lettertypecombinatie in gebruik is.

4. Fontpair.co

Ook Fontpair.co toont dus fontparen. De nadruk wordt gelegd op de vaakst voorkomende combi: bodytekst – hoofding/tussenkop. Hier kan je scrollen tot je een ons weegt. Tik de naam van een font in in de zoekbalk en weer vallen je een aantal suggesties in de schoot. Klik rechtsboven op Popular fonts en je hebt meteen het hele alfabet, de speciale tekens en de cijfers voor dat lettertype.

5. Fonts in use

Fonts in use is niet direct op het internet gericht, maar kan toch ook handig zijn als je bijvoorbeeld inspiratie zoekt voor het ontwerp van een logo, een reclamebanner of een hoofding voor je blog. Je kan de database doorzoeken op basis van de industrie (de niche) waarin je actief bent, het format (soort publicatie) dat je nodig hebt of het lettertype.

Tot zover wat inspiratie voor als je toch eens wat anders wil en niet het risico wil lopen op een eerste prijs tijdens de spreekwoordelijke “Nacht van de wansmaak.” En wil je echt iets unieks, dan is het toch zaak om eens wat dieper te graven in de databases…

Custom fonts toevoegen aan WordPress, hoe werkt dat?

Heb je een gratis WordPress-theme dan mag je van geluk spreken als je überhaupt een aantal lettertypecombinaties hebt om mee te spelen. Bij een premium theme worden er vaak een hele reeks meegegeven.

Lees ook: Zelf lettertypes kiezen in WordPress?

Zit jouw lievelings er niet tussen, dan kan je die wel installeren op je WordPress-blog.

1. Via de plugin Easy Google Fonts

Na installatie van Easy Google Fonts krijg je een extra tabje (Typography) in de customizer van je thema, waarna je heel makkelijk de lettertypes van de verschillende onderdelen kan aanpassen.

2. Fonts manueel downloaden en implementeren

Wil je hier liever geen plugin voor gebruiken? Dat hoeft ook niet, op voorwaarde dat je WordPress-blog een sectie voor Custom CSS heeft. Hier is je stappenplan:

Er moeten twee stukjes code worden toegevoegd aan WordPress. Eentje in het hoofd van de html-code van je blog en eentje in de CSS-stylesheet.

  1. klik in Google fonts bij het lettertype dat je wil gaan gebruiken op het plusje.
  2. er verschijnt een geminimaliseerd venster in beeld
  3. klik dat open
  4. kopieer het codefragment in de bovenste grijze balk
  5. plak de code in de <head> van je html-document (binnen WordPress)
  6. Sla het zaakje op

Dan moet je aan WordPress nog aangeven op welke elementen dat nieuwe font van toepassing zal zijn. Dat doe je in de custom CSS van je theme.

  1. kopieer in Google Fonts het codefragment uit de onderste grijze balk
  2. open in WordPress je custom CSS
  3. plak daar het codefragment dat je zonet uit Google Fonts haalde
  4. Sla het zaakje op

Vooral bij het plakken van het eerste codefragment is het opletten geblazen. Want je bent in de programmatuur van je site bezig. Voel je je hier niet zeker? Een plugin als Insert Headers and footers laat je toe om eenvoudig en zonder groot gevaar stukjes code aan je site toe te voegen. In dit geval plaats je de code in de header.

Onderscheidende lettertypes kiezen voor je blog kan dus een tricky bezigheid zijn. Maar de vijf websites die hierboven aan bod komen kunnen je aardig op weg zetten.


Category:

Comments

Geef een reactie

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