Praktinis įskaitomo teksto šiuolaikiniame žiniatinklyje vadovas

Kodėl daugumą svetainių skaityti sunkiau, nei turėtų būti

Vidutinė 2026 m. svetainė pateikiama su individualia šriftų šeima, kruopščiai parinktomis prekės ženklo spalvomis ir dizaino sistema, kuri tarpus apibrėžia pikselio tikslumu. Tačiau pagrindinis tekstas — tai, ko dauguma lankytojų iš tikrųjų atėjo skaityti — dažnai rodomas 14px dydžiu, mažo kontrasto pilka spalva, šriftu, optimizuotu antraštėms, o ne pastraipoms.

Tai nėra priekaištas dizaineriams. Tai priminimas, kad skaitomumas yra atskira disciplina nuo vizualinio dizaino, ir šios dvi sritys ne visada sutampa. Šriftas, kuris atrodo ryškus hero skiltyje, pastraipų apimtyje gali varginti. Spalvų paletė, kuri gerai atrodo nuotraukose, gali nepraeiti kontrasto patikrų. Maketas, veikiantis 27 colių monitoriuje, mobiliajame įrenginyje gali subyrėti į siaurą stulpelį.

Gera žinia: įskaitomam tekstui nereikia tipografijos diplomo. Reikia dėmesio keliems kintamiesiems, kurie turi neproporcingai didelį poveikį.

Šrifto dydis: didesnis, nei manote

Dažniausia skaitomumo klaida žiniatinklyje — per mažas pagrindinis tekstas. Dizaineriai dažnai nustato 14px arba 15px pagrindinio teksto dydį, nes darbalaukio mastelyje jis „atrodo švariai“, ir pamiršta, kad reikšminga dalis skaitytojų skaito telefonuose, dažnai ne pačiame geriausiame apšvietime.

Praktinė pagrindinio teksto bazė 2026 m.:

• Darbalaukis: mažiausiai 18px, pageidautina 20px
• Mobilieji įrenginiai: mažiausiai 16px, pageidautina 18px

Jei esate įpratę prie mažesnio teksto, šie skaičiai gali atrodyti dideli, bet jie atspindi, kaip žmonės iš tikrųjų skaito ekranuose. Didesnis tekstas mažina akių nuovargį, gerina supratimą ir daro jūsų turinį prieinamą skaitytojams, turintiems lengvą regos sutrikimą, bet nepasikeitusiems naršyklės nustatymų.

Jei jūsų dizaino sistema reikalauja mažesnio teksto, patikrinkite jį telefone saulės šviesoje. Jei prisimerkiate, jis per mažas.

Eilučių aukštis: leiskite tekstui kvėpuoti

Eilučių aukštis (leading) yra vertikalus tarpas tarp teksto eilučių. Jei jis per mažas, eilutės susilieja. Jei per didelis, akis pameta ryšį tarp eilučių.

Pagrindiniam tekstui daugumai šriftų tinka 1.5–1.7 eilučių aukštis. Antraštės gali būti glaustesnės (1.1–1.3), bet pagrindiniam tekstui reikia erdvės kvėpuoti.

CSS:

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

Tai vienas lengviausių skaitomumo patobulinimų. Jei jūsų pagrindinis tekstas dabar yra su line-height: 1.2 arba naudoja fiksuotą pikselių reikšmę, pakeiskite tai šiandien.

Eilutės ilgis: trumpesnis, nei manote

Optimalus pagrindinio teksto eilutės ilgis yra 45–75 simboliai eilutėje, maždaug 8–12 žodžių. Ilgesnės nei 90 simbolių eilutės apsunkina akiai grįžimą į kitos eilutės pradžią. Trumpesnės nei 40 simbolių eilutės sukuria trūkčiojančią, fragmentuotą skaitymo patirtį.

Dauguma svetainių čia klysta leisdamos tekstui užimti visą peržiūros srities plotį, ypač darbalaukyje. 1920px pločio monitoriuje gali tilpti daugiau nei 150 simbolių eilutėje, o tai vargina skaityti.

Sprendimas — maksimalus teksto konteinerio plotis:

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

ch vienetas naudojamas per retai, bet šiuo atveju yra idealus: jis keičiasi pagal šrifto dydį ir apytiksliai atitinka simbolio plotį.

Kontrastas: ne taip paprasta kaip juoda ant balto

WCAG 2.1 nurodo minimalų 4.5:1 kontrasto santykį pagrindiniam tekstui (AA lygis) ir 7:1 pagerintam prieinamumui (AAA lygis). Dauguma svetainių popieriuje tai atitinka, bet praktikoje nepavyksta, nes naudoja šviesiai pilką tekstą baltame fone.

Dažni pažeidėjai:

• #666666 ant #FFFFFF (4.54:1, vos praeina)
• #777777 ant #FFFFFF (4.47:1, nepraeina)
• Bet kuris atspalvis, šviesesnis nei #767676 ant balto (nepraeina)

