10 Awesome Google Font Combinations Trending in 2021

Een lijst met trendy lettertypen die met de hand zijn uitgekozen bij Google Fonts en die goed bij elkaar passen en hoe u ze op uw website kunt installeren.

• Artikel door Jason Beever
• Bijgewerkt: 2 januari 2020
• Tags: typografie, webdesign

Websitetypografie was vroeger een meer mystificerende ontwerppraktijk dan het vandaag de dag is. Het ingewikkelde proces om een webpagina te verfraaien met aangepaste lettertypen vereiste ooit het converteren en insluiten van lettertypebestanden die op de server van de gebruiker moesten worden gehost, en de keuze van beschikbare lettertypen was beperkt tot de eigen verzameling van de gebruiker of kennis van typografie buiten de standaard systeemlettertypen. Als gevolg hiervan zagen de meeste websites er bijna identiek uit in hun inhoudsopmaak, die vertrouwde op veel te veel gebruikte en alledaagse webveilige lettertypen.

Dat alles veranderde in 2010 met de release van Google Fonts, een open-source project dat de implementatie van aangepaste lettertypen op websites veel eenvoudiger maakt. Het installeren van deze lettertypen op uw eigen website is gelukkig een proces dat snel en eenvoudig is, maar u moet zich ervan bewust zijn dat niet elke lettertypecombinatie in de bibliotheek van Google een recept is voor typografisch succes. Met de juiste lettertypecombinaties en gebruiksoverwegingen kan uw online merk echter professionaliteit, schoonheid en lezersvriendelijkheid uitstralen zonder dat u dure aangepaste lettertypes nodig hebt. In dit artikel laat ik je zien hoe je dit allemaal kunt bereiken.

Een lijst van 10 Trending Google Font Combinaties

Let’s get to it! In willekeurige volgorde, hier zijn 10 van de beste Google Font combinaties op dit moment trending:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed

Hier is een eenvoudige combinatie die wonderen doet voor bijna elk toepasbaar gebruik. Open Sans is een van, zo niet het meest veelzijdige lettertype in de hele collectie van Google Fonts. Het is zeer gemakkelijk te lezen in grote blokken tekst, terwijl het toch opvallend genoeg is voor krantenkoppen.

Eenvoudig. Verfijnd. Vertrouwd. Je kunt niet fout gaan!

Real-World Use

Ik kan me geen scenario voorstellen waarin Open Sans een slechte keuze zou zijn. Tenzij je specifiek op zoek bent naar een schreeflettertype, denk ik dat dit lettertype perfect is voor bijna elk bedrijf, blog, landingspagina, of web app.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald is een geweldig lettertype voor kopteksten, ongeacht het lettergewicht of het gebruik van caps. Door het compacte karakter trekt het de aandacht en springt het eruit, maar het zorgt ook voor een aangenaam unieke tekst als lettertype voor de hoofdtekst.

EB Garamond is een elegante update van het klassieke Garamond-lettertype. Dit lettertype is direct herkenbaar en tijdloos en straalt een kenmerkende professionaliteit uit in uw typografie.

Real-World Use

Deze combinatie werkt goed voor professionals die te maken hebben met high-end clientèle, zoals advocaten, makelaarskantoren of zelfs chique boetieks. De veelzijdigheid van Oswald en de klassieke uitstraling van EB Garamond zijn ideaal voor productbeschrijvingen waarbij het belangrijk is de nadruk te leggen op een product van topkwaliteit. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat is een favoriet onder ontwerpers vanwege zijn veelzijdigheid en eenvoud, en Merriweather past uitstekend bij zijn contrasterende stijl en gemakkelijke leesbaarheid. Voel je vrij om ze te verwisselen als kop of paragraaf tekst – ze werken allebei geweldig als beide!

Real-World Use

Deze bijzondere combinatie is een mooie balans tussen modern en klassiek design. Als zodanig, kan de verscheidenheid van toepassingen ondersteunen vele soorten bedrijven. Persoonlijk denk ik dat deze lettertypen het goed zouden doen voor elk type online nieuwsbron of uitgeverij.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

De lettertypefamilie Roboto is een persoonlijke favoriet en het is ook een die we hier bij How To Get Online gebruiken. Zeer veelzijdig met een breed scala van lettertype gewichten, is er vrijwel geen beperking aan wat het lettertype kan worden gebruikt voor. Modern en geometrisch, maar toch een of andere manier blijven vriendelijk en betrouwbaar, Roboto is een wonder van vorm en functie.

Real-World Use

Hier is nog een koppeling die je zou hard worden gedwongen om een slechte toepassing voor te vinden. Terwijl Roboto werkt voor zowat alles, ik denk dat het bijzonder geweldig is voor tech start-ups, moderne kleine bedrijven, of elk type merk met een oog op de toekomst.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

Het is onze vriend Roboto weer! Deze keer kijken we echter naar de schreefvariant, Roboto Slab. Het is een lettertype dat net zo veelzijdig is als zijn neef, maar toch een beetje klassieker van stijl. In combinatie met de opvallende en gedurfde Raleway hebben we een verbazingwekkende combinatie van zuivere en verfijnde typografie.

