Leading i odstępy między wierszami: co to jest i konfiguracja w iOS i Android

Czym jest leading i odstęp między wierszami

Leading (wymawiane „lending”) — to pionowa odległość między liniami bazowymi sąsiednich wierszy w typografii. Linia bazowa to niewidzialna linia, na której znajdują się znaki tekstu. Im większy leading, tym swobodniej wiersze są rozmieszczone względem siebie. W typografii cyfrowej leading często nazywa się odstępem między wierszami lub wysokością wiersza.

Historycznie termin pojawił się w epoce typografii metalowej: zecerzy wkładali cienkie ołowiane paski między wiersze, aby zwiększyć odstęp. We współczesnych czcionkach leading określany jest jako stosunek do rozmiaru czcionki. Wartość domyślna wynosi 1.2 (120% rozmiaru czcionki), ale w przypadku długich tekstów i interfejsów mobilnych zaleca się większe wartości. Według wytycznych Material Design Typography optymalna wysokość wiersza dla interfejsów web i mobilnych wynosi 1.4-1.5 dla tekstu głównego.

Różnica między leading a line spacing: leading to pełna odległość od linii bazowej do linii bazowej, line spacing to odległość między dolną granicą jednego wiersza a górną granicą następnego. W większości mobilnych API (iOS NSParagraphStyle, Android TextView) używany jest właśnie line spacing jako dodatkowy odstęp na wierzchu naturalnej wysokości wiersza. Należy to uwzględnić przy obliczaniu całkowitego odstępu między wierszami.

Optymalne wartości leading dla interfejsów mobilnych

Dobór optymalnego leading zależy od kilku czynników: rozmiaru czcionki, długości wiersza, kontekstu użycia i odbiorców. Dla interfejsów mobilnych z typową długością wiersza 40-60 znaków zaleca się leading od 1.4 do 1.6 rozmiaru czcionki. Krótkie wiersze (etykiety, przyciski) mogą używać mniejszego leading — 1.0-1.2. Długie teksty (artykuły, opisy) — większy leading, do 1.8 dla maksymalnej czytelności.

Dane eksperymentalne: badanie Wichita State University Software Usability Laboratory wykazało, że leading 1.5 zwiększa prędkość czytania o 7.5% w porównaniu z leading 1.0 przy tej samej szerokości wiersza. Dla użytkowników z dysleksją optymalny leading jest jeszcze wyższy — do 1.8. Dane te są potwierdzane przez wytyczne WCAG 2.2, które wymagają możliwości zwiększenia odstępu między wierszami do 1.5 bez utraty treści.

Wpływ kroju pisma: czcionki z wysoką x-height (względna wysokość małych liter) wymagają większego leading niż czcionki z niską x-height. Na przykład Helvetica (wysoka x-height) zaleca leading 1.5 dla tekstu głównego, a Didot (niska x-height) — 1.3. Wiąże się to z tym, że przy wysokiej x-height wiersze wizualnie łączą się szybciej przy tym samym odstępie między wierszami.

Implementacja leading w iOS przez NSParagraphStyle

Na iOS odstęp między wierszami jest zarządzany przez klasę NSMutableParagraphStyle, która zawiera dwie kluczowe właściwości: lineSpacing (dodatkowy odstęp między wierszami w punktach) i lineHeightMultiple (mnożnik wysokości wiersza). Właściwości te działają wspólnie: całkowita wysokość wiersza jest obliczana jako naturalna wysokość czcionki pomnożona przez lineHeightMultiple plus lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Metoda 1: mnożnik wysokości wiersza
paragraphStyle.lineHeightMultiple = 1.5

// Metoda 2: dodatkowy odstęp między wierszami
paragraphStyle.lineSpacing = 4.0

// Zastosuj przez NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — preferowany sposób, ponieważ automatycznie skaluje się przy zmianie rozmiaru czcionki. lineSpacing jest określany w absolutnych punktach i nie skaluje się, co może prowadzić do niezgodności przy użyciu Dynamic Type. Według Apple Text Programming Guide, dla interfejsów zgodnych z accessibility używaj lineHeightMultiple w kombinacji z UIFontMetrics.

