Så här skapar du din egen ikon webbfont

I den här artikeln ska jag undersöka vetenskapen bakom att skapa framgångsrika användargränssymboler innan du lär dig hur du gör ditt eget inbäddade ikonfont .

Från att designa enskilda ikoner för att konvertera dem till @font-face inbäddning, och till och med licensiering dem för distribution, ska vi endast använda gratis programvara och onlinetjänster. Hur låter det? Du behöver inte lita på någon av de esoteriska kunskaper som krävs för att skapa framgångsrika alfanumeriska teckensnitt. bara ett öga för att designa saker som kan tyckas mycket, väldigt små.

I slutändan bör du gå iväg med en process för att skapa designelement som sträcker sig långt bortom tillverkningen av enkla ikoner.

Innan vi fortsätter, bör det sägas något om vad vi försöker achieve genom att använda ikoner i våra mönster i första hand, och vad som gör en ikon mer framgångsrik än nästa. Teori före ansökan. För att kunna göra detta måste vi överväga ikonens roll som en del av semiologin.

Vad gör en bra ikon?

Semiology , i bredaste bemärkelse, är undersökningen av teckensystem , hur vi bidrar till deras bildande och underhåll, och deras inverkan på vår förståelse av världen inom och utan oss.

När du överväger en del av ditt designarbete ur perspektivet av vad det betecknar - Vad det säger till din publik eller vilka begrepp det återkallar för dem - du överväger din design som semiotikare. Även om semiologin, som lingvistik, täcker språk, finns det många fler saker på en webbplats som "säger" något utan ord, till exempel färger, teckensnitt och former som vi kallar ikoner . Man bör vara försiktig att vad dessa saker säger har en stark kulturell dimension. I Kina , färgen röd kan innebära lycka, medan den i många västerländska länder brukar betecknas fara.

(Baserat på en bild av ell brun )

Termen "ikon" har en särskild betydelse inom semiologiområdet. En ikon är en artefakt som betyder något genom att likna det. Ta till exempel en kartpinneikon . Som en form som liknar en "riktig" kartstift, kan den beteckna den. I sin tur tar den verkliga kartpinnen till sig alla slags meningsfulla begrepp . Bland dessa är abstrakta begrepp som plats samt mindre abstrakta begrepp, som den karta som stiftet kan höra till.

Vissa så kallade ikoner är inte riktigt ikoniska. Den allestädes närvarande RSS-ikonen med sin punkt och två koncentriska cirkelsegment, liknar inte mer syndikering än orden "Really Simple Syndication" liknar den. Konfigurationen av former som utgör RSS-ikonen betecknar RSS enligt konventionen ensam; Vi har kommit överens om att detta är vad de är för. En RSS-ikon heter mer korrekt en RSS-symbol .

Hittills hoppas jag att vi har fastställt att framgångsrika webbikoner ska uppfylla ett eller båda av följande två kriterier:

En stark likhet med en riktig sak, till exempel en utskriftsikon som liknar en verklig skrivare
Etablering och därmed förtrogenhet som en igenkännbar symbol inom teckensystemet

Ikon typsnitt blir popularitet

Ikoner har länge ansetts vara ett bra sätt att förbättra användargränssnittet eftersom de ger en visuell stenografi som hjälper till att förstå ett annat rent textmeddelande. Ark av ikonbilder cirkuleras i hela webbdesignsgemenskapen som smuggling, varje uppsättning lovande att göra din design skenigare, mer lockande och mer klickbar än den sista.

Jämfört med bilder är idén att använda inbäddade teckensnitt för ikoner en relativt ny idé. Det är emellertid en som uppnår stor dragkraft på grund av de många inneboende fördelarna över bilden (eller background-image ) metod. jag skrev om några av dessa fördelar på min lilla blogg tillbaka i början av september. Chris Coyier uppenbarligen hade en liknande idé och introducerade idén till en ( mycket, mycket ) större publik vecka senare. Med hjälp av de två inläggen och andra har jag sammanställt denna omfattande lista över funktioner:

De ändras enkelt utan nedbrytning (eftersom de är väsentligen vektorer)
Recoloring ikonen är lika trivial som recoloring text. Till exempel, color: orange för en RSS-ikon
Många ikoner är grupperade i en fil och kräver bara en http-förfrågan
Som Chris påpekar är de former som har genomskinliga "knockouts" som fungerar i webbläsare så tidigt som IE6 (till skillnad från alfa PNGs)
För ikoner som ska visas intill text är anpassning och inslagning inte problem (eftersom de är text)
Du kan använda CSS3-effekter via text-shadow och background-clip:text som respekterar glyfs form
Till skillnad från SVG är cross-browser support lätt att uppnå