Real-World Use

Raleway is een van die lettertypes die verfijning uitstralen. Wanneer gebruikt als een all-caps kop, ik denk dat het werkt prachtig voor luxe artikelen zoals sieraden, designer kleding, of soortgelijke luxe e-commerce producten. Roboto Slab ondersteunt het goed met eenvoudige en toegankelijke beschrijvende tekst.

Ze werken ook allebei door elkaar. Probeer verschillende gewichtsvariaties voor beide lettertypen in de koppen en de hoofdtekst en kijk welk paar uw merk het beste vangt.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Volgens de ontwerper is Playfair Display geïnspireerd op de lettervormen van de 18e eeuw tijdens de overgang van ganzenpennen naar pennen met stalen punt. Het is dan ook geen verrassing dat dit lettertype straalt oude wereld charme, maar met een moderne spin.

Source Sans Pro duwt dingen een beetje verder in de toekomst, het creëren van een intrigerende combinatie die is sierlijke terwijl nog steeds utilitair.

Real-World gebruik

Playfair Display voegt een persoonlijk tintje aan iets als een tagline of productbeschrijving. Als je de kans krijgt om de ampersand of valutasymbolen te gebruiken, zul je meteen zien waarom het de perfecte keuze is voor een product of dienst die draait om luxe en uiterlijk vertoon. Source Sans Pro houdt de tekst geaard in een moderne en strakke presentatie.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One is misschien niet het meest veelzijdige lettertype, maar één ding doet het bijzonder goed: kopteksten maken die de aandacht opeisen. Klein of groot, kleine letters of allemaal hoofdletters, die letters zijn hypnotiserend, wat je er ook mee doet.

Noto Sans wil een echt universeel lettertype zijn waar, ongeacht de taal, het zonder opmaakfouten kan worden weergegeven voor gebruikers over de hele wereld. Passend, de esthetiek van het lettertype is net zo veelzijdig als zijn nut.

Real-World Use

Blogs of landing pages zou geweldig zijn voor deze pairing-of echt alles met lange lichamen van tekst die merkbare onderverdelingen nodig hebben om de inhoud te breken. De universele aanpasbaarheid van Noto Sans maakt het ook een goede keuze wanneer het bereiken van een internationaal publiek een prioriteit is.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya heeft een bepaalde aantrekkingskracht die voor mij heel “aards” en vriendelijk aanvoelt. Er is geen pretentie over zijn persoonlijkheid; wat je ziet is wat je krijgt.

Lato zou Open Sans een run voor zijn geld kunnen geven als de kampioen van all-purpose fonts in Google’s bibliotheek.

Tegen elkaar vormen ze een combinatie die leuk is, gemakkelijk te lezen, en pragmatisch.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow

Een andere moderne kijk op een ouderwetse stijl, PT Sans en zijn broeders, PT Sans Narrow, maken een onmiddellijk en onmiskenbaar statement wanneer ze samen worden gecombineerd.

Real-World Use

Either font werkt even goed als een kop of body tekst; de specifieke combinatie die u kiest zal afhangen van de aard van uw woorden – hoewel ik de neiging om PT Sans Narrow voorkeur in kortere uitbarstingen.

Bedoeld als een “zeer belangrijk instrument voor de moderne digitale communicatie,” lijkt het meest geschikt om – maar zeker niet beperkt tot – deze lettertypen te gebruiken voor tech startups, software applicaties, of andere digitale bedrijven.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Okay, deze is zeker meer aan de luchthartige kant. Uiteraard zal deze combinatie niet voor iedereen werken, maar de grillige aard van zowel Amatic SC als Josefin Sans creëren iets dat zeker zal opvallen – zolang je maar voorzichtig bent!

Real-World Use

Als je een vrolijke artiest, acteur, muzikant of entertainer bent, dan kan dit lettertype essentieel zijn bij het vastleggen van je unieke persoonlijkheid. Afhankelijk van de overkoepelende toon en het onderwerp, zou deze combinatie ook voor een nicheblog kunnen werken.

Een woord van advies: Gebruik geen Amatic SC als je hoofdtekst. U zult uw lezers gek.

Bonus: 5 van onze favoriete Premium lettertypen

We weten dat dit artikel gaat over de beste, trending Google-lettertypen, maar we wilden ook een paar van onze favoriete premium lettertypen te vermelden als een bonus. Premium lettertypen zijn natuurlijk niet gratis – maar ze geven je website wel een unieker en aangepast ontwerp. Deze lettertypes zijn niet populair of trending en zijn inderdaad het tegenovergestelde van de lettertypes die we hierboven vermeld hebben. Deze zijn echter geweldig voor degenen die een op maat gemaakt en gepersonaliseerd ontwerp voor hun merk willen en ze zijn goed te gebruiken voor logo’s of zelfs creatieve koppen:

Bonus 1: De Mega Craft Bundle X

Bonus 2: De Valentine’s Bundle

Bonus 3: De coole lettertypenbundel

Bonus 4: De kleine grafische bundel

Bonus 5: Jaloers

