Cum să alegi fonturile potrivite pentru site-ul tău web

Branding-ul magazinului dvs. online este alcătuit din multe componente diferite; de la culori și logo la limba pe care o utilizați, precum și calitatea serviciului dumneavoastră pentru clienți. Și, desigur, fonturile sunt o mare parte din asta.

Fonturile pe care le utilizați pe site-ul dvs. servesc în mare măsură către stabilirea simțului mărcii dvs. - profesionale, ciudate, serioase, distractive etc. Ele joacă, de asemenea, un rol foarte important în oferirea unei experiențe excelente vizitatorilor dvs., inclusiv celor cu viziune. deficiențe.

Dar cum alegi fonturile potrivite și cum le folosești în cel mai bun mod posibil?

O introducere în fonturi și fonturi

Să facem un pas înapoi pentru o clipă. Probabil că sunteți familiarizat cu fonturi precum Times New Roman, Helvetica și mult defăimatul Comic Sans. Dar ce sunt, mai exact?

Ei bine, un tip de literă este o reprezentare digitală a textului care conține mai multe stiluri diferite. De exemplu, Helvetica are 36 de opțiuni diferite, inclusiv:

• Helvetica Light (versiunea subțire)
• Helvetica Oblique (versiunea cu italice)
• Helvetica Bold (versiunea îndrăzneață)
• Helvetica Black (o versiune și mai groasă, mai îndrăzneață)
• Helvetica Condensed (o versiune cu litere care sunt mai apropiate)
• Helvetica Rounded (o versiune cu litere rotunjite)

Un font este foarte specific, cu greutăți și stiluri exacte. Deci, Helvetica Bold este un font, în timp ce Helvetica este un font. În scopul acestui articol, vom folosi termenii „font” și „font” în mod interschimbabil.

Există patru tipuri principale de fonturi din care puteți alege și puteți combina și potrivi pentru a crea senzația potrivită pentru site-ul dvs.

Fonturile Serif includ trase suplimentare adăugate la anumite litere, în timp ce fonturile Sans Serif omit acele linii. Puteți vedea mai jos un exemplu de litere cu și fără serif:

În general, fonturile serif sunt mai tradiționale și reprezintă o modalitate excelentă de a emana cunoștințe și încredere. Ele pot fi, de asemenea, mai ușor de citit, deoarece serifurile ajută la definirea fiecărei litere în mod individual. Fonturile sans serif sunt curate și se pot simți mai accesibile decât omologii lor. Sunt încă simple și ușor de citit în corpuri mari de text.

Fonturile scrise de mână seamănă foarte mult cu scrisul de mână și uneori sunt foarte ornamentate. Unele sunt mult mai ușor de citit decât altele și variază mult ca stil. Iată câteva exemple:

După cum puteți vedea, unul este foarte elegant, în timp ce celălalt arată mult mai prietenos.

Fonturile de afișare sunt incredibil de diverse și cuprind orice ar putea fi considerat decorativ. Acestea variază foarte mult în ceea ce privește aspectul și senzația, dar sunt utilizate de obicei doar pentru titluri. Iată trei exemple diferite de fonturi de afișare:

Aceste trei nu seamănă prea mult, nu-i așa? Dar sunt o modalitate excelentă de a stabili sentimentul de brand.

Cum să alegeți și să implementați fonturile potrivite

Bine, acum că am stabilit elementele de bază, haideți să ne uităm la câteva sfaturi utile pentru alegerea fonturilor potrivite pentru magazinul dvs. online.

1. Luați în considerare lizibilitatea

Întregul punct al textului trebuie citit - așa că lizibilitatea ar trebui să fie pe primul loc în considerare atunci când alegeți un font. La urma urmei, dacă vizitatorii nu vă pot citi textul, nu pot afla despre produsele dvs. sau despre afacerea dvs., cu atât mai puțin să facă o achiziție!

Textul corpului dvs. ar trebui să fie aproape întotdeauna fie un font serif, fie sans serif, deoarece acestea facilitează citirea de paragrafe sau blocuri mari de text pentru vizitatori. Salvați fonturile de afișare și de script pentru titluri și, chiar și atunci, asigurați-vă că acestea pot fi ușor de înțeles.

