Webbdesign kom av ålder dagen webbfonter gick in i bred spridning. Före den punkten är det anklagligt att vi var mindre designers än ingenjörer.
Den entusiasm som vi har tagit på fontalternativ i webbdesign har dock lett till en förvirrande mängd olika val. så mycket att många designers väljer vägen för minst motstånd, vilket gör att önskan om enkel implementering kan diktera sin typografi.
Om du vet vad du letar efter är alla alternativ enkla. I den här artikeln får vi dig med den kunskap du behöver för att fatta välgrundade beslut när du väljer mellan typsnittsteknik.
Vi kommer att illustrera dessa alternativ genom att fokusera på det bästa sättet att leverera en heltid klassisk typsnitt, Garamond.
Med det första alternativet vi överväger använder vi inte webbfonter alls. Fontstapling är en CSS-teknik där du anger ett antal fallbacks som börjar med ditt första val och slutar med en catch-all-lösning.
Det finns massor av fontstapling resurser online, men en av mina favoriter är cssfontstack.com, Det är en bra utgångspunkt för en typsnittstapel, men var medveten om att du oftare behöver inte ta med någon expertis.
Enligt cssfontstack.com finns Garamond som systemfont på 49,91% av Mac och 86,47% av Windows-maskiner. Det är ganska bra, men inte tillräckligt bra. Här är den föreslagna fontstacken som täcker alla baser:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Frågan är hur kan vi förbättra detta?
Tja, vi vet att det finns många versioner av Garamond tillgängliga, så vi kan lägga till en variation i den andra slitsen som en mindre kompromiss.
För det andra håller jag inte med om att antingen Baskerville eller Times är lämpliga ersättare för Garamond, så låt oss släppa dem. Hoefler Text fungerar bra i stället för Garamond, så det kan stanna. Vi måste lägga till serif som en sista fångst-allt, men eftersom de flesta system använder Times som standard serif, låt oss platsen i det överlägset överlägset Georgien för alla som glider genom sprickorna.
Vår sista ändrade teckensnittsstack ser ut så här:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;Majoriteten av tittarna kommer att se Garamond, några andra kommer se en rimlig kompromiss och en liten minoritet kommer bara att få sin standard serif font.
Fontstapling är gratis, överlägset den snabbaste lösningen, och beroende på ditt valda typsnitt kan det vara mycket effektivt. I fallet med Garamond finns det ett bra argument för att kalla detta "jobb gjort".
Det finns emellertid ett stort problem med fontstapling, speciellt med en typsnitt som Garamond: det finns så många piratversioner i omlopp att det är omöjligt att veta vilken typsnitt som heter "Garamond" på användarens system, inte bara kan vi inte vara säkra designen överensstämmer med våra förväntningar, kan teckensnittets skala vara radikalt annorlunda än versionen i vår design. (Tekniskt finns det inget som hindrar en kopia av Arial som namnges "Garamond", i vilket fall vår fontstack skulle använda det.)
Fontstapling är därför en utmärkt säkerhetskopiering och bör övervägas för användning tillsammans med alla lösningar nedan, men det är mindre än perfekt som en primär lösning.
Google-teckensnitt är, för många designers, den punkt där de slutar sin sökning. För en summa på $ 0 kan du enkelt ladda webbfonter till din webbplats med hjälp av CSS.
Den enda nackdelen är att antalet teckensnitt som erbjuds är extremt begränsat. Teckensnitt som Roboto och PT Sans är skyldiga till deras popularitet lika mycket för deras lediga tillgänglighet på Google Fonts, vad gäller deras designkvaliteter.
För närvarande är den enda variationen av Garamond tillgänglig på Google Fonts EB Garamond, ett försök att öppna källan Garamond typsnittet. Men felet med den här versionen är att det bara finns en vikt och stil tillgänglig. Det finns ingen fet eller kursiv. Designern Georg Duffner har generöst gjort sitt arbete på gång tillgängligt på Bit hink men det är inte produktionsklar.
Google Fonts är en bra budgetlösning och idealisk för situationer där du kanske får betala räkningen i stället för din klient. Att kunna ange dina teckensnitt i CSS är så enkelt som möjligt.
Den stora felen med Google Fonts är att trots deras marknadsföring finns det mycket litet val. Om du letar efter en webfont av Open Sans så är du på rätt ställe, men om du vill ha ett teckensnitt som Garamond-det är knappast obscure-det är en uttorkning.
Self-hosting är ett enormt underappreciated tillvägagångssätt för webbfonter. Dess viktigaste attraktion är möjligheten att dela in teckensnitt, ett alternativ som är så attraktivt att nästan alla strömmande tjänster försöker efterlikna det.
Om du har en skrivbordsversion av Garamond på ditt system, öppna den och du får se ett förvirrande antal tecken. Att ersätta ett teckensnitt är processen att ta bort icke-väsentliga tecken vilket resulterar i en mindre filstorlek och snabbare leverans.
Naturligtvis kommer de tecken du behöver bygga på den webbplats du bygger: om du bygger en turistguide till Dubrovnik behöver du noga serbiska kyrilliska tecken; Om du reproducerar Shakespeares samlade verk är det osannolikt att du behöver en @ -symbol.
För att dela in ett teckensnitt behöver du textredigeringsprogram. Det finns många alternativ tillgängliga från gratis fontforge till premien FontLab Studio. För att skapa en undergruppsversion av teckensnittet, välj bara en glyph som du inte vill ha, och radera den och spara sedan filen i din projektmapp. (Var försiktig så att du inte skriver över din ursprungliga fontfil!)
Den fullständiga .ttf filen för Adobe Garamond Pro är 606Kb. Stripping ner till grundläggande latinska tecken och skiljetecken minskar den till 56Kb. Multiplicera det över flera vikter och stilar och du sparar ett par Mb i nedladdningar för dina användare.
De flesta fontfiler du har installerat kommer att vara TrueType (.ttf) med en smetning av OpenType (.otf). Du kan spara dessa på din server och ange dem i din CSS.
Stöd för .ttf och .otf filformat är utbredd i alla moderna webbläsare utom IE (även den senaste versionen) och vissa mobila webbläsare (inklusive äldre versioner av iOS Safari).
För att öka din täckning behöver du flera ytterligare format. .eot fungerar för IE, .woff kommer att fungera för de flesta webbläsare och är W3C: s föredragna format, .svg kommer att fungera på äldre webbläsare. Det finns ett antal webbtjänster som genererar dessa format för dig från din .ttf-fil, en av de mest populära varorna Font ekorre.
Nackdelen med att konvertera skrivbordsfonter för användning online är dubbelt: för det första är du nästan säkert inte licensierad att göra det; och för det andra är skrivbordsskrifter nästan alltid optimerade för utskrift, de gör helt enkelt inte bra på skärmen.
Font gjuterier har äntligen vaknat till det faktum att det finns en enorm marknad för webbfonter. Som ett resultat har de inte bara skärpt sina licensieringar, men de arbetar för att optimera sina bakkataloger för skärmar.
Gjuterier som levererar dedikerade webbfonter ger alla nödvändiga format, kvalitetskontroll och redo för uppladdning till din server. Dessutom är du fortfarande fri att dela upp en fil, och du är inte beroende av en tredjepartsserverns upptid.
Det finns många platser du kan köpa webbfonter, två av nyckelaktörerna i fältet är FontShop.com och MyFonts.com .
Återgå till vår Garamond-quandary, vi kan se att MyFonts har ett antal olika versioner av Garamond som erbjuds. Vi kan licensiera Adobe Garamond i flera vikter, begränsad till 250 000 sidvisningar, för cirka 180 dollar.
FontShop har också ett antal webbfont versioner av Garamond tillgängliga. URW Garamond Web ger varje vikt och stil vi skulle kunna önska, alla med en generös 500.000 sidvisningar per månad. Dessutom har FontShop en dedikerad subsetter för att optimera dina glänsande nya typsnittsköp. Tyvärr betalar du ett premie för allt detta, ca 680 kronor för hela teckensnittsfamiljen.
Self-hosting möjliggör delning. Det säkerställer att du håller kontrollen över typsnittet och undviker någon form av beroende av tredje parts servrar.
Om du köper en professionell webfont kan du dessutom förvänta dig att kvaliteten är extremt hög.
Self-hosting appellerar också till de av oss som föredrar att "äga" våra teckensnitt istället för att hyra dem. Självklart är det i juridiska termer mycket litet ägande alls, men en engångsavgift sitter bekvämare att en prenumeration för många människor.
Den enda nackdelen med self-hosting är det stora priset. Du behöver inte bara betala för teckensnittet, men du kan behöva faktor hosting och bandbredd kostnader i dina siffror.
Precis som Google Fonts levererar webbfontjänster typsnitt till våra webbläsare via enkel CSS. Till skillnad från Google Fonts finns det ett stort utbud att välja mellan.
Det finns ett antal olika leverantörer att välja mellan, och jag gillar särskilt Hoefler & Frere-Jones ' cloud.typography service. Men som med många mindre leverantörer är deras användbarhet helt beroende av tillgängligheten av den typsnitt du letar efter. Närmaste teckensnitt Hoefler & Frere-Jones kan leverera är Hoefler Text, men om vi betalar en premie borde vi inte behöva kompromissa.
Den största aktören i webfont streaming är Adobe Typekit . Kvaliteten på deras teckensnitt är mycket hög, genomförandet är enkelt, och viktigast av allt har de en stor katalog att välja mellan.
Typekit ger en rad abonnemang från $ 24,99 per år för 50 000 visningar per månad till 99,99 USD per år för 1 000 000 visningar per månad. Om du är en Creative Cloud-medlem ingår dock Portföljplanen i din prenumeration. vilket betyder att för de flesta webbdesigners är Typekit en ledig lösning.
En snabb sökning berättar att det finns flera versioner av Garamond, inklusive Adobes egna, finns på Typekit. Och det finns också en mycket begränsad delningsfunktion som gör att vi kan minska filstorleken lite.
Webfont-streamingtjänster ger en stor variation av utmärkta kvalitetsfonter, som är lätta att lägga till på din webbplats.
När det gäller Typekit, om du redan är en Creative Cloud-medlem, gör fri åtkomst det här till ett ännu mer tilltalande alternativ. Om du inte är medlem kan du dock välja mellan att betala en väsentlig prenumeration och binda dig till Adobe.
Min principiella oro med någon strömmande tjänst är att du är helt beroende av en tredjepartsserverns prestanda. Om deras server går ner, så gör en stor del av din branding.
Som med så många saker är svaret: det beror på ditt projekt. Men det finns några beslut som vi kan göra baserat på vårt Garamond-test:
Fontstapling är en kostnadsfri säkerhetskopiering, det ger en brandlösning om och när fontfiler saknas eller strömmande tjänster går långsamt. Den bör alltid implementeras på vilken sida som helst, men förlita sig på den, även för något så vanligt som Garamond är potentiellt farligt.
Om teckensnittet du letar efter är tillgängligt för att strömma gratis, antingen via Google Fonts, eller till exempel om du har en Creative Cloud-prenumeration, är det här ett bra val. Eftersom jag har en Creative Cloud-prenumeration skulle jag frestas ner den här vägen, även om bristen på verklig subsättning skulle vara ett problem.
Om du har budgeten är självhäftande en professionell webfont det bästa valet. Den relativt blygsamma kostnaden - jämfört med lagerfotografering - är lätt motiverad av den enorma hastighetsupphöjningen avdelningsleverantörer.
I en bransch där vi minskar JavaScript-filer för att spara några Kb, raderar hundratals gånger det beloppet från en enda fil en no-brainer.
Utvalda bild / miniatyrbild, ladda ner bild via Shutterstock.