problem

I Chris ord är det en bra idé att använda teckensnitt för ikoner . Ändå är status quo för ikonfonförbrukning inte idealisk. För det första, de flesta av de tillgängliga kvalitetsfonterna, kallade saker som Pictos , Fico , Klepto, Cheetos, Ponyo och Sailor Moon (Jag kan få några av dessa fel), betalas för typsnitt. I praktiken betyder det att det verkligen finns två problem :

Du kanske måste dela med pengar
Oavsett om du måste dela med pengar eller inte, måste du acceptera någons smutsiga designarbete

Förutom automatiserade sökrobotar antar jag att det är mestadels webbdesigners som kommer att läsa den här artikeln. Jag är en designer själv och jag tror inte att jag är ensam för att motstå tanken på att kompromissa med min egen design genom att förlita sig på någon annans handarbete. Naturligtvis är jag ännu mindre enamored med tanken på att betala för privilegiet. Jag vet vilka ikoner jag vill använda och jag vet precis hur jag vill skräddarsy dem till min övergripande design. Jag vill ha den kontrollen .

Efter någon sökning var jag så småningom presenteras för möjligheterna av Inkscape s SVG Font Editor . Med lite övning med hjälp av Inkscape och hjälp av en online-omvandlare för att omvandla mitt SVG-teckensnitt till en TTF kunde jag göra "Heydings". Denna typsnitt är nu inkluderad i Simurai lista (som länkas till av Coyiers artikel). Jag försöker inte sälja dig min typsnitt (det är gratis ändå) men jag tycker att det ger ett ganska bra bevis på konceptet :

Göra ikon glyphs med Inkscape

Ställa in Inkscape

Låt oss börja med nedladdning och installera Inkscape. Du bör också använda min startfelsmall för ikonens typsnitt, som finns i resursmappen för det här GitHub-arkivet (mer om detta GitHub-projekt senare). När du har öppnat den här filen i din nya Inkscape-installation bör du ställa in din arbetsyta genom att öppna följande fönster från huvudmenyn:

OBJECT → FILL OCH STROKE
OBJECT → ALIGN OCH DISTRIBUTER
TEXT → SVG FONT EDITOR

I rutan SVG Font Editor klickar du på "Font 1" under "Font". Din arbetsyta ska nu se ut som den här skärmdumpen:

Det är värt att påpeka att baslinje guide är inte under undersidan av duken av misstag: av anledningar som är bäst kända för någon annan, bör dina ikoner mycket överhänga på kanvasens undersida om du vill att de ska dela samma grundlinje som angränsande tecken. Jag har testat detta med Georgia, Arial och ett antal webbfonter.

Gör din första glyph

För att definiera glyphen klickar du på fliken Glyphs i SVG Font Editor-rutan och klickar sedan på knappen Lägg till Glyph i den nedre delen av rutan. Det är inte omedelbart klart vid första inspektionen, men om du klickar på din glyph ("Glyph 1") visas ett fält som låter dig ange tecknet som du vill tilldela din ikon till. Vi ska först och främst göra en enkel stjärnform, så jag rekommenderar att du anger tecknet "s", "S" eller "*":

Nu när vi har definierat glyphs motsvarande tecken måste vi göra glyfen själv. Eftersom vi bara gör en stjärna den här gången, borde vi välja Inkscapes hjälpsamma Stjärnor och polygoner verktyg från vänster verktygsfält och dra en stjärna i duken. Du kommer märka att det här verktyget kommer med alternativ som låter dig ändra stjärnans utseende. I mitt exempel har jag valt 5 hörn, ett talat förhållande på 0,5 och ett avrundat värde på 0,1.

Centrera stjärnan horisontellt med hjälp av panelen Justera och distribuera (som kan vara dold under SVG Font Editor ) och dra formen nedåt för att möta baslinjen. Med gallret avstängt, bör duken se ut så här:

Glyfer i vår ikon font är bara former; former med inga färger, lager eller gradienter. För att göra vår stjärna till en legitim kandidat för vårt teckensnitt måste vi konvertera det från ett objekt till en banbaserad form. För att göra detta, välj stjärnan och välj PATH → OBJECT TO PATH från huvudmenyn. Nu, med den valda stjärnan, kan vi gå till vår SVG Font Editor , markera den aktuella "s" glyphen och trycka på Get-kurvorna från valknappen:

När du anger "s" i fältet Exempeltext ska din stjärna nu visas som en förhandsvisning, så här:

