De 53 beste Google Fonts in 2017

Geen reacties
Tags: , , ,
Posted 29 jun 2017 in nieuws

Google Fonts is al jaren één van de populairste providers van gratis fonts voor je website. Op dit moment huisvest deze enorme fontbibliotheek maar liefst 818 webfonts. Voor het geval je door de bomen het bos niet meer ziet, zoeken wij graag voor je uit wat de beste Google Fonts in 2017 zijn.

Gratis webfonts

Google Fonts is in 2010 gestart onder de naam Google Web Fonts als platform voor gratis webfonts met een opensourcelicentie. Tot die tijd werd vaak gebruikgemaakt van een handjevol ‘veilige offline lettertypen’ die standaard op elke computer geïnstalleerd staan. Zo was je er zeker van dat je website er voor iedereen hetzelfde uitzag. De keuze voor een font met jouw voorkeur was hierdoor wel erg beperkt.

Services als Google Fonts hebben dit probleem opgelost met de introductie van gratis webfonts. Deze fonts staan online en worden automatisch gedownload door iedereen die je website bezoekt, ook al hebben ze het betreffende font niet op hun computer geïnstalleerd. Dit opent de mogelijkheid om websites te maken met de fonts die jij wilt, zonder je af te vragen of al je bezoekers exact hetzelfde font te zien krijgen.

In zeven jaar tijd is Google Fonts meerdere malen vernieuwd, zijn er honderden lettertypen bijgekomen en wordt er op grote schaal gebruikgemaakt van gratis webfonts. De afgelopen 30 dagen zijn de servers van Google Fonts al meer dan 500 miljoen keer benaderd om een font te downloaden.

Handige tools voor het beheren en ontdekken van Google Fonts

Met meer dan 800 fonts is het zoeken naar een speld in een hooiberg om te zien of er wat leuks voor je tussenzit. Om het ontdekken en beheren van de beste Google Fonts makkelijker te maken, zijn er verschillende tools in het leven geroepen.

  • SkyFonts

Google Fonts is behalve op je website ook direct op je computer te installeren. Op die manier is het mogelijk om je favoriete lettertypen in programma’s als Word te gebruiken. Het is echter lastig om je gedownloade webfonts handmatig te controleren op nieuwe versies. Een fontmanager als SkyFonts helpt je hierbij door automatisch verouderde lettertypen te updaten. Ook installeer je vanuit SkyFonts snel nieuwe fonts of verwijder je bestaande fonts.

  • Fount

Met Fount kan je op elke website met één druk op de knop achterhalen welke fonts gebruikt worden en hoe groot ze zijn. Voeg de bookmarklet toe aan je bladwijzerbalk om gelijk te beginnen.

  • Font Map

Font Map is een experiment gebaseerd op artificiële intelligentie met als doel 750 Google Fonts te rangschikken naar vorm en soort. Dankzij de gegenereerde map zie je in één oogopslag welke fonts sterk op elkaar lijken.

  • Better Font Finder

Dankzij Better Font Finder filter je 71 populaire Google Fonts op verschillende eigenschappen om zo je perfecte font te vinden. Zo kan je ervoor kiezen om alleen de fonts te zien met een bepaalde lijndikte, afronding of stijl.

Implementeren en downloaden van Google Fonts op je website

De implementatie van Google Fonts op je website bestaat uit twee delen. Ten eerste zal je in het hoofd van je HTML-code het juiste Google Font moeten oproepen. Dit doe je door een <link> tag te plaatsen. Google vertelt je wat er precies in deze tag moet staan zodra je een font hebt geselecteerd op de Google Fonts-website. Met de volgende tag geef je bijvoorbeeld aan dat je het Noto Sans-lettertype met een dikte van 700 op je website wilt implementeren.

<head>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:700" rel="stylesheet">
</head>

Ten tweede zal je kenbaar moeten maken op welke plekken je een Google Font wilt inzetten. Dit doe je in de CSS-stylesheet. Selecteer een element en koppel het door jou opgeroepen Google Font hieraan via de font-family selector. Met de volgende stijlregel koppel je alle tekst op een webpagina via de body selector aan het Noto Sans font. Mocht het downloaden van dit font om de een of andere reden mislukken, dan staat er in de code een opdracht aan de browser om een soortgelijk sans serif font te laten zien. Dit kan je zien als een soort reserveplan.

