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) пикселей. Большинство дизайн-систем и платформ используют именно multiplier, так как он автоматически масштабируется при изменении кегля.

По данным 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 multiplier).

// 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\nsecond line\nthird 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) межстрочного пространства. Это даёт более тонкий контроль, чем простой multiplier. Например, можно указать, что дополнительное межстрочное пространство должно распределяться поровну выше и ниже строки (align.Center) или полностью добавляться сверху (align.Top).

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text\nwith custom LineHeightStyle\nin 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\nfixed line height\nindependent 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 должен пересчитываться при каждом изменении конфигурации.