De Voor- en Nadelen van Icon Fonts

Pictogrammen of icoontjes geven ons de mogelijkheid om te communiceren op een zeer compacte en universele manier. Het belang van pictogrammen of icoontjes lijkt dan ook te stijgen naarmate de schermgrootte kleiner wordt!

Als je bekend bent met het gebruik van rasterafbeeldingen (zoals PNG en GIF) om icoontjes op een website weer te geven, dan ben je waarschijnlijk ook bekend met de tekortkomingen van deze werkwijze;

Allereerst, afhankelijk van de afmeting en de hoeveelheid kleurgegevens die het icoontje heeft, kan een icoon bestand (als beeldformaat: JPG, PNG of GIF) erg groot worden. Als we veel icoontjes in een website willen plaatsen, zal dit uiterst nadelig zijn voor de laadtijd van de website vanwege het grote aantal HTTP-verzoeken die moeten worden uitgevoerd door de browser.

Hoewel het probleem van een groot aantal HTTP-verzoeken kan worden opgelost met een CSS sprite, is ook dit bestand nog steeds (te) groot.

Maar ook in tijden van Retina of High-Density beeldschermen is het — juist bij icoontjes — van belang dat deze haarscherp worden weergegeven op dit soort beeldschermen. Gelukkig is er een goede en praktische oplossing .. Icon fonts!

Wat is een Icon font?

Een Icon font is een set pictogrammen/icoontjes verpakt in een lettertype (in diverse web formaten: .ttf, .eot, .svg en .woff) dat later kan worden ingelezen op een website middels @font-face. Er zijn vele voordelen voor het gebruik van een icon font om jouw icoontjes te tonen op je website:

• een lettertype bestand is vector-gebaseerd, waardoor deze resolutie-onafhankelijk is. Icoontjes kunnen nu probleemloos worden verschaald naar verschillende afmetingen zonder wazig te worden
• minder HTTP-verzoeken aan de browser (1 bestand, dus 1 HTTP-request!)
• de bestandsgrootte wordt aanzienlijk kleiner (snellere laadtijd, makkelijk te cachen)
• mogelijkheid om de icoontjes individueel te stylen met behulp van CSS (kleur, schaduw, animatie, :hover, etc).
• effecten zoals verandering in opaciteit, of roteren van de pictogram, of .. (sommige van deze effecten zijn overigens ook mogelijk met beeldformaten)
• ondersteuning van @font-face in de Top5 qua browsers (desktop versies!)
• er is tal van hoge kwaliteit, open-source icon fonts beschikbaar op het internet

Eens kijken of je dit allemaal kunt doen met een .PNG of .GIF? Dacht het niet! Chris Coyier van CSS-Tricks heeft een geweldige testpagina gemaakt waarin je een aantal van de hierboven beschreven voordelen ‘live’ kunt aanpassen en bekijken!

Maar zoals een wijs man ooit al eens heeft gezegd: “Elk Nadeel hep zijn Voordeel!”, zo hebben ook icon fonts een aantal nadelen:

• @font-face werkt niet op alle browsers, zoals op Opera Mini, Nokia XPress Browser, Blackberry 4–5, Android 2.1, en Windows Phone 7–7.8
• lastig om meerdere kleuren te verwerken in een icon font
• arbeidsintensief en moeilijk om een custom-made icon font te maken
• accessibility problemen (Icon fonts worden meestal niet ingelezen door screen readers en als ze wel worden ingelezen, worden ze als een alfabetische letter uitgesproken)

Overigens is het niet helemaal juist dat een icon font alleen maar eenkleurig (monochroom) kan zijn, je kunt tevens multi-gekleurde pictogrammen maken met meerdere symbolen of schrifttekens die elkaar overlappen met een absolute positionering in CSS (voorbeeld van een multi-gelaagd icon font: Forecast Font)