Göra mer komplexa ikoner

Du har nu skapat ditt första skalbara SVG-teckensnitt. Genom att använda alternativ från rutan Fyll och streck, redigeringsvägar och kombinationer av objekt och slag kan du göra mycket mer ambitiösa ikondesigner. Jag vill inte gå in i en full Inkscape handledning eftersom vi har mycket mer att täcka, men efter de här enkla reglerna står du bra:

Håll dig till att använda svarta slag och fyllningar, om bara för att påminna dig om att ikonerna bara är former, inte komplex vektorgrafik. Att färga ikonen är möjlig i slutprodukten med hjälp av CSS.
Alla objekt och streck (linjer) måste omvandlas till banor med antingen PATH → OBJECT TO PATH eller PATH → SÄKER TILL PATH
Flera objekt och / eller slag som används för att skapa en ikon glyph ska kombineras med hjälp av PATH → COMBINE (eller i vissa fall PATH → UNION)
Att skära former ur former (som att använda en kakskärare) placerar formen som kommer att skapa "knockout" över huvudformen, välj båda och välj PATH → DIFFERENCE. Vita områden på svart som ser ut som "knockouts" är inte tillräckliga, som du kommer att upptäcka när du slår Få kurvor från valet Se regel 1.

Förbereder din typsnitt för inbäddning

Tänk dig att du har gått på för att skapa ett antal användbara ikoner för ditt teckensnitt genom att upprepa glyph gawning-metoden som jag just har beskrivit och sparade filen som myicons.svg . Nu vill du förbereda detta ikonbibliotek för användning på webbsidor.

Konvertera SVG till TTF

Den första åtgärden du bör ta är att konvertera SVG-teckensnittet i ett mer välbekant och mångsidigt format. TTF är det främsta formatet för lokal installation och distribution. Det ger också en bra bas för omvandling att mötas @font-face krav. Online-tjänster som låter dig konvertera teckensnitt mellan format inkluderar http://onlinefontconverter.com/ , http://www.fontconverter.org/ och http://www.font2web.com/ . Min personliga favorit är dock http://www.freefontconverter.com/ för att jag inte kommer i kö och jag har aldrig känt det för att återkomma några glitches.

Jag kommer inte att fördöma dig genom att förklara hur du använder den här resursen. Det successiva filuppladdningsfältet, välj element och gigantisk konvertera- knappen talar för sig själva.

Redigering av typsnittets meta info

Nu när du har TTF i handen rekommenderar jag att du redigerar de genererade metadata . Omdirigering, attribut och beskrivning av teckensnittet till din tillfredsställelse gör det klart för installation, inbäddning och distribution . Det är också ett sätt att visa att teckensnittet är ditt eget arbete. Läsare som kör Windows har möjlighet att använda de bedrägligt stora ljudet Microsoft Font Properties Editor eller fritt-för-x-dagarna Typograf . För Apple och Linux-användare ber jag de som är bättre informerade än jag kan hjälpa till i kommentarerna.

Den klumpiga men användbara Font Properties Editor

Viktig anmärkning: Även om redigeraren för Microsoft Font Properties kan du lägga till författare, beskrivning och licensinformation, verkar det inte låta dig redigera grundläggande data som typsnittet och postScript-namnet . Dessa fält är inaktiverade. Om du använder den här programvaran måste du lokalisera och redigera de förbjudna värdena i SVG-koden före TTF-konvertering. Öppna original SVG i din favorit textredigerare (jag använder anteckningsblock ++ ) och redigera följande:

Teckensnamn: Hittade i tagg, font-family attribut

Postscript Name: Hittade i tagg, id attribut

Beskrivning: Du borde lägga till en beskrivning (författare, licens etc.) i taggen. Observera att detta inte motsvarar TTF-beskrivningstexten och kommer inte att bevaras genom konvertering. du måste lägga till TTF-beskrivningen separat.

Gör inlägget inbäddbart

När du har installerat TTF på ditt lokala system och förhandsgranskat det lite för att försäkra dig om att ingenting har gått fel, är det dags att springa det genom Font Ekorre s @ font-face generator . För att göra den utmatade koden så effektiv och effektiv som möjligt finns det några alternativ som är värda att notera i generatorns expertläge:

Subsetting: Med delningsalternativet kan du bara inkludera de tecken som du har delegerat, vilket minskar filstorleken.

Ta bort kerning: Dina ikoner kommer nästan alltid att visas isolerat, så det är inte nödvändigt att karnera (extra information om närhet av tecken till varandra). Detta kommer enligt min mening också att minska filstorleken.

