Gyakorlati útmutató az olvasható betűszedéshez a modern weben

Miért nehezebben olvasható a legtöbb weboldal, mint kellene

Az átlagos weboldal 2026-ban egyedi betűcsaláddal, gondosan kiválasztott márkaszínekkel és olyan design systemmel készül, amely pixelekre lebontva határozza meg a térközöket. Ennek ellenére a törzsszöveg — vagyis az, amit a legtöbb látogató valójában olvasni jött — gyakran 14px méretben, alacsony kontrasztú szürkével jelenik meg, ráadásul olyan betűtípussal, amely címsorokra, nem pedig bekezdésekre van optimalizálva.

Ez nem a designerek elleni kirohanás. Inkább emlékeztető arra, hogy az olvashatóság külön terület a vizuális designtól, és a kettő nem mindig esik egybe. Egy betűtípus, amely élesen mutat egy hero szekcióban, bekezdéshosszban fárasztó lehet. Egy színpaletta, amely jól mutat képeken, elbukhat a kontrasztellenőrzéseken. Egy elrendezés, amely működik egy 27 hüvelykes monitoron, mobilon keskeny oszloppá zsugorodhat.

A jó hír: az olvasható betűszedéshez nem kell tipográfiai diploma. Néhány olyan változóra kell figyelni, amelyek aránytalanul nagy hatással vannak az eredményre.

Betűméret: nagyobb, mint gondolná

A weben a leggyakoribb olvashatósági hiba a túl kicsi törzsszöveg. A designerek gyakran 14px vagy 15px méretre állítják a törzsszöveget, mert asztali nézetben „letisztultnak” tűnik, majd megfeledkeznek arról, hogy az olvasók jelentős része telefonon olvas, gyakran nem ideális fényviszonyok között.

Gyakorlati kiindulópont törzsszöveghez 2026-ban:

• Asztali gépen: legalább 18px, lehetőleg 20px
• Mobilon: legalább 16px, lehetőleg 18px

Ezek a számok nagynak tűnhetnek, ha kisebb betűhöz szokott, de azt tükrözik, ahogyan az emberek ténylegesen olvasnak képernyőn. A nagyobb szöveg csökkenti a szemfáradást, javítja a megértést, és hozzáférhetőbbé teszi a tartalmat azoknak az enyhe látásromlással élő olvasóknak is, akik nem módosították a böngészőbeállításaikat.

Ha a design system kisebb betűméretet ír elő, tesztelje telefonon, napfényben. Ha hunyorognia kell, túl kicsi.

Sorköz: adjon teret a szövegnek

A sorköz (leading) a szövegsorok közötti függőleges távolság. Ha túl szoros, a sorok összemosódnak. Ha túl laza, a szem elveszíti a kapcsolatot a sorok között.

Törzsszöveghez a 1.5 és 1.7 közötti sormagasság működik a legtöbb betűtípussal. A címsorok lehetnek szorosabbak (1.1 és 1.3 között), de a törzsszövegnek szüksége van levegőre.

A CSS:

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

Ez az egyik legegyszerűbb olvashatósági nyereség. Ha a törzsszöveg jelenleg line-height: 1.2 értéken van, vagy fix pixelértéket használ, érdemes még ma megváltoztatni.

Sorhossz: rövidebb, mint gondolná

A törzsszöveg optimális sorhossza 45–75 karakter soronként, nagyjából 8–12 szó. A 90 karakternél hosszabb soroknál a szem nehezebben talál vissza a következő sor elejére. A 40 karakternél rövidebb sorok darabos, töredezett olvasási élményt hoznak létre.

A legtöbb weboldal ezt úgy rontja el, hogy hagyja a szöveget a nézetablak teljes szélességében kifutni, különösen asztali nézetben. Egy 1920px széles monitoron soronként akár 150+ karakter is elférhet, ami fárasztó olvasni.

A megoldás: max-width a szövegtartón:

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

A ch egységet kevesen használják, pedig erre ideális: a betűmérettel együtt skálázódik, és nagyjából a karakter szélességének felel meg.

Kontraszt: nem olyan egyszerű, mint fekete fehéren

A WCAG 2.1 a törzsszöveghez 4.5:1 minimális kontrasztarányt ír elő (AA szint), a kiemelt hozzáférhetőséghez pedig 7:1 értéket (AAA szint). A legtöbb weboldal papíron teljesíti ezt, a gyakorlatban viszont elbukik, mert világosszürke szöveget használ fehér háttéren.

Gyakori problémák:

• #666666 #FFFFFF háttéren (4.54:1, éppen átmegy)
• #777777 #FFFFFF háttéren (4.47:1, nem felel meg)
• Bármely, #767676-nál világosabb árnyalat fehéren (nem felel meg)

