Leading und Zeilenabstand: Was das ist und Einstellung in iOS und Android

Was ist Leading und Zeilenabstand

Leading (ausgesprochen „Läding“) — ist der vertikale Abstand zwischen den Grundlinien benachbarter Zeilen in der Typografie. Die Grundlinie ist die unsichtbare Linie, auf der die Textzeichen angeordnet sind. Je größer das Leading, desto freier sind die Zeilen zueinander angeordnet. In der digitalen Typografie wird Leading oft als Zeilenabstand oder Zeilenhöhe bezeichnet.

Historisch entstand der Begriff in der Ära der Metalltypografie: Setzer legten dünne Bleistreifen zwischen die Zeilen, um den Abstand zu vergrößern. Bei modernen Schriftarten wird Leading als Verhältnis zur Schriftgröße festgelegt. Standardmäßiger Systemwert — 1.2 (120% der Schriftgröße), aber für lange Texte und mobile Oberflächen wird ein größerer Wert empfohlen. Laut den Material Design Typography Guidelines beträgt die optimale Zeilenhöhe für Web- und mobile Oberflächen 1.4-1.5 für den Haupttext.

Unterschied zwischen Leading und Zeilenabstand: Leading ist der vollständige Abstand von Grundlinie zu Grundlinie, Zeilenabstand ist der Abstand zwischen der unteren Grenze einer Zeile und der oberen Grenze der nächsten. In den meisten mobilen APIs (iOS NSParagraphStyle, Android TextView) wird der Zeilenabstand als zusätzlicher Abstand über die natürliche Zeilenhöhe verwendet. Dies ist bei der Berechnung des gesamten Zeilenabstands wichtig zu berücksichtigen.

Optimale Leading-Werte für mobile Oberflächen

Die Auswahl des optimalen Leadings hängt von mehreren Faktoren ab: Schriftgröße, Zeilenlänge, Verwendungskontext und Zielgruppe. Für mobile Oberflächen mit typischer Zeilenbreite von 40-60 Zeichen wird ein Leading von 1.4 bis 1.6 der Schriftgröße empfohlen. Kurze Zeilen (Labels, Schaltflächen) können ein kleineres Leading verwenden — 1.0-1.2. Lange Texte (Artikel, Beschreibungen) — ein größeres Leading, bis zu 1.8 für maximale Lesbarkeit.

Experimentelle Daten: Eine Studie des Wichita State University Software Usability Laboratory zeigte, dass Leading 1,5 die Lesegeschwindigkeit um 7,5% im Vergleich zu Leading 1,0 bei gleicher Zeilenbreite erhöht. Für Benutzer mit Legasthenie ist das optimale Leading sogar noch höher — bis zu 1,8. Diese Daten werden durch die WCAG 2.2-Empfehlungen bestätigt, die eine Vergrößerung des Zeilenabstands auf 1,5 ohne Inhaltsverlust fordern.

Einfluss der Schriftart: Schriftarten mit hoher x-Höhe (relative Höhe der Kleinbuchstaben) benötigen ein größeres Leading als Schriftarten mit niedriger x-Höhe. Beispielsweise empfiehlt Helvetica (hohe x-Höhe) ein Leading von 1.5 für Fließtext, während Didot (niedrige x-Höhe) 1.3 empfiehlt. Dies liegt daran, dass bei hoher x-Höhe die Zeilen bei gleichem Zeilenabstand visuell schneller verschmelzen.

Implementierung von Leading unter iOS über NSParagraphStyle

Unter iOS wird der Zeilenabstand über die Klasse NSMutableParagraphStyle gesteuert, die zwei Schlüsseleigenschaften enthält: lineSpacing (zusätzlicher Abstand zwischen den Zeilen in Punkten) und lineHeightMultiple (Multiplikator der Zeilenhöhe). Diese Eigenschaften arbeiten zusammen: Die endgültige Zeilenhöhe wird als natürliche Schrifthöhe multipliziert mit lineHeightMultiple plus lineSpacing berechnet.

let paragraphStyle = NSMutableParagraphStyle()

// Methode 1: Zeilenhöhenmultiplikator
paragraphStyle.lineHeightMultiple = 1.5

// Methode 2: Zusätzlicher Abstand zwischen Zeilen
paragraphStyle.lineSpacing = 4.0

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

lineHeightMultiple — die bevorzugte Methode, da sie automatisch skaliert, wenn sich die Schriftgröße ändert. lineSpacing wird in absoluten Punkten festgelegt und skaliert nicht, was bei Verwendung von Dynamic Type zu Inkonsistenzen führen kann. Laut Apple Text Programming Guide verwenden Sie für barrierefreie Oberflächen lineHeightMultiple in Kombination mit UIFontMetrics.

