H & FJ Fonturi Web Un ghid de teren

Deoarece Hoefler & Frere-Jones și-au anunțat incursiunea în lumea fonturilor web, internetul a fost plin de bucuria designerilor și tipografilor de pretutindeni. În cele din urmă, unul dintre cele mai populare turnătorii de tip acolo a lansat mult-așteptatul concurent al serviciilor de fonturi web de târziu!


Puteți vedea deja noul serviciu utilizat pe site-uri precum Rdio, site-ul Jessica Hische și CSS-Tricks. Dar ce înseamnă această nouă ofertă pentru dvs. și pentru mine? Ei bine, designerii și dezvoltatorii deopotrivă au multe de așteptat în serviciul. Să aruncăm o privire mai atentă.


O scurtă istorie a tipului

Să ne reînnoim mințile cu o scurtă lecție în evoluția tipului pe web. Înapoi în zilele CSS 2, (OK, deci nu acea mult înapoi), selecția noastră pentru fonturile web-friendly a fost oarecum limitată. Am reușit să folosim o mică selecție de fonturi prietenoase pe web, care erau sigur (fie) pe fiecare dispozitiv pe care pagina a fost vizualizată - Verdana, Arial, Georgia și Times New Roman - sau am selectat un font ca Helvetica, care ar fi "cel mai bine vizualizat" pe platforme specifice. Nu este ideal. Și apoi au existat tehnici de înlocuire a imaginii, unde am creat imagini ale textului în orice font aveam la dispoziția noastră și am înlocuit șiruri de text folosind CSS. În cele din urmă, era Sifr; o tehnică care a folosit Adobe Flash pentru a înlocui textul. Ambele tehnici de înlocuire au fost inaccesibile, o durere de implementat și o experiență neplăcută de-a lungul platformelor.

Puțin știm, o specificație real Fonturile web au fost în curs de desfășurare: @ font-face. Cei dintre voi familiarizați cu @ font-face vor ști că nu este cel mai simplu lucru pe plan mondial de implementat, astfel că ne îndreptăm spre servicii de fonturi de înaltă calitate precum Google Web Fonts, Tipkit și Fontdeck pentru a face ridicarea greutăților pentru noi. Aceste servicii, împreună cu noul serviciu H & FJ, se ocupă de găzduirea, licențierea și optimizarea fonturilor web. Cu toate acestea, fiecare serviciu nu este fără compromis; toate aceste servicii nu au un control fin asupra fonturilor pe care le primim. Lucruri precum ligaturi, capace mici și alte caracteristici OpenType sunt adesea dificil de implementat fără a afecta serios performanța fonturilor.

Aceasta este partea interesantă. H & FJ a creat un serviciu de fonturi web pentru tipografi și dezvoltatori deopotrivă.


Prețuri

Să scoatem partea cea mai grea din cale. Serviciul cloud.typography al H & FJ începe de la 99 USD pe an. Acest preț vă cumpără câte 250 000 de afișări în fiecare lună. Pentru 50 de dolari mai mult, obțineți o vizionare uimitoare de 1 milion de pagini, iar pentru 299 dolari, obțineți dublu.


Fiecare dintre aceste planuri vă oferă, de asemenea, cinci familii de fonturi gratuite aruncate în - o afacere atunci când considerați că aceste familii de fonturi de înaltă calitate costă în jur de 200 de dolari în monoterapie - precum și toate achizițiile dvs. din trecut, din domeniul turnătoriei, nelimitat, până la zece " ", Livrare SSL și 1GB de lățime de bandă de dezvoltare. Sunt disponibile planuri mai mari, precum și proiecte suplimentare.


Ofertă de fonturi