SwiftUI udostępnia modyfikator .lineSpacing() dla Text i VStack. W przeciwieństwie do UIKit, w SwiftUI odstęp między wierszami jest określany w punktach i nie ma wbudowanego mnożnika. Aby zaimplementować mnożnik, programista musi ręcznie obliczyć odstęp między wierszami na podstawie rozmiaru czcionki. Ograniczenie: SwiftUI nie obsługuje bezpośrednio lineHeightMultiple — używaj .lineSpacing(CGFloat) z obliczoną wartością.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% rozmiaru czcionki
    }

    var body: some View {
        Text("Odstęp między wierszami")
        Text("Mnożnik 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Konfiguracja odstępu między wierszami na Android

Na Android odstęp między wierszami jest określany przez dwa atrybuty TextView: lineSpacingExtra (dodatkowy odstęp w px) i lineSpacingMultiplier (mnożnik wysokości wiersza, domyślnie 1.0). Analogicznie do iOS, mnożnik skaluje się przy zmianie rozmiaru czcionki, a extra to wartość absolutna. Dla interfejsów zgodnych z accessibility preferowane jest używanie mnożnika.

// W układzie 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" />

// Programowo w Kotlin
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — nowoczesny framework UI dla Androida — używa parametru lineHeight w modyfikatorze TextStyle. W przeciwieństwie do podejścia XML, w Compose lineHeight jest określany jako pełna wysokość wiersza w sp (domyślnie = fontSize * 1.2). Aby ustawić mnożnik, programista podaje lineHeight w procentach od fontSize: Przykład: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) daje mnożnik 1.5.

Ograniczenie: na Android przed API 28 lineSpacingExtra i lineSpacingMultiplier działają nieprawidłowo z niektórymi czcionkami, szczególnie niestandardowymi (TTF/OTF). Zaleca się testowanie na rzeczywistych urządzeniach i uwzględnienie, że systemTextView domyślnie używa lineSpacingMultiplier 1.0 — bez dodatkowego odstępu. W przypadku długich tekstów w ScrollView należy jawnie ustawić odstęp między wierszami.

Odstęp między wierszami w programowaniu web przez CSS line-height

W sieci odstęp między wierszami jest określany przez właściwość CSS line-height, która może być liczbą (mnożnikiem), wartością procentową, jednostkami długości (px, em) lub słowem kluczowym normal. Mnożnik liczbowy jest preferowanym sposobem, ponieważ jest dziedziczony i skaluje się względem rozmiaru czcionki elementów potomnych. Wartość normal odpowiada około 1.2 dla większości czcionek.

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

Mnożnik liczbowy vs em: line-height: 1.5 i line-height: 1.5em to różne rzeczy. Mnożnik liczbowy jest dziedziczony jako computed value i obliczany na nowo dla każdego elementu potomnego na podstawie jego font-size. em jest dziedziczony jako fixed computed value na podstawie font-size rodzica. To krytyczna różnica: przy zagnieżdżeniu font-size: 20px wewnątrz font-size: 16px, line-height: 1.5 da 30px, a line-height: 1.5em — 24px (od rodzica). Zalecenie: zawsze używaj mnożnika liczbowego.

Porównanie ustawień leading na iOS, Android i w sieci

Pomimo różnych API, zasada konfiguracji odstępu między wierszami jest taka sama na wszystkich platformach. Mnożnik (multiplier) skaluje się przy zmianie rozmiaru czcionki i jest przyjazny dla accessibility. Wartość absolutna (spacing) nie skaluje się i może prowadzić do problemów przy użyciu Dynamic Type lub ustawień dużego tekstu.

Strategia cross-platform: określaj lineHeight w systemie projektowym jako mnożnik od fontSize. Na przykład w tokenach projektowych: line-height-body = 1.5, line-height-heading = 1.1. Każda platforma implementuje ten mnożnik za pomocą swojego API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Gwarantuje to identyczny wynik wizualny na wszystkich platformach.

Ważny niuans: na iOS lineHeightMultiple jest stosowany do pełnej wysokości wiersza (w tym ascender + descender czcionki), a na Android lineSpacingMultiplier — do wysokości wiersza obliczonej przez silnik renderujący Minikin. W praktyce prowadzi to do niewielkich różnic w wizualnym leading przy tej samej wartości mnożnika. Dla pixel-perfect zgodności używaj wartości absolutnych z korektą dla platformy.