Brendiranje vaše web stranice ili web trgovine sastoji se od mnogo različitih komponenti; od boja i logotipa do jezika koji koristite, kao i kvalitete vaše korisničke usluge. Fontovi su, naravno, veliki dio toga.
Fontovi koje koristite na svojoj web stranici uvelike doprinose uspostavljanju dojma vašeg brenda – profesionalni, neobični, ozbiljni, zabavni itd. Oni također igraju vrlo važnu ulogu u pružanju izvrsnog iskustva za vaše posjetitelje, uključujući osobe sa oštećenjima vida.
Ali kako odabrati prave fontove i koristiti ih na najbolji mogući način?
Tipografija i fontovi
Vratimo se korak unatrag na trenutak. Vjerojatno su vam poznata slova kao što su Times New Roman, Helvetica i toliko klevetani Comic Sans. Ali što su oni, točno?
Pa, tipografija je digitalni prikaz teksta koji sadrži nekoliko različitih stilova. Naprimjer, Helvetica ima 36 različitih opcija, uključujući:
- Helvetica Light (tanka verzija)
- Helvetica Oblique (kurzivna verzija)
- Helvetica Bold (podebljana verzija)
- Helvetica Black (još deblja, odvažnija verzija)
- Helvetica Condensed (verzija sa slovima koja su bliže jedno drugom)
- Helvetica Rounded (verzija sa zaobljenim slovima)
Font je vrlo specifičan, s točnim težinama i stilovima. Dakle, Helvetica Bold je font, dok je Helvetica tipografija. U svrhu ovog članka koristit ćemo izraze “tipografija” i “font” naizmjenično.
Postoji nekoliko glavnih vrsta fontova koje možete birati, a možete ih kombinirati kako biste stvorili pravi dojam za svoj web.
Serifni fontovi uključuju dodatne poteze dodane određenim slovima, dok Sans Serif fontovi izostavljaju te poteze.
Serif i Sans Serif fontovi u usporedbi
Općenito, serifni fontovi su tradicionalniji i izvrstan su način da odišete znanjem i pouzdanošću. Oni također mogu biti lakši za čitanje, jer serifi pomažu definirati svako slovo pojedinačno. Sans serif fontovi su čisti i mogu se činiti pristupačnijim od ostalih fontova. I dalje su jednostavni i lako čitljivi u velikom tekstu.
Pisani i rukopisni fontovi vrlo su slični rukopisu i ponekad su vrlo kičasti. Neki su puno lakši za čitanje od drugih i vrlo se razlikuju po stilu.
Display fontovi nevjerojatno su raznoliki i obuhvaćaju sve što se može smatrati ukrasnim. Vrlo se razlikuju po izgledu i dojmu, ali obično se koriste samo za naslove.
Kako odabrati i implementirati prave fontove
U redu, sada kada smo uspostavili osnove, pogledajmo nekoliko praktičnih savjeta za odabir pravih fontova za vašu internetsku trgovinu.
1. Razmotrite čitljivost
Cijela poanta teksta je da se on pročita – tako da bi čitljivost trebala biti vaša glavna briga pri odabiru fonta. Uostalom, ako posjetitelji ne mogu pročitati vaš tekst, ne mogu saznati više o vašim proizvodima ili o vašem poslovanju, a kamoli obaviti kupnju!
Vaš bi tekst gotovo uvijek trebao biti serif ili sans serif font jer posjetiteljima olakšavaju čitanje velikih odlomaka ili blokova teksta. Sačuvajte pisane i rukopisne fontove za naslove i, čak i tada, pobrinite se da ih je lako pročitati.
Sljedeće o čemu treba razmišljati je razmak između teksta. Tri su glavna razmatranja razmaka:
- Kerning: Količina razmaka između dva slova. Ispravan kerning osigurava da je svaka riječ zasebno čitljiva i da jedna riječ na kraju ne izgleda kao dvije.
- Leading: Udaljenost između dva retka teksta. Ispravan uvod čini odlomke teksta mnogo lakšim za čitanje.
- Tracking: kontrolira razmak između slova u riječima kao cjelini, a ne pojedinačnim znakovima. Dakle, umjesto samo prilagođavanja razmaka između “o” i “v” u riječi “ovo”, prilagodili biste razmak između sva tri slova odjednom.
2. Razmislite o identitetu brenda
Identitet vašeg brenda ono je što vas izdvaja. To je osobnost vašeg poslovanja. A fontovi koje odaberete jedna su komponenta koja prikazuje tu osobnost potencijalnim i postojećim kupcima.
Dakle, koji osjećaj želite izazvati svojim webom? Zabavno i neobično? Profesionalno i pouzdano? Sofisticirano i elegantno? Pogledajmo kako nekoliko web stranica koristi fontove za predstavljanje svoje marke.
Web trgovina Prirodne kozmetika Mirta bavi se proizvodnjom kozmetike od prirodnog bilja, i pošto je riječ o kozmetici, proizvodima za njegu i stvarima koje evociraju profinjenost, logično je da njihovi fontovi budu profinjeni i lijepi. Kombiniraju moderan serif i tanki sans serif za izgled po mjeri koji odgovara njihovim proizvodima.
Limach shop i Funexperts su brandovi usmjereni na djecu, i njihovi fontovi to odražavaju. Koriste jednostavni Signika (Google fonts) za naslove i laganiji font za glavni tekst.
Naš projekt Volim zdravlje – portal za edukaciju ozbiljne tematike s ležernijim fontom (Public Sans) koji pomaže da se ozbiljna tema prilagodi studentima i mladima. Odabrali smo verzije istog jednostavnog, profesionalnog fonta i za naslove i za glavni tekst. Profesionalno je, a ujedno razigrano.
Web trgovina koju smo razvili za Pčelarstvo Veber koristi veliki font za naglašavanje (Righteous), dok su opisni tekstovi čisti i jasni (Open Sans).
3. Držite se samo nekoliko fontova
Iako bi moglo biti primamljivo uključiti sve sjajne fontove koje pronađete na svoj web, htjet ćete se zadržati samo na nekoliko. Inače bi se vaša web stranica ili trgovina mogla činiti nepovezano i zbunjujuće, a posjetiteljima biste mogli stvoriti uznemirujuće iskustvo.
Kada birate svoje fontove, uparite ih u različitim scenarijima da vidite funkcioniraju li dobro zajedno. Možete odabrati jedan font za naslove, a drugi za glavni tekst. Također možete koristiti varijacije fonta – poput podebljanog ili velikih slova – da odvojite tekst bez odstupanja od iste obitelji fontova.
4. Odaberite pravu veličinu fonta
Važno je da vaš tekst bude dovoljno velik da ga posjetitelji stranice mogu pročitati, uključujući i one s oštećenjem vida. Općenito, 16 px je minimalna veličina koju biste trebali koristiti, iako to može varirati ovisno o fontu. Naprimjer, neke je fontove teže čitati kada su manji.
Ako je moguće, zamolite ljude da provjere vaš tekst i vide je li lako čitljiv. I svakako ga pregledajte na više vrsta uređaja – stolnim računalima, tabletima i mobilnim telefonima. Alati kao što je Screenfly čine ovaj proces puno jednostavnijim.
5. Razmotrite pristupačnost
Kada web stranicu učinite pristupačnom, olakšavate korištenje svakom pojedinom posjetitelju, uključujući osobe s fizičkim ili mentalnim oštećenjima. Postoji niz stvari koje možete učiniti kako biste poboljšali pristupačnost svoje internetske trgovine, uključujući optimiziranje upotrebe fontova.
Jedna od tih stvari je osigurati da vaš tekst bude dovoljno velik za čitanje i da nije previše kompliciran, kao što je gore navedeno. Ali također želite uzeti u obzir kontrast boja. Morate biti sigurni da je vaš tekst lako čitljiv bez obzira na kojoj se pozadini nalazi, bilo da je riječ o jednobojnoj boji, uzorku ili slici.
Omjer kontrasta kreće se od 1:1 (bijelo na bijelom) do 21:1 (crno na bijelom). Omjer kontrasta koji tražite s tekstom je oko 7:1 za glavni tekst i 4,5:1 za naslove. Možete upotrijebiti WAVE alat za pristupačnost za analizu svoje web stranice na omjere kontrasta boja, kao i druge čimbenike pristupačnosti.
6. Izbjegavajte velika slova u odlomcima
Iako velika slova mogu biti odlična za “statement”, mogu biti vrlo teška za čitanje u tekstu. Naši mozgovi jednostavno imaju problema s obradom teksta napisanog velikim slovima u obliku odlomka, što čini njegovo čitanje sporijim i težim.
Dakle, ako želite koristiti samo velika slova, koristite ih štedljivo i samo u naslovima.
Što je s web safe fontovima?
Preglednici različito prikazuju i učitavaju fontove na webu. Web safe fontovi su oni koji izgledaju sjajno i pravilno se učitavaju u svakom pregledniku i na svakom uređaju. I dok ne morate nužno preskočiti sjajne prilagođene fontove koje ste odabrali za svoju robnu marku, želite dodati opcije safe for web u svoj skup fontova – kolekciju fontova koje koristite na svojoj web stranici.
Time se u biti postavlja rezervni font za vašu web stranicu trgovinu i daje vam potpunu kontrolu nad načinom na koji se tekst prikazuje ako se iz nekog razloga vaš prilagođeni font ne učita posjetitelju. Naprimjer, možete reći preglednicima da koriste Playfair ako vaš prilagođeni font nije dostupan, Georgia ako Playfair nije opcija i zadani serif font ako nijedan od njih ne radi.
Gdje pronaći fontove za svoju web stranicu
Dakle, kako pronaći sjajne fontove za svoju internetsku trgovinu? Vaš prvi korak je da provjerite imate li zakonska prava za korištenje opcija koje odaberete. Neki su besplatni za sve svrhe, drugi su premium za sve svrhe, a treći su besplatni samo za osobnu upotrebu. Odvojite vrijeme da proučite kako licenca funkcionira za vaše fontove.
Evo nekoliko izvrsnih izvora za fontove web stranica:
- Google Fontovi: Google Fontovi imaju ogromnu biblioteku dostupnih fontova koji su besplatni za osobnu i komercijalnu upotrebu. Također možete koristiti njihove alate za pregled fontova u akciji.
- Your theme: mnoge WordPress teme uključuju biblioteke fontova, ponekad iz izvora kao što su Google fontovi, koje možete koristiti na svojoj web stranici.
- Creative Market: online tržište za digitalnu imovinu, Creative Market nudi stvarno lijepe, jedinstvene fontove u raznim stilovima.
- Font Squirrel: Ovaj izvor razvrstava fontove po kategoriji i omogućuje vam da ih pregledate. Ali budite oprezni – neke su opcije samo za osobnu upotrebu, pa provjerite koju vrstu preuzimate.
- Adobe Fontovi: Ovo su visokokvalitetni fontovi dostupni tvrtkama koje imaju Creative Cloud licence.
I ne zaboravite još jednu bitnu stvar kod odabira fontova – ako vaša web stranica ili trgovina neće biti isključivo na engleskom jeziku, važno je odabrati font koji podržava specifične znakove drugih jezika, kao što su č,ć,ž,š i đ u hrvatskom, umlauti i njemačkom i sl..
Ako birate font na Google font servisu, možete odabrati opciju Latin extended i na taj način filtrirati fontove koji podržavaju specifične znakove.
Planirate izradu web stranice ili WooCommerce web trgovine? Rado ćemo s vama podijeliti svoje višegodišnje iskustvo u razvoju custom web rješenja.
Djelomičan izvor članka: WooCommerce blog
