Webfonts: hoe moderne lettertypes het web domineren

webfonts

Kies voor webfonts die bij het ontwerp van de website passen

Voor webdesigners was het nog nooit zo gemakkelijk om mooie lettertypes voor een website te vinden. Dankzij moderne webfonts kent je creativiteit vrijwel geen grenzen. Het enorme aanbod kan er echter ook voor zorgen dat je wat langer nodig hebt om het ideale lettertype voor je website te vinden. Het belang van het lettertype is niet te onderschatten, want met de juiste combinatie van creatieve webfonts laat je bij je lezers een positieve indruk achter. Zij weerspiegelen namelijk het karakter van je website en komen ook in het responsieve webdesign goed voor de dag.


Webtypografie

Webtypografie – van browserlettertypes naar moderne webfonts

De rol van de webtypografie is in de afgelopen jaren sterk veranderd. Dat is vooral te danken aan technische vooruitgang en de mogelijkheden die daardoor zijn ontstaan. In het begin van HTML was het bijvoorbeeld nog zo dat lettertypes en tekenstijlen door de instellingen van de gebruikte internetbrowser werden bepaald en niet door bijvoorbeeld de code van de website. Pas met de komst van de inmiddels verouderde <font>-tag kregen ontwikkelaars het gereedschap om zelfgekozen lettertypes toe te passen. Gebruikers konden de desbetreffende lettertypes echter alleen laden als deze ook op hun computer waren geïnstalleerd; anders werd er uitgeweken naar een ‘fallback font’ – meestal het standaardlettertype van de browser.

Doordat de inhoud (HTML) tegenwoordig van de creatieve middelen in Cascading Style Sheets (CSS) wordt gescheiden en het downloaden van fonts in de webbrowsers is geïntegreerd, kunnen webdesigners bij de vormgeving van websites nu gebruikmaken van zogenaamde webfonts. Dit zijn gedigitaliseerde lettertypes. De browser van de gebruiker ontvangt bij het laden van de website de melding op welke server de desbetreffende webfonts liggen en roept deze daar op. Daardoor zien bezoekers van de website het gekozen lettertype ook als dit niet op hun computer is geïnstalleerd. Sinds de ontwikkeling van het Web Open Font Format (2007) worden webfont-licenties door een steeds groter aantal aanbieders tegen uiteenlopende voorwaarden verkocht. Daarbij variëren vooral de prijs en de betaalmethode alsook het type hosting (op de eigen server of op de server van de aanbieder). Als gevolg van deze concurrentie, die vooral tot stand komt door het grote belang van typografie voor mobiele apparatuur, kunnen designers kiezen uit talloze moderne en creatieve webfonts


Webfontcategorieën

Webfontcategorieën en hun toepassingsgebieden

Met de term lettertype vat men alle tekens samen die volgens een identiek vormgevingsconcept zijn ontworpen. Als er meerdere varianten van zo’n lettertype bestaan, die bijvoorbeeld qua lijndikte of tekenafstand verschillen, dan spreekt men van een lettertypefamilie (zo behoren bijvoorbeeld de lettertypes Calibri en Calibri Light tot één lettertypefamilie).

De verschillende lettertypes zijn geschikt voor verschillende toepassingsgebieden. Bij de keuze van een lettertype moet je vooral op twee dingen letten: de leesbaarheid van het lettertype en het emotionele effect. Daarnaast speelt ook het medium een belangrijke rol. Zogenaamde schreefletters hebben aan het einde van de rechte vormen van de letter een klein dwarsstreepje, wat het lezen van klein gedrukte teksten gemakkelijker maakt. Voor het lezen op een beeldscherm is dit lettertype echter niet altijd ideaal.

De functie en positie in de tekst hebben ook invloed op het lettertype: terwijl zeer opvallende lettertypes in de koppen de gewenste aandacht trekken, passen ze niet goed in de lopende tekst. Daarom gebruiken webdesigners in één tekst vaak meerdere verschillende lettertypes of tekenstijlen (dat zijn de varianten binnen een lettertypefamilie). Je moet het gebruik van verschillende lettertypes echter ook niet overdrijven, omdat de website dan snel overladen aandoet.

Ook wat betreft hun uitwerking verschillen de diverse lettertypes sterk van elkaar. Onderstaande tabel biedt een overzicht van welke lettertypes geschikt zijn voor welke teksten en welke associaties ze bij de lezer oproepen.