Următorul lucru la care trebuie să vă gândiți este distanța dintre text. Există trei considerații principale de spațiere:

1. Kerning : spațiul dintre două litere. Claparea corectă asigură că fiecare cuvânt este lizibil individual și că un cuvânt nu ajunge să arate ca doi.
2. Interfață : distanța dintre două rânduri de text. Liderarea corectă face paragrafele de text mult mai ușor de citit.
3. Urmărire : controlează spațierea literelor în cuvinte ca întreg, mai degrabă decât caracterele individuale. Deci, în loc să ajustați doar spațiul dintre „t” și „h” din cuvântul „acest”, ați ajusta distanța dintre toate cele patru litere simultan.

Iată o ilustrare a tuturor celor trei:

În mod ideal, distanța dintre rânduri și litere va facilita citirea oamenilor, mai ales sub formă de paragraf. Nu vă faceți griji; a afla mai multe despre acest lucru poate fi distractiv! Există câteva jocuri online grozave care vă oferă practică practică.

2. Gândiți-vă la identitatea mărcii

Identitatea mărcii tale este ceea ce te diferențiază. Este personalitatea afacerii tale. Iar fonturile pe care le alegeți sunt o componentă care afișează acea personalitate clienților potențiali și existenți.

Deci, ce sentiment vrei să invoci pe site-ul tău? Distractiv și ciudat? Profesional și de încredere? Sofisticat și elegant? Să aruncăm o privire la modul în care câteva site-uri folosesc fonturi pentru a-și reprezenta marca.

Scratch Pet Food are o marcă super prietenoasă, iar fonturile lor reflectă acest lucru. Folosesc un sans serif extra îndrăzneț pentru titluri și un sans serif mai ușor pentru text.

Flwr este un studio de design floral și, deoarece proiectează pentru evenimente speciale precum nunți, este logic ca fonturile lor să fie elegante și frumoase. Combină un serif modern și un sans serif subțire pentru un aspect personalizat care se potrivește cu buchetele lor.

Site-ul corporativ al Ryanair este, ei bine, corporativ - și fonturile lor reflectă acest lucru. Au ales versiuni ale aceluiași font simplu și profesional atât pentru titluri, cât și pentru textul corpului. Este profesional, fără să pară înfundat.

Vedeți cum toate aceste trei companii folosesc fonturi pentru a transmite sentimentul că doresc ca oamenii să se asocieze cu marca lor? Puteți face același lucru. Nici nu vă fie teamă să vă jucați cu fonturile până când găsiți aspectul perfect.

3. Respectați doar câteva fonturi

Deși poate fi tentant să încorporați toate fonturile grozave pe care le găsiți în site-ul dvs., veți dori să rămâneți doar la câteva. În caz contrar, magazinul dvs. poate părea deconectat și peste tot și puteți crea o experiență tulburătoare pentru vizitatori.

Când alegeți fonturile, asociați-le în diferite scenarii pentru a vedea dacă funcționează bine împreună. Puteți alege un font pentru titluri și altul pentru text. De asemenea, puteți utiliza variații ale unui font - cum ar fi aldine sau majuscule - pentru a deosebi textul fără a vă îndepărta de aceeași familie de fonturi.

Daelmans Stroopwafels, de exemplu, folosește același font pentru titluri și text. Folosesc o versiune îndrăzneață, cu majuscule, pentru titluri și o versiune mai ușoară pentru text. Dar, pentru a adăuga și mai multă personalitate, ei folosesc ocazional un font de tip script care imită caramelul inclus în produsele lor. Acest script, atunci când este folosit cu moderație, este eficient în evidențierea conceptelor importante și pentru a face site-ul lor să se simtă autentic și unic.

Scrollino, un magazin care vinde produse pentru copii, folosește un font serif super accesibil și vesel pentru titlurile lor. Îl îmbină cu un sans serif curat și simplu pentru textul corpului pentru o atmosferă lizibilă și distractivă.

4. Alegeți dimensiunea corectă a fontului

