Leading és sorköz: mi ez és beállítása iOS és Android rendszeren

Mi a leading és a sorköz

Leading (kiejtése „lending”) — a szomszédos sorok alapvonalai közötti függőleges távolság a tipográfiában. Az alapvonal — a láthatatlan vonal, amelyen a szöveg karakterei elhelyezkednek. Minél nagyobb a leading, annál szabadabban helyezkednek el a sorok egymáshoz képest. A digitális tipográfiában a leadinget gyakran sorköznek vagy sormagasságnak nevezik.

Történelmileg a kifejezés a fémtipográfia korában jelent meg: a szedők vékony ólomcsíkokat helyeztek a sorok közé a távolság növelésére. A modern betűtípusokban a leadinget a betűméret arányaként határozzák meg. A rendszer alapértelmezett értéke 1.2 (a betűméret 120%-a), de hosszú szövegekhez és mobil interfészekhez nagyobb érték ajánlott. A Material Design Typography Útmutató szerint az optimális sormagasság webes és mobil interfészekhez 1.4-1.5 a fő szöveghez.

Különbség a leading és a line spacing között: a leading — a teljes távolság az alapvonaltól az alapvonalig, a line spacing — az egyik sor alsó határa és a következő sor felső határa közötti távolság. A legtöbb mobil API-ban (iOS NSParagraphStyle, Android TextView) pontosan a line spacinget használják kiegészítő távolságként a sor természetes magasságán felül. Ezt figyelembe kell venni a teljes sorköz kiszámításakor.

Optimális leading értékek mobil interfészekhez

Az optimális leading kiválasztása több tényezőtől függ: betűméret, sorhossz, használati kontextus és közönség. A tipikus 40-60 karakteres sorközzel rendelkező mobil interfészekhez a betűméret 1.4 és 1.6 közötti leadingje ajánlott. A rövid sorok (címkék, gombok) kisebb leadinget használhatnak — 1.0-1.2. A hosszú szövegek (cikkek, leírások) — nagyobb leadinget, akár 1.8-ig a maximális olvashatóság érdekében.

Kísérleti adatok: a Wichita State University Software Usability Laboratory kutatása kimutatta, hogy a 1.5-ös leading 7.5%-kal növeli az olvasási sebességet az 1.0-ás leadinghez képest azonos sorközzel. A diszlexiás felhasználók számára az optimális leading még magasabb — akár 1.8-ig. Ezeket az adatokat a WCAG 2.2 ajánlásai is megerősítik, amelyek megkövetelik a sorköz 1.5-ig történő növelésének lehetőségét tartalomvesztés nélkül.

A betűtípus hatása: a magas x-height-tel (a kisbetűk relatív magassága) rendelkező betűtípusok nagyobb leadinget igényelnek, mint az alacsony x-height-tel rendelkezők. Például a Helvetica (magas x-height) 1.5-ös leadinget ajánl a törzsszöveghez, míg a Didot (alacsony x-height) — 1.3-at. Ennek oka, hogy magas x-height esetén a sorok vizuálisan gyorsabban összeolvadnak azonos sorköz mellett.

Leading megvalósítása iOS-en NSParagraphStyle segítségével

iOS-en a sorköz az NSMutableParagraphStyle osztályon keresztül kezelhető, amely két kulcsfontosságú tulajdonságot tartalmaz: lineSpacing (kiegészítő távolság a sorok között pontokban) és lineHeightMultiple (a sor magasságának szorzója). Ezek a tulajdonságok együtt működnek: a teljes sormagasság a betűtípus természetes magassága szorozva a lineHeightMultiple-lel plusz a lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// 1. módszer: sormagasság szorzó
paragraphStyle.lineHeightMultiple = 1.5

// 2. módszer: kiegészítő távolság a sorok között
paragraphStyle.lineSpacing = 4.0

// Alkalmazza NSAttributedString segítségével
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — az előnyben részesített módszer, mivel automatikusan skálázódik a betűméret változásakor. A lineSpacing abszolút pontokban van megadva és nem skálázódik, ami eltérésekhez vezethet a Dynamic Type használatakor. Az Apple Text Programming Guide szerint az accessibility-kompatibilis interfészekhez használja a lineHeightMultiple-t UIFontMetrics-szel kombinálva.