Ha a design system a „text-secondary” színt világosszürkének határozza meg, tesztelje. A WebAIM contrast checker a leggyorsabb mód az ellenőrzésre.

A sötét mód ezt tovább bonyolítja. A tiszta fehér szöveg tiszta fekete háttéren halációt, vagyis világító hatást hoz létre, amely nehezebben olvasható, mint az enyhén tört fehér sötétszürkén. Jobb megközelítés:

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

Betűtípus-választás: az alapértelmezett betűk jobbak, mint gondolná

Az egyedi webes betűtípusok mindenütt jelen vannak, de kompromisszumokkal járnak. Késleltetést adnak hozzá, növelik az oldal méretét, és blokkolhatják a renderelést, ha nem körültekintően töltődnek be. Törzsszöveghez a rendszerbetűk gyakran jobb választást jelentenek.

Egy robusztus rendszerbetű-készlet 2026-ban:

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

Ez San Franciscót ad macOS/iOS rendszeren, Segoe UI-t Windows alatt, és Robotót Androidon — mind azonnal betöltődő, jól olvasható, professzionálisan tervezett betűtípus.

Ha mégis egyedi betűtípust használ törzsszöveghez, olyat válasszon, amelyet hosszú szövegek olvasására terveztek, nem display célokra. Kerülje:

• Az ultra-light vagy ultra-bold vastagságokat törzsszöveghez
• A sűrített vagy nyújtott változatokat
• Az alacsony x-magasságú betűtípusokat (a kisbetűk magasságát)

A végleges döntés előtt tesztelje a választott betűtípust bekezdéshosszban.

Reszponzív tipográfia: fluid betűskálák

A fix betűméretek nem skálázódnak jól különböző eszközökön. Egy 20px-es törzsszöveg, amely asztali gépen kényelmes, mobilon túl nagynak érződhet.

A fluid tipográfia clamp() használatával finoman skálázza a betűméretet egy minimum és egy maximum között:

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

Ez kis képernyőkön 16px-ről nagy képernyőkön 20px-re skáláz, közben sima átmenettel. Kifinomultabb, mint a media query töréspontok, és bármilyen nézetablak-szélességhez alkalmazkodik.

Teljes betűskálához (címsorok, törzsszöveg, kis szöveg) olyan eszközök, mint az Utopia, a megadott korlátok alapján generálnak fluid skálákat.

Bekezdésközök és szövegigazítás

Két apró részlet, amely számít:

1. Bekezdésköz: Tegyen térközt a bekezdések közé (margin-block-end: 1em), vagy használjon első soros behúzást (text-indent: 1.5em), de ne mindkettőt. A legtöbb webes tartalom térközt használ.

1. Szövegigazítás: A balra zárt szöveg (RTL nyelveknél jobbra zárt) szinte mindig olvashatóbb, mint a sorkizárt szöveg, amely egyenetlen szóközöket hoz létre, hacsak nincs bekapcsolva az elválasztás. A középre igazított törzsszöveg nehezen olvasható, ezért rövid szakaszokra érdemes fenntartani.

Az olvashatóság gyakorlati tesztelése

Az olvashatóság nem teljesen objektív, de tesztelhető:

• Olvassa el a saját tartalmát telefonon, különböző fényviszonyok között
• Futtasson Lighthouse hozzáférhetőségi auditot, hogy elkapja a kontraszt- és betűméretproblémákat (útmutatóért lásd: hogyan olvassunk Lighthouse-jelentést pánik nélkül)
• Kérjen meg egy 50 év feletti embert, hogy olvasson el egy oldalt a beállításai módosítása nélkül
• Ellenőrizze az analitikában a visszafordulási arányt a szövegben gazdag oldalakon — ha az emberek gyorsan távoznak, az olvashatóság is tényező lehet

Ha a tartalma nehezen olvasható, az emberek nem fogják elolvasni. Ilyen egyszerű.

Hogyan néz ki ez a gyakorlatban

Egy olvasható törzsszöveg-stílus 2026-ban például így nézhet ki:

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

Ez nagyjából egy tucat CSS-sorban lefedi a betűméretet, a sormagasságot, a sorhosszt, a kontrasztot és a reszponzív skálázást. Nem látványos, de működik.

Mikor érdemes megszegni a szabályokat

Ezek az irányelvek a törzsszövegre vonatkoznak — azokra a bekezdésekre, amelyeket az emberek információszerzés céljából olvasnak. A címsoroknak, képaláírásoknak, UI-címkéknek és marketing szövegeknek más korlátaik vannak, és ezeknél lehet hajlítani a szabályokon.

De ha valaki azért érkezett az oldalára, hogy elolvasson egy cikket, egy dokumentációs oldalt vagy egy termékleírást, az olvasható betűszedés nem opcionális. Ez az alapelvárás.