Line Height az alkalmazásfejlesztésben — mi ez és hatása a tipográfiára

Mi az a Line Height a tipográfiában

Line Height (sormagasság) — a tipográfia alapvető paramétere, amely meghatározza az egymást követő sorok alapvonalai (baseline) közötti távolságot. A web- és mobilfejlesztésben a line height határozza meg a szöveg vertikális ritmusát: minden sor egy bizonyos magasságot foglal el, és ez a paraméter összegződik a következő sorra váltáskor. A line height nemcsak a glifék tényleges magasságát (ascender + descender) foglalja magában, hanem a további helyet is, amely javítja az olvashatóságot.

Matematikailag a line height a következőképpen fejezhető ki: line-height = font-size × multiplier. Ha a font-size = 16 px és a multiplier = 1.5, akkor a line-height = 24 px. A sorköz (leading) ebben az esetben 24 - (ascender + descender) pixel. A legtöbb dizájnrendszer és platform pontosan a szorzót használja, mivel az automatikusan skálázódik a betűméret változásakor.

A Material Design Type Scale (2025) adatai szerint a line height — a font-size és a font-weight mellett az alkalmazás tipográfiai rendszerének egyik kulcsparamétere. A tipográfiai hierarchia minden szintjére összehangolt line height értékek olyan vertikális ritmust hoznak létre, amely vizuálisan egységes felületet eredményez. A line-height 10%-os eltérése az optimális értéktől már szabad szemmel is látható, és csökkenti a felület érzékelt minőségét.

Line Height vs Leading: mi a különbség