SwiftUI a .lineSpacing() módosítót biztosítja a Text és VStack elemekhez. A UIKit-kel ellentétben a SwiftUI-ben a sorköz pontokban van megadva, és nincs beépített szorzója. A szorzó megvalósításához a fejlesztőnek manuálisan kell kiszámítania a sorközt a betűméret alapján. Korlátozás: a SwiftUI nem támogatja közvetlenül a lineHeightMultiple-t — használja a .lineSpacing(CGFloat)-et kiszámított értékkel.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // A betűméret 50%-a
    }

    var body: some View {
        Text("Sorköz")
        Text("1.5-ös szorzó")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Sorköz beállítása Android rendszeren

Androidon a sorköz két TextView attribútumon keresztül állítható be: lineSpacingExtra (kiegészítő távolság px-ben) és lineSpacingMultiplier (a sormagasság szorzója, alapértelmezett 1.0). Az iOS-hez hasonlóan a szorzó skálázódik a betűméret változásakor, míg az extra egy abszolút érték. Az accessibility-kompatibilis interfészekhez a szorzó használata előnyösebb.

// XML elrendezésben
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Programozottan Kotlin-ban
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — a modern Android UI keretrendszer — a lineHeight paramétert használja a TextStyle módosítóban. Az XML megközelítéssel ellentétben a Compose-ban a lineHeight a sor teljes magasságaként van megadva sp-ben (alapértelmezett = fontSize * 1.2). A szorzó beállításához a fejlesztő a lineHeight-t a fontSize százalékában adja meg: Példa: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) 1.5-ös szorzót eredményez.

Korlátozás: Android API 28 előtt a lineSpacingExtra és lineSpacingMultiplier nem működik megfelelően bizonyos betűtípusokkal, különösen az egyéni (TTF/OTF) betűtípusokkal. Javasolt valós eszközökön tesztelni, és figyelembe venni, hogy a systemTextView alapértelmezés szerint lineSpacingMultiplier 1.0-t használ — kiegészítő távolság nélkül. Hosszú szövegek esetén a ScrollView-ban kifejezetten állítsa be a sorközt.

Sorköz a webfejlesztésben CSS line-height segítségével

A weben a sorköz a line-height CSS tulajdonsággal állítható be, amely lehet szám (szorzó), százalékos érték, hosszegység (px, em) vagy a normal kulcsszó. A numerikus szorzó — az előnyben részesített módszer, mivel öröklődik és a gyermekelemek betűméretéhez viszonyítva skálázódik. A normal érték a legtöbb betűtípus esetében körülbelül 1.2-nek felel meg.

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

Numerikus szorzó vs em: a line-height: 1.5 és a line-height: 1.5em különböző dolgok. A numerikus szorzó számított értékként öröklődik, és minden gyermekelemre újraszámításra kerül a saját font-size-ja alapján. Az em a szülő font-size-ja alapján rögzített számított értékként öröklődik. Ez kritikus különbség: amikor a font-size: 20px a font-size: 16px-en belül van, a line-height: 1.5 30px-t ad, míg a line-height: 1.5em — 24px-t (a szülőtől). Javaslat: mindig numerikus szorzót használjon.

Leading beállítások összehasonlítása iOS, Android és web platformon

A különböző API-k ellenére a sorköz beállításának elve minden platformon azonos. A szorzó (multiplier) skálázódik a betűméret változásakor, és accessibility-barát. Az abszolút érték (spacing) nem skálázódik, és problémákhoz vezethet a Dynamic Type vagy a nagy szöveg beállítások használatakor.

Cross-platform stratégia: állítsa be a lineHeight-t a design rendszerben a fontSize szorzójaként. Például design tokenekben: line-height-body = 1.5, line-height-heading = 1.1. Minden platform a saját API-jával valósítja meg ezt a szorzót: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Ez garantálja az azonos vizuális eredményt minden platformon.

Fontos árnyalat: iOS-en a lineHeightMultiple a sor teljes magasságára vonatkozik (beleértve a betűtípus ascender + descender értékét), míg Androidon a lineSpacingMultiplier — a Minikin renderelő motor által kiszámított sormagasságra. A gyakorlatban ez kis különbségekhez vezet a vizuális leadingben azonos szorzóérték mellett. A pixel-perfect megfelelés érdekében használjon abszolút értékeket platform-specifikus korrekcióval.