Praktičan vodič za čitljivu tipografiju na suvremenom webu

Zašto je većinu web-stranica teže čitati nego što bi trebalo biti

Prosječna web-stranica u 2026. dolazi s prilagođenom obitelji fontova, pomno odabranim bojama brenda i dizajnerskim sustavom koji definira razmake do razine piksela. Ipak, osnovni tekst — ono što je većina posjetitelja zapravo došla čitati — često stoji na 14px u sivom tonu niskog kontrasta, postavljen u pismu optimiziranom za naslove, a ne za odlomke.

Ovo nije kritika dizajnera. To je podsjetnik da je čitljivost zasebna disciplina od vizualnog dizajna i da se to dvoje ne poklapa uvijek. Pismo koje izgleda oštro u hero sekciji može biti zamorno na duljini odlomka. Paleta boja koja dobro izgleda na fotografijama može pasti na provjerama kontrasta. Raspored koji funkcionira na 27-inčnom monitoru može se na mobitelu urušiti u preuzak stupac.

Dobra vijest: čitljiva tipografija ne zahtijeva diplomu iz tipografije. Zahtijeva pozornost na nekoliko varijabli koje imaju nerazmjerno velik utjecaj.

Veličina fonta: veća nego što mislite

Najčešća pogreška u čitljivosti na webu jest osnovni tekst koji je premalen. Dizajneri često postavljaju tekst na 14px ili 15px jer na desktop mjerilu "izgleda čisto", a zatim zaborave da je značajan dio čitatelja na mobitelima, često u osvjetljenju koje nije idealno.

Praktična polazna vrijednost za osnovni tekst u 2026.:

• Desktop: najmanje 18px, poželjno 20px
• Mobile: najmanje 16px, poželjno 18px

Te se brojke čine velikima ako ste navikli na sitniji tekst, ali odražavaju način na koji ljudi stvarno čitaju na zaslonima. Veći tekst smanjuje naprezanje očiju, poboljšava razumijevanje i čini vaš sadržaj dostupnim čitateljima s blagim oštećenjem vida koji nisu prilagodili postavke preglednika.

Ako vaš dizajnerski sustav zahtijeva manji tekst, testirajte ga na mobitelu na suncu. Ako škiljite, premalen je.

Visina retka: dajte tekstu prostora za disanje

Visina retka (prored) okomiti je prostor između redaka teksta. Ako je preuska, redci se stapaju. Ako je preširoka, oko gubi nit između redaka.

Za osnovni tekst, visina retka od 1.5 do 1.7 funkcionira za većinu pisama. Naslovi mogu biti zbijeniji (1.1 do 1.3), ali osnovnom tekstu treba prostora.

CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Ovo je jedno od najlakših poboljšanja čitljivosti. Ako je vaš osnovni tekst trenutačno na line-height: 1.2 ili koristi fiksnu vrijednost u pikselima, promijenite to danas.

Duljina retka: kraća nego što mislite

Optimalna duljina retka za osnovni tekst je 45 do 75 znakova po retku, otprilike 8 do 12 riječi. Redci dulji od 90 znakova otežavaju oku povratak na početak sljedećeg retka. Redci kraći od 40 znakova stvaraju isprekidano, fragmentirano iskustvo čitanja.

Većina web-stranica u tome griješi jer dopušta tekstu da se proteže cijelom širinom prikaza, osobito na desktopu. Monitor širok 1920px može smjestiti više od 150 znakova po retku, što je zamorno za čitanje.

Rješenje je max-width na spremniku teksta:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Jedinica ch premalo se koristi, ali je savršena za ovo: skalira se s veličinom fonta i približno odgovara širini znaka.

Kontrast: nije tako jednostavno kao crno na bijelom

WCAG 2.1 određuje minimalni omjer kontrasta od 4.5:1 za osnovni tekst (razina AA) i 7:1 za poboljšanu pristupačnost (razina AAA). Većina web-stranica to zadovoljava na papiru, ali pada u praksi jer koristi svijetlosivi tekst na bijelim pozadinama.

Česti krivci:

• #666666 na #FFFFFF (4.54:1, jedva prolazi)
• #777777 na #FFFFFF (4.47:1, ne prolazi)
• Bilo koja nijansa svjetlija od #767676 na bijeloj (ne prolazi)

