Icon fonts
Gijs Veyfeyken op 16/04/2012
Een icon font is een font (of lettertype) dat uitsluitend bestaat uit afbeeldingen. Aan elk karakter binnen het lettertype wordt een afbeelding gekoppeld. Het is dus niet bedoeld om tekstuele informatie mee over te brengen. In de typografie spreekt men van een "dingbat". Men gebruikt (of misbruikt?) de posities van het lettertype, die bedoelt zijn om cijfers en letters weer te geven, om er symbolen of iconen mee te creëren. Bijvoorbeeld pijltjes, sterretjes, hartjes, een telefoontje, een brief, etcetera. Het meest bekende lettertype dat uitsluitend bestaat uit dingbats is Windings, gecreëerd door Microsoft in 1990.
Icon fonts kwamen, tot nu, zelden voor in webdesign. Het beperkte zich meestal tot Word - of andere documenten. Met de komst van de CSS expressie @font-face werd het mogelijk om eender welk lettertype online te gebruiken. Een grote stap vooruit voor online typografie en ook gunstig voor accessibility, want het maakt ontoegankelijke technieken zoals Cufón en sIFR overbodig.
Voordelen van icon fonts
- Kleine bestandsgrootte en dus snelle laadtijd. Je hebt geen images meer nodig in de HTML. Een lettertype laadt ook sneller dan image sprites.
- Afbeeldingen kunnen niet vergroot worden zonder kwaliteitsverlies. Een lettertype is vectorieel en kan daarom eindeloos geschaald worden zonder in te boeten op scherpte.
- Via CSS kan je de iconen makkelijk en snel stijlen, over de hele website. Denk hierbij ook aan de vele mogelijkheden van CSS3 (text-shadow, gradients etc.).
- Brede browser support.
Enkele voorbeelden van iconen uit het Pictos font:
Maar?
Er is helaas altijd een maar. Wanneer we een techniek (als ik lettertypes even een techniek mag noemen) gebruiken voor andere doeleinden dan oorspronkelijk bedoeld (cijfers en letters weergeven), vormt dat in 99% van de gevallen een toegankelijkheidsprobleem. Een machine of programma zoals een screenreader (her)kent alle universele karakters. Tot de vreemdste wiskundige tekens toe. Maar wanneer je een niet-universeel erkend of zelf ontworpen symbool (bijvoorbeeld een potlood) koppelt aan een bestaand karakter in een lettertype (bijvoorbeeld "P"), leest een programma dat karakter, en niet het symbool dat wordt weergegeven.
Wil dat zeggen dat je icon-fonts links moet laten liggen? Natuurlijk niet. Je moet er enkel bewust mee omgaan.
De icoontjes worden ingebracht via CSS pseudo elements :before of :after. Niet alle browsers geven CSS gegenereerde inhoud door aan screenreaders. De standaard ingebouwde screenreader op Mac OS VoiceOver, in combinatie met Safari, ondersteunt dit wel en wordt daarom ook in onderstaand voorbeeld gebruikt.
Ik gebruik een gratis (en dus beperkt) abonnement op Pictos server. Daarvoor moet het domein waarop mijn voorbeeld staat, door Pictos aanvaard worden. Blijkbaar zorgt dat dan weer voor problemen bij (drie keer raden) Internet Explorer. Om een lang verhaal kort te maken: bekijk onderstaand voorbeeld met eender welke moderne browser behalve Internet Explorer.
Testpagina met bedieningsknoppen via een icon font.
Conclusie
Wil je iconen gebruiken door middel van een lettertype voor puur decoratieve elementen? Verberg dan het karakter waaraan het icoon is gekoppeld met aria-hidden="true" zodat screenreader gebruikers niet in de war geraken.
Hebben de iconen een functie, zijn ze niet decoratief? Voeg dan verklarende tekst toe die je eventueel visueel verbergt.
Alternatief
Een alternatief voor aria-hidden is het gebruik van de Private Use Area binnen Unicode. Screenreaders lezen tekens binnen die groep van Unicode niet voor. Een voorbeeld van een font icon dienst die dit toepast is IcoMoon.
8 reacties