Waarom moet je Google Fonts gebruiken?

Welkom bij wat veel webdesigners als hun beste vriend beschouwen. Sprekend uit ervaring, kan ik je vertellen dat ik zelden nog aangepaste lettertype bestanden in websites integreer. Google Fonts is nu bijna exclusief de eerste en laatste plaats waar ik naartoe ga voor de typografie van een website. Hier is waarom:

• Het is helemaal gratis. Maakt niet uit hoeveel lettertypen je kiest of op hoeveel websites je ze gebruikt. Je betaalt nooit een dubbeltje.
• Met ingang van maart 2018 zijn er meer dan 850 lettertypen in de bibliotheek. De kans is groot dat u de juiste stijl vindt die bij uw merk past.
• Het is snel. Omdat de lettertypen worden gehost op de servers van Google, zijn de bestanden op intelligente wijze gecomprimeerd en ontworpen om snel te laden.
• Het is gemakkelijk. Kopieer en plak ze in een HTML-bestand en u bent klaar.
• Het is overzichtelijk. Alle lettertypen zijn gecategoriseerd en doorzoekbaar in één database. Niet meer zoeken in rommelige submappen op uw computer om dat perfecte lettertype te vinden.
• Heb ik al gezegd dat het gratis is? Het is gratis!

Hoe Google Fonts te installeren

Geen hoofdpijn nodig hier. Ga naar Google Fonts en zoek de lettertypes die u nodig heeft.

Zo gauw u lettertypes selecteert, worden ze toegevoegd aan een verzameling onderaan de pagina. Als u klaar bent met zoeken, klikt u op de onderste tab en een venster met insluitinstructies verschijnt.

Stijlen toevoegen

Van hieruit kunt u kiezen voor extra opmaak zoals cursief, vet, vet-hoofdletters enzovoort. Klik op het tabblad CUSTOMIZE en selecteer de stijlen die u nodig denkt te hebben.

Zo zou ik bijvoorbeeld zowel normale als vette tekst selecteren voor het lettertype Khula.

Invoegen van de standaard of @Import?

U zult zien dat u twee mogelijkheden hebt om de lettertypen op uw website in te sluiten: u gebruikt een standaard <link href> die u in het HTML-bestand van uw site gebruikt, of een @import url die u in het CSS-bestand van uw site opneemt. Dus welke moet je gebruiken?

In het algemeen is de beste optie om de <link href> regel te kopiëren en te plakken in je HTML bestand. Uw lettertypen zullen meestal sneller laden op deze manier in plaats van te wachten op het CSS-bestand te laden, en deze methode heeft ook een beetje betere ondersteuning voor (zeer) oude browsers.

Waar te zetten de code

Je gaat kopiëren en plakken van de regel code Google geeft u in de <head> sectie van uw HTML-bestand. Dus als je het Khula-lettertype gebruikt dat ik hierboven heb gekozen, ziet het er als volgt uit:

Het lettertype gebruiken in je stylesheet

Nu roep je het lettertype gewoon aan zoals gebruikelijk binnen je CSS code. Ter illustratie: uw koptekst en paragraaftekst zouden er zo uit kunnen zien:

Advies over het paren van uw lettertypen

Het bepalen welke lettertypen bij elkaar moeten worden gegroepeerd kan soms een lastige artistieke balans zijn. Aan de ene kant zal uw lettertypeselectie het meest effectief zijn wanneer er voldoende contrast in stijlen is; elk lettertype op uw site moet zich onderscheiden van de andere en een rechtvaardiging voor het gebruik ervan verdienen. Aan de andere kant wilt u niet dat uw lettertypen stilistisch te ver van elkaar afwijken, wat de indruk zou kunnen wekken dat ze willekeurig zijn gekozen.

Serif en Sans-Serif

Een beproefde methode is om een serif lettertype te combineren met een sans-serif lettertype. Hun stijlen contrasteren goed met elkaar en bieden een gemakkelijk onderscheid tussen koppen en paragrafen.

Experimenteren is de sleutel

Wanneer ik lettertypen voor een nieuwe website kies, download ik graag alle mogelijke Google Font-opties naar mijn computer en speel ermee in een tekstverwerkingsdocument. Experimenteren met verschillende groottes en gewichten en de combinaties naast elkaar vergelijken is een doeltreffende manier om de best mogelijke combinatie te bepalen. Als je de tijd neemt om te experimenteren, kun je zelfs ontdekken dat het gebruik van een dunne variant van een bepaald lettertype een betere koptekst oplevert dan wanneer je een heel apart lettertype zou gebruiken. (De eenvoudigste oplossing is vaak de beste.)

Conclusie

Google Fonts is een krachtige bron voor doe-het-zelvers die niet willen betalen voor dure aangepaste lettertypen op hun website. Maar met grote macht komt grote verantwoordelijkheid: typografie vereist zorgvuldigheid om het goed te doen, en niet elk lettertype dat er is, is een winnaar. We hopen dat deze gids u in de juiste richting helpt sturen, en u inspireert om het perfecte lettertype te vinden dat de persoonlijkheid van uw merk weergeeft.