Share
I den här artikeln tar vi en titt på några av de mest populära webbtypstjänsterna, jämför funktioner mellan dem och pratar om några av de röda flaggor som är inblandade i att arbeta med riktiga teckensnitt på webben.
Vi är en lycklig gäng, vi webbdesigners av nuet. Webbdesigners of yesteryear har länge kämpat med ett frustrerande litet urval av teckensnitt - de webbsäkra systemfonter som testades och testades för användning på skärmen. Du känner till deras namn. Georgia, Times New Roman, Arial, Verdana - nästan alla av dem skickar en liten skura ner våra ryggrad.
Men inte längre. Webbfonten är här! CSS3 har tagit riktiga webbfonter till vårt verktygsbälte, med kraften i @ font-face. Men med denna nya teknik kommer ett överväldigande ansvar - huvudvärk som är licensierande typsnitt för användning på webben. Fler och fler gjuterier levererar typsnitt med licens för användning online, men då värd typsnitten själv och säkerställer kompatibilitet över enheter och webbläsare kan vara en annan värld av smärta på egen hand.
Det är där webbtypstjänster kommer in. De hanterar huvuddelen av licens- och värdarbetet, vilket gör att du gör det du gör bäst - bygg fantastiska och vackra webbplatser.
Jag talar om tre av de mest populära webbtypstjänsterna här. Namligen Typekit
Fontdeck
och Google webbfonter.
Alla dessa tjänster är värd för dina teckensnitt på sina egna servrar och hanterar alla licensieringsnonsen som går med dem - så du kan bara plugga och spela utan bekymmer.
Dessa tjänster använder inte alla samma teknik för inbäddning av teckensnitt. Fontdeck och Google webbfonter låter dig använda en tagg för att fånga teckensnitten direkt för att kunna använda dem på din webbplats, medan Typekit har ett annat tillvägagångssätt. Typekit kräver att du innehåller ett JavaScript-kod i din webbplats som tar till sig nödvändiga resurser för dig vid körning.
Att använda en tagg har några uppenbara fördelar. För en sak kräver den här metoden inte att användaren har JavaScript aktiverat. Dessutom kommer det skript som Typekits kod genererar resultera i minst 2 ytterligare HTTP-förfrågningar - en för ett annat skript och en sekund för CSS-filen som tagits av nämnda skript. Detta är något som Fontdeck och Google inte behöver lida igenom.
Typekit har dock en signifikant fördel genom att använda ett manus istället för vanlig gammal CSS - wf- * klasser.
Accentsconagua
wf- * klasserNär din webbplats begär fontar från Typekit-servrar via deras JavaScript-kod, händer något lite underbart - manuset kommer att lägga till klasser till html-elementet på din webbplats beroende på statusen för begäran om teckensnitt.
Klasserna är wf-lastning, wf-aktiv, och wf-inaktiv. Vad betyder detta för oss? Tja, de här klasserna kan hjälpa oss att förhindra FOUT - blixten av ostylad text som visas som våra webbfonter laddas. Genom att utforma våra sidor på lämpligt sätt när teckensnittet laddas, kan vi förhindra den skadliga effekten som FOUT kan ha för användaren. Kolla denna sida för ett exempel - medan teckensnittet laddas, appliceras en klass av wf-loading på html-taggen.
Med hjälp av CSS kan vi gömma allt innehåll och visa en laddningsanimering för att göra det klart för användaren att något händer. När tecknen har slutförts kan vi gradvis försvaga vårt innehåll igen. Med Google Web Fonts kan du också använda ett manus om du vill ha fördelen av dessa klasser. Faktum är att manuset bakom dessa klasser var en samverkan mellan Google och Typekit.
Var och en av dessa tjänster antar en annan prissättningsmodell. Google webbfonter är helt gratis. Du kan även ladda ner teckensnitt för lokal användning på dina datorer, vilket är bra om du försöker bygga konsekvent branding med typografi.
Typekit har flera olika prisklasser, allt från en gratis plan till $ 99 per år. Den fria planen har ett begränsat antal teckensnitt, tillåtet på en enda webbplats, och kräver att du visar ett typekit-märke på din webbplats. Med alla betalda planer kan du ta bort detta märke och låta dig använda skapa fler webbplatser och använda fler teckensnitt, ju mer du betalar. För mer information om sina prisplaner, kolla deras hemsida.
Fontdeck antar en annan prissättningsmetod. De debiterar per typsnitt, med teckensnitt (vid skrivetid) varierande i pris från $ 2,50 per år uppåt, men kostar vanligtvis runt 7,50 dollar per år.
Ett stort problem när du använder webbfonter är hur de visas över det stora utbudet av enheter, webbläsare och plattformar. Tyvärr finns det inget sätt att se till att våra webbplatser ser ut exakt samma på en enhet som de gör på en annan - vi vet att det är OK men. Ändå kan vi göra med viss berolighet om hur bra typsnittet kommer att göra.
Lyckligtvis vet våra webbtypstjänster det här är en stor sak. De ger alla skärmdumpar av hur teckensnittet görs i alla populära webbläsare, inklusive IE6 och upp, Google Chrome, Safari, Firefox och Opera. I allmänhet ger webfonter bara bra i alla fall. Vissa ljusare ansikter kan förekomma ihop i Windows, men det är bara ner till Windows-typsnittet - inte mycket vi kan göra där.
En sak att vara medveten om när du använder webbfonter på dina webbplatser är egenskapen för CSS-textåtergivning. Den här egenskapen låter dig använda OpenType-funktioner som ligaturer och kerning, men till en stor kostnad. I WebKit-webbläsare på Linux-distributioner och i Chrome på Windows med vissa teckensnitt kan användandet av denna egenskap resultera i några konstiga biverkningar när det gäller inline-textelement.
Med detta i åtanke är det nog en bra idé att stryka bort den här egenskapen (för närvarande experimentell). Plus på den ljusa sidan, implementerar Firefox inte bara egenskapen korrekt, men har ligaturer och kerning aktiverad som standard också.
Så vi vet om de olika tjänsterna och skillnaderna mellan hur de fungerar, liksom några av de röda flaggorna som är involverade i att använda webbfonter på våra webbplatser - men hur börjar vi faktiskt använda dem?
Ett särskilt användbart verktyg för att få händerna smutsiga med webbfonter är Typecast.
Typecast ger dig möjlighet att testa alla webbsidor som finns tillgängliga från alla dessa tjänster i en webmiljö där du också kan lägga till anpassad CSS, definiera bredder för element - hela kit och caboodle. Den CSS som Typecast producerar för användning på din egen webbplats är mindre än önskvärt - teckensnittstorlekar, linjehöjder och marginaler som anges i pixlar, inte ems. Men det är fortfarande ett otroligt användbart verktyg för att se hur dessa teckensnitt kommer att se på den verkliga webben.
Om du befinner dig saknar inspiration för hur du använder webbfonter, är Typekit-bloggen alltid chock-a-block med inspirerande webbplatser, liksom några fascinerande insikter på tekniken bakom webbsidor. Det finns också webbplatser som de förlorade världens mässor, bara min typ (från din egentligen) och bra webbfonter där du kan se den verkliga makt och skönheten av riktiga typsnitt på webben. Elliot Jay Stocks hemsida är alltid en verkligt inspirerande webbplats som visar webbfonter också. (Du kanske kan berätta - jag älskar dessa saker.)
När det gäller att faktiskt använda tjänsterna kunde de inte vara enklare. Google Web Fonts är väldigt mycket bara plug and play - hitta ett teckensnitt du gillar, klicka på "snabbanvändning" och välj sedan de teckensnitt och varianter du behöver. Du får en länk som du kan använda på din webbplats eller i din CSS-fil via @import eller en javascript-kod som du kan använda för att utnyttja klasserna "wf- *".
Med Fontdeck kan du testa ut teckensnittet på några datorer innan du köper det för utbredd användning på din webbplats. Välj bara det teckensnitt du gillar, och de ger dig en länk som du kan använda på webbplatser. Testa det på några datorer genom att lägga till deras IP-adresser till webbplatsen på Fontdeck, så snart du är nöjd med det, köper du bara teckensnittet för obegränsad användning.
Typekit har en gratis plan som låter dig använda ett ganska omfattande bibliotek med teckensnitt gratis, under förutsättning att du visar ett märke på din webbplats som annonserar det faktum att du använder Typekit. Det är faktiskt inte ett dåligt litet litet märke, men om du vill ha den borta måste du betala för en plan.
Portföljplanen är oerhört omfattande, med få begränsningar, och den är prissatt till en rimlig $ 49,99 per år, eller om du har Adobe Creative Cloud får du Portföljplanen inkluderad. För att använda Typekit på din webbplats skapar du helt enkelt ett "kit" - en uppsättning av teckensnitt för användning på domäner du anger. Kopiera javascript-snippet till dina webbplatser, lägg till några teckensnitt i satsen, välj vikter och variationer du behöver, kom ihåg att slå "publicera kit". Ibland kan Typekits servrar ta ett tag för att spegla ändringar, så ge det några minuter innan du uppdaterar din webbplats.
Sedan juli 2012 har Typekit erbjudit förbättrad JavaScript-inbäddning.
Denna nya inbäddningsmetod ökar prestanda, erbjuder protokollens relativa webbadresser och valfri (officiell) asynkron lastning. Asynkron laddning gör att teckensnitt kan dras in på en sida utan att blockera kön för andra tillgångar om problem skulle uppstå.
Med lycka är du nu beväpnad med tillräcklig information om webbtypstjänster för att dyka in och skapa ditt eget sinne. Vilka av dessa system och funktioner föredrar du? Har du erfarenhet av någon av tjänsterna? Råd och tips som du vill dela med dig? Låt oss veta i kommentarerna!