WebOnly ™ : Om du är evangelisk om personer som använder din typsnitt som avsedd - och inte återgår till att göra bilder ur glyphs i Photoshonk - Du kan välja det här alternativet. Det kan också passa din licensplan. Jag täcker nu licensiering.

Distribuera din typsnitt

Om du är intresserad av att släppa ditt teckensnitt anses det vara bra att ge den en licens. Många typsnitt webbplatser kommer inte att bära ditt teckensnitt utan en. Eftersom vi använde fri programvara för öppen källkod för att göra ikonerna är det passande att vi ska distribuera dem som sådana.

Det finns många licensieringsmöjligheter tillgängliga och att undersöka dem är ibland störande. De GNU General Public License är helt acceptabelt, men du kanske vill överväga SIL Open Font License . Den största fördelen med den här licensen är tillhandahållandet av ett reserverat teckensnamn : Andra designers har rätt att ändra ditt teckensnitt, så länge de heter det annorlunda. I praktiken betyder det att brott mot ikondesign inte kan utföras "i ditt namn".

Vid endera licensen ska du inkludera en version i en textfil, samt infoga upphovsrättsmeddelandet och en länk till hela licensadressen i typsnittets meta. Besök respektive licens sida (länkad ovan) för mer specifika instruktioner.

Slutet på CSS-spridning

Varför sluta med att generiska ikoner använder SVG-teckensnitt? Med möjligheten att skapa ikoner kommer möjligheten att göra mer sajtspecifika former, varumärkeselement och dekorationer. Tycka om CSS sprites , alla dessa visuella element kan hållas i en fil, vilket minskar serverns samtal till en singular http-förfrågan . Till skillnad från CSS sprites är elementen båda storleken på storlek och inte beroende av positionskoordinater ( background-position värden) för att visa korrekt. Detta gör dem mycket bättre lämpade för lyhörd design .

Låt oss låtsas att jag valde att använda ett SVG-teckensnitt för att täcka några grundläggande designelement i min vagt steampunk -tycka om blog . En enkel HTML-tabell som ger komponentdesignerna skulle se ut så här:

En av de bästa sakerna med detta tillvägagångssätt är mångsidigheten. Till exempel kan den andra kuggformen från vänster användas som både en liten punktpunktsdesign och en jätte abstrakt bakgrundsdekoration . Färgning är lika lätt som att använda color:maroon , men det finns inget behov av att hålla fast vid plana färger. en mängd CSS3- effekter kan användas för att lägga till textur och taktilitet. För lite inspiration för att komma igång, undersök detta utmärkta galleri med CSS3-förbättrade webbfonter .

En snabb anteckning om skärmsläsare

Ett problem med att använda teckensnitt för att visa visuella element på detta sätt är påverkan på skärmläsare produktion. En besökare på webbplatsen som läser visuellt kommer att se kuggar, pilar och liknande, men en skärmsläsare insisterar på att läsa ut de tecken som anger dessa mönster. För användning av SVG-teckensnitt som är dekorativa rekommenderar jag att Coyiers förslag stämmer överens: Tilldela vektorerna till Kompletterande privat bruk av Unicode. Sådana tecken bör inte läsas av läsarna.

En samverkande ikon webbfont

Som min JavaScript-mentor, Rupert , påpekade mig för närvarande, med hjälp av SVG-teckensnitt att skapa ikonuppsättningar erbjuder en intressant möjlighet till samarbete. Du ser, SVG-kod - som är en form av XML - är mycket standardiserad och lätt läsbar. Det är exakt den typ av källkod som är anpassad till utveckling med hjälp av en "social kodning" tjänst som GitHub .

Idén resonerade med mig för dess semiotiska implikationer: Om en ikons förståelse bestäms av konsensus , så borde konsensus också spela en roll i sin bildande. Genom att samarbeta över vår ikon "sign-system", bör endast de mest arketypiska ikonerna utvecklas. Vi borde kunna skapa ikonordförråd som verkligen hör till de samhällen för vilka de borde betyda något.

Jag har skapat ett offentligt GitHub-arkiv för att hjälpa till med att främja denna idé. Kallad Community Icon Font , förvarets kodbas är inte komplicerat: En noggrann inspektion av föregående Inkscape handledning och en snabb läsning av projekt sida bör ge dig allt du behöver för att bli involverad. Om du är ny på GitHub, försök titta på deras hjälpsidor eller fråga din neighborhood techie (det är vad jag gör).

typografi webbdesign ikoner typsnitt ikon design WebFonts inkscape

Så här skapar du din egen ikon Webfont