Практичан водич за читљиву типографију на модерном вебу

Зашто је већина веб-сајтова тежа за читање него што би требало да буде

Просечан веб-сајт у 2026. испоручује се са прилагођеном породицом фонтова, пажљиво одабраним бојама бренда и дизајн системом који дефинише размаке до пиксела. Ипак, основни текст — оно што је већина посетилаца заправо дошла да чита — често стоји на 14px, у сивој боји ниског контраста, постављен у писмо оптимизовано за наслове, а не за пасусе.

Ово није критика дизајнера. То је подсетник да је читљивост посебна дисциплина у односу на визуелни дизајн, и да се њих двоје не поклапају увек. Писмо које изгледа оштро у hero секцији може бити заморно на дужини пасуса. Палета боја која добро изгледа на фотографијама може пасти на проверама контраста. Распоред који функционише на монитору од 27 инча може се срушити у уску колону на мобилном уређају.

Добра вест: читљива типографија не захтева диплому из типографије. Захтева пажњу на неколико променљивих које имају несразмерно велики утицај.

Величина фонта: већа него што мислите

Најчешћа грешка у читљивости на вебу је основни текст који је премали. Дизајнери често постављају основни текст на 14px или 15px јер „изгледа чисто“ на десктоп скали, а затим забораве да значајан део читалаца користи телефоне, често у условима осветљења који нису идеални.

Практична полазна вредност за основни текст у 2026:

• Десктоп: најмање 18px, пожељно 20px
• Мобилни уређаји: најмање 16px, пожељно 18px

Ове вредности делују велике ако сте навикли на ситнији текст, али одражавају начин на који људи заиста читају на екранима. Већи текст смањује напрезање очију, побољшава разумевање и чини садржај приступачним читаоцима са благим оштећењем вида који нису мењали подешавања прегледача.

Ако ваш дизајн систем захтева мањи текст, тестирајте га на телефону на сунцу. Ако жмирите, премали је.

Висина реда: дајте тексту простора да дише

Висина реда (проред) је вертикални простор између редова текста. Ако је сувише мала, редови се стапају. Ако је сувише велика, око губи нит између редова.

За основни текст, висина реда од 1.5 до 1.7 функционише за већину писама. Наслови могу бити збијенији (1.1 до 1.3), али основном тексту је потребан простор.

CSS:

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

Ово је један од најлакших добитака за читљивост. Ако је ваш основни текст тренутно на line-height: 1.2 или користи фиксну вредност у пикселима, промените то данас.

Дужина реда: краћа него што мислите

Оптимална дужина реда за основни текст је 45 до 75 знакова по реду, отприлике 8 до 12 речи. Редови дужи од 90 знакова отежавају оку да се врати на почетак следећег реда. Редови краћи од 40 знакова стварају испрекидано, фрагментирано искуство читања.

Већина веб-сајтова ово погреши тако што допусти да се текст протегне преко целе ширине viewport-а, нарочито на десктопу. Монитор ширине 1920px може да смести 150+ знакова по реду, што је заморно за читање.

Решење је max-width на контејнеру текста:

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

Јединица ch се недовољно користи, али је савршена за ово: скалира се са величином фонта и приближно одговара ширини знака.

Контраст: није тако једноставно као црно на белом

WCAG 2.1 дефинише минимални однос контраста од 4.5:1 за основни текст (AA ниво) и 7:1 за побољшану приступачност (AAA ниво). Већина веб-сајтова то испуњава на папиру, али не и у пракси, јер користе светлосиви текст на белој позадини.

Чести прекршиоци:

• #666666 на #FFFFFF (4.54:1, једва пролази)
• #777777 на #FFFFFF (4.47:1, не пролази)
• Свака нијанса светлија од #767676 на белој (не пролази)

Ако ваш дизајн систем дефинише „text-secondary“ као светлосиву, тестирајте је. WebAIM провера контраста је најбржи начин да проверите.

Тамни режим ово додатно компликује. Чисто бели текст на потпуно црној позадини ствара халацију (ефекат сјаја), што је теже за читање него благо прљаво бела на тамносивој. Бољи приступ:

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

Избор писма: подразумевани фонтови су бољи него што мислите

Прилагођени веб-фонтови су свеприсутни, али долазе са компромисима. Додају латенцију, повећавају тежину странице и могу блокирати приказивање ако се не учитавају пажљиво. За основни текст, системски фонтови су често бољи избор.

Робустан стек системских фонтова у 2026:

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

Ово вам даје San Francisco на macOS/iOS, Segoe UI на Windows-у и Roboto на Android-у — све су то веома читљива, професионално дизајнирана писма која се учитавају одмах.

Ако ипак користите прилагођени фонт за основни текст, изаберите онај који је дизајниран за читање дужих текстова, а не за display. Избегавајте:

• Ултратанке или ултрадебеле тежине за основни текст
• Сужене или проширене варијанте
• Фонтове са малом x-висином (висином малих слова)

Тестирајте изабрано писмо на дужини пасуса пре него што се обавежете.

Респонзивна типографија: флуидне типографске скале

Фиксне величине фонта се не скалирају добро на различитим уређајима. Основни фонт од 20px који је удобан на десктопу може деловати превелико на мобилном уређају.

Флуидна типографија користи clamp() да глатко скалира величину фонта између минимума и максимума:

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

Ово се скалира од 16px на малим екранима до 20px на великим екранима, уз глатку интерполацију између. Софистицираније је од media query преломних тачака и прилагођава се било којој ширини viewport-а.

За пуну типографску скалу (наслови, основни текст, ситан текст), алати као што је Utopia генеришу флуидне скале на основу ваших ограничења.

Размак између пасуса и поравнање текста

Два мала детаља која су важна:

1. Размак између пасуса: Додајте размак између пасуса (margin-block-end: 1em) или користите увлачење првог реда (text-indent: 1.5em), али не обоје. Већина веб-садржаја користи размак.

1. Поравнање текста: Лево поравнање (или десно поравнање за RTL језике) готово је увек читљивије од обостраног поравнања, које ствара неуједначене размаке између речи ако није омогућено растављање речи. Центриран основни текст је тежак за читање и треба га чувати за кратке одломке.

Тестирање читљивости у пракси

Читљивост није потпуно објективна, али можете је тестирати:

• Прочитајте сопствени садржај на телефону у различитим условима осветљења
• Покрените Lighthouse ревизију приступачности да ухватите проблеме са контрастом и величином фонта (погледајте како читати Lighthouse извештај за смернице)
• Замолите некога старијег од 50 година да прочита страницу без мењања подешавања
• Проверите аналитику за стопу напуштања на страницама богатим текстом — ако људи брзо одлазе, читљивост може бити фактор

Ако је ваш садржај тежак за читање, људи га неће читати. Толико је једноставно.

Како то изгледа у пракси

Читљив стил основног текста у 2026. могао би да изгледа овако:

.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;
  }
}

Ово покрива величину фонта, висину реда, дужину реда, контраст и респонзивно скалирање у око десетак редова CSS-а. Није узбудљиво, али функционише.

Када прекршити правила

Ове смернице се односе на основни текст — пасусе које људи читају ради информација. Наслови, потписи, UI ознаке и маркетиншки текст имају другачија ограничења и могу да савију ова правила.

Али ако је неко дошао на ваш сајт да прочита чланак, страницу документације или опис производа, читљива типографија није опционална. Она је основно очекивање.