Line-height
A line-height a szövegsorok közötti függőleges távolság. Túl szűk értéknél a sorok összetapadnak, túl nagy értéknél pedig a bekezdés elveszítheti az egységét.
Röviden
A line-height a szövegsorok közötti függőleges távolság. Túl szűk értéknél a sorok összetapadnak, túl nagy értéknél pedig a bekezdés elveszítheti az egységét.
Vizuálisan
A sortáv az olvasási ritmust szabályozza
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
Túl szűk vagy túl laza sorok
A megfelelő sortáv segít abban, hogy a szem könnyen megtalálja a következő sort, miközben a bekezdés továbbra is egy összefüggő egység marad.
Szűk sortávnál a sorok összefolynak, túl laza sortávnál pedig a bekezdés szétesik és lassabbá válik a következő sor megtalálása.
✓
HELYES IRÁNY
A sorok különállók, mégis egy bekezdést alkotnak
A megfelelő sortáv segít abban, hogy a szem könnyen megtalálja a következő sort, miközben a bekezdés továbbra is egy összefüggő egység marad.
A kényelmes sortáv segít megtartani a horizontális és vertikális olvasási ritmust egyszerre.
Mit jelent a line-height?
A line-height a szövegsorok közötti függőleges távolság. Túl szűk értéknél a sorok összetapadnak, túl nagy értéknél pedig a bekezdés elveszítheti az egységét.
A megfelelő sortáv csökkenti annak esélyét, hogy a szem eltévedjen sorváltáskor, és javítja a hosszabb szövegek olvasási ritmusát.
A legfontosabb alapelvek
- Body szövegnél általában lazább sortáv kell, mint nagy headingnél.
- A line-height legyen arányos a fonttal és a sorszélességgel.
- Többsoros gomb- vagy címkeszöveget külön tesztelj.
Gyakorlati példa
Egy 16px body 1.5–1.7 körüli line-heighttal gyakran kényelmesebb, míg egy 48px display heading ennél jóval szorosabb arányt is elbírhat.
Túl szűk, megfelelő és túl laza sortáv
Túl szűk
Egy rövid bekezdés több sorban mutatja meg a sortáv hatását az olvasási ritmusra.
Kényelmes
Egy rövid bekezdés több sorban mutatja meg a sortáv hatását az olvasási ritmusra.
Túl laza
Egy rövid bekezdés több sorban mutatja meg a sortáv hatását az olvasási ritmusra.
Gyakori hibák
- Headingre túl laza sortáv.
- Bodyra 1.1 körüli szűk sortáv.
- Fix px line-height, ami fontváltásnál szétesik.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A line-height 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 line-height?
A megfelelő sortáv csökkenti annak esélyét, hogy a szem eltévedjen sorváltáskor, és javítja a hosszabb szövegek olvasási ritmusát.
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.