Line Height w tworzeniu aplikacji — co to jest i wpływ na typografię

Czym jest Line Height w typografii

Line Height (wysokość wiersza) — to fundamentalny parametr typografii, określający odległość między liniami bazowymi (baseline) kolejnych wierszy. W tworzeniu stron internetowych i aplikacji mobilnych line height wyznacza pionowy rytm tekstu: każdy wiersz zajmuje określoną wysokość, a parametr ten sumuje się przy przejściu do następnego wiersza. Line height obejmuje nie tylko faktyczną wysokość glifów (ascender + descender), ale także dodatkową przestrzeń poprawiającą czytelność.

Matematycznie line height wyraża się jako: line-height = font-size × multiplier. Jeśli font-size = 16 px, a multiplier = 1.5, to line-height = 24 px. Odstęp między wierszami (leading) w tym przypadku wyniesie 24 - (ascender + descender) pikseli. Większość systemów projektowych i platform używa właśnie mnożnika, ponieważ automatycznie skaluje się on przy zmianie rozmiaru czcionki.

Według danych Material Design Type Scale (2025), line height — jeden z trzech kluczowych parametrów systemu typograficznego aplikacji obok font-size i font-weight. Spójne wartości line height dla wszystkich poziomów hierarchii typograficznej tworzą pionowy rytm, który sprawia, że interfejs jest wizualnie spójny. Odchylenie line-height o 10% od optymalnej wartości jest już zauważalne gołym okiem i obniża postrzeganą jakość interfejsu.

Line Height vs Leading: jaka jest różnica

Leading (wymawia się „lending”) — to historyczny termin typograficzny oznaczający odległość między wierszami od baseline do baseline pomniejszoną o wysokość glifów. W składzie metalowym leading to ołowiane paski wkładane między wiersze w celu zwiększenia odstępu. Line height — to bardziej współczesne pojęcie, obejmujące zarówno wysokość czcionki, jak i leading.

W praktyce różnica ma znaczenie przy przenoszeniu makiet z Figma lub Sketch do kodu. Narzędzia projektowe zwykle podają line-height (lub po prostu wysokość wiersza). W mobilnych platformach API może nazywać się różnie: iOS używa terminu lineSpacing (co jest bliższe leading) wraz z minimumLineHeight/maximumLineHeight, Android — LineHeightStyle z alignment i trim, Flutter — height (unitless multiplier).

// iOS: różnica między line height a line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Bezpośrednie ustawienie line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Odstęp międzywierszowy (dodatkowe miejsce między wierszami)
paragraphStyle.lineSpacing = 4.0  // dodane do naturalnego line height czcionki

Kluczowa różnica: jeśli ustawisz minimumLineHeight, wszystkie wiersze będą miały jednakową wysokość, co jest dobre dla rytmicznej siatki. Jeśli ustawisz tylko lineSpacing, wysokość wiersza będzie się zmieniać w zależności od rozmiaru czcionki — to bardziej elastyczne, ale mniej przewidywalne podejście. Dla systemów projektowych zaleca się używanie minimumLineHeight, ponieważ daje ściśle kontrolowany wynik.

