Line Height у розробці застосунків — що це та вплив на типографіку

Що таке Line Height у типографіці

Line Height (висота рядка) — це фундаментальний типографічний параметр, що визначає відстань між базовими лініями (baseline) послідовних рядків. У веб- та мобільній розробці line height задає вертикальний ритм тексту: кожен рядок займає певну висоту, і цей параметр підсумовується при переході до наступного рядка. Line height включає не лише фактичну висоту гліфів (ascender + descender), але й додатковий простір, що покращує читабельність.

Математично line height виражається як: line-height = font-size × multiplier. Якщо font-size = 16 px, а multiplier = 1.5, то line-height = 24 px. Міжрядковий інтервал (leading) у цьому випадку становитиме 24 - (ascender + descender) пікселів. Більшість дизайн-систем і платформ використовують саме множник, оскільки він автоматично масштабується при зміні кегля.

За даними Material Design Type Scale (2025), line height — один із трьох ключових параметрів типографічної системи застосунку поряд із font-size та font-weight. Узгоджені значення line height для всіх рівнів типографічної ієрархії створюють вертикальний ритм, який робить інтерфейс візуально цілісним. Відхилення line-height на 10% від оптимального значення вже помітне неозброєним оком і знижує сприйману якість інтерфейсу.

Line Height vs Leading: у чому різниця

Leading (вимовляється «ле́динг») — це історичний типографічний термін, що позначає відстань між рядками від baseline до baseline за вирахуванням висоти гліфів. У металевому наборі leading — це свинцеві смужки, що вставлялися між рядками для збільшення відстані. Line height — більш сучасне поняття, що включає як висоту шрифту, так і leading.

На практиці різниця важлива при перекладі макетів з Figma або Sketch у код. У дизайн-інструментах зазвичай вказують line-height (або просто висоту рядка). У мобільних платформах API може називатися по-різному: iOS використовує термін lineSpacing (що ближче до leading) разом із minimumLineHeight/maximumLineHeight, Android — LineHeightStyle з alignment і trim, Flutter — height (unitless множник).

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

Ключова відмінність: якщо задати minimumLineHeight, то для всіх рядків використовуватиметься однакова висота, що добре для ритмічної сітки. Якщо задати тільки lineSpacing, висота рядка змінюватиметься залежно від розміру шрифту — це більш гнучкий, але менш передбачуваний підхід. Для дизайн-систем рекомендується використовувати minimumLineHeight, оскільки він дає строго контрольований результат.

За даними IBM Carbon Design System — Typography Guidelines (2025), різниця між line height і leading особливо помітна при використанні кастомних шрифтів. Якщо шрифт має великий вбудований leading (наприклад, SF Pro), lineSpacing = 0 дає прийнятний результат. Якщо leading шрифту малий (деякі open-source гарнітури), без додаткового lineSpacing рядки виглядатимуть злиплими.

Оптимальний Line Height для мобільних інтерфейсів

Оптимальний line height залежить від кількох факторів: розміру шрифту, довжини рядка, гарнітури та цільової аудиторії. Для основного тексту на мобільних пристроях (довжина рядка 35–55 символів) рекомендований діапазон — 1.4–1.6 від font-size. Це значення забезпечує достатній вертикальний інтервал для комфортного переведення погляду між рядками без втрати візуальної зв'язності тексту.

Для заголовків, де довжина рядка зазвичай коротша (2–6 слів), line height може бути меншим — 1.1–1.25 від font-size. Заголовки не потребують великого міжрядкового інтервалу, оскільки їхня основна функція — привернення уваги, а не тривале читання. Крім того, великі кеглі заголовків (24–32 pt) при line-height 1.5 створять надлишкові відступи, що порушують вертикальний ритм сторінки.

• Основний текст (16–18 pt) — line-height 1.4–1.6. Мінімальний для комфортного читання на мобільних пристроях, де довжина рядка обмежена шириною екрана.
• Малий текст (11–13 pt) — line-height 1.3–1.5. Малий кегль потребує меншого множника, оскільки рядки коротші й око швидше знаходить наступний рядок.
• Великий текст (20–32 pt) — line-height 1.1–1.25. Чим крупніший шрифт, тим менший відносний міжрядковий інтервал потрібен для читабельності.
• Моноширинний текст — line-height 1.3–1.5. Моноширинні шрифти (для коду) зазвичай мають більші метрики, тому line-height можна зменшити до 1.3.

// Flutter: line height in design system
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
    );
}

