Hoe u uw pictogrammen in een weblettertype kunt veranderen
Ik had een aantal nette pictogrammen gemaakt voor een herontwerp van een website die ik aan het doen was, en ik heb een voorbeeld van de nieuwe site op een oude iPad bekeken. De lay-out zag er op normale grootte goed uit, maar toen ik inzoomde op een deel van de pagina, zag ik plotseling dat mijn pictogram een vage puinhoop was, terwijl de op tekst gebaseerde koptekst nog steeds scherp en scherp was. Op een nieuwere Retina-display iPad zagen de pictogrammen er niet echt scherp uit, zelfs niet bij normale afmetingen.
Het eerste idee dat ik had, was het maken van sprite-afbeeldingen van dubbele grootte, waardoor ze met de CSS op de helft van hun grootte konden worden weergegeven. Hoewel dit hen er beter uitzag op een Retina-display van normale grootte, keerde de wazigheid terug zodra je begon te knijpen en zoomen. Maar de tekst was nog steeds net zo scherp en haarscherp.
Het antwoord was duidelijk. Ik moest van mijn pictogrammen een lettertype maken.
In deze zelfstudie bekijken we hoe u vectorpictogrammen kunt omzetten in een weblettertype met behulp van een geweldige gratis webapp met de naam IcoMoon. Vervolgens bekijken we hoe u de gegenereerde lettertypebestanden en CSS in een webpagina kunt gebruiken.
De voordelen van het gebruik van een pictogramlettertype
Een pictogramlettertype heeft verschillende voordelen ten opzichte van bitmapafbeeldingen, naast de scherpte van afbeeldingen.
- Geschiktheid: een pictogramlettertype is veel kleiner in bestandsgrootte dan een reeks afbeeldingen, vooral als u dubbele afbeeldingen hebt gebruikt voor Retina-schermen. En zodra het lettertype is geladen, worden uw pictogrammen onmiddellijk weergegeven, zonder dat u een afbeelding hoeft te downloaden.
- Schaalbaarheid: een pictogramlettertype kan op elke grootte worden ingesteld door de
font-sizeeigendom in de bijbehorende CSS. Dit stelt u in staat om met verschillende maten te experimenteren; terwijl u voor bitmapafbeeldingen een afbeeldingsbestand op elk formaat moet uitvoeren. - Flexibiliteit: teksteffecten kunnen eenvoudig op uw pictogram worden toegepast, inclusief kleuren, slagschaduwen en rollover-statussen. Ze zullen ook goed worden weergegeven tegen elke kleur of beeldachtergrond.
- Compatibiliteit: weblettertypen worden door alle moderne browsers en ook door oudere browsers ondersteund, zelfs IE 6 en eerder.
Dus laten we beginnen!
Een pictogramlettertype maken
Symboollettertypen kunnen worden gemaakt met een speciale app voor het maken van lettertypen, zoals glyphs , maar een professionele typografie-tool gaat veel verder dan de behoeften of vereisten van het bouwen van een eenvoudig pictogramlettertype, waarbij de relatie tussen tekens (ie tekenspatiëring en ligaturen) niet belangrijk is.
Veruit de gemakkelijkste manier is om een geweldige gratis online app te gebruiken IcoMoon , door Keyamoon, dat al het gedoe van het converteren van symbolen in een weblettertype wegneemt.
Deze HTML5-app haalt alle pijn weg bij het maken van lettertypebestanden voor eenvoudig gebruik, zoals het bouwen van pictogramlettertypen. IcoMoon wordt geleverd met een aantal pictogramseries die al zijn geladen en u kunt meer aan uw bibliotheek toevoegen, waarvan de meeste gratis kunnen worden gebruikt (bekijk de licentie). Als u op zoek bent naar tamelijk standaardpictogrammen, zoals 'bestand downloaden' en 'winkelwagentje', dan kunt u merken dat het gebruik van een van deze de voorkeur heeft boven het maken van uw eigen.
Stap voor stap
1. Maak je illustraties klaar
Om te beginnen moet u de pictogrammen maken in een vectortrillingsprogramma dat kan exporteren naar SVG-indeling, zoals Illustrator of Inkscape.
Terwijl u aan het ontwerpen bent, kunt u met elke gewenste kleur werken, maar de pictogrammen moeten één effen kleur hebben. Zorg ervoor dat elk pictogram ongeveer dezelfde grootte heeft. Als een pictogram veel groter of langer is dan een ander pictogram, is het moeilijk om een consistent lettertype te maken. Hier heb ik de breedte van mijn luchtschippictogram moeten verkleinen zodat het overeenkomt met de andere.
2. Opruimen
Controleer elk pictogram zorgvuldig om er zeker van te zijn dat het geen onvolkomenheden bevat - details die er bij kleinere afmetingen goed uitzien, kunnen kleine gebreken verbergen wanneer wordt ingezoomd. In het onderstaande pictogram moet ik de gekartelde stappen verwijderen die zijn ingeklemd bij het aanbrengen van lagen.
Gebruik in Illustrator het hulpmiddel Pathfinder om overlappende elementen te verenigen, en het Minus Front-element om uitgesneden elementen te verwijderen, zoals de ster in deze pictogrammen.
Het belangrijkste principe is ervoor zorgen dat uw pictogram op kleine schaal leesbaar is. Vereenvoudig zoveel mogelijk.
3. Exporteer naar SVG
Selecteer nu een pictogram en kopieer en plak het in een nieuw vierkant document (bijvoorbeeld 200 × 200 pixels). Schaal het pictogram zodat het past. Misschien vindt u het handig om een basislijnliniaal in te stellen. Kleur het pictogram zodat het effen zwart is op een witte achtergrond.
Kies nu File… Save as en sla het bestand op als een SVG-bestand. Gebruik de standaard SVG-instellingen. Zodra u dit voor alle pictogrammen hebt gedaan, bent u klaar om een weblettertype te maken.
4. Importeer in IcoMoon
Open de IcoMoon web-app . Als u een pictogram wilt importeren, klikt u op de knop 'Pictogrammen importeren' en selecteert u vervolgens de SVG-bestanden die u wilt toevoegen. U kunt meerdere bestanden tegelijkertijd toevoegen. Deze verschijnen dan onder "Uw aangepaste pictogrammen". Als ze geel gemarkeerd zijn, maken ze deel uit van het pictogramlettertype dat u gaat maken. In dit voorbeeld kunt u zien dat ik heb besloten om geen van mijn eigen pictogrammen te exporteren, en ik heb een van de pictogrammen uit de "Mini-pictogrammen" toegevoegd.
5. Export lettertype van IcoMoon
U kunt op de knop "Bewerken" klikken als u de positie, grootte of rotatie van het pictogram wilt aanpassen. Gebruik de knop "Kopie opslaan" om pictogramvariaties te maken (bijvoorbeeld een spiegelbeeld van een pictogram). Voeg een betekenisvolle tag toe aan het pictogram, omdat dit wordt gebruikt om de klassenaam ervoor te genereren.
Als u klaar bent, klikt u op de knop "Lettertype" onder aan het scherm om het lettertype te genereren. Dit is waar u kunt toewijzen welk pictogram is toegewezen aan welk teken; Als uw pictogram bijvoorbeeld zes afbeeldingen van een draaiende bal is, kunt u de tekens q, w, e, r, t en y aan de zes frames toewijzen. Kies in de voorkeuren een naam voor het lettertype. U kunt ook de meetwaarden van het lettertype aanpassen, maar tenzij u naast de standaardtekst uw eigen lettertype gaat instellen, hoeft u zich hier geen zorgen over te maken.
6. Download de lettertypebestanden
Klik op "Downloaden" om het lettertypepakket naar uw computer te downloaden. Het wordt een submap met de lettertypen zelf (in WOFF-, EOT- en TTF-indeling), evenals een voorbeeld-HTML-pagina en de bijbehorende CSS. Er is zelfs een JavaScript-bestand met een tijdelijke oplossing als u IE 6 of 7 wilt ondersteunen.
Om de lettertypen aan uw project toe te voegen, kopieert u de submap lettertypen naar uw site. Je kunt de CSS van style.css kopiëren en in het CSS-bestand van je eigen site plakken, maar mijn aanpak is om het te hernoemen als fonts.css en het als een apart CSS-bestand te behouden. U moet dan een verwijzing naar dit CSS-bestand in uw HTML-bestand toevoegen met behulp van de relatieve link:
<link rel="stylesheet" href="fonts.css" />In het element @ font-face van het CSS-bestand moet u de URL-verwijzing wijzigen naar de nieuwe relatieve locatie van de lettertypen, of u kunt eenvoudig de map met lettertypen in uw stijlbladmap plaatsen.
7. Het lettertype bellen
Zoals u kunt zien in het voorbeeldindex.html-bestand, zijn er twee manieren om naar het aangepaste lettertype te verwijzen, hetzij door het teken (unicode of naam) of door de naam van de klasse. Het eerste voorbeeld gebruikt de voorwaarde HTML5- gegevenspictogram
<div aria-hidden="true" data-icon="g"></div>Hier wordt de klasse fs1 gebruikt om de grootte van het lettertype in te stellen. De aria-verborgen referentie helpt ervoor te zorgen dat het personage niet wordt uitgesproken door schermlezers.
De tweede methode gebruikt een spanelement:
<span aria-hidden="true"></span>Deze methode is handig als u wilt dat het symbool in de normale tekst past.
Als u van het pictogram een link wilt maken, kunt u het allemaal in een href inpakken:
8. Geavanceerde ideeën
Zoals we zojuist hebben ontdekt met de hover-status, is het wijzigen van de kleur van het pictogram net zo eenvoudig als het instellen van de eigenschap color in onze CSS, en het wijzigen van de grootte is net zo eenvoudig als het instellen van de eigenschap font-size. U kunt ook andere eigenschappen instellen, zoals tekstschaduw en transparantie, allemaal met behoud van de resolutie-onafhankelijkheid van een lettertype.
Probeer het en ik garandeer je dat je bitmappictogrammen nooit meer zult gebruiken.
Heb je geprobeerd lettertypen te gebruiken voor pictogrammen? Hoe heb je het gevonden? Laat het ons weten in de comments.