Line Height ve vývoji aplikací — co to je a vliv na typografii

Co je Line Height v typografii

Line Height (výška řádku) — je základní typografický parametr, který určuje vzdálenost mezi základními liniemi (baseline) po sobě jdoucích řádků. Ve vývoji webu a mobilních aplikací line height stanovuje vertikální rytmus textu: každý řádek zabírá určitou výšku a tento parametr se sčítá při přechodu na další řádek. Line height zahrnuje nejen skutečnou výšku glyfů (ascender + descender), ale také dodatečný prostor zlepšující čitelnost.

Matematicky se line height vyjadřuje jako: line-height = font-size × multiplier. Pokud font-size = 16 px a multiplier = 1.5, pak line-height = 24 px. Řádkování (leading) v tomto případě činí 24 - (ascender + descender) pixelů. Většina designových systémů a platforem používá právě násobitel, protože se automaticky škáluje při změně velikosti písma.

Podle Material Design Type Scale (2025) je line height — jeden ze tří klíčových parametrů typografického systému aplikace vedle font-size a font-weight. Konzistentní hodnoty line height pro všechny úrovně typografické hierarchie vytvářejí vertikální rytmus, který činí rozhraní vizuálně soudržným. Odchylka line-height o 10 % od optimální hodnoty je již patrná pouhým okem a snižuje vnímanou kvalitu rozhraní.

Line Height vs Leading: jaký je rozdíl

Leading (vyslovuje se „lending") — je historický typografický termín označující vzdálenost mezi řádky od baseline k baseline minus výška glyfů. V kovové sazbě leading — olověné proužky vkládané mezi řádky pro zvětšení vzdálenosti. Line height — modernější pojem zahrnující jak výšku písma, tak leading.

V praxi je rozdíl důležitý při převodu návrhů z Figmy nebo Sketch do kódu. Návrhové nástroje obvykle uvádějí line-height (nebo jednoduše výšku řádku). Na mobilních platformách se API může nazývat různě: iOS používá termín lineSpacing (bližší leading) spolu s minimumLineHeight/maximumLineHeight, Android — LineHeightStyle s alignment a trim, Flutter — height (unitless multiplier).

// iOS: rozdíl mezi line height a line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Přímé nastavení line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Řádkování (dodatečný prostor mezi řádky)
paragraphStyle.lineSpacing = 4.0  // přidáno k přirozenému line height písma

Klíčový rozdíl: pokud nastavíte minimumLineHeight, všechny řádky budou mít stejnou výšku, což je dobré pro rytmickou mřížku. Pokud nastavíte pouze lineSpacing, výška řádku se bude měnit v závislosti na velikosti písma — flexibilnější, ale méně předvídatelný přístup. Pro designové systémy se doporučuje používat minimumLineHeight, protože poskytuje přísně kontrolovaný výsledek.

Podle IBM Carbon Design System — Typography Guidelines (2025) je rozdíl mezi line height a leading zvláště patrný při použití vlastních písem. Pokud má písmo velký vestavěný leading (např. SF Pro), lineSpacing = 0 poskytuje přijatelný výsledek. Pokud je leading písma malý (některá open-source písma), bez dodatečného lineSpacing budou řádky vypadat slepené.

Optimální Line Height pro mobilní rozhraní

Optimální line height závisí na několika faktorech: velikosti písma, délce řádku, písmu a cílové skupině. Pro hlavní text na mobilních zařízeních (délka řádku 35–55 znaků) je doporučený rozsah 1.4–1.6 font-size. Tato hodnota poskytuje dostatečný vertikální interval pro pohodlný přesun pohledu mezi řádky bez ztráty vizuální soudržnosti textu.

Pro nadpisy, kde je délka řádku obvykle kratší (2–6 slov), může být line height menší — 1.1–1.25 font-size. Nadpisy nevyžadují velké řádkování, protože jejich hlavní funkcí je přitahování pozornosti, nikoli dlouhé čtení. Kromě toho by velké velikosti nadpisů (24–32 pt) s line-height 1.5 vytvořily nadměrné mezery narušující vertikální rytmus stránky.

• Hlavní text (16–18 pt) — line-height 1.4–1.6. Minimální pro pohodlné čtení na mobilních zařízeních, kde je délka řádku omezena šířkou obrazovky.
• Malý text (11–13 pt) — line-height 1.3–1.5. Malá velikost vyžaduje menší násobitel, protože řádky jsou kratší a oko rychleji najde další řádek.
• Velký text (20–32 pt) — line-height 1.1–1.25. Čím větší písmo, tím méně relativního řádkování je potřeba pro čitelnost.
• Monospace text — line-height 1.3–1.5. Monospace písma (pro kód) mají obvykle větší metriky, proto lze line-height snížit na 1.3.

// Flutter: line height v designovém systému
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
    );
}

Podle W3C — Accessibility Requirements for Typography (2025) je line height pod 1.2 pro hlavní text považován za bariéru přístupnosti: uživatelé s dyslexií a zrakovým postižením mají značné potíže při čtení hustého textu. WCAG 2.2 doporučuje line-height alespoň 1.5 pro hlavní obsah, avšak v mobilních rozhraních lze tuto hodnotu snížit na 1.4 s ohledem na omezenou šířku obrazovky.

Line Height v iOS: UIKit a SwiftUI

