Tipografija je najčešće prvi element koji korisnik primijeti na web stranici, ali rijetko je svjestan da je primjećuje. Kada je tekst dobro postavljen, čitanje teče bez napora i sadržaj se razumije sa lakoćom. Kada nije, korisnik osjeća umor, gubi fokus i napušta stranicu prije nego što stigne do poente. Na webu, gdje je tekst i dalje dominantan način prenošenja informacija, čitljivost nije estetski detalj nego mjerljiv faktor uspjeha. U ovom tekstu razlažemo šta zaista čini tekst čitljivim na ekranu i kako te principe primijeniti tehnički ispravno.
Zašto je čitljivost na ekranu drugačija od papira
Tipografska pravila koja vrijede za štampu ne prenose se direktno na web. Ekran emituje svjetlost umjesto da je reflektuje, gustina piksela varira od uređaja do uređaja, a korisnik može sam mijenjati veličinu prikaza. Dodatno, tekst na webu se prelama u nepredvidivim širinama: isti pasus se na desktopu prikazuje u jednom redu, a na telefonu u pet redova.
Zbog toga čitljivost na webu nije fiksna vrijednost koju dizajner zaključa jednom, nego sistem koji se mora prilagoditi različitim uvjetima. Dobar tipografski sistem podrazumijeva da tekst ostaje ugodan za čitanje na ekranu od 4 inča kao i na monitoru od 27 inča, bez ručnog podešavanja za svaki slučaj.
Veličina i mjerne jedinice koje treba koristiti
Osnovni tekst na webu ne bi trebao biti manji od 16 piksela. To je vrijednost koju većina pretraživača koristi kao podrazumijevanu i koja odgovara udobnom čitanju na prosječnoj udaljenosti od ekrana. Manji tekst djeluje urednije na maketi dizajna, ali u stvarnoj upotrebi tjera korisnika da se naginje prema ekranu.
Kod mjernih jedinica preporuka je koristiti relativne vrijednosti umjesto fiksnih piksela za veličinu fonta:
- rem – veže se za osnovnu veličinu dokumenta i omogućava korisniku da poveća tekst kroz postavke pretraživača, što je važno za pristupačnost.
- em – relativna u odnosu na roditeljski element, korisna za razmake unutar komponenti.
- ch – jednaka širini jednog znaka, idealna za ograničavanje širine reda.
Fiksni pikseli za veličinu fonta su problematični jer ignorišu korisnička podešavanja i otežavaju održavanje konzistentne skale kroz cijeli projekat.
Prored, razmak i dužina reda
Veličina fonta je samo polovina priče. Prostor oko teksta jednako odlučuje o tome koliko je čitanje ugodno. Tri parametra su ovdje ključna.
Visina reda
Razmak između redova, odnosno visina reda, za osnovni tekst trebao bi biti otprilike 1.5 do 1.6 u odnosu na veličinu fonta. Preuski prored stapa redove i oko gubi mjesto na kojem je stalo. Preširok prored razbija pasus na izolovane linije koje se teško povezuju u cjelinu.
Dužina reda
Najčešća greška na modernim, širokim ekranima je predug red. Kada red ima više od stotinjak znakova, oko teško pronalazi početak sljedećeg reda. Optimalna dužina je između 50 i 75 znakova, uključujući razmake. Zato glavni tekstualni stupac treba ograničiti po širini čak i kada je ekran znatno širi.
Razmak između pasusa
Pasusi trebaju biti jasno odvojeni vertikalnim razmakom, a ne uvlakom prvog reda kao u štampi. Jasna vizuelna podjela na blokove olakšava skeniranje sadržaja, što je način na koji većina korisnika zapravo čita na webu.
Kontrast i boja teksta
Tekst mora imati dovoljan kontrast u odnosu na pozadinu. Smjernice za pristupačnost web sadržaja, poznate kao WCAG, definišu minimalni odnos kontrasta od 4.5 prema 1 za osnovni tekst i 3 prema 1 za veći naslovni tekst. Ovo nisu proizvoljne brojke nego prag ispod kojeg dio korisnika jednostavno ne može udobno pročitati sadržaj.
Česta zamka je svijetlosivi tekst na bijeloj pozadini, koji izgleda elegantno na dizajnerskoj maketi ali pada ispod praga čitljivosti na jeftinijim ekranima ili pod jakim svjetlom. Isto vrijedi i za tanke varijante fontova koje na visokorezolucijskim ekranima izgledaju oštro, a na starijim uređajima se gube. Kontrast treba provjeravati alatima, a ne procjenjivati okom.
Izbor i učitavanje fontova
Sam izbor pisma utiče na čitljivost manje nego što se obično misli, pod uvjetom da je riječ o kvalitetno dizajniranom fontu napravljenom za ekran. Važnije od stila je da font ima jasne razlike između sličnih znakova, na primjer između velikog slova I, malog slova l i broja 1.
Tehnička strana učitavanja fontova jednako je bitna. Velike datoteke fontova usporavaju prikaz i mogu izazvati pojavu nevidljivog ili neformatiranog teksta tokom učitavanja. Nekoliko praktičnih preporuka:
- Koristite moderne formate poput WOFF2 koji su znatno manji.
- Učitavajte samo debljine i rezove koje stvarno koristite, ne cijelu porodicu.
- Postavite ponašanje prikaza tako da se tekst odmah prikaže sistemskim fontom dok se pravi font učitava.
- Ograničite broj različitih porodica fontova na jednu ili dvije.
Performanse i čitljivost ovdje idu zajedno: tekst koji se brzo pojavi i odmah je čitljiv bolji je od savršenog fonta koji kasni dvije sekunde. Ovaj pristup je dio šire priče o brzini i kvaliteti koju ugrađujemo u svaki projekat, više o tome možete pročitati na stranici izrada web stranica.
Hijerarhija: kako voditi oko kroz sadržaj
Čitljivost nije samo pitanje pojedinačnog reda nego i toga kako se cijela stranica organizuje. Korisnik mora na prvi pogled razlikovati naslov od podnaslova i od osnovnog teksta. Ta hijerarhija se gradi razlikama u veličini, debljini i razmaku, a ne nizanjem mnogo različitih boja ili fontova.
Pristup koji daje predvidive rezultate je tipografska skala: niz veličina izveden iz jedne osnovne vrijednosti pomoću dosljednog odnosa. Tako svi nivoi teksta stoje u harmoničnom međusobnom odnosu i sistem ostaje uredan kako projekat raste.
| Element | Preporučena veličina | Visina reda |
|---|---|---|
| Osnovni tekst | 16-18 px | 1.5 – 1.6 |
| Podnaslov (h3) | 20-24 px | 1.3 – 1.4 |
| Naslov sekcije (h2) | 28-36 px | 1.2 – 1.3 |
| Glavni naslov (h1) | 40-56 px | 1.1 – 1.2 |
Ove vrijednosti su polazna tačka, a ne pravilo bez izuzetka. Konkretan projekat, ciljana publika i karakter izabranog fonta mogu zahtijevati prilagodbe, ali odnosi između nivoa trebaju ostati dosljedni.
Zaključak
Dobra tipografija na webu rijetko se primijeti, a loša se uvijek osjeti. Čitljivost se gradi od više slojeva: razumne veličine teksta, relativnih mjernih jedinica, dovoljnog proreda, kontrolisane dužine reda, ispravnog kontrasta i jasne hijerarhije. Nijedan od tih elemenata sam po sebi nije dovoljan, ali zajedno čine razliku između stranice koju je ugodno čitati i one koju korisnik napušta. Ako planirate projekat u kojem sadržaj nosi glavnu vrijednost, slobodno nam se javite putem kontakt stranice i rado ćemo razmotriti najbolji pristup.