Ako vaš dizajnerski sustav definira "text-secondary" kao svijetlosivu, testirajte je. WebAIM contrast checker najbrži je način za provjeru.

Tamni način rada to dodatno komplicira. Čisto bijeli tekst na čisto crnoj podlozi stvara halaciju (efekt sjaja), što je teže čitati nego blago prljavobijeli tekst na tamnosivoj podlozi. Bolji pristup:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Odabir pisma: zadani fontovi bolji su nego što mislite

Prilagođeni web fontovi sveprisutni su, ali dolaze s kompromisima. Dodaju latenciju, povećavaju težinu stranice i mogu blokirati renderiranje ako se ne učitavaju pažljivo. Za osnovni tekst, sistemski fontovi često su bolji izbor.

Robustan skup sistemskih fontova u 2026.:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Time dobivate San Francisco na macOS/iOS, Segoe UI na Windowsu i Roboto na Androidu — sve vrlo čitljiva, profesionalno dizajnirana pisma koja se učitavaju trenutačno.

Ako ipak koristite prilagođeni font za osnovni tekst, odaberite onaj dizajniran za dugotrajno čitanje, a ne za prikazne naslove. Izbjegavajte:

• Ultra-lagane ili ultra-podebljane rezove za osnovni tekst
• Sužene ili proširene varijante
• Fontove s niskom x-visinom (visinom malih slova)

Testirajte odabrano pismo na duljini odlomka prije nego što se obvežete.

Responzivna tipografija: fluidne tipografske skale

Fiksne veličine fonta ne skaliraju se dobro među uređajima. Osnovni font od 20px koji je ugodan na desktopu može djelovati preveliko na mobitelu.

Fluidna tipografija koristi clamp() za glatko skaliranje veličine fonta između minimuma i maksimuma:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

To skalira od 16px na malim zaslonima do 20px na velikim zaslonima, uz glatku interpolaciju između. Sofisticiranije je od prijelomnih točaka u media queryjima i prilagođava se svakoj širini prikaza.

Za potpunu tipografsku skalu (naslovi, osnovni tekst, sitni tekst), alati poput Utopia generiraju fluidne skale na temelju vaših ograničenja.

Razmak između odlomaka i poravnanje teksta

Dva mala detalja koja su važna:

1. Razmak između odlomaka: Dodajte prostor između odlomaka (margin-block-end: 1em) ili upotrijebite uvlačenje prvog retka (text-indent: 1.5em), ali ne oboje. Većina web-sadržaja koristi razmak.

1. Poravnanje teksta: Lijevo poravnanje (ili desno poravnanje za RTL jezike) gotovo je uvijek čitljivije od obostranog poravnanja, koje stvara neujednačen razmak između riječi ako nije omogućeno rastavljanje riječi. Centrirani osnovni tekst teško je čitati i treba ga rezervirati za kratke odlomke.

Testiranje čitljivosti u praksi

Čitljivost nije potpuno objektivna, ali možete je testirati:

• Pročitajte vlastiti sadržaj na mobitelu u različitim uvjetima osvjetljenja
• Pokrenite Lighthouse audit pristupačnosti kako biste uhvatili probleme s kontrastom i veličinom fonta (za smjernice pogledajte kako čitati Lighthouse izvještaj bez panike)
• Zamolite osobu stariju od 50 godina da pročita stranicu bez prilagodbe svojih postavki
• Provjerite analitiku za stopu napuštanja na stranicama bogatima tekstom — ako ljudi brzo odlaze, čitljivost može biti jedan od razloga

Ako je vaš sadržaj teško čitati, ljudi ga neće čitati. Tako je jednostavno.

Kako to izgleda u praksi

Čitljiv stil osnovnog teksta u 2026. mogao bi izgledati ovako:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

To pokriva veličinu fonta, visinu retka, duljinu retka, kontrast i responzivno skaliranje u otprilike desetak redaka CSS-a. Nije uzbudljivo, ali funkcionira.

Kada prekršiti pravila

Ove se smjernice odnose na osnovni tekst — odlomke koje ljudi čitaju radi informacija. Naslovi, opisi slika, UI oznake i marketinški tekst imaju drukčija ograničenja i mogu savijati ova pravila.

Ali ako je netko došao na vašu stranicu pročitati članak, dokumentacijsku stranicu ili opis proizvoda, čitljiva tipografija nije opcionalna. Ona je osnovno očekivanje.