Betűméret UI-ban
A betűméret nem önmagában határozza meg az olvashatóságot, de alapvetően befolyásolja a pásztázhatóságot, a hierarchiát és azt, mennyi tartalom fér el kényelmesen különböző eszközökön.
Röviden
A betűméret nem önmagában határozza meg az olvashatóságot, de alapvetően befolyásolja a pásztázhatóságot, a hierarchiát és azt, mennyi tartalom fér el kényelmesen különböző eszközökön.
Vizuálisan
A betűméretet kontextusban kell megítélni
Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.
×
GYAKORI HIBA
Minden kisebb, hogy több férjen ki
Ez a fő törzsszöveg, amelyet hosszabb ideig is kényelmesen kell olvasni.
Másodlagos információ
A túl kicsi szöveg csökkenti az olvashatóságot, a meta és a törzsszöveg pedig könnyen összemosódik.
✓
HELYES IRÁNY
A méret a tartalmi szerepet követi
Ez a fő törzsszöveg, amelyet hosszabb ideig is kényelmesen kell olvasni.
Másodlagos információ
A fő szöveg kényelmesen olvasható, a másodlagos információ kisebb, de nem válik nehezen észlelhetővé.
Mit jelent a betűméret ui-ban?
A betűméret nem önmagában határozza meg az olvashatóságot, de alapvetően befolyásolja a pásztázhatóságot, a hierarchiát és azt, mennyi tartalom fér el kényelmesen különböző eszközökön.
Ugyanaz a px érték különböző betűtípusoknál eltérő optikai méretű lehet. Emiatt a méretet valódi fonttal, valódi tartalommal és több viewporton érdemes tesztelni.
A legfontosabb alapelvek
- Body text legyen kényelmesen olvasható.
- A címek közötti lépcső legyen látható, de ne extrém.
- Mobilon se zsugoríts mindent arányosan.
- A font-size és line-height együtt értelmezendő.
Gyakorlati példa
Egy 16px body lehet jó kiindulópont sok felületen, de egy vékony, kis x-heighttal rendelkező font ugyanilyen méretben kisebbnek érződhet, mint egy robusztus groteszk.
Következetes tipográfiai skála
Főcím és fókusz
Szekciócím vagy fontos állítás
A törzsszöveg nyugodtabb vizuális szintet kap, ezért a felhasználó gyorsan különbséget tud tenni a tartalmi szerepek között.
Gyakori hibák
- 10–12px törzsszöveg fontos tartalomhoz.
- Minden breakpointon teljesen más skála.
- Csak desktop screenshot alapján dönteni.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A betűméret ui-ban akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.
Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.
A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.
Hogyan teszteld a tipográfiát?
Ne csak Figma 100%-os zoomon nézd. Olvasd a valódi szöveget telefonon, laptopon és nagyobb kijelzőn is, lehetőleg normál használati távolságból. Figyeld, hol törik a sor, mennyi idő alatt találod meg a következő alcímet, és mennyire fárasztó több bekezdést egymás után elolvasni.
A tipográfiai rendszer akkor erős, ha kevesebb stílussal is egyértelmű marad a struktúra. Ha egy szint csak azért különül el, mert kapott még egy random font-size-ot, érdemes előbb a súlyt, spacinget, kontrasztot és tartalmi szerepet rendbe tenni.
- valós eszközön kényelmesen olvasható
- pásztázáskor gyorsan megtalálhatók a headingek
- zoom vagy hosszabb szöveg mellett is stabil marad
Gyakori kérdések
Miért fontos a betűméret ui-ban?
Ugyanaz a px érték különböző betűtípusoknál eltérő optikai méretű lehet. Emiatt a méretet valódi fonttal, valódi tartalommal és több viewporton érdemes tesztelni.
Mikor érdemes tesztelni?
Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.