Nota editorului: această postare pentru invitați a fost scrisă de Abbey Fitzgerald, un inginer software UX și designer web care iubește arta de a crea cod.

Tipografia este un element fundamental în orice activitate de web design pe care o desfășurați. Motivul pentru care suntem angajați să proiectăm site-uri web pentru clienții noștri este astfel încât aceștia să poată oferi o experiență care să ofere conținut util pentru utilizatorii lor. A avea o bază tipografică solidă va ajuta la afișarea conținutului într-un mod pe care utilizatorii îl pot consuma eficient. Deși pot exista multe alte elemente de design pe un site web, conținutul este principalul aspect și, în calitate de designeri, este datoria noastră să îmbunătățim proiectele cu selecția și utilizarea tipografiei.

Bazele tipografiei

Font vs. Literă

Înainte de a ajunge prea departe în discuția despre tipografie, să trecem peste termenii „font” și „typeface”. Un tip de literă se referă la un set de simboluri tipografice și caractere: litere, cifre și orice caractere care ne permit să punem cuvinte pe site-ul nostru. Este designul alfabetului, practic forma literelor care alcătuiesc acel stil. Când ne referim la Helvetica, ne referim la un tip de literă.

Un font este definit ca setul complet de caractere din tipul de caractere, deseori referindu-se la o anumită dimensiune și stil. Helvetica Bold 10 puncte este o modalitate de a face referire la un font. Fonturile sunt specifice fișierelor care conțin toate caracterele și glifele din font.

Această mare dezbatere, „font vs. tipografie”, face o conversație minunată cu colegii designeri. Pentru tot ce tastați sticklers acolo, vorbim cu adevărat despre fonturi, dar „fonturile web” este cel mai folosit în conversație.

Clasificarea fonturilor

Pe măsură ce întâlniți numeroasele fonturi disponibile în lume, va trebui să vă familiarizați cu modul în care sunt clasificate. Cea mai obișnuită modalitate este de a le clasifica în funcție de stilul tehnic: serif, sans-serif, script, display etc. Fonturile sunt, de asemenea, clasificate după alte specificități, cum ar fi proporționale sau monospațiate. În funcție de sursă, acestea pot deveni foarte specifice.

Istoria tipografiei Web-Safe

În primele zile ale web-ului, am fost blocați cu opțiuni de siguranță web, care erau foarte limitative. Pentru ca un utilizator să vadă fontul care a fost intenționat de designer, era necesar ca acesta să aibă disponibil pe computer. Dacă deschideți o foaie de stil de pe un site mai vechi, probabil veți găsi Arial, Georgia, Times New Roman, Trebuchet MS și/sau Verdana. Acestea erau fonturile care erau cel mai probabil pe computerul unui utilizator, așa că erau considerate a fi „sigure pentru web”, deoarece majoritatea utilizatorilor puteau vizualiza site-ul așa cum s-a dorit.

Dacă proiectați site-uri web de ceva vreme sau sunteți un navigator de mult timp, probabil vă amintiți de vremurile cu opțiuni limitate de tipografie. Nu a fost cu multă vreme în urmă când am văzut aceleași cinci tipuri de caractere iar și iar în timp ce navigam pe web. Lucrurile au început să pară plictisitoare fără alte opțiuni sigure pentru web și s-ar putea argumenta că aceste fonturi nu erau cele mai potrivite pentru web (la urma urmei, ele provin din imprimare). Dar pe măsură ce web-ul a evoluat, au devenit disponibile mai multe opțiuni de tip.

Ce sunt fonturile web?

Deoarece tipografia este atât de importantă, este timpul să sărbătorim că s-au făcut pași uriași. Avem atât de multe fonturi la dispoziție încât acum putem alege ceea ce este cel mai bun pentru utilizatorii noștri, în loc să ne bazăm pe aceleași fonturi vechi sigure pentru web, la care ne limitam cândva.
Fonturile web nu sunt preinstalate pe sistemul utilizatorului, așa cum sunt fonturile sigure pentru web. Nu trebuie să ne bazăm pe utilizatorul să aibă fontul dorit pe computer. Acestea provin dintr-o sursă inclusă, astfel încât fiecare utilizator va putea vedea fontul definit. Aceste fonturi sunt descărcate de browser în timpul redării paginii web și apoi aplicate textului.

