Cele mai bune fonturi web. Cele mai bune fonturi gratuite pentru designeri

  • Traducere

Acum este momentul să vă îmbunătățiți designul cu fonturi web.

Nu este o exagerare să spunem că tipografia web trece printr-o perioadă interesantă a vieții sale chiar acum. Salturile tehnologice recente ne-au adus cu un pas mai aproape de nirvana tipografică pe web. Pasul pe care toată lumea îl aștepta.

Libertatea de a utiliza fonturi web în afara listei sigure pe toate sistemele de operare majore este posibilă în mare parte de trei factori tehnologici majori, aproape simultan: suport larg răspândit pentru regula @font-face în browsere; apariția unor astfel de „stocare de fonturi” precum Typekit și Fontdeck; crearea unui nou format de font - un fișier de font WOFF arhivat.

* Puține dintre aceste fonturi sunt disponibile pentru chirilic, așa că această selecție este mai potrivită pentru „externalizatori”. Să sperăm că cel puțin unele dintre acestea și nu numai fonturile pentru limbile slave în chirilic vor apărea în curând. Adaugă etichete

Fontul folosit pentru afișarea textului afectează percepția acestuia. Prin urmare, în acest articol, am adunat cele mai bune fonturi gratuite pentru web designeri din 2016, care vă vor ajuta materialele imprimate și site-urile web să arate profesionale.

Top 10 fonturi chirilice

Fonturile chirilice de înaltă calitate nu sunt ușor de găsit, dar există totuși mult mai multe acum decât înainte. Lista de mai jos conține atât serif-uri comune și sans-serif, cât și fonturi ultraelegante pentru ocazii speciale.

5. Oswald- un font clasic ușor comprimat sans-serif, care va arăta bine pe orice dispozitiv:

6. Jura este un tip de literă elegant cu serif înclinat, cu forme rotunde, cel mai potrivit pentru subtitluri sau pentru text:

7. Exo 2 este un font tehnologic universal cu mai multe stiluri, așa că va fi suficient pentru a decora majoritatea elementelor de text din pagină:

8. pompiere potrivit pentru tine dacă cauți un font elegant, dar nu prea serios:

9. Aclonica este o altă fontă vibrantă pentru titluri captivante și articole promoționale tipărite:

10. Museo este un tip de tip sans-serif care arată bine în dimensiuni mici și mari, ceea ce înseamnă că este potrivit pentru afișarea elementelor de meniu, precum și pentru textul de corp al paginii. Disponibil gratuit în variantele Museo Sans 500 și Museo Sans:

În acest articol, am oferit fonturi pentru designeri grafici profesioniști care pot fi folosite pentru a proiecta pagini sau materiale tipărite. Un număr mare de fonturi disponibile este adesea confuz, deoarece, în același timp, trebuie să fie combinate corect. Iată regulile pentru combinarea fonturilor pentru a vă ajuta în această sarcină:

  1. Nu folosiți fonturi prea contrastante - se poate dovedi că fiecare dintre ele va atrage atenția asupra sinelui, distragerea atenției cititorului de la conținut.
  2. Dar nu alegeți prea asemănătoare - se vor îmbina și vor crea un sentiment de incompletitudine.
  3. Creați o ierarhie vizuală - amintiți-vă cum arată de obicei ziarele tipărite: arată clar structura titlurilor.
  4. Nu uitați de context - la urma urmei, designul este creat nu doar așa, ci în conformitate cu nevoile unei anumite companii.
  5. Nu utilizați mai mult de trei fonturi diferite pe o pagină.

Pentru 2018, numărul de fonturi gratuite de înaltă calitate le permite designerilor să lucreze pe deplin la sarcini fără nicio ezitare în a alege. Prin urmare, am scris despre cele mai bune fonturi gratuite.

Studioul proiectează site-uri web și aplicații pentru Android și iOS și vom fi bucuroși să vă ajutăm afacerea să atragă utilizatori cu un design unic și recunoscut.

  • Traducere

Acum este momentul să vă îmbunătățiți designul cu fonturi web.