Este important ca textul dvs. să fie suficient de mare pentru a putea citi vizitatorii site-ului, inclusiv cei cu deficiențe de vedere. În general, 16px este dimensiunea minimă pe care ar trebui să o utilizați, deși aceasta poate varia în funcție de font. De exemplu, unele fonturi sunt mai greu de citit când sunt mai mici.

Dacă este posibil, cereți oamenilor reali să vă verifice textul și să vedeți dacă este ușor de citit. Și asigurați-vă că îl revizuiți pe dispozitive de toate tipurile - desktop-uri, tablete și telefoane mobile. Instrumente precum Screenfly fac acest proces mult mai simplu.

Heggerty, o companie care oferă curriculum și alte resurse pentru profesori, folosește dimensiuni plăcute de fonturi mari. Deși nu sunt atât de mari încât să preia designul, sunt simple și ușor de citit pe toate dispozitivele.

5. Luați în considerare accesibilitatea

Când faceți un site web accesibil, îl faceți ușor de utilizat pentru fiecare vizitator, inclusiv pentru persoanele care au deficiențe fizice sau mentale. Există o varietate de lucruri pe care le puteți face pentru a îmbunătăți accesibilitatea magazinului dvs. online, inclusiv optimizarea utilizării fonturilor.

Unul dintre aceste lucruri este să vă asigurați că textul dvs. este suficient de mare pentru a fi citit și nu prea complicat, așa cum sa discutat mai sus. Dar doriți să luați în considerare și contrastul de culoare. Trebuie să vă asigurați că textul dvs. este ușor de citit, indiferent de fundalul pe care se află, fie că este o culoare solidă, un model sau o imagine.

Raportul de contrast variază de la 1:1 (alb pe alb) la 21:1 (negru pe alb). Raportul de contrast pe care îl căutați cu textul este de aproximativ 7:1 pentru text și 4,5:1 pentru titluri. Puteți utiliza instrumentul de accesibilitate WAVE pentru a analiza site-ul dvs. pentru raporturile de contrast de culoare, precum și pentru alți factori de accesibilitate.

Track 7 Brewing face o treabă grozavă de contrast de culoare pe fundaluri întunecate. Pe pagina lor de pornire, folosesc text alb sau portocaliu strălucitor, astfel încât să iasă în evidență de imaginea întunecată din spatele acestuia.

6. Evitați toate majusculele din paragrafe

Deși toate majusculele pot fi grozave pentru a face o declarație, pot fi foarte greu de citit în corpurile de text. Creierul nostru pur și simplu întâmpină probleme în procesarea textului cu majuscule sub formă de paragraf, ceea ce face citirea acestuia mai lentă și mai dificilă.

Așadar, dacă doriți să folosiți toate majusculele, folosiți-l cu moderație și numai în titluri. Asta face Veer - toate majusculele sunt foarte eficiente în a face puncte și a atrage atenția pe site-ul lor, dar o evită în paragrafe.

Dar fonturile sigure pentru web?

Browserele redă și încarcă fonturile diferit pe web. Fonturile sigure pentru web sunt cele care arată grozav și se încarcă corect pe fiecare browser și pe fiecare dispozitiv. Și, deși nu trebuie neapărat să omiteți fonturile personalizate grozave pe care le-ați ales pentru marca dvs., doriți să adăugați opțiuni sigure pentru web la stiva dvs. de fonturi - colecția de fonturi pe care o utilizați pe site-ul dvs.

Acest lucru stabilește, în esență, un font de rezervă pentru magazinul dvs. și vă oferă control deplin asupra modului în care textul este afișat dacă, dintr-un motiv oarecare, fontul dvs. personalizat nu se va încărca pentru un vizitator. De exemplu, puteți spune browserelor să folosească Playfair dacă fontul dvs. personalizat nu este disponibil, Georgia dacă Playfair nu este o opțiune și un font serif implicit dacă niciunul dintre acestea nu funcționează.

Kinsta oferă câteva sfaturi grozave pentru adăugarea de fonturi de rezervă sigure pentru web pe site-ul dvs.

Unde puteți găsi fonturi pentru site-ul dvs