Cum să utilizați fonturile web

Regula @font-face

Această regulă acceptată pe scară largă ne permite să descărcam fonturi de pe un server sau să le găzduim, astfel încât să le putem folosi pe paginile noastre web. Prin declararea regulii @font-face în foaia noastră de stil, putem specifica numele fontului, locația și greutatea fontului.

Acest exemplu arată cum adăugăm Open Sans Regular. Veți vedea că sursa este un folder cu fonturi care este inclus în proiectul site-ului web.

 [css]

@font-face {
font-family: „Open Sans Regular”;
src: url("../fonts/OpenSans-Regular-webfont.eot");
greutatea fontului: normal;
stil font: normal;
}

[/css]

Declarația de mai sus adaugă fontul pentru a putea fi folosit. Cum îl facem de fapt să fie afișat?

 [css]

.exemplu{
familie de fonturi: "Open Sans Regular", Arial, sans-serif;

}

[/css]

Puteți vedea că numele fontului este setat la „Open Sans Regular”. Acesta este numele fontului care va fi apoi referit în stiva noastră de fonturi CSS, împreună cu fonturile alternative doar în cazul în care fontul nu se încarcă dintr-un motiv oarecare. În majoritatea cazurilor, fontul se va încărca bine, dar este o idee bună să includeți alternative, pentru orice eventualitate.

Rețineți că majoritatea fonturilor au alte familii, unele au mai multe decât altele. Pentru a le utiliza, asigurați-vă că le includeți pe fiecare cu regula @font-face .

Formate și fonturi web

Să ne aprofundăm puțin în fonturile web, când există mai multe formate de care veți avea nevoie. Aceste fonturi sunt auto-găzduite și sunt stocate pe server într-un folder numit „fonturi”. Veți observa că sunt adăugate câteva rânduri noi din ultimul exemplu.

 [css]

