Leading a řádkování: co to je a nastavení v iOS a Android

Co je leading a řádkování

Leading (vyslovuje se „lending”) — je svislá vzdálenost mezi základními liniemi sousedních řádků v typografii. Základní linie — neviditelná čára, na které jsou umístěny znaky textu. Čím větší je leading, tím volněji jsou řádky umístěny vůči sobě. V digitální typografii se leading často nazývá řádkování nebo výška řádku.

Historicky se termín objevil v éře kovové typografie: sazeči vkládali tenké olověné proužky mezi řádky pro zvětšení intervalu. V moderních písmech se leading určuje jako poměr k velikosti písma. Výchozí systémová hodnota je 1.2 (120 % velikosti písma), ale pro dlouhé texty a mobilní rozhraní se doporučuje vyšší hodnota. Podle pokynů pro typografii Material Design je optimální výška řádku pro webová a mobilní rozhraní 1.4–1.5 pro hlavní text.

Rozdíl mezi leading a line spacing: leading — plná vzdálenost od základní linie k základní linii, line spacing — vzdálenost mezi spodním okrajem jednoho řádku a horním okrajem následujícího. Ve většině mobilních API (iOS NSParagraphStyle, Android TextView) se používá právě line spacing jako dodatečný prostor nad přirozenou výškou řádku. To je důležité zohlednit při výpočtu celkového řádkování.

Optimální hodnoty leading pro mobilní rozhraní

Výběr optimálního leading závisí na několika faktorech: velikost písma, délka řádku, kontext použití a publikum. Pro mobilní rozhraní s typickou délkou řádku 40–60 znaků se doporučuje leading 1.4 až 1.6 velikosti písma. Krátké řádky (štítky, tlačítka) mohou používat menší leading — 1.0–1.2. Dlouhé texty (články, popisky) — větší leading, až 1.8 pro maximální čitelnost.

Experimentální data: výzkum Laboratoře použitelnosti softwaru Wichita State University ukázal, že leading 1.5 zvyšuje rychlost čtení o 7.5 % ve srovnání s leadingem 1.0 při stejné šířce řádku. Pro uživatele s dyslexií je optimální leading ještě vyšší — až 1.8. Tato data jsou potvrzena doporučeními WCAG 2.2, která vyžadují možnost zvýšení řádkování až na 1.5 bez ztráty obsahu.

Vliv typu písma: písma s vysokou x-height (relativní výška malých písmen) vyžadují větší leading než písma s nízkou x-height. Například Helvetica (vysoká x-height) doporučuje leading 1.5 pro hlavní text, zatímco Didot (nízká x-height) — 1.3. To je způsobeno tím, že při vysoké x-height se řádky vizuálně rychleji slévají při stejném řádkování.

Implementace leading na iOS pomocí NSParagraphStyle

Na iOS je řádkování řízeno pomocí třídy NSMutableParagraphStyle, která obsahuje dvě klíčové vlastnosti: lineSpacing (dodatečný prostor mezi řádky v bodech) a lineHeightMultiple (násobitel výšky řádku). Tyto vlastnosti pracují společně: celková výška řádku se vypočítá jako přirozená výška písma vynásobená lineHeightMultiple plus lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Metoda 1: násobitel výšky řádku
paragraphStyle.lineHeightMultiple = 1.5

// Metoda 2: dodatečný prostor mezi řádky
paragraphStyle.lineSpacing = 4.0

// Aplikujte pomocí NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — preferovaný způsob, protože se automaticky škáluje při změně velikosti písma. lineSpacing se nastavuje v absolutních bodech a neškáluje se, což může vést k nesrovnalostem při použití Dynamic Type. Podle Apple Text Programming Guide používejte pro rozhraní kompatibilní s accessibility lineHeightMultiple v kombinaci s UIFontMetrics.