Deci, cum găsești fonturi grozave pentru magazinul tău online? Primul pas este să vă asigurați că aveți drepturile legale de a utiliza orice opțiune pe care o alegeți. Unele sunt gratuite pentru toate scopurile, altele sunt premium pentru toate scopurile, iar altele sunt gratuite doar pentru uz personal. Fă-ți timp pentru a înțelege cum funcționează licența pentru fonturile tale.

Iată câteva resurse excelente pentru fonturile pentru site-uri web:

• Google Fonts : Google Fonts are o bibliotecă imensă de fonturi disponibile, care sunt gratuite pentru uz personal și comercial. De asemenea, puteți folosi instrumentele lor pentru a previzualiza fonturile în acțiune.
• Tema dvs .: multe teme WordPress includ biblioteci de fonturi, uneori din surse precum fonturile Google, pe care le puteți utiliza pe site-ul dvs. web.
• Creative Market : o piață online pentru active digitale, Creative Market oferă niște fonturi cu adevărat frumoase și unice într-o varietate de stiluri.
• Font Squirrel : Această resursă sortează fonturile după categorii și vă permite să le previzualizați. Dar aveți grijă – unele opțiuni sunt doar pentru uz personal, așa că asigurați-vă că știți ce tip descărcați.
• Fonturi Adobe : acestea sunt fonturi de înaltă calitate disponibile companiilor care au licențe Creative Cloud.

Cum să schimbi fontul pe site-ul tău WooCommerce

Acum că ți-ai ales fonturile, este timpul să le aplici pe site-ul tău. Există trei moduri principale de a face acest lucru:

1. Folosește-ți tema

După cum am menționat mai devreme, multe teme includ o bibliotecă de fonturi. Unele vă permit să aplicați acele fonturi pe site-ul dvs. în propriul lor panou de setări. Sau puteți configura acele fonturi folosind Personalizatorul WordPress:

1. În tabloul de bord WordPress, accesați Aspect → Personalizare.
2. Faceți clic pe opțiunea Fonturi .
3. Deschideți meniul drop-down pentru fiecare tip de text — Titluri, Font de bază etc. — și selectați un font. De fiecare dată când schimbați fonturile, previzualizarea site-ului dvs. se va actualiza, astfel încât să puteți testa cum va arăta înainte de a o aplica.

În Personalizator, puteți ajusta și opțiunile pentru stilul fontului (bold, italicized etc.) și dimensiune.  

2. Folosiți un plugin

Dacă tema dvs. nu include fonturi sau nu oferă fonturile pe care doriți să le utilizați, următoarea opțiune cea mai simplă este să utilizați un plugin. Există o varietate de opțiuni disponibile, dar dacă doriți să utilizați un font Google, atunci WP Google Fonts este unul grozav. Oferă acces la întreaga bibliotecă Google Fonts, apoi vă permite să aplicați fonturi individuale în diferite zone ale site-ului dvs., cum ar fi anteturi, paragrafe și liste.

Dacă doriți să utilizați un font personalizat din altă parte, încercați pluginul Fonturi personalizate. Vă permite să vă încărcați propriile fonturi și chiar să se integreze cu teme populare și creatori de pagini pentru o configurare mai simplă.

3. Folosiți codul personalizat

Dacă sunteți familiarizat cu codul, aveți alte două opțiuni:

1. Găzduiește fonturi pe propriul tău site și folosește cod pentru a le aplica zonelor de text
2. Încărcați fonturile dintr-o sursă terță parte (cum ar fi Google Fonts) și puneți-le în coadă

Pentru mai multe detalii și instrucțiuni, consultați acest articol de la Kinsta.

Fii creativ, dar nu uita că simplu este cel mai bine

Distrează-te cu fonturile tale! Fii creativ cu brandingul tău și alege opțiunile care reprezintă cel mai bine sentimentul companiei tale. Dar, în același timp, amintiți-vă că simplu este adesea calea de urmat. Alegeți fonturi ușor de citit și care să nu devină prea complicate folosind patru sau cinci opțiuni diferite. Publicul tău ar trebui să fie prioritatea ta.