SwiftUI bietet den Modifikator .lineSpacing() für Text und VStack. Im Gegensatz zu UIKit wird in SwiftUI der Zeilenabstand in Punkten festgelegt und hat keinen integrierten Multiplikator. Zur Implementierung eines Multiplikators muss der Entwickler den Zeilenabstand manuell basierend auf der Schriftgröße berechnen. Einschränkung: SwiftUI unterstützt lineHeightMultiple nicht direkt — verwenden Sie .lineSpacing(CGFloat) mit einem berechneten Wert.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% der Schriftgröße
    }

    var body: some View {
        Text("Zeilenabstand")
        Text("1.5-Multiplikator")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Einstellung des Zeilenabstands unter Android

Unter Android wird der Zeilenabstand über zwei Attribute von TextView festgelegt: lineSpacingExtra (zusätzlicher Abstand in px) und lineSpacingMultiplier (Multiplikator der Zeilenhöhe, Standard 1.0). Ähnlich wie bei iOS skaliert der Multiplikator bei Änderung der Schriftgröße, während Extra ein absoluter Wert ist. Für barrierefreie Oberflächen ist die Verwendung des Multiplikators vorzuziehen.

// Im XML-Layout
<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" />

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

Compose — das moderne Android-UI-Framework — verwendet den Parameter lineHeight im TextStyle-Modifikator. Im Gegensatz zum XML-Ansatz wird in Compose lineHeight als vollständige Zeilenhöhe in sp festgelegt (Standard = fontSize * 1.2). Zum Festlegen eines Multiplikators gibt der Entwickler lineHeight als Prozentsatz von fontSize an: Beispiel: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) ergibt einen Multiplikator von 1.5.

Einschränkung: Unter Android bis API 28 funktionieren lineSpacingExtra und lineSpacingMultiplier bei einigen Schriftarten, insbesondere bei benutzerdefinierten (TTF/OTF), nicht korrekt. Es wird empfohlen, auf echten Geräten zu testen und zu beachten, dass systemTextView standardmäßig lineSpacingMultiplier 1.0 verwendet — ohne zusätzlichen Abstand. Für lange Texte in ScrollView muss der Zeilenabstand explizit festgelegt werden.

Zeilenabstand in der Webentwicklung über CSS line-height

Im Web wird der Zeilenabstand durch die CSS-Eigenschaft line-height festgelegt, die eine Zahl (Multiplikator), einen Prozentwert, Längeneinheiten (px, em) oder das Schlüsselwort normal sein kann. Der numerische Multiplikator ist die bevorzugte Methode, da er vererbt wird und relativ zur Schriftgröße der Kindelemente skaliert. Der Wert normal entspricht bei den meisten Schriftarten etwa 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;
}

Numerischer Multiplikator vs. em: line-height: 1.5 und line-height: 1.5em sind unterschiedliche Dinge. Der numerische Multiplikator wird als berechneter Wert vererbt und für jedes Kindelement basierend auf seiner font-size neu berechnet. em wird als fester berechneter Wert basierend auf der font-size des Elternelements vererbt. Dies ist ein kritischer Unterschied: Wenn font-size: 20px innerhalb von font-size: 16px liegt, ergibt line-height: 1.5 30px, während line-height: 1.5em 24px (vom Elternteil) ergibt. Empfehlung: Verwenden Sie immer den numerischen Multiplikator.

Vergleich der Leading-Einstellungen unter iOS, Android und im Web

Trotz unterschiedlicher APIs ist das Prinzip der Einstellung des Zeilenabstands auf allen Plattformen gleich. Der Multiplikator skaliert bei Änderung der Schriftgröße und ist barrierefrei. Der absolute Wert (Abstand) skaliert nicht und kann bei Verwendung von Dynamic Type oder großen Texteinstellungen zu Problemen führen.

Plattformübergreifende Strategie: Legen Sie lineHeight im Designsystem als Multiplikator von fontSize fest. Zum Beispiel in Designtoken: line-height-body = 1.5, line-height-heading = 1.1. Jede Plattform implementiert diesen Multiplikator über ihre eigene API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Dies gewährleistet das gleiche visuelle Ergebnis auf allen Plattformen.

Wichtige Nuance: Unter iOS wird lineHeightMultiple auf die vollständige Zeilenhöhe (einschließlich Ascender + Descender der Schrift) angewendet, während unter Android lineSpacingMultiplier auf die vom Minikin-Rendering-Engine berechnete Zeilenhöhe angewendet wird. In der Praxis führt dies bei gleichem Multiplikatorwert zu geringfügigen Unterschieden im visuellen Leading. Für pixelgenaue Übereinstimmung verwenden Sie absolute Werte mit plattformspezifischer Anpassung.