De hierboven genoemde eigenschappen van de verschillende webfontcategorieën geven slechts de algemene verwachtingen weer. In de praktijk is het gebruik van onverwachte lettertypes vaak juist een beproefd middel om zich van de concurrentie te onderscheiden. Om de juiste webfonts te vinden, kun je de volgende adviezen opvolgen:

  • Houd bij de keuze rekening met onderwerp en doelgroep: een optisch overtuigende combinatie van creatieve webfonts is nutteloos als deze niet bij het onderwerp van de website past. Voor een zakelijk effect kun je het best een mix van letters met schreef en zonder schreef gebruiken. Handschriften zijn opvallender en levendiger. Ze geven je website een persoonlijk tintje, maar er moet spaarzaam gebruik van worden gemaakt. Geschreven schriften worden vaak voor feestelijke gelegenheden gebruikt, bijvoorbeeld huwelijksaankondigingen of verjaardagskaarten.
  • Hoe meer tekst je website bevat, hoe sterker je de functionaliteit op de voorgrond moet zetten. Naast een goede leesbaarheid moet je er ook rekening mee houden dat gebruikers van mobiele apparaten je website standaard via mobiele gegevensoverdracht oproepen. Te speciale en zelden gebruikte lettertypes zullen de laadtijd in dat geval onnodig verlengen.
  • Beperk het aantal gebruikte lettertypes. Over het algemeen heeft het gebruik van twee verschillende lettertypes zijn waarde bewezen, waarbij het ene voor lopende teksten en het andere voor koppen en speciale typografische onderscheidingen wordt gebruikt.
  • Zoek naar lettertypes die zich onderscheiden en die een goed contrast vormen. De combinatie van lettertypes met schreef en zonder schreef is hiervan een goed voorbeeld. Let wel: overmaat schaadt! Als de gekozen webfonts stilistisch dus te ver uit elkaar liggen, zorgt dat eerder voor spanningen die ook de bezoekers van je website niet zullen ontgaan. Als beide lettertypes juist te veel op elkaar lijken, zorgt dat echter ook voor een negatief effect.

 creatieve webfonts

Zo vind je creatieve webfonts voor je website

Aanbieders van moderne webfonts verkopen hun digitale lettertypes met verschillende licentiemodellen, waarbij je bijvoorbeeld eenmalig voor het bezit van het lettertype betaalt of voor de duur van het gebruik. In het eerste geval host je de lettertypes zelf, in het tweede geval krijg je meestal een link naar de server van de aanbieder waarop de webfonts zijn opgeslagen. Naast de betaalde lettertypes is er ook een aantal opensource-lettertypes: zulke lettertypes worden echter door heel veel webdesigners gebruikt. Als je je website met bijzondere, nieuwe webfonts wilt vormgeven of optimaliseren, kun je het beste het aanbod van verschillende aanbieders vergelijken. Wij hebben een aantal interessante diensten voor je opgesomd:

  • Google Fonts (https://www.google.com/fonts): gratis dienst van Google met ruimte 100 verschillende lettertypefamilies en verschillende voorbeeldfuncties.
  • Adobe Edge Webfonts (https://edgewebfonts.adobe.com/): in de verzameling van Adobe vind je meer dan 500 moderne webfonts die je gratis kunt gebruiken.
  • FontSquirrel (http://www.fontsquirrel.com/): aanbieder met honderden webfonts die gratis kunnen worden gedownload; webfont generator voor eigen lettertypes.
  • fonts.com (http://www.fonts.com/): aanbieder van ruim 2000 verschillende betaalde lettertypefamilies; maandabonnement en diverse speciale aanbiedingen.
  • Linotype (http://www.linotype.com/catalog): duizenden web-, dekstop- en serverfonts die apart of als pakket kunnen worden gekocht; met gratis voorbeeldtool.
  • Misprinted Type (http://www.misprintedtype.com/fonts/): circa 50, deels kosteloze, creatieve webfonts die apart of als pakket beschikbaar zijn.
  • MyFonts (http://www.myfonts.com/): diverse webfonts die grotendeels kunnen worden gekocht door eenmalige betaling en die 30 dagen lang kunnen worden getest; met WhatTheFont kun je een afbeelding uploaden om uit te vinden welke webfonts er gebruikt worden.
  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany