Designul web a devenit major în ziua în care fonturile web au intrat în utilizare pe scară largă. Înainte de acel moment, este discutabil că am fost mai puțin designeri decât ingineri.
Cu toate acestea, entuziasmul cu care ne-am apucat de opțiunile de font în design web a dus la o gamă uluitoare de opțiuni. Mulți designeri optează pentru calea celei mai mici rezistențe, permițând dorinței de implementare simplă să le dicteze tipografia.
Dacă știi ce cauți, toate opțiunile sunt simple. În acest articol, vă vom înarma cu cunoștințele de care aveți nevoie pentru a lua decizii informate atunci când alegeți între tehnologia fonturilor.
Vom ilustra aceste opțiuni concentrându-ne pe cea mai bună modalitate de a oferi un tip de literă clasic, Garamond.
Stivuirea fonturilor
După ce am lăudat virtuțile fonturilor web, prima opțiune pe care o vom lua în considerare nu utilizează deloc fonturi web. Stivuirea fonturilor este o tehnică CSS în care specificați un număr de alternative, începând cu prima alegere și terminând cu o soluție generală.
Există o mulțime de resurse de stivuire de fonturi online, dar una dintre preferatele mele este cssfontstack.com, este un punct de plecare excelent pentru o stivă de fonturi, dar țineți cont de faptul că, de cele mai multe ori, va trebui să aveți experiență.
Potrivit cssfontstack.com, Garamond este disponibil ca font de sistem pe 49,91% dintre Mac-uri și 86,47% dintre computerele Windows. E destul de bine, dar nu suficient. Iată stiva de fonturi sugerată care acoperă toate bazele:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Întrebarea este cum putem îmbunătăți acest lucru?
Ei bine, știm că există numeroase versiuni de Garamond disponibile, așa că putem adăuga o variație în al doilea slot ca un compromis minor.
În al doilea rând, nu sunt de acord că fie Baskerville, fie Times sunt înlocuitori adecvați pentru Garamond, așa că să le renunțăm. Hoefler Text funcționează bine în locul lui Garamond, așa că poate rămâne. Trebuie să adăugăm serif ca o gamă finală, dar deoarece majoritatea sistemelor folosesc Times ca serif implicit, haideți să introducem în Georgia, mult superioară, pentru oricine se strecoară prin fisuri.
Ultima noastră stivă de fonturi modificată arată astfel:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;Majoritatea telespectatorilor vor vedea Garamond. Alții câțiva vor vedea un compromis rezonabil, iar o mică minoritate va primi fontul serif implicit.
AVANTAJE-DEZAVANTAJE
Stivuirea fonturilor este gratuită. Ea este cea mai rapidă soluție și, în funcție de fontul ales, poate fi foarte eficientă. În cazul lui Garamond, există un argument bun pentru a numi acest lucru „lucru terminat”.
Există totuși o problemă majoră cu stivuirea fonturilor, în special cu un tip de literă precum Garamond. Există atât de multe versiuni pirat în circulație încât este imposibil să știm care font este numit „Garamond”. Designul este în concordanță cu așteptările noastre, scara fontului poate fi radical diferită de versiunea din designul nostru.
Prin urmare, stivuirea fonturilor este o rezervă excelentă. Ar trebui luată în considerare pentru utilizarea împreună cu toate soluțiile de mai jos, dar este mai puțin decât ideală ca soluție principală.
Fonturi Google
Google Fonts este punctul în care își încheie căutarea. Pentru un total mare de 0 USD, puteți încărca cu ușurință fonturi web pe site-ul dvs. folosind CSS.
Singurul dezavantaj este că numărul de fonturi oferite este extrem de limitat. Tipare precum Roboto și PT Sans își datorează popularitatea atât disponibilității gratuite pe Google Fonts, cât și calităților de design.
În prezent, singura variantă de Garamond disponibilă pe Google Fonts este EB Garamond, o încercare de a deschide fontul Garamond. Dar defectul acestei versiuni este că există o singură greutate și un stil disponibil. Designerul Georg Duffner și-a făcut cu generozitate lucrările în curs de desfășurare disponibile pe Bitbucket , dar nu este gata de producție.
AVANTAJE-DEZAVANTAJE
Google Fonts este o soluție excelentă pentru buget. A putea specifica fonturile în CSS este cât se poate de simplu.
Marele defect al fonturilor Google este că, în ciuda marketingului lor, există foarte puține opțiuni. Dacă sunteți în căutarea unui font web pentru Open Sans, atunci sunteți în locul potrivit. Dacă doriți un font precum Garamond – care nu este deloc obscur – este un wash-out.
Auto-găzduire
Auto-găzduirea este o abordare extrem de subapreciată a fonturilor web. Atracția sa cheie este capacitatea de a subseta fonturi, o optiune atat de atractiva aproape toate serviciile de streaming incearca sa o emuleze.
Dacă aveți o copie desktop a Garamond pe sistemul dvs., deschideți-o și veți vedea un număr uluitor de caractere. Subsetarea unui font este procesul de ștergere a caracterelor neesențiale, rezultând o dimensiune mai mică a fișierului și o livrare mai rapidă.
Desigur, caracterele de care aveți nevoie vor depinde de site-ul pe care îl construiți. Dacă construiți un ghid turistic pentru Dubrovnik, probabil că veți avea nevoie de caractere chirilice sârbe. Dacă reproduci lucrările colectate ale lui Shakespeare, este puțin probabil să ai nevoie de simbolul @.
Pentru a subseta un font, veți avea nevoie de software de editare a fonturilor. Există multe opțiuni disponibile de la FontForge gratuit la Studioul premium FontLab. Pentru a produce o versiune subset a fontului, pur și simplu selectați un glif pe care nu îl doriți și ștergeți-l, apoi salvați fișierul în folderul proiectului.
Fișierul complet .ttf pentru Adobe Garamond Pro este de 606 Kb. Reducerea acestuia la caractere latine de bază și punctuația îl reduce la 56 Kb. Înmulțiți-l în mai multe greutăți și stiluri și economisiți câțiva Mb în descărcări pentru utilizatorii dvs.
FONTURI DESKTOP CU GĂZDUIRE AUTOMATĂ
Majoritatea fișierelor cu fonturi pe care le-ați instalat vor fi TrueType (.ttf) cu un pumn de OpenType (.otf). Puteți să le salvați pe server și să le specificați în CSS.
Suportul pentru formatele de fișiere .ttf și .otf este larg răspândit în toate browserele moderne, cu excepția IE și a unor browsere mobile.
Pentru a vă mări acoperirea, veți avea nevoie de mai multe formate suplimentare. .eot funcționează pentru IE, .woff va funcționa pentru majoritatea browserelor și este formatul preferat de W3C, .svg va funcționa pe browserele vechi. Există o serie de servicii web care vor genera aceste formate pentru dvs. De exemplu din fișierul dvs. .ttf, unul dintre cele mai populare fiind Font Squirrel’s.
Dezavantajul conversiei fonturilor desktop pentru utilizare online este dublu. În primul rând, aproape sigur că nu aveți licență pentru a face acest lucru. Al doilea rând, fonturile desktop sunt aproape întotdeauna optimizate pentru imprimare, pur și simplu nu se redau bine pe ecran.
FONTURI WEB CU GĂZDUIRE AUTOMATĂ
Turnătoriile de fonturi s-au trezit în sfârșit cu faptul că există o piață uriașă pentru fonturi web. Drept urmare, nu numai că și-au înăsprit licențele, dar lucrează la optimizarea cataloagelor din spate pentru ecrane.
Turnatorii care furnizează fonturi web dedicate oferă toate formatele necesare, verificate de calitate și gata pentru încărcare pe serverul dumneavoastră. În plus, sunteți în continuare liber să subsetați un fișier și nu sunteți dependent de timpul de funcționare al unui server terță parte.
Există numeroase locuri în care puteți achiziționa fonturi web, doi dintre jucătorii cheie în domeniu sunt FontShop.com și MyFonts.com .
Revenind la dilema Garamond, putem vedea că MyFonts are o serie de versiuni diferite de Garamond oferite. Putem licenția Adobe Garamond în mai multe ponderi, limitate la 250.000 de vizualizări de pagină.
FontShop are, de asemenea, o serie de versiuni de fonturi web ale Garamond disponibile. URW Garamond Web oferă fiecare greutate și stil pe care ne-am putea dori. Însă cu un număr generos de 500.000 de vizualizări de pagină pe lună. În plus, FontShop are un subsetter dedicat pentru a optimiza achizițiile de fonturi noi strălucitoare.
ARGUMENTE PRO ŞI CONTRA
Auto-găzduirea permite subsetarea. Vă asigură că păstrați controlul asupra livrării fonturilor și evită orice fel de dependență de servere terțe.
În plus, dacă achiziționați un font web profesional, vă puteți aștepta ca calitatea să fie extrem de ridicată.
Auto-găzduirea îi atrage și pe cei dintre noi care preferă să ne „dețină” fonturile decât să le închiriem. Există foarte puțină proprietate, dar o taxă unică este mai confortabilă decât un abonament pentru mulți oameni.
Singurul dezavantaj al auto-găzduirii este prețul substanțial. Nu numai că va trebui să plătiți pentru font, dar poate fi necesar să luați în considerare costurile de găzduire și lățime de bandă în cifre.
Servicii Webfont
La fel ca Google Fonts, serviciile de fonturi web furnizează fonturi către browserele noastre prin CSS simplu. Spre deosebire de Google Fonts, există o gamă largă din care să alegeți.
Există o serie de furnizori diferiți din care să alegi și îmi place în mod deosebit serviciul cloud.typography de la Hoefler & Frere-Jones . Cu toate acestea, ca și în cazul multor furnizori mai mici, utilitatea lor depinde în întregime de disponibilitatea tipului de liter pe care îl căutați. Cel mai apropiat font pe care Hoefler & Frere-Jones îl poate furniza este Hoefler Text, totuși, dacă plătim o sumă, nu ar trebui să facem compromisuri.
Cel mai mare jucător în fluxul de fonturi web este Adobe Typekit . Calitatea fonturilor lor este foarte ridicată, implementarea este simplă și, cel mai important, au un catalog uriaș din care să aleagă.
ARGUMENTE PRO ŞI CONTRA
Serviciile de streaming Webfont oferă o mare varietate de fonturi de calitate excelentă, care sunt ușor de adăugat pe site-ul dvs.
În cazul Typekit, dacă sunteți deja membru Creative Cloud, atunci accesul gratuit face ca aceasta să fie o opțiune și mai atrăgătoare. Cu toate acestea, dacă nu sunteți membru, atunci vă confruntați cu o alegere între a plăti un abonament substanțial și a vă lega de Adobe.
Preocuparea mea principală cu orice serviciu de streaming este că sunteți în întregime dependent de performanța unui server terță parte. Dacă serverul lor se defectează, la fel și o parte substanțială a branding-ului dvs.
Care este alegerea potrivită?
Ca și în multe lucruri, răspunsul este: depinde de proiectul tău. Dar există câteva decizii pe care le putem lua pe baza testului nostru Garamond:
Stivuirea fonturilor este o copie de rezervă fără costuri, oferă o soluție pentru marcă dacă și când fișierele cu fonturi dispar sau serviciile de streaming funcționează lent. Ar trebui să fie întotdeauna implementat pe orice site, dar bazarea pe el, chiar și pentru ceva la fel de comun precum Garamond este potențial periculos.
Dacă fontul pe care îl căutați este disponibil pentru redare în flux gratuit, atunci aceasta este o alegere bună. Deoarece am un abonament Creative Cloud, aș fi tentat pe această cale, deși lipsa unei subsetari reale ar fi o îngrijorare.
Dacă aveți buget, atunci auto-găzduirea unui font web profesional este cea mai bună alegere. Costul modest – în comparație cu fotografia de stoc – este ușor justificat de subsetarea uriașă de creștere a vitezei.