Biblioteca H & FJ este mică în comparație cu cea a lui Typekit, dar ridică bara de calitate. Turnătoria oferă peste treizeci de familii, dintre care zece au fost complet reengineered, reproiectate și optimizate pentru a fi utilizate pe web și pe dispozitivele de ecran. Un număr considerabil dintre aceste familii au seturi extinse, inclusiv variante condensate și extinse, greutăți de la ultra-ultra-negru la ultra-negru, capace mici, ligaturi, butași și seturi de caractere internaționale. Practic, primiți câteva fonturi de înaltă calitate.

Primele cinci familii pe care le alegeți sunt complet gratuite, după care familiile sunt evaluate individual. Toate licențele pentru desktop au, de asemenea, o licență de utilizare a web-ului, astfel încât să puteți aduce împreună cu H & FJ achiziționate anterior, precum și să obțineți o mulțime de licențe desktop și web împreună pentru branding unificat. Poate că cea mai interesantă tipă de text este Gotham, care este considerat de mulți ca strămoș mai rafinat al Proxima Nova.

Există unele diferențe subtile între Gotham și Proxima Nova; și anume, distanțele și lățimile de litere mai generoase ale lui Gotham, iar alternativa italică a lui Proxima Nova "a".

ScreenSmart

Un aspect important al fonturilor web este modul în care acestea funcționează pe dispozitivele de pe ecran. Este nevoie de o mulțime de optimizări pentru a vă asigura că fonturile - în special cele originale concepute pentru imprimare - funcționează bine pe ecrane. H & FJ au făcut totul pentru optimizarea câtorva dintre tipurile de fonturi, adesea redând complet familiile și personajele, pentru a vă asigura că arată excelent pe ecran și pe web.

Sentinel (sus) și Sentinel Screensmart (de fund) atât la 18px. Înălțimea înaltă x și înălțimea literelor în versiunea screensmart o fac ideală pentru dimensiuni mai mici și copie corporală.

Procesul de optimizare a fost imbracat de "turnatoriu" de "ScreenSmart". De pe site-ul lor:

Fonturile ScreenSmart sunt create pentru textul web. Concepute de la început ca familii de fonturi pentru ecran, ele sunt proiectate în jurul proprietăților naturale ale pixelilor și proiectate pentru a oferi rezultate precise peste tot.

Asta-i subzistență munca lor. Turnatorii au reproiectat fonturile în browser, folosind o suită de instrumente bazate pe Webkit. Noile greutăți noi au fost concepute special pentru utilizarea pe ecran, iar fiecare font este optimizat pe o varietate de browsere și platforme pentru o lizibilitate "pixel-perfectă".


Performanţă

Având în vedere calitatea - și, prin urmare, dimensiunea fișierului - a fonturilor, acest lucru este rapid. Cloud.typography utilizează un agent de difuzare pentru a gestiona cererile pentru fonturile web, detectând cerințele browserului și furnizând numai fonturile necesare acelui browser. De asemenea, stochează toate fișierele solicitate, distribuindu-le într-un CDN global, ceea ce înseamnă că livrarea acestor fișiere este întotdeauna rapidă.


Agentul de difuzare funcționează diferit în funcție de starea proiectului și fonturile acestuia. În modul de dezvoltare, fișierele de fonturi sunt găzduite pe serverele H & FJ și distribuite din CDN. Pentru fiecare dintre proiectele dvs., obțineți 1GB de lățime de bandă de dezvoltare pe lună; o alocație destul de substanțială. Când treceți la modul de producție, îi lăsați pe H & FJ să știe unde vor fi localizate fonturile pe serverul dvs., să descarce un fișier zip și să îl lipiți pe serverul dvs. După aceasta, nu este nevoie să modificați linkul CSS sau să faceți altceva; fișierul CSS indică fonturile de pe propriul dvs. server, dar rețeaua de difuzare continuă să ridice greu la determinarea fonturilor necesare, salvând utilizatorului o anumită durată de așteptare.


După trecerea la modul de producție, singura limită este permisiunea de afișare a paginii pentru planul dvs..

Un alt lucru de remarcat despre performanța Cloud.typography este faptul că nu utilizează un încărcător JavaScript cum ar fi Typekit și Fonturile Google Web. Un încărcător JavaScript are unele avantaje evidente atunci când vine vorba de ajustarea dinamică a nevoilor browserului, dar, de asemenea, vine la unele costuri; extra solicitări HTTP, unele sniffing cu nivel scăzut al browserului și o întârziere suplimentară în timp ce scriptul adaugă CSS-ul în document.

Un lucru care ma interesat cu adevarat ma actionat ca o imbunatatire subtila a performantei. Când analizați regulile CSS pentru adăugarea fonturilor pe site-ul dvs., Cloud.typography nu specifică una, ci Două nume de fonturi. De exemplu, regula CSS a lui Hoefler Text arată astfel:

font-family: "Hoefler Text A", "Hoefler Text B";

Solicitând două fișiere de fonturi, fonturile pot fi descărcate simultan (deși acest lucru nu este valabil în toate browserele). În teorie, este mai rapid să descărcați două fișiere de 200kb simultan decât să descărcați un singur fișier de 400kb. Atât fonturile A cât și B conțin jumătate din seturile de caractere, astfel încât caracterele care lipsesc din fișierul A scad și utilizează fișierul B. Smart sau ce?

Intenția reală de a diviza fișierele în acest fel (spune H & FJ's Reed Reeder) este de a "preveni utilizarea necorespunzătoare a fonturilor", dar este totul interesant, nu mai puțin.

Cu toate acestea, fișierele de fonturi pot deveni rapid destul de mari. Fonturile sunt adăugate la proiectul dvs. pe bază de greutate / stil, fiecare greutate sau stil medie fiind de aproximativ 40kb. Aceasta înseamnă că dacă doriți o singură familie de fonturi în greutăți obișnuite și îndrăznețe, cu caractere italice și capace mici pentru fiecare dintre acestea, vă puteți aștepta la o dimensiune totală de 320kb.


Control

Cloud.typography oferă un nivel extrem de competitiv de control asupra fonturilor pe care le selectați. Aceste opțiuni indică în mod clar un serviciu de fonturi web nu numai pentru designeri și dezvoltatori, ci pentru tipografi. În mod implicit, orice familie de fonturi pe care o adăugați la un proiect primește linii de caractere obișnuite, italice, aldine și aldine, cu punctuație standard și kerning.

Iată unde devine interesant (sau obsedant la limită). Odată ce adăugați o familie de fonturi la proiectul dvs., puteți adăuga toate celelalte greutăți disponibile (până la nouă) și stiluri, capace mici, ligaturi contextuale și discreționare, bufete, stiluri diferite de numere, seturi de caractere extinse și punctuație și caractere matematice.


Nu numai că, dar puteți defini, de asemenea, seturi personalizate de caractere. De exemplu, dacă utilizați doar o anumită inscripție pentru sigla site-ului dvs., puteți să îi spuneți tipului Cloud.typography să furnizeze numai caracterele necesare, salvând câteva descărcări serioase pentru utilizatori.

Merită să vă amintiți că fiecare dintre caracteristicile suplimentare tipografice pe care le adăugați va adăuga mai multă greutate la fonturi, iar suportul browser-ului poate fi puțin fragmentar, în special pe vechiul IE.


Înfășurarea în sus

Sperăm că puteți vedea că H & FJ a mers la o distanță suplimentară, oferind un control de neegalat cu granulație fină asupra fonturilor pe care le alegeți pentru site-urile dvs. În timp ce dimensiunile fișierelor vor continua să crească, acest nivel de control a avut designeri peste tot (cu adevărat inclusi) incredibil de încântați. Dacă nu, lansarea Cloud.typography ar putea începe o evoluție în celelalte servicii de fonturi web disponibile în prezent - putem aștepta și vedea doar! Nu uitați să aflați mai multe despre noul serviciu direct de la gura calului.