Wat is een pictogramlettertype? (En hoe je er een gebruikt)

Pictogramlettertypen zijn een populaire oplossing voor een veelvoorkomend CSS-probleem; hoe u webpictogrammen op een efficiënte, snel ladende manier kunt integreren in uw websiteontwerp.

Met tal van services die beschikbaar zijn om het kiezen en gebruiken van een pictogramlettertype gemakkelijk te maken, hoeft u niet uw eigen lettertype te maken. Pictogramlettertypen zijn overal op internet te vinden.

Maar wat is precies een pictogramlettertype? En hoe gebruik je ze? Hier is een gids voor alles wat u moet weten over pictogramlettertypen.

Verken lettertypen

Wat is een pictogramlettertype?

Pictogramlettertypen zijn lettertypen die kleine afbeeldingen gebruiken in plaats van lettervormen. Net als type is elk teken schaalbaar en kan het worden gewijzigd met CSS.

De belangrijkste redenen voor het gebruik van een pictogramlettertype zijn dat u de grootte, kleur en vorm gemakkelijk kunt wijzigen. Pictogramlettertypen zijn van nature transparant, dus u kunt ze op elke kleur of elk type achtergrond plaatsen en u kunt lijnen toevoegen of de dekking van pictogrammen wijzigen.

Het is allemaal gedaan met CSS, dus u hoeft geen unieke afbeeldingen te maken voor elke nieuwe instantie van een pictogram in het ontwerp. (Dit is geweldig om uw website en code lichtgewicht te houden.)

Pictogramlettertypen zijn vectorafbeeldingen, wat betekent dat ze schaalbaar zijn. Zoals bij elk ander lettertype, kunt u ze zo groot of klein maken als u wilt. Gebruik pictogramlettertypen alleen als kunstelementen of zelfs verspreid over andere tekstvelden.

De meest populaire en bekendste bibliotheek met pictogramlettertypen is Font Awesome. Het wordt gebruikt voor meer dan 100 miljoen websites en bevat een robuuste verzameling pictogramopties. Het werkt met alle populaire tools, waaronder Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React en Ember.

Er zijn ook een paar andere redelijk bekende lettertypesets.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Voors en tegens van het gebruik van pictogramlettertypen

Dus waarom zou u een pictogramlettertype gebruiken of vermijden? Hier zijn enkele voor- en nadelen van het werken met deze stijl van kunstelement.

Voordelen van het gebruik van pictogramlettertypen

• Pictogrammen zijn eenvoudig te schalen zolang de juiste klassen in uw CSS voorkomen
• U kunt met weinig moeite grote pictogrambibliotheken krijgen
• Het wijzigen van pictogrameigenschappen is eenvoudig, ongeacht wat je hebt gebruikt om je website te bouwen
• Het is gemakkelijk om pictogrammen toe te voegen aan elke pagina op de website (voeg gewoon de pictogramnaam in)
• Er zijn duizenden pictogrammen om uit te kiezen in allerlei stijlen
• WordPress-gebruikers kunnen pictogramlettertypen toevoegen met een eenvoudige plug-in of door de lettertypemap in de code te kopiëren (bijna elke interface)
• Je kunt je eigen pictogramlettertype maken als je iets super custom nodig hebt

Nadelen van het gebruik van pictogramlettertypen

• Pictogrammen zijn een enkele kleur of kleurverloop (in de meeste gevallen); sommige meer premium pakketten veranderen dit
• Geen goede fallback als het pictogramlettertype niet wordt geladen
• Mogelijk hebt u geen volledige pictogrammenset nodig
• Sommige schermlezers weten niet wat ze moeten doen met lettertypen van pictogrammen
• Mogelijk vindt u geen pakket dat aan uw behoeften voldoet

Pictogramlettertypen gebruiken

Hoewel instructies voor het gebruik van pictogramlettertypen enigszins kunnen verschillen, afhankelijk van de provider die u kiest, is het basisidee hetzelfde.

Over het algemeen heb je drie opties (tenzij je van plan bent om zelf wat harder te coderen):

• Gebruik een plug-in die alles installeert, zodat u alleen pictogrammen hoeft aan te roepen die u wilt gebruiken. (Super makkelijk!)
• Gebruik ingebouwde lettertypepictogrammen van uw CMS of websitebouwer. Dit werkt prima als je geen aangepaste site hebt of een specifiek type lettertypepictogram nodig hebt. De meeste websitebouwers hebben iets 'out of the box'.
• Handmatig linken naar een extern gehost pictogramlettertype. (De meer gecompliceerde versie van het gebruik van een plug-in.)

Pictogramlettertypen versus SVGs

Het grotere debat verschuift naar de vraag of u een pictogramlettertype versus SVG-afbeeldingen moet (of zou willen) gebruiken om kleine afbeeldingen op uw website in te voegen. Beide opties zijn even levensvatbaar en hebben veel te maken met persoonlijke voorkeur.

Pictogramlettertypen zijn over het algemeen voor de meeste mensen gemakkelijker te vinden en te gebruiken. SVG-pictogrammen hebben de voorkeur van gebruikers die meer ontwerpcontrole nodig hebben.

Een SVG-bestand (scalable vector format) kan u wat meer flexibiliteit in ontwerp geven. (Je bent niet beperkt tot één kleur). De kleine, schaalbare bestanden kunnen rechtstreeks in uw mediamap worden geüpload en zijn gemakkelijk om mee te werken. Dit is een goede optie als u maar een handvol pictogrammen nodig heeft en niet met een bibliotheek wilt omgaan.

SVG's zijn flexibeler met de mogelijkheid om meer kleuren en animaties toe te voegen.

Pictogramlettertypen worden op de lange termijn mogelijk sneller geladen omdat ze in de cache zijn opgeslagen. Maar het verschil kan vrij minimaal zijn.

Lettertypen voor positioneringspictogrammen kunnen een beetje lastig worden omdat ze onderhevig zijn aan typische lettertypevoorschriften zoals grootte, regelafstand en verticale uitlijningen. Alleen al daarom kiezen de meeste mensen die een pictogramlettertype gebruiken, voor een gevestigde aanbieder in plaats van te proberen er zelf een te maken.

SVG's kunnen onderdelen bevatten die ze toegankelijker maken dan pictogramlettertypen, die kunnen overkomen als lettertekens voor schermlezers.

Pictogramlettertypen zijn over het algemeen voor de meeste mensen gemakkelijker te vinden en te gebruiken. Bibliotheken zijn algemeen verkrijgbaar en niet moeilijk te begrijpen. SVG-pictogrammen hebben de voorkeur van gebruikers die meer ontwerpcontrole en aanpassingsmogelijkheden willen.

Beide opties worden vaak gebruikt en werken in de meeste gevallen goed. Het kiezen van een heeft veel te maken met waar u zich het meest comfortabel bij voelt en wat past bij uw ontwerpesthetiek en gebruikersinterface.

Gevolgtrekking

Een van de redenen waarom lettertypen voor pictogrammen zo populair zijn, is dat ze veelzijdig en gebruiksvriendelijk zijn. Dankzij een schaalbaar formaat dat met een paar klikken kan worden geïnstalleerd op de meeste inhoudbeheersystemen, kan bijna iedereen snel beginnen met het gebruik van pictogrammenlettertypen.

Het echte voordeel van een pictogramlettertype is dat het element CSS gebruikt en geen onafhankelijk afbeeldingsbestand is. Dit is goed voor het maken van een slanke website met elementen die snel en in een vectorformaat worden geladen (geweldig als u de grootte later moet wijzigen).