Leading și spațierea între linii: ce este și configurarea în iOS și Android

Ce este leading și spațiul dintre rânduri

Leading (se pronunță „lending”) — este distanța verticală între liniile de bază ale rândurilor adiacente în tipografie. Linia de bază — linia invizibilă pe care sunt plasate caracterele textului. Cu cât leading este mai mare, cu atât rândurile sunt mai liber dispuse unul față de celălalt. În tipografia digitală, leading este adesea numit spațiu dintre rânduri sau înălțimea rândului.

Istoric, termenul a apărut în era tipografiei metalice: culegătorii introduceau benzi subțiri de plumb între rânduri pentru a mări intervalul. În fonturile moderne, leading este determinat ca raport față de dimensiunea fontului. Valoarea implicită de sistem este 1.2 (120% din dimensiunea fontului), dar pentru texte lungi și interfețe mobile se recomandă o valoare mai mare. Conform ghidului de tipografie Material Design, înălțimea optimă a rândului pentru interfețe web și mobile este 1.4-1.5 pentru textul principal.

Diferența dintre leading și line spacing: leading — distanța completă de la linia de bază la linia de bază, line spacing — distanța între marginea inferioară a unui rând și marginea superioară a următorului. în majoritatea API-urilor mobile (iOS NSParagraphStyle, Android TextView) se folosește exact line spacing ca spațiu suplimentar peste înălțimea naturală a rândului. Acest lucru este important de luat în considerare la calcularea spațiului total dintre rânduri.

Valori optime ale leading pentru interfețe mobile

Alegerea leadingului optim depinde de mai mulți factori: dimensiunea fontului, lungimea rândului, contextul de utilizare și audiența. Pentru interfețe mobile cu lungimea tipică a rândului de 40-60 de caractere, se recomandă leading de la 1.4 la 1.6 din dimensiunea fontului. Rândurile scurte (etichete, butoane) pot folosi un leading mai mic — 1.0-1.2. Textele lungi (articole, descrieri) — leading mai mare, până la 1.8 pentru lizibilitate maximă.

Date experimentale: cercetarea Laboratorului de Utilizare a Software-ului de la Universitatea de Stat Wichita a arătat că leading 1.5 crește viteza de citire cu 7.5% comparativ cu leading 1.0 la aceeași lățime a rândului. Pentru utilizatorii cu dislexie, leadingul optim este și mai mare — până la 1.8. Aceste date sunt confirmate de recomandările WCAG 2.2, care cer posibilitatea creșterii spațiului dintre rânduri până la 1.5 fără pierdere de conținut.

Influența fontului: fonturile cu x-height ridicată (înălțimea relativă a literelor mici) necesită un leading mai mare decât fonturile cu x-height scăzută. De exemplu, Helvetica (x-height ridicată) recomandă leading 1.5 pentru textul de corp, iar Didot (x-height scăzută) — 1.3. Acest lucru se datorează faptului că, la x-height ridicată, rândurile se contopesc vizual mai repede la același spațiu dintre rânduri.

Implementarea leading în iOS prin NSParagraphStyle

Pe iOS, spațiul dintre rânduri este gestionat prin clasa NSMutableParagraphStyle, care conține două proprietăți cheie: lineSpacing (spațiu suplimentar între rânduri în puncte) și lineHeightMultiple (multiplicatorul înălțimii rândului). Aceste proprietăți lucrează împreună: înălțimea totală a rândului se calculează ca înălțimea naturală a fontului înmulțită cu lineHeightMultiple plus lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Metoda 1: multiplicator înălțime rând
paragraphStyle.lineHeightMultiple = 1.5

// Metoda 2: spațiu suplimentar între rânduri
paragraphStyle.lineSpacing = 4.0

// Aplicați prin NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — metoda preferată, deoarece se scalează automat la schimbarea dimensiunii fontului. lineSpacing este setat în puncte absolute și nu se scalează, ceea ce poate duce la neconcordanțe la utilizarea Dynamic Type. Conform ghidului de programare text Apple, pentru interfețe compatibile cu accessibility, folosiți lineHeightMultiple în combinație cu UIFontMetrics.

