U prethodnom članku prošli smo kroz prvih šest savjeta koji, iako naizgled mali, imaju jak utjecaj na našu podsvjesnu procjenu kvalitete nekog proizvoda.

U ovom dijelu ćemo se osvrnuti na vizualni aspekt teksta kojeg pronalazimo na web stranicama ili unutar aplikacija. O tipografiji bi se moglo pričati kao o zasebnoj znanosti u koju možemo ulagati nebrojeno vremena, ali da bi bili dizajneri, ipak ne trebamo toliko duboko ulaziti u svaki potez slova. 

Možemo uspješno utjecati na ekspresiju i funkcionalnost fonta poznavajući nekoliko pravila. Za značajno poboljšanje tipografije, za početak će ti već biti dovoljno ovih 6 savjeta:

1. Drži se samo Regular i Bold
   Iako fontovi generalno dolaze u mnogo težina pismovnog reza, neće te nitko napasti ako ih ne iskoristiš sve u svom UI-u. Previše različitih težina može učiniti dizajn neurednim i težim za čitanje. Ponekad razlika između dvije slične težine, npr. Regular i Medium, nije dovoljno izražajna, što može djelovati kao greška ili mislimo da nas oči varaju. Za jasan vizualni kontrast odaberi razmak od barem dvije razine težine, npr. Regular i Bold.
   
   Manje varijacija znači i manji broj učitanih font-fajlova, što rezultira optimiziranijim webom, bržim učitavanjem stranica te boljim performansama i SEO rezultatom. Uz to, ograničavanje broja težina olakšava održavanje konzistentnosti, osobito na većim projektima ili u timovima gdje više dizajnera radi na istom sustavu ili webu. 

Za čist i jednostavan dizajn, koristi Regular za osnovni tekst, a Bold za naslove i naglašene dijelove. Ako ti Bold djeluje pretežak, isprobaj Semi Bold varijantu (ako je dostupna unutar odabranog fonta).

2. Idealni line height za paragraf teksta

Razmak između redova (line height) je okomita udaljenost između dvije linije teksta. Preveliki razmak vizualno raskomada paragraf, gubi se fokus i teže ga je čitati. Premali razmak previše zgusne tekst, napreže oči i usporava čitanje. Nije bez razloga tekst u ugovorima često zgusnut. S razlogom usporava čitatelja. Ali nismo ovdje da sastavljamo ugovore.

Cilj nam je omogućiti korisnicima brzo i lako skeniranje sadržaja. To možemo postići s razmakom od cca 1.4 (140 %). U praksi, raspon između 1.4 i 2 je sasvim solidna odluka, ovisno o vrsti fonta i kontekstu primjene.

U prethodnom članku na ovu temu sam se razbacala formulama, pa evo da dobacim još jednu brzu radi konzistencije: line height = 1.4 x veličina fonta 

3. Smanji line height u naslovima
   
   Naslovi su obično kratki i najčešće stanu u jedan red ili dva reda. Ako im dodaš prevelik razmak između linija (kao što se koristi u paragrafima) tekst će izgledati nepovezano i raspuhano. Time se gubi vizualna snaga naslova.

Umjesto prethodne formule, koja se odnosi na tekst u paragrafu, koristi manji razmak: između 110 % – 120 %. Tako će naslovi izgledati urednije i profesionalnije.

Udrimo i formulicu: line height = 1.1 x veličina fonta

Gore – Line height za naslov: 140 %. Dolje – Line height za naslov: 110 %. – Autorica N. Jerković

4. Velikim slovima obavezno povećaj razmak

Za razliku od malih slova, velika slova (verzal) čitamo sporije jer ih rjeđe koristimo u dužim tekstovima. Dok Boomer generaciji ovo ne predstavlja problem, ostali ipak izbjegavaju verzal. No, ipak postoje situacije kada velika slova pridonose kategorizaciji, hijerarhiji ili naglašavanju u dizajnu. Da napomenem, ovo je prihvatljivo kada se radi o malim količinama teksta u verzalu. Tada postoji jednostavan način (prekratak za formulu) kako da ona izgledaju profinjeno.

Sve što trebaš učiniti je dodati 5 % razmaka između slova (letter spacing ili tracking). Tekst će odmah izgledati jasnije i elegantnije.

5. Velikim naslovima smanji razmak slova

Da ne pobrkaš sa prethodnim poglavljem o velikim slovima – verzalima, ovdje govorimo o dimenzijama slova u pixelima. Veliki naslovi mogu djelovati odlično i efektno, ali često izgledaju neskladno ako zadrže zadani razmak između slova. Većina fontova je prilagođena za male veličine. Kad tekst velikodušno povećamo, slova se međusobno dovikuju. Neiskusnom oku ovo može izgledati u redu, ali jednom kada progleda… ne može više ne primijetit.

Zato ti uredno smanji razmak (letter spacing ili tracking) za 1-2 % tako da se ta slova vizualno uravnoteže i smire. Ovo pravilo vrijedi za velike naslove koji nisu pisani verzalima.

6. Poravnaj ikonu s line heightom

Tekstove obično poravnavamo s osnovnom linijom teksta (baseline), ali izgleda nespretno kada pokušamo poravnati ikonu sa tekstom po njegovoj osnovnoj liniji. 

Puno bolje rješenje je poravnati ikonu s line heightom teksta. Tako izgledaju vizualno uravnoteženije. Ovo pravilo osobito dolazi do izražaja u botunima, listama i komponentama koje kombiniraju tekst i grafiku.

Ovih šest savjeta su dobra mala uštimavanja za poboljšanje tvoje tipografije u dizajnu, ali oni su ipak samo manji dio svega što tipografija obuhvaća. Da bi tipografija stvarno bila kvalitetna, gledaj širu sliku.

Kreni od sadržaja za kojeg dizajniraš, radi s pravim tekstom (zaboravi Lorem ipsum) jer tipografija nije samo oblik slova, već način na koji se sadržaj komunicira.

Prati smjernice brenda i imaj na umu ciljanu publiku. Razmisli što želiš da korisnik osjeti, razumije i učini. Onda kada se tipografija stapa sa sadržajem i laka je za čitanje, tada ona ispravno obavlja svoju funkciju kao dio dizajna.