Leading (kiejtése „lending") — egy történelmi tipográfiai kifejezés, amely a sorok közötti távolságot jelöli a baselinetől baseline-ig, mínusz a glifék magassága. A fém szedésben a leading — ólomcsíkok, amelyeket a sorok közé helyeztek a távolság növelése érdekében. A line height — egy modernebb fogalom, amely magában foglalja a betűmagasságot és a leadinget is.

A gyakorlatban a különbség a Figma vagy Sketch makettek kódba való átvitelénél fontos. A tervezőeszközök általában line-height-ot (vagy egyszerűen sormagasságot) jeleznek. A mobil platformokon az API különbözőképpen nevezhető: iOS a lineSpacing kifejezést használja (ami közelebb áll a leadinghez) a minimumLineHeight/maximumLineHeight mellett, Android — LineHeightStyle alignment és trim paraméterekkel, Flutter — height (unitless multiplier).

// iOS: különbség a line height és a line spacing között
let paragraphStyle = NSMutableParagraphStyle()

// 1. Közvetlen line height beállítás
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Sorköz (további hely a sorok között)
paragraphStyle.lineSpacing = 4.0  // hozzáadva a betűkészlet természetes line height-jához

A legfontosabb különbség: ha beállítja a minimumLineHeight-ot, minden sor azonos magasságú lesz, ami jó a ritmikus rácshoz. Ha csak a lineSpacing-et állítja be, a sormagasság a betűmérettől függően változik — ez rugalmasabb, de kevésbé kiszámítható megközelítés. Dizájnrendszerekhez a minimumLineHeight használata javasolt, mivel szigorúan kontrollált eredményt ad.

Az IBM Carbon Design System — Typography Guidelines (2025) adatai szerint a line height és a leading közötti különbség különösen észlelhető egyéni betűkészletek használatakor. Ha a betűkészletnek nagy a beépített leadingje (pl. SF Pro), a lineSpacing = 0 elfogadható eredményt ad. Ha a betűkészlet leadingje kicsi (egyes nyílt forráskódú betűtípusok), további lineSpacing nélkül a sorok összetapadtnak tűnnek.

Optimális Line Height mobil felületekhez

Az optimális line height több tényezőtől függ: betűmérettől, sorhossztól, betűkészlettől és a célközönségtől. Mobileszközökön a fő szöveghez (35–55 karakteres sorköz) az ajánlott tartomány a font-size 1.4–1.6-szorosa. Ez az érték elegendő vertikális intervallumot biztosít a kényelmes szemmozgáshoz a sorok között anélkül, hogy a szöveg vizuális összetartása megszűnne.

A címeknél, ahol a sorköz általában rövidebb (2–6 szó), a line height kisebb lehet — a font-size 1.1–1.25-szorosa. A címek nem igényelnek nagy sorközt, mivel elsődleges funkciójuk a figyelemfelkeltés, nem a hosszú olvasás. Továbbá a nagy címméretek (24–32 pt) 1.5-ös line-height mellett túlzott helyet hoznának létre, ami megzavarná az oldal vertikális ritmusát.

• Fő szöveg (16–18 pt) — line-height 1.4–1.6. Minimális a kényelmes olvasáshoz mobileszközökön, ahol a sorköz a képernyő szélessége korlátozza.
• Kis szöveg (11–13 pt) — line-height 1.3–1.5. A kis méret kisebb szorzót igényel, mivel a sorok rövidebbek, és a szem gyorsabban megtalálja a következő sort.
• Nagy szöveg (20–32 pt) — line-height 1.1–1.25. Minél nagyobb a betű, annál kevesebb relatív sorköz szükséges az olvashatósághoz.
• Monospace szöveg — line-height 1.3–1.5. A monospace betűkészletek (kódhoz) általában nagyobb metrikákkal rendelkeznek, ezért a line-height 1.3-ra csökkenthető.

// Flutter: line height a dizájnrendszerben
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

A W3C — Accessibility Requirements for Typography (2025) adatai szerint a fő szöveg 1.2 alatti line height-ja akadályozottsági korlátnak minősül: a diszlexiában és látászavarban szenvedő felhasználók jelentős nehézségeket tapasztalnak a sűrű szöveg olvasásakor. A WCAG 2.2 legalább 1.5-ös line-height-ot javasol a fő tartalomhoz, azonban a mobil felületeken ez az érték 1.4-re csökkenthető a korlátozott képernyőszélesség miatt.

Line Height iOS-ben: UIKit és SwiftUI

iOS-ben a line height kezelése NSMutableParagraphStyle-on vagy a SwiftUI beépített módosítóin keresztül történik. A UIKit-ben három kulcsfontosságú tulajdonság érhető el: a minimumLineHeight és a maximumLineHeight (a sor pontos magasságát adják meg) és a lineSpacing (további hely a sorok között). A TextKit (NSTextStorage, NSLayoutManager) használatakor a line height figyelembe van véve a lineFragmentRect-ben, és befolyásolja a szövegblokk geometriájának számítását.

// iOS UIKit: line height beállítása NSMutableParagraphStyle-on keresztül
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Fontos: minimum + maximum = rögzített line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

SwiftUI-ben a line height beállítása a .lineSpacing(value) módosítón keresztül történik, amely további helyet ad a sorok közé, vagy a .font-on keresztül egy egyéni TextStyle-szel, amely tartalmazza a line height-ot. A SwiftUI támogatja a dinamikus típusokat is: a beállított line height skálázódik, amikor a felhasználó módosítja a betűméretet a beállításokban.

// SwiftUI: line height lineSpacing-en keresztül
Text("Szöveg egyéni sorközzel
második sor
harmadik sor")
    .font(.body)
    .lineSpacing(4)     // további hely a sorok között

// SwiftUI: rögzített line height egyéni stíluson keresztül
Text("Cím 1.2-es line height-tal")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // kompenzáció a pontos line-height-hoz

Az Apple HIG — Typography Implementation (2025) adatai szerint a rögzített line-height minimumLineHeight-on keresztüli használatakor meg kell győződni arról, hogy az érték nem kisebb, mint a betűkészlet természetes line-height-ja. Ha a minimumLineHeight kisebb, mint ascender + descender, a UIKit figyelmen kívül hagyja a beállítást és a természetes magasságot használja. Ez váratlan eredményekhez vezethet a betűkészlet vagy -méret megváltoztatásakor.

Line Height Androidban: View-rendszer és Compose

Android fejlesztésben a line height eltérően kezelendő a klasszikus View-rendszerben és a Jetpack Compose-ban. A View-rendszerben a TextView.setLineSpacing(extra, multiplier) metódus használatos. Az extra paraméter — további hely pixelekben, a multiplier — a sor természetes magasságának szorzója. Az eredmény magasság = természetes line-height × multiplier + extra.

// Android View rendszer: sorköz
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Használat XML-ben
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Jetpack Compose-ban a line height kezelésére a LineHeightStyle osztály szolgál, amely lehetővé teszi a sorköz igazításának (Alignment) és vágásának (Trim) beállítását. Ez finomabb vezérlést biztosít, mint egy egyszerű szorzó. Például megadható, hogy a további sorköz egyenletesen oszoljon el a sor felett és alatt (align.Center), vagy teljes egészében a sor felett jelenjen meg (align.Top).

// Jetpack Compose: LineHeightStyle példa
Text(
    text = "Példa szöveg
egyéni LineHeightStyle-val
Jetpack Compose-ban",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Egyszerű szorzó TextStyle-en keresztül
Text(
    text = "Line height szorzó",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Az Android Developers — Compose Text Styling (2025) adatai szerint a LineHeightStyle.Trim.None (alapértelmezett) megtartja az első és utolsó sort helyközzel, ami megzavarhatja az igazítást Card-ban vagy Column-ban. Javasolt a Trim.Both használata rögzített magasságú konténerekhez és a Trim.LastLine olyan szövegblokkokhoz, ahol az alsó él fontos.

Line Height Flutterben: TextStyle és StrutStyle

Flutter-ben a line height beállítása a TextStyle osztály height tulajdonságán keresztül történik. Ez a font-size unitless szorzója: a height: 1.5 fontSize: 16 mellett line-height 24.0-t ad. A height érték implicit módon szorzódik a fontSize-szal, így a méret változásakor a line-height arányosan skálázódik. A Flutter StrutStyle-t is kínál — egy mechanizmust a rögzített line-height kikényszerítésére, függetlenül a sor tényleges gliféitől.

// Flutter: line height TextStyle.height-on keresztül
Text(
    'Szöveg 1.5-ös line height-tal',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle a rögzített line height-hoz
Text(
    'Szöveg StrutStyle-lal
rögzített line height
gliféktől függetlenül',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle különösen hasznos a különböző méretű listákhoz (pl. csevegések, hírfolyamok), ahol az összes sor magasságának azonosnak kell lennie a tartalomtól függetlenül. StrutStyle nélkül egy olyan sor, amely csak descender nélküli betűket tartalmaz, kisebb tényleges magasságú lesz, mint egy „p" és „y" betűket tartalmazó sor, ami a szöveg remegéséhez vezet görgetéskor.

A Flutter Documentation — Text Layout (2025) adatai szerint a forceStrutHeight: true beállítással rendelkező StrutStyle garantálja, hogy minden sor magassága megegyezik a beállított értékkel, a tényleges glifék pedig a baseline mentén igazodnak ezen a téren belül. Ez a szabványos megközelítés az olyan szöveges listákhoz, ahol a vertikális ritmus kritikus a vizuális érzékelés szempontjából.

Adaptív Line Height különböző kijelzőkhöz

A mobilalkalmazások különböző képernyőméretű, pixelsűrűségű és akadálymentesítési beállításokkal rendelkező eszközökön futnak. Line height-nak alkalmazkodnia kell ezekhez a változásokhoz, megtartva az olvashatóságot. Az alapvető szabály: használjon mértékegység nélküli szorzókat (unitless), ne rögzített px vagy pt értékeket, hogy a line-height együtt skálázódjon a font-size-szal.

A Dynamic Type (iOS) vagy a fontScale (Android) használatakor a betűméret 20–50%-kal nőhet az alaphoz képest. A szorzón keresztül beállított line-height automatikusan skálázódik. Ha a line-height rögzített értékkel van beállítva (pl. 24 px 16 pt font-size mellett), a betűméret 22 pt-re növelésekor a relatív line-height 1.09-re csökken — ami már az olvashatósági küszöb alatt van.

// iOS: adaptív line height Dynamic Type-pal
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Számítsa ki a line-height-ot a dinamikus betűkészlet szorzójaként
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

A Material Design — Responsive Typography (2025) adatai szerint a táblagépekhez és nagy képernyőkhöz (600 dp feletti szélesség) a fő szöveg line-height-ját 0.1–0.2-vel javasolt növelni a telefonokhoz képest, mivel a sorköz hosszabb lesz. A hajtogatható eszközök esetében, ahol a képernyő szélessége dinamikusan változik, a line-height-ot minden konfigurációváltáskor újra kell számolni.