SwiftUI oferă modificatorul .lineSpacing() pentru Text și VStack. Spre deosebire de UIKit, în SwiftUI spațiul dintre rânduri este setat în puncte și nu are un multiplicator încorporat. Pentru a implementa multiplicatorul, dezvoltatorul trebuie să calculeze manual spațiul dintre rânduri pe baza dimensiunii fontului. Limitare: SwiftUI nu suportă direct lineHeightMultiple — folosiți .lineSpacing(CGFloat) cu valoarea calculată.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% din dimensiunea fontului
    }

    var body: some View {
        Text("Spațiu între rânduri")
        Text("Multiplicator 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Configurarea spațiului dintre rânduri pe Android

Pe Android, spațiul dintre rânduri este setat prin două atribute TextView: lineSpacingExtra (spațiu suplimentar în px) și lineSpacingMultiplier (multiplicatorul înălțimii rândului, implicit 1.0). Similar iOS, multiplicatorul se scalează la schimbarea dimensiunii fontului, iar extra este o valoare absolută. Pentru interfețe compatibile cu accessibility, este preferabilă utilizarea multiplicatorului.

// În layout 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" />

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

Compose — cadrul modern UI pentru Android — folosește parametrul lineHeight în modificatorul TextStyle. Spre deosebire de abordarea XML, în Compose lineHeight este setat ca înălțime completă a rândului în sp (implicit = fontSize * 1.2). Pentru a seta multiplicatorul, dezvoltatorul specifică lineHeight ca procent din fontSize: Exemplu: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) dă multiplicatorul 1.5.

Limitare: pe Android înainte de API 28, lineSpacingExtra și lineSpacingMultiplier funcționează incorect cu unele fonturi, în special cu cele personalizate (TTF/OTF). Se recomandă testarea pe dispozitive reale și luarea în considerare că systemTextView folosește implicit lineSpacingMultiplier 1.0 — fără spațiu suplimentar. Pentru texte lungi în ScrollView, setați explicit spațiul dintre rânduri.

Spațiul dintre rânduri în dezvoltarea web prin CSS line-height

În web, spațiul dintre rânduri este setat prin proprietatea CSS line-height, care poate fi un număr (multiplicator), o valoare procentuală, unități de lungime (px, em) sau cuvântul cheie normal. Multiplicatorul numeric — metoda preferată, deoarece se moștenește și se scalează relativ la dimensiunea fontului elementelor copil. Valoarea normal corespunde aproximativ 1.2 pentru majoritatea fonturilor.

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

Multiplicator numeric vs em: line-height: 1.5 și line-height: 1.5em sunt lucruri diferite. Multiplicatorul numeric se moștenește ca valoare calculată și se recalculează pentru fiecare element copil pe baza font-size-ului său. Em se moștenește ca valoare calculată fixă pe baza font-size-ului părintelui. Aceasta este o diferență critică: la îmbricarea font-size: 20px în interiorul font-size: 16px, line-height: 1.5 va da 30px, iar line-height: 1.5em — 24px (de la părinte). Recomandare: folosiți întotdeauna multiplicatorul numeric.

Compararea setărilor de leading pe iOS, Android și web

În ciuda API-urilor diferite, principiul configurării spațiului dintre rânduri este același pe toate platformele. Multiplicatorul (multiplier) se scalează la schimbarea dimensiunii fontului și este prietenos cu accessibility. Valoarea absolută (spacing) nu se scalează și poate duce la probleme la utilizarea Dynamic Type sau setărilor de text mare.

Strategie cross-platform: setați lineHeight în sistemul de design ca multiplicator al fontSize. De exemplu, în token-urile de design: line-height-body = 1.5, line-height-heading = 1.1. Fiecare platformă implementează acest multiplicator prin API-ul său: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Aceasta garantează același rezultat vizual pe toate platformele.

Nuanță importantă: pe iOS, lineHeightMultiple se aplică la înălțimea completă a rândului (inclusiv ascender + descender al fontului), iar pe Android, lineSpacingMultiplier — la înălțimea rândului calculată de motorul de randare Minikin. în practică, aceasta duce la diferențe mici în leadingul vizual la aceeași valoare a multiplicatorului. Pentru conformitate pixel-perfect, folosiți valori absolute cu ajustare specifică platformei.