@font-face wordt dus niet ondersteund door elke (mobiele) browser, maar toch is er een ‘universele’ manier om iconfonts te implementeren. Deze ’techniek’ maakt gebruik van Modernizr om eerst te kijken of de desbetreffende browser @font-face ondersteund, en zo neen, er —als fallback— een .PNG rasterafbeelding wordt getoond ipv. gebruik te maken van het iconfont.

Als je slechts een ‘handjevol’ icoontjes wilt gebruiken is het misschien raadzamer om SVG’s (Scalable Vector Graphics) te gebruiken, ondanks het feit dat deze vectorbestanden groter kunnen zijn dan een icon font in bestandsgrootte, wordt deze techniek goed ondersteund in de moderne browsers.

Voor de oudere browser versies die SVG’s niet ondersteunen kan er gebruik worden gemaakt van een JavaScript of jQuery plugin om op browsers die SVG niet ondersteunen, .PNG rasterafbeeldingen te tonen. Sommige van deze JavaScript plugins zetten dan je SVG’s automatisch om in .PNG’s die ook automatisch in de daarvoor betreffende folders worden geüpload door het script (bijv: GruntIcon, MagicSVG, etc.)

Tips voor het toevoegen van een Icon font aan je website

Wil je alsnog gebruik maken van een Icon font in jouw website dan is het raadzaam om de volgende tips in het achterhoofd te houden zodat je lezers niet voor een (overbodige) verassing kunnen komen te staan bij het bezoeken van jouw website op hun favoriete (mobiele) browser:

• Gebruik alleen de icoontjes die je echt nodig heeft, door kant-en-klare icon fonts sets te gebruiken worden er waarschijnlijk een boel icoontjes ingelezen waarvan je helemaal geen gebruik maakt (extra bestandsgrootte)! Diensten zoals Foundation Icon Fonts 3 en IcoMoon maken het mogelijk om een custom-made of samengesteld pictogram lettertype te bouwen.
• Ondanks het feit dat @font-face redelijk is ingeburgerd in de meeste browsers kun je een icon font het best gebruiken als (extra) versiering! Gebruik liever nooit alleen het icoontje, want als de gebruiker op een browser zit die geen @font-face ondersteunt zal er niets te zien zijn!
• Zet CSS properties, zoals: font-weight, font-style, text-transform, enz. op 'normal' voor je icoontjes.
• Gebruik liever voor de menuknop ≡ (‘hamburger-icoon’) de unicode (U+2630) of in CSS :before { content:'\2630'; }, zodat deze op elke browser correct wordt weergegeven
• Gebruik display:inline-block; voor meer controle en ‘klikgemak’
• Gebruik CSS property vertical-align om de basislijn van de ‘inline’ icons vast te leggen (uitlijning icoontjes)
• Voeg de Base64-code van jouw icon font toe aan de stylesheet, zodat het icon font ook goed in FireFox wordt weergegeven,
• Gebruik anti-aliasing voor Webkit browsers om fonts er scherper uit te laten zien (-webkit-font-smoothing: antialiased;).

Een icon font toevoegen aan je site lijkt dus een slimme zet te zijn, zeker in een ‘responsive‘ web omgeving waarbij je website zichtbaar is op allerlei verschillende apparaten, klein of groot. Maar ook door de resolutie-onafhankelijkheid van een icon font zal elke Retina/HD beeldscherm het icon font haarscherp renderen op beeld.

Daarnaast is het toevoegen van een icon font ook zeer aan te raden voor de totale laadtijd van je website, zeker als je veel icoontjes als rasterafbeeldingen gebruikt. Voor meer informatie of het aanmaken van een op-maat-gemaakt icon font kun je gerust contact met mij opnemen.

Meer Achtergrondinfo:

• Bulletproof @font-face Syntax, geschreven door Paul Irish
• Why And How To Use Icon Fonts, geschreven door Steven Bradley
• Using Icon Fonts, geschreven door Chris Ferdinandi

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.