Načela dobre tipografije u sklopu grafičkog dizajna i web stranice

Pregled sadržaja

Tipografija uključuje sve vizualne korekcije koje se koriste da bi tekst bio dobro čitljiv i vizualno ugodan oku. Kvalitetno odabrana tipografija pruža zadovoljstvo čitateljima. Sadržaj većine web stranice odnosi se na tekstove. Iznimno je bitno da ljudi mogu s lakoćom ih čitati a dizajneri ponekad radi kreativnih zamisli zatomljavaju dobre smjernice čitljivosti. Čitanje ponekad može biti zamorno i nije dobro da lošom praksom učinimo ga još težim. Kvalitetno oblikovan tekst može nadopuniti harmoniju dizajna.

Što je tipografija

Tipografija je vještina i umjetnost oblikovanja teksta koristeći razne tipove (oblike) slova, različite veličine i prorede. Važno je područje u grafičkom dizajnu kako u offline tisku (novine, knjige, posteri, letci…) tako i za izradu bilokakvih digitalnih materijala a ponajviše za izradu kvalitetnih web stranica. Optimalno postavljena tipografija omogućuje nam da uspješnije prenosimo informacije korisniku i komplementarno nadopunimo druge elemente bitne za dizajn. Pridonosi boljoj čitljivosti i boljem korisničkom iskustvu što se kao domino pločice odrazuje dalje i na veću konverziju korisnika na web stranici.

Povijest tipografije

Još od 11. stoljeća bili su u Kini pokušaji da se izrađuju natpisi na pločice od keramike ili drva. Zbog kompliciranosti kineskog pisma a i pomalo neprikladne podloge, pisane pločice nisu doživjele široku rasprostranjenost. Prava revolucija tipografije dogodila se kada je njemački tiskar Johannes Gutenberg (1397. – 1468.) izmislio printanje pomoću tiskarskog stroja. Prema točno određenom uzorku rukopisa izradili su se kalupi za svako pojedinačno slovo i pomoći njih su se sastavljali redovi i stranice. Tiskarski stroj je bio drvena preša koja je davala otisak složenih slova preko lista papira a prva knjiga bila je Biblija.

Prije nego što je tiskarski stroj izumljen, knjige su se do sredine 15. stoljeća u Europi umnožavale jedino prepisivanjem rukom, što je išlo jako sporo a knjige su bile skupe i rijetke. Gutenbergov rad tako je započeo tiskarsku revoluciju i smatra se prekretnicom modernog razdoblja ljudske povijesti a Gutenberga zbog toga nazivaju tvorcem moderne tipografije. I da, njemu u čast je WordPress nazvao svoj editor Gutenberg.

Gutenbergov izum otvorio je put jačanju popularnosti knjiga što je rezultiralo širenju ideja i eksploziji znanja. Brojni povjesničari smatraju da je upravo taj izum predstavljao početak modernoga doba. Ali ipak i tada, tipografija je bila specijalizirano zanimanje jer je teško bilo složiti rečenice prikladne za format i ispis u tisku.

Sama riječ tipografija složenica je grčkih riječi typos (forma ili žig) i grafein (pisati).

Faktori dobre tipografije

Tipografija uključuje odabir porodice fonta, veličinu slova, razmak između slova i riječi, visinu retka i još neke stvari. Pogledajmo svaku stavku zasebno.

Popularne grupe fontova

Fontove možemo razdijeliti u glavne grupe koje se razlikuju prema izgledu:

  • serif
  • sans-serif
  • dekorativni (rukopis)
  • monospace

Serif fontovi

Serif font sadrži dodatne elemente na krajevima slova koji im daju dekorativnu notu. Serif-fontovi daju tradicionalistički ali sofisticiran izgled. Često se koriste u tiskanim medijima poput novina, časopisa ili knjiga.

Primjeri popularnih serif fontova su Times New Roman, Georgia, Playfair Display, Libre Baskerville i drugi.

Sans-serif fontovi

Sans-serif (fr. sans znači “bez”, serif je dekorativna crtica) su fontovi bez dekoracija, po izgledu su čišći i moderniji. Popularni primjeri sans-serif fontova su.

Dekorativni fontovi

Dekorativni fontovi (cursive) su fontovi slični rukopisu. Primjeri kao Comic Sans MS.

Monospace fontovi

Monospace font je onaj čije svako slovo zauzima posve istu dužinu. Poznati primjer je Courier New.

Odabir porodice fonta

Više je načina koji nam može odabrati potrebni font.

Ako želimo da nam stranice budu jako brze, možemo koristiti sistemske fontove. To su fontovi koji se već nalaze na računalima korisnika. Nema svaki operativni sustav iste fontove instalirane stoga koristimo bogatu kombinaciju definicije pomoću CSS-a.

font-family: -apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,”Helvetica Neue”,sans-serif;

Ako korisnik nema prvi font (u ovom slučaju “-apple-system”), tada preglednik pokuša koristiti drugi tip fonta. Ako ni njega nema, pokuša učitati idući font pa sve dok ne naiđe onaj kojeg podržava. Definicija podržava sve bitne operativne sustave te se jedan font sigurno koristi.

