Webdesign kom av alder dagen webfonter inngikk bred spredning bruk. Før dette punktet er det argumenterbart at vi var mindre designere enn ingeniører.
Imidlertid har entusiasmen som vi har fanget på fontalternativer i webdesign, ført til et forvirrende utvalg av valg; så mye at mange designere velger veien for minst motstand, slik at ønsket om enkel implementering kan diktere deres typografi.
Hvis du vet hva du leter etter, er alle mulighetene enkle. I denne artikkelen vil vi beskytte deg med den kunnskapen du trenger for å ta informerte beslutninger når du velger mellom skriftteknologi.
Vi skal illustrere disse alternativene ved å fokusere på den beste måten å levere et heltid klassisk skrifttype, Garamond.
Etter å ha fremhevet dydene til webfonter, vil det første alternativet vi vurderer, ikke bruke noen webfonter i det hele tatt. Fontstapling er en CSS-teknikk der du angir et antall fallbacks som starter med ditt førstevalg, og slutter med en catch-all-løsning.
Det er mange fontstablere ressurser på nettet, men en av mine favoritter er cssfontstack.com, Det er et flott utgangspunkt for en fontstabel, men vær oppmerksom på at du ofte må ikke ha noen ekspertise til å bære.
Ifølge cssfontstack.com er Garamond tilgjengelig som systemfont på 49,91% av Mac og 86,47% av Windows-maskiner. Det er ganske bra, men ikke bra nok. Her er den foreslåtte skrifttypestakken som dekker alle baser:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Spørsmålet er hvordan kan vi forbedre dette?
Vel, vi vet at det finnes mange versjoner av Garamond tilgjengelig, så vi kan legge til en variant i den andre sporet som et mindre kompromiss.
For det andre er jeg uenig om at enten Baskerville eller Times er tilstrekkelige erstatninger for Garamond, så la oss slippe dem. Hoefler Text fungerer godt i stedet for Garamond, slik at det kan bli. Vi må legge til serif som en endelig fangst-all, men som de fleste systemer bruker Times som standard serif, la oss spilleplassen i langt overlegne Georgia for alle som glider gjennom sprekkene.
Vår siste endrede skrifttypestabel ser slik ut:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;Flertallet av seerne kommer til å se Garamond, noen andre vil se et rimelig kompromiss og en liten minoritet vil bare få sin standard serif font.
Fontstapling er gratis, uten tvil den raskeste løsningen, og avhengig av ditt valgte skrifttype kan det være veldig effektivt; I tilfelle av Garamond er det et godt argument for å ringe denne "jobben".
Det er imidlertid et stort problem med skriftstapling, spesielt med et skrifttegn som Garamond. Det er så mange piratversjoner i omløp at det er umulig å vite hvilken skrifttype som heter "Garamond" på brukerens system, ikke bare kan vi ikke være sikre designet er i overensstemmelse med våre forventninger, kan skriftstørrelsen være radikalt forskjellig fra versjonen i vårt design. (Teknisk er det ingenting som hindrer at en kopi av Arial blir omdøpt "Garamond", i så fall vil fontstakken bruke det.)
Font stacking er derfor en flott backup, og bør vurderes for bruk sammen med alle løsningene nedenfor, men det er mindre enn ideelt som en primær løsning.
Google Fonter er, for mange designere, det punktet de avslutter sitt søk på. For en samlet sum på $ 0 kan du enkelt laste inn webfonter til nettstedet ditt ved hjelp av CSS.
Den eneste ulempen er at antall skrifttyper som tilbys er ekstremt begrenset. Typefiler som Roboto og PT Sans skylder deres popularitet så mye til deres ledige tilgjengelighet på Google Fonts, med hensyn til designkvaliteter.
For tiden er den eneste varianten av Garamond tilgjengelig på Google Fonts EB Garamond, et forsøk på å åpne kilde Garamond-skrifttypen. Men feilen med denne versjonen er at det bare er en vekt og stil tilgjengelig. Det er ikke fet eller kursiv. Designeren Georg Duffner har generøst gjort sitt arbeid pågår tilgjengelig på Bitbucket men det er ikke produksjonsklar.
Google Fonts er en fin budsjettløsning og ideell for situasjoner der du kan legge regningen i stedet for klienten din. Å kunne spesifisere skrifter i CSS er så enkelt som mulig.
Den store feilen med Google Fonts er at til tross for deres markedsføring, er det svært lite valg. Hvis du leter etter en webfont av Open Sans, så er du på rett sted, men hvis du vil ha en skrift som Garamond-som er knapt uklar, er det en utvasking.
Self-hosting er en enorm underappreciated tilnærming til webfonter. Dens hovedattraksjon er evnen til å dele fonter, et alternativ som er så attraktivt at nesten alle streamingtjenester forsøker å etterligne det.
Hvis du har en desktop kopi av Garamond på systemet, åpner du det og du får se et forvirrende antall tegn. Subsetting en skrift er prosessen med å slette ikke-essensielle tegn som resulterer i en mindre filstørrelse og raskere levering.
Selvfølgelig vil figurene du trenger, avhenge av nettstedet du bygger: Hvis du bygger en turistguide til Dubrovnik, trenger du sannsynligvis serbiske kyrilliske tegn; Hvis du reproduserer Shakespeare's samleverk, er det usannsynlig at du trenger et @ -symbol.
For å dele en skrifttype, trenger du skrifttyperedigeringsprogramvare. Det er mange alternativer tilgjengelig fra gratis FontForge til premien FontLab Studio. For å lage en delversjon av skrifttypen, velg bare en glyph du ikke vil ha, og slett den, og lagre filen i prosjektmappen din. (Vær forsiktig så du ikke overskriver den opprinnelige skrifttypefilen!)
Den fulle .ttf filen for Adobe Garamond Pro er 606Kb. Stripping den ned til grunnleggende latinske tegn og tegnsetting reduserer den til 56Kb. Multipliser det over flere vekter og stilarter, og du sparer et par Mb i nedlastinger for brukerne dine.
De fleste skrifttypefiler du har installert, vil være TrueType (.ttf) med en splattering av OpenType (.otf). Du kan lagre disse på serveren din og angi dem i CSS.
Støtte for .ttf og .otf filformater er utbredt på tvers av alle moderne nettlesere bortsett fra IE (selv den nyeste versjonen) og noen mobile nettlesere (inkludert eldre versjoner av IOS Safari).
For å øke dekningen trenger du flere tilleggsformater. .eot fungerer for IE, .woff vil fungere for de fleste nettlesere og er W3Cs foretrukne format, .svg vil fungere på eldre nettlesere. Det er en rekke webtjenester som genererer disse formatene for deg fra din .ttf-fil, en av de mest populære vesen Font ekorre.
Ulempen med å konvertere skrivebordsskrifter til bruk på nettet er todelt: For det første er du nesten absolutt ikke lisensiert til å gjøre det; og for det andre er skrivebordsfonter nesten alltid optimalisert for utskrift, de gjør det ikke bra på skjermen.
Font støperier har endelig våknet opp til det faktum at det er et stort marked for webfonter. Som et resultat har de ikke bare strammet opp deres lisensiering, men de jobber for å optimalisere deres back-kataloger for skjermer.
Støperier som leverer dedikerte webfonter, gir alle de nødvendige formatene, kvalitetskontrollert og klar for opplasting til serveren din. I tillegg er du fortsatt ledig til å dele en fil, og du er ikke avhengig av en tredjeparts serverens oppetid.
Det er mange steder du kan kjøpe webfonter, to av de viktigste aktørene i feltet er FontShop.com og MyFonts.com .
Tilbake til vår Garamond-quandary, kan vi se at MyFonts har en rekke forskjellige versjoner av Garamond som tilbys. Vi kan lisensiere Adobe Garamond i flere vekter, begrenset til 250 000 sidevisninger, for rundt $ 180.
FontShop har også en rekke webfont versjoner av Garamond tilgjengelig. URW Garamond Web gir all vekt og stil vi muligens vil ha, alle med en generøs 500.000 sidevisninger per måned. I tillegg har FontShop en dedikert subsetter for å optimalisere dine skinnende nye skriftkjøp. Dessverre betaler du en premie for alt dette, rundt $ 680 for hele fontfamilien.
Self-hosting muliggjør subsetting. Det sikrer at du holder kontrollen over skriftlevering, og unngår all slags avhengighet av tredjeparts servere.
Dessuten, hvis du kjøper en profesjonell webfont, kan du forvente at kvaliteten skal være ekstremt høy.
Self-hosting appellerer også til de av oss som foretrekker å "eie" våre skrifter snarere enn å leie dem. Selvfølgelig er det i juridisk henseende svært lite eierskap i det hele tatt, men en engangsavgift sitter mer komfortabelt som et abonnement for mange mennesker.
Den eneste ulempen med self-hosting er den betydelige prisen. Ikke bare vil du måtte betale for skrift, men det kan hende du må faktorere hosting og båndbredde kostnader i tallene dine.
På samme måte som Google Fonts, leverer webfont-tjenester skrifter til våre nettlesere via enkle CSS. I motsetning til Google Fonts er det et stort utvalg å velge mellom.
Det finnes en rekke forskjellige leverandører å velge mellom, og jeg liker spesielt Hoefler & Frere-Jones ' cloud.typography service. Men som med mange mindre leverandører, er deres bruk helt avhengig av tilgjengeligheten av det skrifttypen du leter etter. Den nærmeste fonten Hoefler & Frere-Jones kan levere er Hoefler Text, men hvis vi betaler en premie, bør vi ikke trenge å gå på kompromiss.
Den største aktøren i webfont streaming er Adobe Typekit . Kvaliteten på skrifter er svært høy, implementeringen er enkel, og viktigst av alt har de en stor katalog å velge mellom.
Typekit gir en rekke abonnementer fra $ 24.99 per år for 50.000 visninger per måned, til $ 99,99 per år for 1.000.000 visninger per måned. Men hvis du er et Creative Cloud-medlem, er porteføljeplanen inkludert i abonnementet ditt. noe som betyr at for de fleste webdesignere er Typekit en ledig løsning.
Et raskt søk forteller oss at det er flere versjoner av Garamond, inkludert Adobes egen, tilgjengelig på Typekit. Og det er også en svært begrenset delingsfunksjon som gjør at vi kan redusere filstørrelsen litt.
Webfont streaming-tjenester gir et stort utvalg av utmerkede kvalitetsfonter, som er enkle å legge til på nettstedet ditt.
Når det gjelder Typekit, hvis du allerede er et Creative Cloud-medlem, gjør gratis tilgang dette til et enda mer attraktivt alternativ. Men hvis du ikke er medlem, så står du overfor et valg mellom å betale et betydelig abonnement og knytte deg til Adobe.
Mitt prinsippspørsmål med en hvilken som helst streaming tjeneste er at du er helt avhengig av en tredjeparts server ytelse. Hvis serveren deres går ned, gjør det også en betydelig del av merkevaren din.
Som med så mange ting, er svaret: det avhenger av prosjektet ditt. Men det er noen avgjørelser vi kan ta ut fra vår Garamond-test:
Font stacking er en gratis backup, den gir en merkevare løsning hvis og når fontfiler forsvinner eller streaming tjenester kjører sakte. Det bør alltid implementeres på et hvilket som helst nettsted, men stole på det, selv for noe like vanlig som Garamond er potensielt farlig.
Hvis skrifttypen du leter etter, er tilgjengelig for å streame gratis, enten via Google Fonts, eller hvis du for eksempel har et Creative Cloud-abonnement, er dette et godt valg. Siden jeg har et Creative Cloud-abonnement, vil jeg bli fristet ned denne ruten, selv om mangelen på ekte undersetting ville være en bekymring.
Hvis du har budsjettet, er selvbetjening en profesjonell webfont det beste valget. Den relativt beskjedne kostnaden, sammenlignet med lagerfotografering, er lett berettiget av de enorme hastighetsforhøyningene.
I en bransje hvor vi minifiserer JavaScript-filer for å lagre noen Kb, raser hundrevis av ganger det beløpet fra en enkelt fil, en ikke-brainer.
Utvalgt bilde / miniatyrbilde, laste ned bilde via Shutterstock.