Line Height in der App-Entwicklung — was es ist und Auswirkung auf die Typografie

Was ist Line Height in der Typografie

Line Height (Zeilenhöhe) ist ein grundlegender typografischer Parameter, der den Abstand zwischen den Grundlinien (Baselines) aufeinanderfolgender Zeilen bestimmt. In der Web- und Mobilentwicklung legt die line height den vertikalen Rhythmus des Textes fest: Jede Zeile nimmt eine bestimmte Höhe ein, und dieser Parameter summiert sich beim Übergang zur nächsten Zeile. Die line height umfasst nicht nur die tatsächliche Glyphenhöhe (Oberlänge + Unterlänge), sondern auch den zusätzlichen Raum, der die Lesbarkeit verbessert.

Mathematisch wird die line height ausgedrückt als: line-height = Schriftgröße × Multiplikator. Wenn Schriftgröße = 16 px und Multiplikator = 1,5, dann ist line-height = 24 px. Der Durchschuss (Leading) beträgt in diesem Fall 24 - (Oberlänge + Unterlänge) Pixel. Die meisten Designsysteme und Plattformen verwenden den Multiplikator, da er bei Änderung der Schriftgröße automatisch skaliert.

Laut Material Design Type Scale (2025) ist die line height einer von drei Schlüsselparametern des typografischen Systems einer Anwendung, neben Schriftgröße und Schriftstärke. Konsistente line-height-Werte für alle Ebenen der typografischen Hierarchie erzeugen einen vertikalen Rhythmus, der die Oberfläche visuell kohärent macht. Eine Abweichung der line-height um 10% vom optimalen Wert ist bereits mit bloßem Auge erkennbar und verringert die wahrgenommene Qualität der Oberfläche.

Line Height vs. Leading: der Unterschied

Leading (ausgesprochen „lédin“) ist ein historischer typografischer Begriff, der den Abstand zwischen den Zeilen von Grundlinie zu Grundlinie abzüglich der Glyphenhöhe bezeichnet. Im Metall-Satz waren Leading die Bleistreifen, die zwischen die Zeilen eingefügt wurden, um den Abstand zu vergrößern. Line Height ist ein moderneres Konzept, das sowohl die Schrifthöhe als auch das Leading umfasst.

In der Praxis ist der Unterschied wichtig, wenn Designs aus Figma oder Sketch in Code übersetzt werden. Designtools geben in der Regel line-height (oder einfach Zeilenhöhe) an. Mobile Plattform-APIs können unterschiedliche Begriffe verwenden: iOS verwendet lineSpacing (näher am Leading) zusammen mit minimumLineHeight/maximumLineHeight, Android verwendet LineHeightStyle mit Alignment und Trim, Flutter verwendet height (einheitenloser Multiplikator).

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

Der Hauptunterschied: Wenn Sie minimumLineHeight festlegen, verwenden alle Zeilen dieselbe Höhe, was für ein rhythmisches Raster gut ist. Wenn Sie nur lineSpacing festlegen, variiert die Zeilenhöhe je nach Schriftgröße — dies ist ein flexiblerer, aber weniger vorhersagbarer Ansatz. Für Designsysteme wird minimumLineHeight empfohlen, da es ein streng kontrolliertes Ergebnis liefert.

Laut IBM Carbon Design System — Typography Guidelines (2025) ist der Unterschied zwischen line height und Leading besonders bei Verwendung benutzerdefinierter Schriftarten auffällig. Wenn die Schriftart ein großes integriertes Leading hat (z. B. SF Pro), liefert lineSpacing = 0 ein akzeptables Ergebnis. Wenn das Leading der Schriftart klein ist (einige Open-Source-Schriftarten), wirken die Zeilen ohne zusätzliches lineSpacing zusammengeklebt.

Optimale Line Height für mobile Oberflächen

