Leading та міжрядковий інтервал: що це таке та налаштування в iOS і Android

Что такое leading и межстрочный интервал

Leading (произносится «лэдинг») — это вертикальное расстояние между базовыми линиями соседних строк в типографике. Базовая линия — невидимая линия, на которой располагаются символы текста. Чем больше leading, тем свободнее расположены строки друг относительно друга. В цифровой типографике leading чаще называют межстрочным интервалом или line height.

Исторически термин появился в эпоху металлической типографики: наборщики вставляли тонкие свинцовые полоски между строками для увеличения интервала. В современных шрифтах leading задаётся как соотношение к размеру шрифта. Системное значение по умолчанию — 1.2 (120% от размера шрифта), но для длинных текстов и мобильных интерфейсов рекомендуется большее значение. По данным Material Design Typography Guidelines, оптимальный line height для веб- и мобильных интерфейсов составляет 1.4-1.5 для основного текста.

Разница между leading и line spacing: leading — полное расстояние от базовой линии до базовой линии, line spacing — расстояние между нижней границей одной строки и верхней границей следующей. В большинстве мобильных API (iOS NSParagraphStyle, Android TextView) используется именно line spacing как дополнительный отступ поверх естественной высоты строки. Это важно учитывать при расчёте общего межстрочного интервала.

Оптимальные значения leading для мобильных интерфейсов

Подбор оптимального leading зависит от нескольких факторов: кегль шрифта, длина строки, контекст использования и аудитория. Для мобильных интерфейсов с типичной шириной строки 40-60 символов рекомендуется leading от 1.4 до 1.6 от размера шрифта. Короткие строки (лейблы, кнопки) могут использовать меньший leading — 1.0-1.2. Длинные тексты (статьи, описания) — больший leading, до 1.8 для максимальной читаемости.

Экспериментальные данные: исследование Wichita State University Software Usability Laboratory показало, что leading 1.5 увеличивает скорость чтения на 7.5% по сравнению с leading 1.0 при одинаковой ширине строки. Для пользователей с дислексией оптимальный leading ещё выше — до 1.8. Эти данные подтверждаются рекомендациями WCAG 2.2, которые требуют возможности увеличения межстрочного интервала до 1.5 без потери контента.

Влияние гарнитуры: шрифты с высокой x-height (относительная высота строчных букв) требуют большего leading, чем шрифты с низкой x-height. Например, Helvetica (высокая x-height) рекомендует leading 1.5 для body text, а Didot (низкая x-height) — 1.3. Это связано с тем, что при высокой x-height строки визуально сливаются быстрее при одинаковом межстрочном интервале.

Реализация leading в iOS через NSParagraphStyle

На iOS межстрочный интервал управляется через класс NSMutableParagraphStyle, который содержит два ключевых свойства: lineSpacing (дополнительный отступ между строками в пунктах) и lineHeightMultiple (множитель высоты строки). Эти свойства работают совместно: итоговая высота строки вычисляется как естественная высота шрифта, умноженная на lineHeightMultiple, плюс lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Спосіб 1: множник висоти рядка
paragraphStyle.lineHeightMultiple = 1.5

// Спосіб 2: додатковий пропуск між рядками
paragraphStyle.lineSpacing = 4.0

// Застосувати через NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — предпочтительный способ, так как он автоматически масштабируется при изменении размера шрифта. lineSpacing задаётся в абсолютных пунктах и не масштабируется, что может привести к несоответствию при использовании Dynamic Type. По данным Apple Text Programming Guide, для accessibility-совместимых интерфейсов используйте lineHeightMultiple в комбинации с UIFontMetrics.

SwiftUI предоставляет модификатор .lineSpacing() для Text и VStack. В отличие от UIKit, в SwiftUI межстрочный интервал задаётся в точках и не имеет встроенного множителя. Для реализации множителя разработчику нужно рассчитать line spacing вручную на основе размера шрифта. Ограничение: SwiftUI не поддерживает lineHeightMultiple напрямую — используйте .lineSpacing(CGFloat) с расчётным значением.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% розміру шрифту
    }

    var body: some View {
        Text("Міжрядковий інтервал")
        Text("Множник 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Настройка межстрочного интервала на Android

На Android межстрочный интервал задаётся через два атрибута TextView: lineSpacingExtra (дополнительный отступ в px) и lineSpacingMultiplier (множитель высоты строки, по умолчанию 1.0). Аналогично iOS, множитель масштабируется при изменении размера шрифта, а extra — абсолютная величина. Для accessibility-совместимых интерфейсов предпочтительнее использовать множитель.

// В XML-макеті
<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" />

// Програмно в Kotlin
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — современный Android UI-фреймворк — использует параметр lineHeight в модификаторе TextStyle. В отличие от XML-подхода, в Compose lineHeight задаётся как полная высота строки в sp (по умолчанию = fontSize * 1.2). Для установки множителя разработчик указывает lineHeight в процентах от fontSize: Пример: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) даёт множитель 1.5.

Ограничение: в Android до API 28 lineSpacingExtra и lineSpacingMultiplier работают некорректно с некоторыми шрифтами, особенно с кастомными (TTF/OTF). Рекомендуется тестировать на реальных устройствах и учитывать, что systemTextView по умолчанию использует lineSpacingMultiplier 1.0 — без дополнительного отступа. Для длинных текстов в ScrollView обязательно устанавливайте межстрочный интервал явно.

Межстрочный интервал в веб-разработке через CSS line-height

В вебе межстрочный интервал задаётся CSS-свойством line-height, которое может быть числом (множитель), процентным значением, единицами длины (px, em) или ключевым словом normal. Числовой множитель — предпочтительный способ, так как он наследуется и масштабируется относительно размера шрифта дочерних элементов. Значение normal соответствует примерно 1.2 для большинства шрифтов.

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

Числовой множитель vs em: line-height: 1.5 и line-height: 1.5em — разные вещи. Числовой множитель наследуется как computed value и вычисляется заново для каждого дочернего элемента на основе его font-size. em наследуется как fixed computed value на основе font-size родителя. Это критическое различие: при вложенности font-size: 20px внутрь font-size: 16px, line-height: 1.5 даст 30px, а line-height: 1.5em — 24px (от родителя). Рекомендация: всегда используйте числовой множитель.

Сравнение настроек leading на iOS, Android и в вебе

Несмотря на разные API, принцип настройки межстрочного интервала одинаков на всех платформах. Множитель (multiplier) масштабируется при изменении размера шрифта и является accessibility-friendly. Абсолютное значение (spacing) не масштабируется и может привести к проблемам при использовании Dynamic Type или настройках крупного текста.

Кроссплатформенная стратегия: задавайте lineHeight в дизайн-системе как множитель от fontSize. Например, в дизайн-токенах: line-height-body = 1.5, line-height-heading = 1.1. Каждая платформа реализует этот множитель своим API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Это гарантирует одинаковый визуальный результат на всех платформах.

Важный нюанс: на iOS lineHeightMultiple применяется к полной высоте строки (включая ascender + descender шрифта), а на Android lineSpacingMultiplier — к высоте строки, рассчитанной рендер-движком Minikin. На практике это приводит к небольшим различиям в визуальном leading при одинаковом значении множителя. Для pixel-perfect соответствия используйте абсолютные значения с поправкой на платформу.