Drugi način je pomoću Google fonts koji nam omogućuje široku paletu raznih tipova fontova i njenu brzu implementaciju. Treći način je korištenje lokalno postavljenih fontova. Fontove preuzmemo bilo s Google fonts ili preko Font Squirrel i prebacimo na hosting poslužitelj te pomoću @font-face postavimo implementaciju tako da putanja vodi do datoteka odabranih fontova.

Za pregled Google fontova možete i koristiti naš vlastito izgrađen playground FontFest.

Veličina slova

Veličina fonta treba biti podešena tako da se dobro čita kako na mobilnim ekranima tako i na stolnim računalima.

Struktura naslova (h1-h6) mora biti jasno naznačena. Naslov najveće važnosti treba biti najveći, potom ide h2 naslov i tako redom.

Polja za unos podataka moraju biti minimalno 16 piksela veličine, kako na mobilnim uređajima ne bi došlo do povećanja (zumiranja) polja jer nakon što završi s ispunom korisnik mora sam vratiti normalan pregled stranice.

Boja teksta

Boja teksta u velikoj mjeri ovisi o dizajnu web stranica. Kao osnovno, tekst mora biti dovoljno kontrastan u odnosu na pozadinu.

Prema WCAG smjernicama dobre prakse za digitalnu pristupačnost web stranica svih korisnika bez ograničenja, tekst mora biti u omjeru konstrasta u odnosu minimalno 4.5:1 kako bi zadovoljio AA standard. Još bolje je ako zadovolji 7:1 kontrast AAA standard. Crna boja teksta na bijeloj pozadini se najbolje čita, tekst je oštar i slova se lako prepoznaju.

Iako nije poželjno koristiti 100% crnu boju jer uzrokuje naprezanje očiju kada korisnici čitaju tekst dulje vrijeme. Bijela ima 100% svjetline boje, a crna 0% svjetline. Takva razlika u svjetlini boja stvara intenzivnu razinu svjetlosti koja pretjerano stimulira oči prilikom čitanja teksta. To dovodi do toga da oči teže rade kako bi se prilagodile svjetlini. Umjesto crnog teksta potrebno je blago zagasitu crnu boju na bijeloj pozadini, tako da promjena svjetline nije tako drastična. To sprječava prekomjerno stimuliranje mrežnice i omogućuje korisnicima čitanje tijekom duljeg razdoblja.

Sličnu situaciju treba izbjegaati kod posve crne pozadine i bijelog teksta i u tom slučaju treba upotrijebiti tamno sivu pozadinu.

Alati za provjeru kontrasta teksta

Postoje razni alati koji nam omogućuju provjeru kontrasta. Jednostavan za upoterbu je Contrast Checker i ima na umu smjernice digitalne pristupačnosti..

Provjera pojedinačne kombinacije boja

Potrebno je unijeti hex kôd boje (šifra od 6 znakova koja identificira točno određenu boju i nijansu) za pozadinsku boju (Background Color) i za boju teksta (Foreground Color). Alat nam odmah javi koji je omjer kontrasta te prolazi li tekst minimalnu razinu. Normalni tekst je tekst uobičajene veličine koji koristimo za paragrafe, vrijednosti polja za upit i slično, veliki tekst je onaj koji je prezentiran velikim naslovima tzv. h1 .

Audit web stranice

Neki alati i ekstenzije mogu analizirati cijelu web stranicu. Jedan od takvih alata je WAVE (Web Accessibility Evaluation Tool). Alat napravi veći audit za digitalnu pristupačnost ali ono što nas ovdje zanima je sekcija kontrasta. Alat izlista sve elemente koji nemaju minimalan kontrast i klikom na svaku pojedinu stavku možemo vidjeti o kojem se elementu radi, gdje se nalazi i kakva je razina kontrasta.

Prazni prostor oko teksta

Osim veličine i oblika teksta treba paziti da je prostor oko teksta dovoljan za nesmetano čitanje i harmoniju dizajna. Veće veličine teksta imaju veći međusobni razmak koje treba održavati da tekst bude čitljiv. Tekst koji je previše malog prostora ne diše, težak je za čitanje i izgleda neuredno.

Dizajn linkova

Bilo da govorimo o odlaznim ili internim linkovima, linkovi su važan element na web stranicama kako za dobro korisničko, tako i za dobar SEO. Linkovi moraju biti jasno naznačeni i dovoljno kontrastni da odudaraju od običnog teksta. Možemo to naglasiti odabirom druge boje a dobro je još dodatno postaviti donju crtu i radi interaktivnosti na prijelaz miša promijeniti boju ili ukloniti donju crtu.

Tekst jednostavan za razumijevanje

Čitljivost nekog teksta, osim što ovisi o njegovom sadržaju (tekst može biti jednostavan i lako razumljiv a može biti i pretjerano složen, dugih rečenica i kompliciranih, slabo razumljivih riječi).

Pažnja na podržanost slova

Potrebno je paziti da odabrani font ima sve znakove koje mislimo koristiti. Ako odaberemo neki font, kao npr. popularni sans-serif Lato koji nema slova đ i č , tada moramo biti svjesni da će se ta slova loše prikazivati korisnicima. Može se dogoditi da se izvorna stranica radi za engleski jezik a neki jezik se kasnije nadoda. Tada bi mogli birati jedino hoćemo li mijenjati cjelokupni font te globalno nadograditi cijeli dizajn ili ćemo samo mijenjati font za taj novi jezik.