Die optimale line height hängt von mehreren Faktoren ab: Schriftgröße, Zeilenlänge, Schriftart und Zielgruppe. Für Fließtext auf mobilen Geräten (Zeilenlänge 35–55 Zeichen) wird ein Bereich vom 1,4- bis 1,6-fachen der Schriftgröße empfohlen. Dieser Wert bietet ausreichend vertikalen Abstand für eine angenehme Blickbewegung zwischen den Zeilen, ohne die visuelle Kohärenz des Textes zu verlieren.

Bei Überschriften, deren Zeilenlänge in der Regel kürzer ist (2–6 Wörter), kann die line height kleiner sein — das 1,1- bis 1,25-fache der Schriftgröße. Überschriften benötigen keinen großen Zeilenabstand, da ihre Hauptfunktion die Aufmerksamkeitslenkung und nicht das längere Lesen ist. Darüber hinaus würden große Überschrift-Schriftgrößen (24–32 pt) mit line-height 1,5 übermäßige Abstände erzeugen, die den vertikalen Rhythmus der Seite stören.

• Fließtext (16–18 pt) — line-height 1,4–1,6. Minimum für angenehmes Lesen auf mobilen Geräten, wo die Zeilenlänge durch die Bildschirmbreite begrenzt ist.
• Kleiner Text (11–13 pt) — line-height 1,3–1,5. Kleine Schriftgrößen erfordern einen kleineren Multiplikator, da die Zeilen kürzer sind und das Auge die nächste Zeile schneller findet.
• Großer Text (20–32 pt) — line-height 1,1–1,25. Je größer die Schrift, desto weniger relativer Zeilenabstand ist für die Lesbarkeit erforderlich.
• Monospace-Text — line-height 1,3–1,5. Monospace-Schriften (für Code) haben in der Regel größere Metriken, daher kann die line-height auf 1,3 reduziert werden.

// Flutter: line height in design system
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

Laut W3C — Accessibility Requirements for Typography (2025) gilt eine line height unter 1,2 für Fließtext als Zugänglichkeitsbarriere: Benutzer mit Legasthenie und Sehbehinderungen haben erhebliche Schwierigkeiten beim Lesen von dichtem Text. WCAG 2.2 empfiehlt eine line-height von mindestens 1,5 für Hauptinhalte, obwohl dieser Wert in mobilen Oberflächen aufgrund der begrenzten Bildschirmbreite auf 1,4 gesenkt werden kann.

Line Height auf iOS: UIKit und SwiftUI

Auf iOS wird die line height über NSMutableParagraphStyle oder integrierte SwiftUI-Modifikatoren gesteuert. UIKit bietet drei Schlüsseleigenschaften: minimumLineHeight und maximumLineHeight (legen die genaue Zeilenhöhe fest) und lineSpacing (zusätzlicher Abstand zwischen den Zeilen). Bei Verwendung von TextKit (NSTextStorage, NSLayoutManager) wird die line height in lineFragmentRect berücksichtigt und beeinflusst die Berechnung der Textblock-Geometrie.

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

In SwiftUI wird die line height über den Modifikator .lineSpacing(value) festgelegt, der zusätzlichen Platz zwischen den Zeilen hinzufügt, oder über .font mit einem benutzerdefinierten TextStyle, der die line height enthält. SwiftUI unterstützt auch Dynamic Type: Die angegebene line height skaliert, wenn der Benutzer die Schriftgröße in den Einstellungen ändert.

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

Laut Apple HIG — Typography Implementation (2025) muss bei Verwendung einer festen line-height über minimumLineHeight sichergestellt werden, dass der Wert nicht kleiner als die natürliche line-height der Schriftart ist. Wenn minimumLineHeight kleiner als Oberlänge + Unterlänge ist, ignoriert UIKit die Einstellung und verwendet die natürliche Höhe. Dies kann zu unerwarteten Ergebnissen beim Ändern der Schriftart oder -größe führen.

Line Height auf Android: View-System und Compose

In der Android-Entwicklung wird die line height im klassischen View-System und in Jetpack Compose unterschiedlich verwaltet. Im View-System wird die Methode TextView.setLineSpacing(extra, multiplier) verwendet. Der Parameter extra ist zusätzlicher Platz in Pixeln, multiplier ist ein Faktor der natürlichen Zeilenhöhe. Die resultierende Höhe = natürliche line-height × multiplier + extra.