Według danych IBM Carbon Design System — Typography Guidelines (2025), różnica między line height a leading jest szczególnie widoczna przy używaniu niestandardowych czcionek. Jeśli czcionka ma duży wbudowany leading (np. SF Pro), lineSpacing = 0 daje akceptowalny wynik. Jeśli leading czcionki jest mały (niektóre open-source'owe fonty), bez dodatkowego lineSpacing wiersze będą wyglądać na zlepione.

Optymalny Line Height dla interfejsów mobilnych

Optymalny line height zależy od kilku czynników: rozmiaru czcionki, długości wiersza, fontu i grupy docelowej. Dla tekstu podstawowego na urządzeniach mobilnych (długość wiersza 35–55 znaków) zalecany zakres to 1.4–1.6 font-size. Ta wartość zapewnia wystarczający pionowy odstęp do komfortowego przenoszenia wzroku między wierszami bez utraty wizualnej spójności tekstu.

Dla nagłówków, gdzie długość wiersza jest zwykle krótsza (2–6 słów), line height może być mniejszy — 1.1–1.25 font-size. Nagłówki nie wymagają dużego odstępu międzywierszowego, ponieważ ich główną funkcją jest przyciąganie uwagi, a nie długotrwałe czytanie. Ponadto duże rozmiary nagłówków (24–32 pt) przy line-height 1.5 stworzyłyby nadmierne odstępy, zaburzające pionowy rytm strony.

• Tekst podstawowy (16–18 pt) — line-height 1.4–1.6. Minimalny dla komfortowego czytania na urządzeniach mobilnych, gdzie długość wiersza jest ograniczona szerokością ekranu.
• Mały tekst (11–13 pt) — line-height 1.3–1.5. Mały rozmiar wymaga mniejszego mnożnika, ponieważ wiersze są krótsze, a oko szybciej znajduje następny wiersz.
• Duży tekst (20–32 pt) — line-height 1.1–1.25. Im większa czcionka, tym mniejszy względny odstęp międzywierszowy jest potrzebny dla czytelności.
• Tekst monotypiczny — line-height 1.3–1.5. Czcionki monotypiczne (do kodu) zwykle mają większe metryki, dlatego line-height można zmniejszyć do 1.3.

// Flutter: line height w systemie projektowym
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
    );
}

Według danych W3C — Accessibility Requirements for Typography (2025), line height poniżej 1.2 dla tekstu podstawowego jest uważany za barierę dostępności: użytkownicy z dysleksją i zaburzeniami wzroku doświadczają znacznych trudności przy czytaniu gęstego tekstu. WCAG 2.2 zaleca line-height nie mniej niż 1.5 dla podstawowej treści, jednak w interfejsach mobilnych wartość ta może być obniżona do 1.4 ze względu na ograniczoną szerokość ekranu.

Line Height w iOS: UIKit i SwiftUI

W iOS line height jest zarządzany przez NSMutableParagraphStyle lub wbudowane modyfikatory SwiftUI. W UIKit dostępne są trzy kluczowe właściwości: minimumLineHeight i maximumLineHeight (określają dokładną wysokość wiersza) oraz lineSpacing (dodatkowy odstęp między wierszami). Przy użyciu TextKit (NSTextStorage, NSLayoutManager) line height jest uwzględniany w lineFragmentRect i wpływa na obliczanie geometrii bloku tekstowego.

// iOS UIKit: ustawianie line height przez NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Ważne: minimum + maximum = stały 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
)

W SwiftUI line height jest określany przez modyfikator .lineSpacing(value), który dodaje dodatkową przestrzeń między wierszami, lub przez .font z niestandardowym TextStyle obejmującym line height. SwiftUI obsługuje również typy dynamiczne: zadany line height skaluje się przy zmianie rozmiaru czcionki przez użytkownika w ustawieniach.