SwiftUI poskytuje modifikátor .lineSpacing() pro Text a VStack. Na rozdíl od UIKit je ve SwiftUI řádkování nastaveno v bodech a nemá vestavěný násobitel. Pro implementaci násobitele musí vývojář ručně vypočítat řádkování na základě velikosti písma. Omezení: SwiftUI přímo nepodporuje lineHeightMultiple — použijte .lineSpacing(CGFloat) s vypočítanou hodnotou.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50 % velikosti písma
    }

    var body: some View {
        Text("Řádkování")
        Text("Násobitel 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Nastavení řádkování na Android

Na Android se řádkování nastavuje pomocí dvou atributů TextView: lineSpacingExtra (dodatečný prostor v px) a lineSpacingMultiplier (násobitel výšky řádku, výchozí 1.0). Podobně jako iOS, násobitel se škáluje při změně velikosti písma, zatímco extra je absolutní hodnota. Pro rozhraní kompatibilní s accessibility je použití násobitele preferováno.

// V XML rozvržení
<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" />

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

Compose — moderní Android UI framework — používá parametr lineHeight v modifikátoru TextStyle. Na rozdíl od přístupu XML je v Compose lineHeight nastaven jako plná výška řádku v sp (výchozí = fontSize * 1.2). Pro nastavení násobitele vývojář uvádí lineHeight jako procento z fontSize: Příklad: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) dává násobitel 1.5.

Omezení: na Android před API 28 lineSpacingExtra a lineSpacingMultiplier nefungují správně s některými písmy, zejména s vlastními (TTF/OTF). Doporučuje se testování na reálných zařízeních a zohlednění, ţe systemTextView ve výchozím nastavení pouţívá lineSpacingMultiplier 1.0 — bez dodatečného prostoru. Pro dlouhé texty v ScrollView explicitně nastavte řádkování.

Řádkování ve webovém vývoji pomocí CSS line-height

Na webu se řádkování nastavuje pomocí CSS vlastnosti line-height, která můţe být číslo (násobitel), procentuální hodnota, jednotky délky (px, em) nebo klíčové slovo normal. Číselný násobitel — preferovaný způsob, protože se dědí a škáluje relativně k velikosti písma podřízených elementů. Hodnota normal odpovídá přibliţně 1.2 pro většinu písem.

/* 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;
}

Číselný násobitel vs em: line-height: 1.5 a line-height: 1.5em jsou rozdílné věci. Číselný násobitel se dědí jako vypočítaná hodnota a přepočítává se pro kaţdý podřízený element na základě jeho font-size. Em se dědí jako pevná vypočítaná hodnota na základě font-size rodiče. To je kritický rozdíl: při vnoření font-size: 20px do font-size: 16px, line-height: 1.5 dá 30px, zatímco line-height: 1.5em — 24px (od rodiče). Doporučení: vţdy pouţívejte číselný násobitel.

Srovnání nastavení leading na iOS, Android a webu

Navzdory různým API je princip nastavení řádkování stejný na všech platformách. Násobitel (multiplier) se škáluje při změně velikosti písma a je přátelský k accessibility. Absolutní hodnota (spacing) se neškáluje a můţe vést k problémům při pouţití Dynamic Type nebo nastavení velkého textu.

Cross-platform strategie: nastavte lineHeight v designovém systému jako násobitel fontSize. Například v design tokenech: line-height-body = 1.5, line-height-heading = 1.1. Kaţdá platforma implementuje tento násobitel svým API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. To zaručuje stejný vizuální výsledek na všech platformách.

Důleţitý nuance: na iOS se lineHeightMultiple aplikuje na plnou výšku řádku (včetně ascender + descender písma), zatímco na Android se lineSpacingMultiplier aplikuje na výšku řádku vypočítanou renderovacím enginem Minikin. V praxi to vede k malým rozdílům ve vizuálním leading při stejné hodnotě násobitele. Pro pixel-perfect shodu pouţívejte absolutní hodnoty s úpravou pro platformu.