Jei jūsų dizaino sistema „text-secondary“ apibrėžia kaip šviesiai pilką, patikrinkite ją. WebAIM kontrasto tikrintuvas yra greičiausias būdas tai patvirtinti.

Tamsus režimas tai dar labiau komplikuoja. Grynas baltas tekstas ant grynai juodo fono sukuria halaciją (švytėjimo efektą), dėl kurios skaityti sunkiau nei šiek tiek ne visai baltą tekstą ant tamsiai pilko fono. Geresnis būdas:

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

Šrifto pasirinkimas: numatytieji šriftai geresni, nei manote

Individualūs žiniatinklio šriftai yra visur, bet jie turi kompromisų. Jie prideda delsos, didina puslapio svorį ir gali blokuoti atvaizdavimą, jei nėra įkeliami atsargiai. Pagrindiniam tekstui sistemos šriftai dažnai yra geresnis pasirinkimas.

Tvirta sistemos šriftų seka 2026 m.:

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

Tai suteikia San Francisco macOS/iOS sistemose, Segoe UI Windows sistemoje ir Roboto Android įrenginiuose — visus labai skaitomus, profesionaliai sukurtus šriftus, kurie įkeliami akimirksniu.

Jei pagrindiniam tekstui vis dėlto naudojate individualų šriftą, rinkitės tokį, kuris sukurtas ilgos formos skaitymui, o ne demonstravimui. Venkite:

• Itin plonų arba itin storų svorių pagrindiniam tekstui
• Siaurintų arba išplatintų variantų
• Šriftų su mažu x aukščiu (mažųjų raidžių aukščiu)

Prieš apsispręsdami, išbandykite pasirinktą šriftą pastraipų ilgio tekste.

Prisitaikanti tipografija: sklandžios teksto skalės

Fiksuoti šrifto dydžiai prastai keičiasi skirtinguose įrenginiuose. 20px pagrindinis tekstas, patogus darbalaukyje, mobiliajame gali atrodyti per didelis.

Sklandi tipografija naudoja clamp(), kad šrifto dydis tolygiai keistųsi tarp minimumo ir maksimumo:

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

Tai keičia dydį nuo 16px mažuose ekranuose iki 20px dideliuose ekranuose, su sklandžia interpoliacija tarp jų. Tai rafinuotesnis sprendimas nei media query lūžio taškai ir prisitaiko prie bet kokio peržiūros srities pločio.

Visai tipografinei skalei (antraštėms, pagrindiniam tekstui, smulkiam tekstui) tokie įrankiai kaip Utopia sugeneruoja sklandžias skales pagal jūsų apribojimus.

Pastraipų tarpai ir teksto lygiavimas

Dvi smulkmenos, kurios svarbios:

1. Pastraipų tarpai: pridėkite tarpą tarp pastraipų (margin-block-end: 1em) arba naudokite pirmos eilutės įtrauką (text-indent: 1.5em), bet ne abu. Dauguma žiniatinklio turinio naudoja tarpus.

1. Teksto lygiavimas: lygiavimas kairėje (arba dešinėje RTL kalboms) beveik visada yra skaitomesnis nei abipusis lygiavimas, kuris sukuria netolygų tarpą tarp žodžių, nebent įjungtas skiemenavimas. Centruotai lygiuotas pagrindinis tekstas sunkiai skaitomas ir turėtų būti paliktas trumpoms ištraukoms.

Skaitomumo tikrinimas praktikoje

Skaitomumas nėra visiškai objektyvus, bet jį galima tikrinti:

• Perskaitykite savo turinį telefone skirtingomis apšvietimo sąlygomis
• Paleiskite Lighthouse prieinamumo auditą, kad rastumėte kontrasto ir šrifto dydžio problemas (gairių rasite kaip skaityti Lighthouse ataskaitą nepanikuojant)
• Paprašykite vyresnio nei 50 metų žmogaus perskaityti puslapį nekeičiant nustatymų
• Patikrinkite analitikoje atmetimo rodiklį teksto gausiuose puslapiuose — jei žmonės greitai išeina, skaitomumas gali būti viena iš priežasčių

Jei jūsų turinį sunku skaityti, žmonės jo neskaitys. Taip paprasta.

Kaip tai atrodo praktikoje

Įskaitomo pagrindinio teksto stilius 2026 m. galėtų atrodyti taip:

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

Tai apima šrifto dydį, eilučių aukštį, eilutės ilgį, kontrastą ir prisitaikantį mastelį maždaug keliolikoje CSS eilučių. Tai nėra įspūdinga, bet veikia.

Kada laužyti taisykles

Šios gairės taikomos pagrindiniam tekstui — pastraipoms, kurias žmonės skaito norėdami gauti informaciją. Antraštėms, paaiškinimams, UI etiketėms ir rinkodaros tekstams galioja kiti apribojimai, todėl jie gali šias taisykles lankstyti.

Bet jei kas nors atėjo į jūsų svetainę skaityti straipsnio, dokumentacijos puslapio ar produkto aprašymo, įskaitomas tekstas nėra pasirenkamas. Tai bazinis lūkestis.