// SwiftUI: line height przez lineSpacing
Text("Tekst z niestandardowym odstępem wierszy
linia druga
linia trzecia")
    .font(.body)
    .lineSpacing(4)     // dodatkowe miejsce między wierszami

// SwiftUI: stały line height przez styl niestandardowy
Text("Nagłówek z line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // kompensacja dla precyzyjnego line-height

Według danych Apple HIG — Typography Implementation (2025), przy używaniu stałego line-height przez minimumLineHeight należy upewnić się, że wartość nie jest mniejsza od naturalnego line-height czcionki. Jeśli minimumLineHeight jest mniejsze niż ascender + descender, UIKit ignoruje ustawienie i używa naturalnej wysokości. Może to prowadzić do nieoczekiwanych rezultatów przy zmianie fontu lub rozmiaru.

Line Height w Android: View-system i Compose

W Android line height jest zarządzany różnie w klasycznym systemie View i Jetpack Compose. W systemie View używa się metody TextView.setLineSpacing(extra, multiplier). Parametr extra — dodatkowa przestrzeń w pikselach, multiplier — mnożnik naturalnej wysokości wiersza. Wynikowa wysokość = naturalny line-height × multiplier + extra.

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

// Użycie w XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

W Jetpack Compose do zarządzania line height używa się klasy LineHeightStyle, która pozwala ustawić wyrównanie (Alignment) i przycięcie (Trim) przestrzeni międzywierszowej. Daje to bardziej precyzyjną kontrolę niż prosty mnożnik. Można na przykład określić, że dodatkowa przestrzeń międzywierszowa powinna być rozdzielona równo powyżej i poniżej wiersza (align.Center) lub całkowicie dodana powyżej (align.Top).

// Jetpack Compose: przykład LineHeightStyle
Text(
    text = "Przykładowy tekst
z niestandardowym LineHeightStyle
w Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Prosty mnożnik przez TextStyle
Text(
    text = "Mnożnik line height",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Według danych Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (domyślnie) zachowuje pierwszą i ostatnią linię z odstępami, co może zaburzać wyrównanie w Card lub Column. Zaleca się używanie Trim.Both dla kontenerów o stałej wysokości i Trim.LastLine dla bloków tekstowych, gdzie ważna jest dolna krawędź.

Line Height w Flutter: TextStyle i StrutStyle

W Flutter line height jest określany przez właściwość height klasy TextStyle. Jest to mnożnik unitless od font-size: height: 1.5 przy fontSize: 16 daje line-height 24.0. Wartość height jest niejawnie mnożona przez fontSize, więc przy zmianie rozmiaru line-height skaluje się proporcjonalnie. Flutter oferuje również StrutStyle — mechanizm do wymuszania stałego line-height niezależnie od faktycznych glifów w wierszu.

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

// Flutter: StrutStyle dla stałego line height
Text(
    'Tekst z StrutStyle
stały line height
niezależny od glifów',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle jest szczególnie przydatny dla list z różnymi rozmiarami (np. czaty, kanały informacyjne), gdzie konieczne jest, aby wszystkie wiersze miały jednakową wysokość niezależnie od zawartości. Bez StrutStyle wiersz zawierający tylko litery bez descender będzie miał mniejszą faktyczną wysokość niż wiersz z literami „p” i „y”, co prowadzi do drżenia tekstu podczas przewijania.

Według danych Flutter Documentation — Text Layout (2025), StrutStyle z forceStrutHeight: true gwarantuje, że wysokość każdego wiersza będzie równa zadanej wartości, a faktyczne glify będą wyrównane do baseline wewnątrz tej przestrzeni. To standardowe podejście dla list tekstowych, gdzie pionowy rytm jest krytyczny dla percepcji wizualnej.

Adaptacyjny Line Height dla różnych ekranów

Aplikacje mobilne działają na urządzeniach o różnych rozmiarach ekranu, gęstościach pikseli i ustawieniach dostępności. Line height powinien dostosowywać się do tych zmian, zachowując czytelność. Podstawowa zasada: używaj bezwymiarowych mnożników (unitless), a nie stałych wartości w px lub pt, aby line-height skalował się wraz z font-size.

Przy używaniu Dynamic Type (iOS) lub fontScale (Android) rozmiar czcionki może zwiększyć się o 20–50% względem podstawowego. Line-height określony przez mnożnik automatycznie się skaluje. Jeśli natomiast line-height jest ustawiony jako stała wartość (np. 24 px przy font-size 16 pt), przy zwiększeniu czcionki do 22 pt względny line-height zmniejszy się do 1.09 — co jest już poniżej progu czytelności.

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

// Oblicz line-height jako mnożnik z dynamicznej czcionki
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Według danych Material Design — Responsive Typography (2025), dla tabletów i dużych ekranów (powyżej 600 dp szerokości) line-height tekstu podstawowego zaleca się zwiększać o 0.1–0.2 względem telefonów, ponieważ długość wiersza staje się większa. Dla urządzeń foldable, gdzie szerokość ekranu zmienia się dynamicznie, line-height powinien być przeliczany przy każdej zmianie konfiguracji.