// Android View system: line spacing
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

In Jetpack Compose wird die Klasse LineHeightStyle zur Verwaltung der line height verwendet, mit der Sie die Ausrichtung (Alignment) und den Beschneidung (Trim) des Zeilenabstands festlegen können. Dies bietet eine feinere Kontrolle als ein einfacher Multiplikator. Sie können beispielsweise festlegen, dass der zusätzliche Zeilenabstand gleichmäßig über und unter der Zeile verteilt (align.Center) oder vollständig oberhalb hinzugefügt wird (align.Top).

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Laut Android Developers — Compose Text Styling (2025) behält LineHeightStyle.Trim.None (Standard) den Abstand in der ersten und letzten Zeile bei, was die Ausrichtung in Card oder Column beeinträchtigen kann. Trim.Both wird für Container mit fester Höhe empfohlen und Trim.LastLine für Textblöcke, bei denen der untere Rand wichtig ist.

Line Height in Flutter: TextStyle und StrutStyle

In Flutter wird die line height über die Eigenschaft height der Klasse TextStyle festgelegt. Es ist ein einheitenloser Multiplikator der Schriftgröße: height: 1,5 bei fontSize: 16 ergibt eine line-height von 24,0. Der height-Wert multipliziert implizit fontSize, sodass die line-height bei Änderung der Schriftgröße proportional skaliert. Flutter bietet auch StrutStyle — einen Mechanismus zum Erzwingen einer festen line-height unabhängig von den tatsächlichen Glyphen in der Zeile.

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle ist besonders nützlich für Listen mit unterschiedlichen Schriftgrößen (z. B. Chats, Nachrichtenfeeds), bei denen alle Zeilen unabhängig vom Inhalt dieselbe Höhe haben müssen. Ohne StrutStyle hat eine Zeile, die nur Buchstaben ohne Unterlängen enthält, eine geringere tatsächliche Höhe als eine Zeile mit Buchstaben wie „p“ und „y“, was beim Scrollen zu Textzittern führt.

Laut Flutter Documentation — Text Layout (2025) garantiert StrutStyle mit forceStrutHeight: true, dass die Höhe jeder Zeile dem angegebenen Wert entspricht, und die tatsächlichen Glyphen innerhalb dieses Raums an der Grundlinie ausgerichtet werden. Dies ist der Standardansatz für Textlisten, bei denen der vertikale Rhythmus für die visuelle Wahrnehmung entscheidend ist.

Anpassbare Line Height für verschiedene Bildschirme

Mobile Anwendungen laufen auf Geräten mit unterschiedlichen Bildschirmgrößen, Pixeldichten und Zugänglichkeitseinstellungen. Die line height muss sich an diese Änderungen anpassen und dabei die Lesbarkeit erhalten. Die Hauptregel: Verwenden Sie einheitenlose Multiplikatoren (unitless) und keine festen Werte in px oder pt, damit die line-height zusammen mit der Schriftgröße skaliert.

Bei Verwendung von Dynamic Type (iOS) oder fontScale (Android) kann die Schriftgröße um 20–50% gegenüber dem Basiswert zunehmen. Die über einen Multiplikator festgelegte line-height skaliert automatisch. Wenn die line-height als fester Wert festgelegt ist (z. B. 24 px bei Schriftgröße 16 pt), sinkt die relative line-height bei einer Vergrößerung der Schrift auf 22 pt auf 1,09 — bereits unterhalb der Lesbarkeitsschwelle.

// iOS: adaptive line height with Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

Laut Material Design — Responsive Typography (2025) wird für Tablets und große Bildschirme (über 600 dp Breite) empfohlen, die line-height des Fließtextes um 0,1–0,2 im Vergleich zu Telefonen zu erhöhen, da die Zeilenlänge größer wird. Für faltbare Geräte, bei denen sich die Bildschirmbreite dynamisch ändert, sollte die line-height bei jeder Konfigurationsänderung neu berechnet werden.