Nu este o exagerare să spunem că tipografia web trece printr-o perioadă interesantă a vieții sale chiar acum. Salturile tehnologice recente ne-au adus cu un pas mai aproape de nirvana tipografică pe web. Pasul pe care toată lumea îl aștepta.

Libertatea de a utiliza fonturi web în afara listei sigure pe toate sistemele de operare majore este posibilă în mare parte de trei factori tehnologici majori, aproape simultan: suport larg răspândit pentru regula @font-face în browsere; apariția unor astfel de „stocare de fonturi” precum Typekit și Fontdeck; crearea unui nou format de font - un fișier de font WOFF arhivat.

* Puține dintre aceste fonturi sunt disponibile pentru chirilic, așa că această selecție este mai potrivită pentru „externalizatori”. Să sperăm că cel puțin unele dintre acestea și nu numai fonturile pentru limbile slave în chirilic vor apărea în curând. Adaugă etichete

Prima parte a capitolului este dedicată cunoașterii fonturilor CSS. Pe această pagină veți afla cum să includeți fonturi în CSS, ce sunt fonturile web și cum să lucrați cu ele, ce formate de fonturi sunt disponibile, cum să utilizați Fonturile Google. Mai întâi, să ne uităm la un exemplu simplu de includere a unui font CSS:

P (familie de fonturi: Verdana; )

Această mică bucată de cod înseamnă că toate etichetele

Font Verdana aplicat. Proprietatea font-family stabilește ce font sau font-family va fi utilizat. Afișarea corectă a acestui stil în browserul utilizatorului depinde dacă fontul specificat este instalat pe computerul utilizatorului. În cazul nostru, dacă computerul utilizatorului nu are fontul Verdana, browserul va afișa fontul implicit.

La un moment dat, designerii au trebuit să specifice suplimentar mai multe fonturi de rezervă în cazul în care cel principal lipsea de pe computerul utilizatorului. Să presupunem că doriți să vă stilați textul în Verdana și să utilizați Trebuchet MS, Geneva și orice font sans-serif ca alternative. Este scris astfel:

P (familie de fonturi: Verdana, „Trebuchet MS”, Geneva, sans-serif; )

La procesarea acestui cod, browserul va verifica mai întâi prezența fontului Verdana pe computerul utilizatorului. Dacă fontul este prezent, conținutul etichetelor

Afișat în acest font. Dacă fontul lipsește, browserul va verifica următorul font din listă, Trebuchet MS. Dacă lipsește și acest font, se va verifica prezența următorului font, Geneva. Dacă computerul utilizatorului nu are și Geneva, browserul va selecta un alt font sans-serif disponibil și va afișa textul din acesta.

Notă:în cod, am scris numele fontului Trebuchet MS între ghilimele. Este necesar să luați numele fontului între ghilimele duble sau simple atunci când conține spații.

Puteți citi despre ce este un font cu serif (serif) și fără (sans-serif) pe pagina Wikipedia.

Fonturi web

Modul de mai sus de utilizare a fonturilor are un mare dezavantaj - sunteți limitat în numărul de fonturi. Va trebui să vă mulțumiți doar cu acele opțiuni care sunt cel mai probabil instalate pe majoritatea computerelor.

Cum puteți crește alegerea fonturilor pentru a face designul paginii individual, pentru a adăuga originalitate? Fonturile web vin în ajutor. Citiți mai departe capitolul și veți învăța cum să lucrați cu ei.

Așadar, pentru a afișa fontul dorit în browser-ul utilizatorului, avem nevoie ca acest font să fie descărcat pe computerul acestuia. Este destul de ușor să faci asta. Această metodă de conectare a fonturilor la CSS deschide posibilități foarte largi pentru designeri. Dar merită menționat o muscă în unguent: în primul rând, nu orice browser acceptă un anumit format de font (ceea ce va duce la faptul că fontul nu este afișat) și, în al doilea rând, dacă fișierul de font este mare, poate încetini încărcarea paginii.

Suport format