За даними W3C — Accessibility Requirements for Typography (2025), line height менше 1.2 для основного тексту вважається бар'єром доступності: користувачі з дислексією та порушеннями зору зазнають значних труднощів при читанні щільного тексту. WCAG 2.2 рекомендує line-height не менше 1.5 для основного контенту, однак у мобільних інтерфейсах це значення може бути знижено до 1.4 з урахуванням обмеженої ширини екрана.

Line Height в iOS: UIKit і SwiftUI

В iOS line height керується через NSMutableParagraphStyle або вбудовані модифікатори SwiftUI. У UIKit доступні три ключові властивості: minimumLineHeight та maximumLineHeight (задають точну висоту рядка) і lineSpacing (додатковий відступ між рядками). При використанні TextKit (NSTextStorage, NSLayoutManager) line height враховується в lineFragmentRect і впливає на розрахунок геометрії текстового блоку.

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed 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 line height задається через модифікатор .lineSpacing(value), який додає додатковий простір між рядками, або через .font з кастомним TextStyle, що включає line height. SwiftUI також підтримує динамічні типи: заданий line height масштабується при зміні користувачем розміру шрифту в налаштуваннях.

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

За даними Apple HIG — Typography Implementation (2025), при використанні фіксованого line-height через minimumLineHeight необхідно переконатися, що значення не менше природного line-height шрифту. Якщо minimumLineHeight менший, ніж ascender + descender, UIKit ігнорує налаштування і використовує природну висоту. Це може призводити до несподіваних результатів при зміні шрифту або кегля.

Line Height в Android: View-система і Compose

В Android розробці line height керується по-різному в класичній View-системі та Jetpack Compose. У View-системі використовується метод TextView.setLineSpacing(extra, multiplier). Параметр extra — додатковий простір у пікселях, multiplier — множник від природної висоти рядка. Підсумкова висота = природний line-height × multiplier + extra.

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

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

У Jetpack Compose для керування line height використовується клас LineHeightStyle, який дозволяє задати вирівнювання (Alignment) та обрізку (Trim) міжрядкового простору. Це дає більш тонкий контроль, ніж простий множник. Наприклад, можна вказати, що додатковий міжрядковий простір повинен розподілятися порівну вище та нижче рядка (align.Center) або повністю додаватися зверху (align.Top).

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

За даними Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (за замовчуванням) зберігає перший та останній рядки з відступами, що може порушувати вирівнювання в Card або Column. Рекомендується використовувати Trim.Both для контейнерів з фіксованою висотою та Trim.LastLine для текстових блоків, де важливий нижній край.

Line Height в Flutter: TextStyle і StrutStyle

У Flutter line height задається через властивість height класу TextStyle. Це unitless множник від font-size: height: 1.5 при fontSize: 16 дає line-height 24.0. Значення height неявно множиться на fontSize, тому при зміні кегля line-height масштабується пропорційно. Flutter також пропонує StrutStyle — механізм для форсування фіксованого line-height незалежно від фактичних гліфів у рядку.

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle особливо корисний для списків з різними кеглями (наприклад, чати, стрічки новин), де необхідно, щоб усі рядки мали однакову висоту незалежно від вмісту. Без StrutStyle рядок, що містить літери лише без descender, матиме меншу фактичну висоту, ніж рядок з літерами «р» та «у», що призводить до тремтіння тексту при прокручуванні.

За даними Flutter Documentation — Text Layout (2025), StrutStyle з forceStrutHeight: true гарантує, що висота кожного рядка дорівнюватиме заданому значенню, а фактичні гліфи будуть вирівняні по baseline у межах цього простору. Це стандартний підхід для текстових списків, де вертикальний ритм критичний для візуального сприйняття.

Адаптивний Line Height для різних екранів

Мобільні застосунки працюють на пристроях з різними розмірами екрана, щільностями пікселів та налаштуваннями доступності. Line height повинен адаптуватися до цих змін, зберігаючи читабельність. Основне правило: використовуй безрозмірні множники (unitless), а не фіксовані значення в px або pt, щоб line-height масштабувався разом із font-size.

При використанні Dynamic Type (iOS) або fontScale (Android) розмір шрифту може збільшуватися на 20–50% відносно базового. Line-height, заданий через множник, автоматично масштабується. Якщо ж line-height задано фіксованим значенням (наприклад, 24 px при font-size 16 pt), при збільшенні шрифту до 22 pt відносний line-height зменшиться до 1.09 — що вже нижче порогу читабельності.

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

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

За даними Material Design — Responsive Typography (2025), для планшетів та великих екранів (понад 600 dp ширини) line-height основного тексту рекомендується збільшувати на 0.1–0.2 відносно телефонів, оскільки довжина рядка стає більшою. Для foldable-пристроїв, де ширина екрана змінюється динамічно, line-height повинен перераховуватися при кожній зміні конфігурації.