in Webdesign

Sinds het ontstaan van internet zijn webdesigners gebonden aan regels. Die regels worden onder andere bepaald door wat een browser wel en niet kan. En in lettertypen waren browsers tot voor kort geen helden. Gelukkig is daar nu verandering in gekomen. Tegenwoordig kunnen webdesigner wat designers offline allang konden: tekst opmaken met verschillende lettertypen.

webfontsHet Times New Roman tijdperk

Voorheen haalde een browser het lettertype van een website op op jouw eigen computer. Stel, de tekst was in Arial geschreven dan ging de browser op jouw eigen computer op zoek naar dit letterype. En wat nou als Arial niet op jouw computer stond? Dan liet de browser een alternatief lettertype zien en als ie het helemaal niet meer wist Times New Roman.

Hierdoor was de ontwerper natuurlijk behoorlijk gebonden. Wilde hij een leuk uitziende kop boven een stuk tekst dan was hij genoodzaakt een afbeelding te gebruiken. Het nadeel hiervan was dat de zoekmachines dit niet lazen. Ook kwam het de laadtijd van de website niet ten goede.

@font-face of webfonts

Dit alles is nu verleden tijd. Er zijn verschillende manieren om een niet standaard lettertype toe te voegen aan een website.

  • @font-face: zoek een letterype uit wat je wilt gebruiken. Let erop dat je de rechten hebt om het lettertype commercieel toe te passen. Op de website www.fontsquirrel.com kan je met de @font-face generator het lettertype uploaden en omzetten naar de verschillende benodigde extensies. Ook kan je op deze website hele kits downloaden met de het lettertype en de CSS declaratie ineen. Zet het mapje fonts op je server, de @font-face code in de CSS en hoppatee je kan aan de slag.
  • Webfonts: er zijn verschillende webfonts aanbieders zoals Google Webfonts of Typekit. Let op; bij sommige aanbieders betaal je voor het gebruik van een lettertype. Kies op de site een geschikt lettertype uit en plak de code in de HTML en via de stylesheet kan je het lettertype aanroepen. Het voordeel is dat je de lettertypen niet op je eigen server hoeft te zetten. De lettertypen worden via de code vanaf de server van de aanbieder gehaald.
  • WordPress plugins: er zijn verschillende plugins om niet standaard lettertypen in je WordPress site te gebruiken. Een daarvan is Cufón. De manier om de lettertypen te verkrijgen werkt niet veel anders dan bij @font-face. Het voordeel is dat je niet de code in hoeft omdat de plugin dat voor je regelt.

webfonts-generatorZoals hierboven is te lezen heb je verschillende extensies van een lettertype nodig. Dit komt doordat de verschillende browsers verschillende lettertypen bestanden accepteren. Zo doet Internet Explorer het met .eot, Firefox met TrueType en Safari en Chrome met .svg. Allemaal verschillende versies van een lettertype dus. Als je dus een lettertype hebt gevonden, bijvoorbeeld een .ttf of een .otf, dan moet je deze nog omzetten naar de andere extensies. Gelukkig is dit met de verschillende generators online niet heel lastig.

De nieuwe regels

Nu zijn er nog wel regels ten aanzien van het gebruik van lettertypen. Zorg ervoor dat de laadtijd van de website niet te lang wordt doordat de browser tien verschillende lettertypen moet ophalen. Ook is het belangrijk dat de leesbaarheid goed blijft en de typografie niet de overhand krijgt. Te veel lettertypen wordt druk en schreeuwerig. Dat kan goed zijn in een website voor een ontwerpbureau maar niet voor een yoga school. Het gebruik van lettertypen moet het ontwerp van de website versterken en niet een doel op zich zijn.

Heb jij ervaringen met webfonts? Laat het me weten door onderstaand reactieformulier in te vullen.

Recente berichten
Neem Contact op!

Benieuwd naar wat Hello World voor jou kan betekenen? Neem contact op!

Voer je zoekopdracht in en druk op Enter om te zoeken