Cum să rezolvi problema nepotrivirii formatului de fișier? Să aruncăm o privire la tabelul care arată cele mai populare formate de font și să aflăm ce browsere le acceptă:

Notă: Puteți găsi întotdeauna informații actualizate despre suportul pentru formatul fontului la caniuse.com. Trebuie să introduceți numele formatului în bara de căutare (de exemplu, ttf).

Dacă vizați browsere moderne, va fi suficient să utilizați formatul de font TTF - cel mai comun și folosit. În cazul în care trebuie să aveți mai multe formate ale aceluiași font, puteți utiliza convertoare speciale online de la un format la altul, apoi conectați toate fișierele unul câte unul. Astfel browserul va putea alege formatul de font cu care funcționează.

Includerea unui font web folosind @font-face

Să presupunem că aveți propriul font unic numit MyUniqueFont în format TTF și doriți ca textul paginii dvs. web să fie afișat în acel font. Primul lucru de făcut este să copiați fișierul cu fonturi în folderul în care se află toate celelalte fișiere ale site-ului. Pentru a nu crea dezordine, puteți crea un folder separat special pentru fonturi, denumindu-l, de exemplu, fonturi .

@font-face (familie de fonturi: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

Proprietatea font-family în acest caz joacă un rol diferit: cu ea, atribuim un nume fontului, astfel încât să putem folosi ulterior acest nume atunci când scriem un stil:

P (familie de fonturi: MyUniqueFont; )

A doua linie specifică calea către fișierul fontului. În exemplul nostru, fișierul MyUniqueFont.ttf se află în folderul fonturi. Adresa URL poate fi diferită.

Fonturi Google

Google facilitează includerea oricărui font din colecția Google Fonts. Tot ce trebuie să faceți pentru a începe să utilizați fontul care vă place este să specificați câteva setări pe pagina de font de pe Google, apoi să copiați linkul special către acest font și să îl adăugați în documentul dvs. web.

Notă:întreaga colecție de fonturi de la Google este disponibilă pe site Fonturi Google. Pe pagină, puteți folosi diverse filtre pentru a căuta fonturi după categorie, grosime, alfabet.

Mai jos vom descrie fiecare pas al conectării unui font de la Google. Pentru a înțelege despre ce vorbim, selectați orice font din pagina Fonturi Google și deschideți-l făcând clic pe butonul Utilizare rapidă.

Pasul 1: alege un stil

În primul rând, pe pagina fontului selectat vor fi afișate opțiuni pentru stilul acestuia, precum și o pictogramă vitezometru, care nu înseamnă nimic mai mult decât viteza de încărcare a fontului. Cu cât alegeți mai multe stiluri de font, cu atât va dura mai mult pentru încărcare. Prin urmare, este recomandat să selectați doar acele stiluri pe care intenționați să le utilizați.

Pasul 2: alegeți un alfabet

În continuare pe pagină, este posibil să selectați un set de caractere: latină, chirilică etc. În funcție de font, este posibil să nu fie disponibile toate variantele alfabetului în acesta. Similar cu paragraful anterior, este mai bine să bifați caseta doar în fața alfabetului de care aveți nevoie.

Pasul 3: adăugați codul pe site

Prima metodă presupune adăugarea unui link către serverul Google în codul HTML, de unde este descărcat fontul. Trebuie să copiați bucata de cod deja terminată și să o plasați între etichete în documentul dvs. HTML. Exemplu:

...

A doua modalitate este de a include fontul folosind directiva @import. Codul final se află în a doua filă de la punctul 3 de pe pagina fontului Google selectat. Trebuie adăugat în partea de sus a foii de stil (în caz contrar, fișierul nu va fi importat). Codul arată cam așa:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Particularitatea primei metode este că va trebui să adăugați un link către font în antetul fiecărei pagini în care intenționați să îl utilizați. Acest lucru este ușor de implementat pe site-urile cu un număr mic de pagini, dar problematic pentru resurse mari. A doua metodă este convenabilă prin faptul că codul poate fi plasat chiar la începutul unei foi de stil externe, iar apoi toate paginile la care este conectat acest tabel vor primi fontul necesar, care va fi încărcat folosind directiva @import.


Pasul 4: stil

După parcurgerea pașilor anteriori, puteți începe să aplicați fontul. Ați văzut deja cum este scrisă o astfel de regulă CSS:

P (familie de fonturi: „Roboto”, sans-serif; )

Dacă la primul pas ați ales mai multe opțiuni de font (de exemplu, ați adăugat fontul Bold 700 bold), atunci în al treilea pas codul se va schimba puțin:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Pentru a face fontul bold, scrieți stilul CSS astfel:

P (familie de fonturi: „Roboto”, sans-serif; greutatea fontului: 700; )

Notă:în Google Fonts, pentru a indica greutatea unui font sunt utilizate numai unități standard de la 100 la 900. De exemplu, normal (implicit) este echivalent cu 400 (normal), iar aldin standard este echivalent cu 700 (bold).

Principalele avantaje ale serviciului Google Fonts sunt:

  • ușurință în utilizare (chiar și un începător își poate da seama de serviciu, iar tot codul necesar este generat automat - tot ce rămâne este să îl copiați);
  • disponibilitatea fonturilor (nu este nevoie să plătiți pentru ele);
  • sunt furnizate toate formatele de font utilizate (aceasta înseamnă că fiecare browser va putea încărca exact formatul de font cu care funcționează).

Printre deficiențele serviciului nu se numără o varietate foarte mare de fonturi, în special cele chirilice. Apropo, există și alte servicii similare pe Internet, de exemplu, TypeKit (plătit).

Rezultate

Astăzi, avem mai multe opțiuni pentru conectarea fonturilor originale și non-standard la paginile web. Fiecare dintre aceste metode are avantajele și dezavantajele sale. Ce opțiune este mai bine să utilizați, trebuie să determinați singur. Acest lucru depinde adesea de situație și abordări diferite pot fi utile în cazuri diferite. În acest moment, trebuie doar să știți cum să utilizați fonturile în CSS.

Începând să tipăriți aspectul, este necesar, în special, să specificați în CSS fonturile folosite în pagină. Adesea, designerul folosește diferite fonturi pentru a introduce nu numai textul principal al paginii, ci și diferite titluri, logo-uri și monograme:

Un designer bun, ca un bun designer de layout, știe că browserul poate folosi doar acele fonturi care sunt instalate pe computerul utilizatorului pentru a afișa pagina. Adică, fonturile pot fi împărțite aproximativ în două categorii:

  1. Fonturi care vor fi afișate fără probleme pentru marea majoritate a utilizatorilor.
  2. Fonturi pe care un grup suficient de mare de utilizatori nu le are.

Dacă designerul a folosit fonturi de categoria 2 pentru a crea, de exemplu, un logo sau titluri statice mari, nu puteți ezita să utilizați . Dezavantajul utilizării acestei tehnici este inflexibilitatea. În cazul unor modificări ale textului, va trebui să refaceți imaginea și să modificați CSS-ul (de exemplu, dacă dimensiunile noii imagini nu se potrivesc cu cea veche).

Putem spune că pericolul utilizării tehnicii depinde direct de probabilitatea modificării textului. Prin urmare, de exemplu, textul general al paginii nu poate fi realizat cu fonturi non-standard! Un designer bun nu ar face niciodată asta. Și dacă un designer devine verde, un bun designer de layout este pur și simplu obligat să-și corecteze greșeala - în aspect, înlocuiți acest font cu cel mai asemănător font standard.

Dar cum să distingem fonturile primului grup de al doilea? Este clar că nu te poți baza pe un set de fonturi instalate direct pe computer! Să ne dăm seama.

Fonturi standard

Fonturile standard sunt un set de fonturi instalate cu sistemul de operare. Deoarece sistemele de operare sunt diferite, au și un set diferit de fonturi. O listă de fonturi standard pentru diferite versiuni de Windows poate fi găsită, de exemplu, în articolul Fonturi standard Windows și o listă de fonturi standard Mac OS pe pagina Fonturi livrate cu Mac OS. În ceea ce privește sistemele de operare Unix/Linux, acestea nu au un singur set de fonturi. Mulți utilizatori Linux folosesc setul de fonturi DejaVu, în special pe Ubuntu, acestea sunt instalate implicit. Conform statisticilor http://www.codestyle.org, mulți utilizatori Unix/Linux au instalate și seturile de fonturi URW, Free și alte fonturi. Conform acelorași statistici, mai mult de 60% dintre utilizatorii Unix/Linux au pe computer fonturile fonturilor Core pentru setul Web, care până în 2002 era disponibil oficial pentru descărcare gratuită pe site-ul Microsoft.

Pentru ca pagina să fie afișată așa cum a intenționat designerul, în orice sistem de operare, este posibil să setați mai multe fonturi în proprietatea CSS, separate prin virgulă.

Această proprietate specifică o listă prioritară de nume de familie de fonturi și/sau nume de familie generice. Conform specificației CSS2, există două tipuri de nume de familie de fonturi:

  1. Numele familiei de fonturi alese. De exemplu, „Times new Roman”, „Arial” și altele. Numele de familie de fonturi care conțin spații trebuie să fie cuprinse între ghilimele. Dacă nu există ghilimele, orice caractere de spațiu înainte și după numele fontului sunt ignorate și orice secvență de spații din interiorul numelui fontului este convertită într-un singur spațiu.
  2. Familie generică (comună). Specificația definește următoarele familii generice:
    • serif - fonturi cu serif la capete;
    • sans-serif - fonturi sans-serif;
    • fonturi cursive - cursive;
    • fantezie — fonturi decorative;
    • monospace - font monospace (cu litere de aceeași lățime).
    Numele generice de familie sunt cuvinte cheie și nu trebuie să fie incluse între ghilimele.

Astfel, un font standard de la OS Windows este luat pentru design, unul similar pentru Mac OS și Unix / Linux este selectat pentru acesta, este setată o familie de fonturi comună și gata.

Dar nu totul este atât de simplu. Să săpăm mai detaliat.

În căutarea fonturilor sigure pentru web

Pe Internet, a existat din punct de vedere istoric un fel de fonturi web „sigure”. Un font sigur este un font standard pentru toate sistemele de operare. Întrucât o astfel de stare de lucruri poate fi doar visată, atunci Fonturile absolut sigure nu există!

Unele fonturi pot fi numite sigure cu unele rezerve.

Baza pentru definirea fonturilor „sigure” au fost fonturile celui mai comun sistem de operare Windows, care sunt folosite și în alte sisteme de operare. Un exemplu al acestei utilizări îl reprezintă fonturile Core pentru pachetul de fonturi Web, care, conform statisticilor, au fost descărcate de mulți utilizatori Unix/Linux.

Acest pachet include următoarele fonturi: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Toate suportă alfabetul chirilic, care este important pentru Runet.

Setul de fonturi incluse în livrarea standard a Mac OS X (acest sistem de operare este cel mai comun printre utilizatorii de Mac OS) include toate fonturile din setul de fonturi Core pentru Web.

Astfel, pe baza fonturilor Windows utilizate în alte sisteme de operare, s-a format următoarea listă de așa-numite fonturi Web „sigure”:

  • Arial
  • Arial Black
  • Comic Sans MS
  • curier nou
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

Fontul Webdings conține un set de pictograme și, prin urmare, nu poate fi utilizat pentru conținut. Andale Mono nu este utilizat pe scară largă deoarece nu este potrivit pentru citirea zilnică a ecranului și nu toți utilizatorii de Windows îl au.

Fiecare utilizator Windows, utilizator Mac OS X și marea majoritate a utilizatorilor Unix/Linux (adică cei care au instalat fonturile Core pentru pachetul Web) au toate aceste fonturi.

Dar ce rămâne cu restul? La urma urmei, vreau ca ideea designerului să fie văzută de cât mai mulți utilizatori!

Citiți despre asta în a doua parte a publicației.