body {
font-family: 'Noto Sans', sans-serif;
font-size: 48px;
}

Beste Google Fonts 2017

Nu je weet wat gratis webfonts zijn en hoe je ze instelt op een website, is het tijd om te kijken wat de beste Google Fonts van dit moment zijn. Om dit te achterhalen, hebben we gekeken naar de populairste artikelen die de afgelopen tijd zijn verschenen over dit onderwerp. Alle fonts die drie keer of meer genoemd zijn in deze artikelen hebben we verzameld in de onderstaande lijst. Dit zijn er uiteindelijk 53 geworden.

Hiernaast hebben we deze populaire fonts gecategoriseerd naar hun bijhorende hoofd- en substijlen. Zo kan je soortgelijke fonts makkelijker opzoeken en weet je beter bij welke situatie een bepaald font past. Elk font heeft namelijk zijn eigen doel!

Serif

Deze lettertypen hebben hun naam te danken aan de schreven aan het uiteinde van veel letters. Serifs worden in verband met de details van de schreven door veel mensen minder geschikt geacht voor kleine teksten op computerschermen. Binnen de serif-stijl bestaan er meerdere substijlen.

Wat is een serif lettertype

Serif: Oude Stijl

Serif Oude Stijl is de eerste vorm van serifs en het heeft daarom nog gelijkenis met kalligrafie. Zo is er in veel letters een verschil in lijndikte merkbaar en zijn de schreven gebogen. Net als een met de pen geschreven letter bevindt het dunste punt zich niet boven of onder, maar meer schuin. Dit is bijvoorbeeld goed merkbaar in de letter ‘o’ of ‘e’, waar de dunste punten zich op 10 en 4 uur van de klok bevinden.

Alegreya font

Alegreya (9x genoemd)

Let op! Dit font heeft – net als vele andere fonts – meerdere gewichten. Maar het blijft één font.

Neuton font

Neuton (4x genoemd)

Gentium Basic font

Gentium Basic (3x genoemd)

Serif: Transitional

Transitional serifs bevinden zich ergens tussen de oude en moderne stijlen van serifs. Het verschil in lijndikte is beter merkbaar dan bij de Oude Stijl en de dunste punten bevinden zich meestal niet meer op de diagonale as, maar juist boven en onder een letter. Deze stijl is net als de Oude Stijl geschikt voor langere teksten op je website.

Lora font

Lora (16x genoemd)

Droid Serif font

Droid Serif (13x genoemd)

Merriweather font

Merriweather (12x genoemd)

Vollkorn font

Vollkorn (11x genoemd)

PT Serif font

PT Serif (9x genoemd)

Old Standard TT font

Old Standard TT (7x genoemd)

Domine font

Domine (7x genoemd)

Crimson Text font

Crimson Text (4x genoemd)

Libre Baskerville font

Libre Baskerville (3x genoemd)

Serif: Modern

Moderne serifs zijn de gentlemen onder de serifs en zijn meteen te herkennen aan het gigantische verschil in lijndikte. Deze fonts passen uitstekend in titels van websites met een klassiek sfeertje.

Playfair Display font

Playfair Display (14x genoemd)

Abril Fatface font

Abril Fatface (6x genoemd)

Serif: Slab

Slab serifs hebben opvallende vierkante schreven en weinig tot geen verschil in lijndikte. Als je de schreven wegdenkt, dan lijkt deze stijl erg op de hierna te bespreken sans serif. Slab serifs staan goed in grote titels om de aandacht te trekken.

Arvo font

Arvo (18x genoemd)

Josefin Slab font

Josefin Slab (9x genoemd)

Roboto Slab font

Roboto Slab (9x genoemd)

Rokkitt font.

Rokkitt (6x genoemd)

Arbutus Slab font

Arbutus Slab (4x genoemd)

Bree Serif font

Bree Serif (4x genoemd)

Slabo font

Slabo (4x genoemd)

Bitter font

Bitter (3x genoemd)

Cherry Swash

Cherry Swash (3x genoemd)

Kreon font

Kreon (3x genoemd)

Sans serif

In de negentiende en twintigste eeuw was er een opmars aan stijlen die afstand deden van de serif-stijl. Deze nieuwe stijlen zijn het makkelijkst te herkennen aan het gebrek aan schreven aan het uiteinde van letters. Vandaar de naam sans serif (zonder schreven). Ze worden vaak beschouwd als modernere fonts en beter geschikt om te lezen op digitale schermen. Ook de sans serif-stijl bestaat uit meerdere substijlen.

Sans serif: Grotesque

Als een van de eerste sans serifs lijkt deze stijl erg op serif, alleen dan zonder de schreven. Fonts in deze stijl zijn te herkennen aan de kleine ‘g’ en ‘a’, die op de ouderwetse (serif) manier geschreven worden. De hoofdletter G heeft vaak een schreef rechtsonder. Ook hebben de letters een klein, maar herkenbaar verschil in lijndikte.

Work Sans font

Work Sans (4x genoemd)

Oswald font

Oswald (7x genoemd)

Karla font

Karla (3x genoemd)

Libre Franklin font

Libre Franklin (3x genoemd)

Sans serif: Neo-Grotesque

Deze stijl is meer minimalistisch. Makkelijk te herkennen aan weinig tot geen verschil in lijndikte.

Roboto font

Roboto (18x genoemd)

Raleway font

Raleway (14x genoemd)

Abeezee font

ABeeZee (3x genoemd)

Oxygen font

Oxygen (3x genoemd)

Sans serif: Geometrisch

Deze stijl is nog simpeler dan Neo-Grotesque en kenmerkt zich door de geometrische vormen die gebruikt worden. Veel ronde letters, zoals ‘O’, lijken op een perfecte cirkel. Geometrische fonts worden vaak minder geschikt geacht voor lange teksten.

Montserrat font

Montserrat (13x genoemd)

Poppins font

Poppins (5x genoemd)

Exo font

Exo 1 & 2 (3x genoemd)

Sans serif: Humanist

Humanistische fonts grijpen terug naar het ‘menselijke’ schrijven en vertonen kalligrafische invloeden. Ze hebben daarom veel gemeen met de Grotesque stijl, maar het verschil in lijndikte is beter merkbaar. Deze fonts worden door velen als de best leesbare fontstijl op digitale schermen beschouwd.

Lato font

Lato (26x genoemd)

Open Sans font

Open Sans (22x genoemd)

Ubuntu font

Ubuntu (14x genoemd)

PT Sans font

PT Sans (13x genoemd)

Droid Sans font

Droid Sans (12x genoemd)

Cabin font

Cabin (11x genoemd)

Alegreya Sans font

Alegreya Sans (4x genoemd)

Fira Sans font

Fira Sans (3x genoemd)

Fjalla One font

Fjalla One (3x genoemd)

Noto Sans font

Noto Sans (3x genoemd)

Andere stijlen

Er zijn ten slotte nog bepaalde stijlen die niet makkelijk te plaatsen zijn in de bovenstaande hoofdstijlen.

Rounded sans

Een aparte categorie sans serifs met afgeronde uiteinden. Ideaal voor titels.

Dosis font

Dosis (6x genoemd)

Nunito font

Nunito (3x genoemd)

Monospace fonts

Bij monospace fonts neemt elke letter een vaste hoeveelheid ruimte in. Ter compensatie hebben dunne letters als de ‘i’ en ‘l’ daarom brede schreven. Monospace fonts zijn vaak populair om codevoorbeelden mee te schrijven.

Inconsolata font

Inconsolata (5x genoemd)

Casual script

Casual script lijkt erg op modern handgeschreven geschrift en kenmerkt zich aan de dikke letters, waarbij het lijkt alsof ze met een kwast geschreven zijn. Net als round sans is deze stijl meer geschikt voor titels.

Lobster font

Lobster 1 & 2 (10x genoemd)

Grand Hotel font

Grand Hotel (3x genoemd)

Indie Flower

Indie Flower (3x genoemd)

Pacifico font

Pacifico (3x genoemd)

*) Dit artikel werd eerder gepubliceerd op de website van TransIP.



Lees het volledige bericht op Emerce »


Add Your Comment