V iOS je line height spravován pomocí NSMutableParagraphStyle nebo vestavěných modifikátorů SwiftUI. V UIKit jsou k dispozici tři klíčové vlastnosti: minimumLineHeight a maximumLineHeight (určují přesnou výšku řádku) a lineSpacing (dodatečný prostor mezi řádky). Při použití TextKit (NSTextStorage, NSLayoutManager) je line height zohledněn v lineFragmentRect a ovlivňuje výpočet geometrie textového bloku.

// iOS UIKit: nastavení line height přes NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Důležité: minimum + maximum = pevný 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
)

V SwiftUI se line height nastavuje pomocí modifikátoru .lineSpacing(value), který přidává dodatečný prostor mezi řádky, nebo pomocí .font s vlastním TextStyle zahrnujícím line height. SwiftUI také podporuje dynamické typy: nastavený line height se škáluje, když uživatel změní velikost písma v nastavení.

// SwiftUI: line height přes lineSpacing
Text("Text s vlastním řádkováním
druhý řádek
třetí řádek")
    .font(.body)
    .lineSpacing(4)     // dodatečný prostor mezi řádky

// SwiftUI: pevný line height přes vlastní styl
Text("Nadpis s line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // kompenzace pro přesný line-height

Podle Apple HIG — Typography Implementation (2025) je při použití pevného line-height přes minimumLineHeight nutné zajistit, aby hodnota nebyla menší než přirozený line-height písma. Pokud je minimumLineHeight menší než ascender + descender, UIKit ignoruje nastavení a používá přirozenou výšku. To může vést k neočekávaným výsledkům při změně písma nebo velikosti.

Line Height v Android: View systém a Compose

Ve vývoji pro Android je line height spravován odlišně v klasickém View systému a Jetpack Compose. Ve View systému se používá metoda TextView.setLineSpacing(extra, multiplier). Parametr extra — dodatečný prostor v pixelech, multiplier — násobitel přirozené výšky řádku. Výsledná výška = přirozený line-height × multiplier + extra.

// Android View systém: řádkování
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Použití v XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

V Jetpack Compose se pro správu line height používá třída LineHeightStyle, která umožňuje nastavit zarovnání (Alignment) a oříznutí (Trim) řádkového prostoru. To poskytuje jemnější kontrolu než jednoduchý násobitel. Lze například určit, že dodatečný řádkový prostor by měl být rozdělen rovnoměrně nad a pod řádek (align.Center) nebo zcela přidán nad řádek (align.Top).

// Jetpack Compose: příklad LineHeightStyle
Text(
    text = "Ukázkový text
s vlastním LineHeightStyle
v Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Jednoduchý násobitel přes TextStyle
Text(
    text = "Násobitel line height",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Podle Android Developers — Compose Text Styling (2025) LineHeightStyle.Trim.None (výchozí) zachovává první a poslední řádek s mezerami, což může narušit zarovnání v Card nebo Column. Doporučuje se používat Trim.Both pro kontejnery s pevnou výškou a Trim.LastLine pro textové bloky, kde je důležitý spodní okraj.

Line Height ve Flutter: TextStyle a StrutStyle

Ve Flutter se line height nastavuje pomocí vlastnosti height třídy TextStyle. Jedná se o unitless násobitel font-size: height: 1.5 při fontSize: 16 dává line-height 24.0. Hodnota height se implicitně násobí fontSize, takže při změně velikosti se line-height proporcionálně škáluje. Flutter také nabízí StrutStyle — mechanismus pro vynucení pevného line-height nezávisle na skutečných glyfech v řádku.

// Flutter: line height přes TextStyle.height
Text(
    'Text s line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle pro pevný line height
Text(
    'Text s StrutStyle
pevný line height
nezávislý na glyfech',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle je zvláště užitečný pro seznamy s různými velikostmi (např. chaty, zpravodajské kanály), kde všechny řádky musí mít stejnou výšku bez ohledu na obsah. Bez StrutStyle bude řádek obsahující pouze písmena bez descender mít menší skutečnou výšku než řádek s písmeny „p" a „y", což vede k chvění textu při rolování.

Podle Flutter Documentation — Text Layout (2025) StrutStyle s forceStrutHeight: true zaručuje, že výška každého řádku bude rovna nastavené hodnotě, zatímco skutečné glyfy budou zarovnány na baseline v rámci tohoto prostoru. Toto je standardní přístup pro textové seznamy, kde je vertikální rytmus kritický pro vizuální vnímání.

Adaptivní Line Height pro různé obrazovky

Mobilní aplikace běží na zařízeních s různými velikostmi obrazovky, hustotami pixelů a nastavením přístupnosti. Line height se musí těmto změnám přizpůsobit a zachovat čitelnost. Základní pravidlo: používejte bezrozměrné násobitele (unitless), nikoli pevné hodnoty v px nebo pt, aby se line-height škáloval spolu s font-size.

Při použití Dynamic Type (iOS) nebo fontScale (Android) se velikost písma může zvýšit o 20–50 % oproti základní. Line-height nastavený pomocí násobitele se automaticky škáluje. Pokud je line-height nastaven jako pevná hodnota (např. 24 px při font-size 16 pt), při zvýšení písma na 22 pt se relativní line-height sníží na 1.09 — což je již pod prahem čitelnosti.

// iOS: adaptivní line height s Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Vypočtěte line-height jako násobitel z dynamického písma
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Podle Material Design — Responsive Typography (2025) se pro tablety a velké obrazovky (šířka nad 600 dp) doporučuje zvýšit line-height hlavního textu o 0.1–0.2 oproti telefonům, protože délka řádku se zvětšuje. Pro skládací zařízení, kde se šířka obrazovky dynamicky mění, by se line-height měl přepočítávat při každé změně konfigurace.