@font-face {
font-family: „Open Sans Regular”;
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url(" ../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
greutatea fontului: normal;
stil font: normal;
}

[/css]

Există un motiv pentru care trebuie să includem diferite formate precum: .eot, .woff, .ttf, .truetype și SVG. Diferitele browsere acceptă diferite formate de fonturi, așa că trebuie să ne acoperim bazele și să oferim tot ceea ce ar putea avea nevoie pentru diferite browsere.

Iată o listă de browsere și ce tipuri de fonturi acceptă:

• Internet Explorer – .eot
• Mozilla Firefox – .otf și .ttf
• Safari și Opera – .otf, .ttf și .svg
• Chrome – .ttf și .svg
• Mobile Safari – .svg

Găzduire fonturi

Când utilizați fonturi web, foaia de stil are nevoie de fontul în sine, astfel încât să poată fi redate în designul dvs. Din acest motiv, veți avea nevoie ca fișierele cu fonturi să fie găzduite undeva. Există două opțiuni pentru unde să vă găzduiți fonturile. Puteți folosi un serviciu care găzduiește fonturi pentru dvs. sau vă puteți autogăzdui cu fișierele cu fonturi reale. Chiar depinde de proiect, fiecare cu avantajul lui.

În funcție de abordarea pe care o adoptați, fie că este găzduită de sine stătătoare sau găzduită cu un serviciu de fonturi precum Typekit, CSS-ul va arăta diferit. Ca și numele, kiturile sunt create cu Typekit. Acestea conțin toate fonturile pe care le veți folosi. Pentru a face referire la aceste fișiere, veți adăuga un fragment Javascript la capul documentului dvs. HTML. Acest lucru vă permite să încărcați regulile @font-face corecte.

Furnizori de servicii de gazduire

Există prea mulți furnizori de servicii de găzduire pentru a menționa, dar TypeKit, Fonts.com, H&Co (Hoefler and Company) sunt câteva opțiuni. Practic, au fonturile pe serverul lor și sunteți liber să le utilizați în funcție de tipul de cont pe care îl aveți.

Câteva avantaje ale acestei abordări sunt:

• În general, acești furnizori au o selecție mai largă de fonturi de înaltă calitate, deoarece sunt în domeniul tipografiei.
• Fonturile sunt ușor de utilizat/instalat.
• Este ușor să schimbați fonturile în timpul procesului de proiectare sau să faceți o schimbare globală.
• Deoarece sunt fișiere terțe, acestea pot fi ușor memorate în cache de către utilizatori.
• Mai puține solicitări HTTP au ca rezultat o performanță îmbunătățită

Este destul de ușor să adăugați noile fonturi pe site-ul dvs. De exemplu, Fonts.com oferă trei opțiuni diferite de publicare cu abonamente la planul premium. Există atât opțiuni javascript (cu Typekit), cât și opțiuni non-javascript care se leagă la o foaie de stil difuzată și, de asemenea, o opțiune auto-găzduită. În funcție de ceea ce alegeți, CSS-ul dvs. va arăta diferit.

Considerații de utilizare

Cu fonturile găzduite, mai puțin poate fi mai mult. Este important să nu folosiți prea multe sau pot apărea probleme de performanță. Greutăți multiple ale aceluiași font sunt considerate a fi un set suplimentar, așa că în esență încărcați un alt font. Este o practică bună să includeți doar ceea ce aveți nevoie.

Auto-găzduire

Este destul de ușor să găzduiești fonturi web. Tot ce trebuie să faceți este să includeți fișierul font pe serverul dvs. web și acesta va fi descărcat automat când un utilizator ajunge pe site-ul dvs.

Câteva beneficii ale auto-găzduirii sunt:

• Fără dependență de javascript pentru livrarea fonturilor, tot ce aveți nevoie sunt referințe CSS.
• Redare rapidă a fonturilor.
• Nicio dependență de timpul de funcționare al furnizorului de găzduire a fonturilor.
• Cu fonturi gratuite și achiziționate, nu ar exista taxe de abonament sau limitări de vizualizare a paginii.

Considerații de utilizare

Este important să vă asigurați că aveți toate formatele necesare. Dacă nu este inclus un format, acesta va trece la următorul font alternativ. Este important să vă asigurați că aveți calea corectă către fontul pentru sursă. Așa cum am văzut într-un exemplu anterior, sursa ar arăta cam așa:

 [cod]

src: url("../fonts/OpenSans-Regular-webfont.eot");

[/cod] 

Unde să găsiți fonturi web bune

Există atât de multe fonturi web din care să alegeți; suntem foarte norocoși să avem toate aceste opțiuni. Găsirea fontului perfect este mai ușor decât a fost vreodată.

Iată câteva surse excelente pentru fonturile web:

• Typekit
• Fonturi web Google
• Hoefler și Compania
• Fonts.com
• FontSquirrel

Creează-ți propriul font web

Dintr-o întâmplare, dacă nu găsiți fontul perfect, îl puteți crea oricând pe al dvs. Font Squirrel vă oferă un generator de fonturi web care va converti orice font într-un kit de fișiere web pentru încorporare. Rețineți că va trebui să le găzduiți. Pentru a afla mai multe, aruncați o privire la generatorul de fonturi web Font Squirrel. Doar o atenție, atunci când vă creați propriul font, este important să aveți drepturile de a utiliza acel font.

Fonturile web sunt o modalitate excelentă de a adăuga fontul perfect următorului tău proiect web. Cu o mare varietate de opțiuni de tipare și o mulțime de surse excelente, nu mai sunteți blocat cu opțiunile tradiționale sigure pentru web. Ușor de utilizat și distractiv de experimentat, fonturile web sunt o modalitate excelentă de a adăuga personalitate proiectelor dvs. de site.