Leading и междуредие: какво е това и настройка в iOS и Android

Какво е leading и междуредие

Leading (произнася се „лединг“) — е вертикалното разстояние между базовите линии на съседни редове в типографиката. Базовата линия — невидимата линия, на която са разположени символите на текста. Колкото по-голям е leading, толкова по-свободно са разположени редовете един спрямо друг. В цифровата типографика leading често се нарича междуредие или височина на реда.

Исторически терминът се появява в епохата на металната типографика: наборчиците поставяли тънки оловни ленти между редовете за увеличаване на разстоянието. В съвременните шрифтове leading се задава като отношение към размера на шрифта. Системната стойност по подразбиране е 1.2 (120% от размера на шрифта), но за дълги текстове и мобилни интерфейси се препоръчва по-висока стойност. Според указанията за типографика на Material Design, оптималната височина на реда за уеб и мобилни интерфейси е 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 за основния текст, а 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 междуредието се задава в точки и няма вграден множител. За реализация на множителя разработчикът трябва ръчно да изчисли междуредието на базата на размера на шрифта. Ограничение: 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 са различни неща. Числовият множител се наследява като изчислена стойност и се преизчислява за всеки дъщерен елемент на базата на неговия font-size. Em се наследява като фиксирана изчислена стойност на базата на font-size на родителя. Това е критична разлика: при вложеност font-size: 20px във font-size: 16px, line-height: 1.5 дава 30px, а line-height: 1.5em — 24px (от родителя). Препоръка: винаги използвайте числов множител.

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

Въпреки различните API, принципът на настройка на междуредието е еднакъв на всички платформи. Множителят (multiplier) се мащабира при промяна на размера на шрифта и е приятелски настроен към accessibility. Абсолютната стойност (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 съответствие използвайте абсолютни стойности с корекция за платформата.