Line Height în dezvoltarea aplicațiilor — ce este și impactul asupra tipografiei

Ce este Line Height în tipografie

Line Height (înălțimea rândului) — este un parametru fundamental al tipografiei care determină distanța dintre liniile de bază (baseline) ale rândurilor consecutive. În dezvoltarea web și mobilă, line height stabilește ritmul vertical al textului: fiecare rând ocupă o anumită înălțime, iar acest parametru se cumulează la trecerea la rândul următor. Line height include nu doar înălțimea efectivă a glifelor (ascender + descender), ci și spațiul suplimentar care îmbunătățește lizibilitatea.

Matematic, line height se exprimă astfel: line-height = font-size × multiplier. Dacă font-size = 16 px, iar multiplier = 1.5, atunci line-height = 24 px. Spațiul dintre rânduri (leading) în acest caz va fi de 24 - (ascender + descender) pixeli. Majoritatea sistemelor de design și platformelor folosesc exact multiplicatorul, deoarece acesta se scalează automat la modificarea dimensiunii fontului.

Conform datelor Material Design Type Scale (2025), line height — unul dintre cei trei parametri cheie ai sistemului tipografic al aplicației, alături de font-size și font-weight. Valorile coerente ale line height pentru toate nivelurile ierarhiei tipografice creează un ritm vertical care face interfața vizual coerentă. O abatere a line-height cu 10% de la valoarea optimă este deja vizibilă cu ochiul liber și reduce calitatea percepută a interfeței.

Line Height vs Leading: care este diferența

Leading (se pronunță „lending") — este un termen tipografic istoric care desemnează distanța dintre rânduri de la baseline la baseline minus înălțimea glifelor. În compunerea metalică, leading — sunt benzile de plumb introduse între rânduri pentru a mări distanța. Line height — este un concept mai modern care include atât înălțimea fontului, cât și leading-ul.

În practică, diferența contează la transferul machetelor din Figma sau Sketch în cod. Instrumentele de design indică de obicei line-height (sau pur și simplu înălțimea rândului). În platformele mobile, API-ul poate fi denumit diferit: iOS folosește termenul lineSpacing (mai apropiat de leading) împreună cu minimumLineHeight/maximumLineHeight, Android — LineHeightStyle cu alignment și trim, Flutter — height (unitless multiplier).

// iOS: diferența dintre line height și line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Setarea directă a line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Spațiul dintre rânduri (spațiu suplimentar între rânduri)
paragraphStyle.lineSpacing = 4.0  // adăugat la line height natural al fontului

Diferența cheie: dacă setezi minimumLineHeight, toate rândurile vor avea aceeași înălțime, ceea ce este bun pentru o grilă ritmică. Dacă setezi doar lineSpacing, înălțimea rândului se va modifica în funcție de dimensiunea fontului — o abordare mai flexibilă, dar mai puțin predictibilă. Pentru sistemele de design se recomandă utilizarea minimumLineHeight, deoarece oferă un rezultat strict controlat.

Conform datelor IBM Carbon Design System — Typography Guidelines (2025), diferența dintre line height și leading este deosebit de vizibilă la utilizarea fonturilor personalizate. Dacă fontul are un leading încorporat mare (de exemplu, SF Pro), lineSpacing = 0 oferă un rezultat acceptabil. Dacă leading-ul fontului este mic (unele fonturi open-source), fără un lineSpacing suplimentar, rândurile vor părea lipite.

Line Height optim pentru interfețe mobile

Line height optim depinde de mai mulți factori: dimensiunea fontului, lungimea rândului, fontul și publicul țintă. Pentru textul principal pe dispozitive mobile (lungimea rândului 35–55 de caractere), intervalul recomandat este 1.4–1.6 din font-size. Această valoare asigură un interval vertical suficient pentru tranziția confortabilă a privirii între rânduri fără pierderea coerenței vizuale a textului.

Pentru titluri, unde lungimea rândului este de obicei mai scurtă (2–6 cuvinte), line height poate fi mai mic — 1.1–1.25 din font-size. Titlurile nu necesită un spațiu mare între rânduri, deoarece funcția lor principală este atragerea atenției, nu lectura îndelungată. În plus, dimensiunile mari ale titlurilor (24–32 pt) la line-height 1.5 ar crea spații excesive care perturbă ritmul vertical al paginii.

• Text principal (16–18 pt) — line-height 1.4–1.6. Minim pentru lectură confortabilă pe dispozitive mobile, unde lungimea rândului este limitată de lățimea ecranului.
• Text mic (11–13 pt) — line-height 1.3–1.5. Dimensiunea mică necesită un multiplicator mai redus, deoarece rândurile sunt mai scurte și ochiul găsește mai rapid următorul rând.
• Text mare (20–32 pt) — line-height 1.1–1.25. Cu cât fontul este mai mare, cu atât este necesar un spațiu relativ mai mic între rânduri pentru lizibilitate.
• Text monospațiat — line-height 1.3–1.5. Fonturile monospațiate (pentru cod) au de obicei metrici mai mari, prin urmare line-height poate fi redus la 1.3.

// Flutter: line height în sistemul de design
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
    );
}

Conform datelor W3C — Accessibility Requirements for Typography (2025), line height sub 1.2 pentru textul principal este considerat o barieră de accesibilitate: utilizatorii cu dislexie și tulburări de vedere întâmpină dificultăți semnificative la citirea textului dens. WCAG 2.2 recomandă line-height de cel puțin 1.5 pentru conținutul principal, însă în interfețele mobile această valoare poate fi redusă la 1.4, având în vedere lățimea limitată a ecranului.

Line Height în iOS: UIKit și SwiftUI

În iOS, line height este gestionat prin NSMutableParagraphStyle sau prin modificatorii încorporați ai SwiftUI. În UIKit sunt disponibile trei proprietăți cheie: minimumLineHeight și maximumLineHeight (stabilesc înălțimea exactă a rândului) și lineSpacing (spațiul suplimentar între rânduri). La utilizarea TextKit (NSTextStorage, NSLayoutManager), line height este luat în considerare în lineFragmentRect și influențează calculul geometriei blocului text.

// iOS UIKit: setarea line height prin NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = line-height fix

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
)

În SwiftUI, line height se stabilește prin modificatorul .lineSpacing(value), care adaugă spațiu suplimentar între rânduri, sau prin .font cu un TextStyle personalizat care include line height. SwiftUI suportă și tipurile dinamice: line height stabilit se scalează atunci când utilizatorul modifică dimensiunea fontului în setări.

// SwiftUI: line height prin lineSpacing
Text("Text cu spațiere personalizată a rândurilor
linia a doua
linia a treia")
    .font(.body)
    .lineSpacing(4)     // spațiu suplimentar între rânduri

// SwiftUI: line height fix prin stil personalizat
Text("Titlu cu line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensare pentru line-height precis

Conform datelor Apple HIG — Typography Implementation (2025), la utilizarea unui line-height fix prin minimumLineHeight trebuie să vă asigurați că valoarea nu este mai mică decât line-height natural al fontului. Dacă minimumLineHeight este mai mic decât ascender + descender, UIKit ignoră setarea și utilizează înălțimea naturală. Acest lucru poate duce la rezultate neașteptate la schimbarea fontului sau a dimensiunii.

Line Height în Android: sistemul View și Compose

În dezvoltarea Android, line height este gestionat diferit în sistemul clasic View și Jetpack Compose. În sistemul View se utilizează metoda TextView.setLineSpacing(extra, multiplier). Parametrul extra — spațiu suplimentar în pixeli, multiplier — multiplicatorul înălțimii naturale a rândului. Înălțimea rezultată = line-height natural × multiplier + extra.

// Sistemul View Android: spațierea rândurilor
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Utilizare în XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

În Jetpack Compose, pentru gestionarea line height se utilizează clasa LineHeightStyle, care permite setarea alinierii (Alignment) și tăierii (Trim) spațiului dintre rânduri. Acest lucru oferă un control mai fin decât un simplu multiplicator. De exemplu, se poate specifica că spațiul suplimentar dintre rânduri trebuie distribuit uniform deasupra și dedesubtul rândului (align.Center) sau adăugat complet deasupra (align.Top).

// Jetpack Compose: exemplu LineHeightStyle
Text(
    text = "Text exemplu
cu LineHeightStyle personalizat
în Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Multiplicator simplu prin TextStyle
Text(
    text = "Multiplicator line height",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Conform datelor Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (implicit) păstrează primul și ultimul rând cu spații, ceea ce poate perturba alinierea în Card sau Column. Se recomandă utilizarea Trim.Both pentru containerele cu înălțime fixă și Trim.LastLine pentru blocurile text unde marginea inferioară este importantă.

Line Height în Flutter: TextStyle și StrutStyle

În Flutter, line height este stabilit prin proprietatea height a clasei TextStyle. Acesta este un multiplicator unitless față de font-size: height: 1.5 cu fontSize: 16 oferă line-height 24.0. Valoarea height este înmulțită implicit cu fontSize, prin urmare la modificarea dimensiunii, line-height se scalează proporțional. Flutter oferă și StrutStyle — un mecanism pentru forțarea unui line-height fix, independent de glifele efective din rând.

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

// Flutter: StrutStyle pentru line height fix
Text(
    'Text cu StrutStyle
line height fix
independent de glife',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle este deosebit de util pentru liste cu dimensiuni diferite (de exemplu, chat-uri, fluxuri de știri), unde este necesar ca toate rândurile să aibă aceeași înălțime indiferent de conținut. Fără StrutStyle, un rând care conține doar litere fără descender va avea o înălțime efectivă mai mică decât un rând cu literele „p" și „y", ceea ce duce la tremurul textului la derulare.

Conform datelor Flutter Documentation — Text Layout (2025), StrutStyle cu forceStrutHeight: true garantează că înălțimea fiecărui rând va fi egală cu valoarea stabilită, iar glifele efective vor fi aliniate pe baseline în interiorul acestui spațiu. Aceasta este abordarea standard pentru listele text unde ritmul vertical este critic pentru percepția vizuală.

Line Height adaptiv pentru diferite ecrane

Aplicațiile mobile funcționează pe dispozitive cu diferite dimensiuni ale ecranului, densități de pixeli și setări de accesibilitate. Line height trebuie să se adapteze la aceste modificări, păstrând lizibilitatea. Regula de bază: utilizați multiplicatori fără dimensiune (unitless), nu valori fixe în px sau pt, pentru ca line-height să se scaleze odată cu font-size.

La utilizarea Dynamic Type (iOS) sau fontScale (Android), dimensiunea fontului poate crește cu 20–50% față de cea de bază. Line-height stabilit prin multiplicator se scalează automat. Dacă line-height este stabilit ca o valoare fixă (de exemplu, 24 px la font-size 16 pt), la mărirea fontului la 22 pt, line-height relativ va scădea la 1.09 — ceea ce este deja sub pragul de lizibilitate.

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

// Calculați line-height ca multiplicator din fontul dinamic
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Conform datelor Material Design — Responsive Typography (2025), pentru tablete și ecrane mari (peste 600 dp lățime), line-height al textului principal se recomandă a fi crescut cu 0.1–0.2 față de telefoane, deoarece lungimea rândului devine mai mare. Pentru dispozitivele foldable, unde lățimea ecranului se modifică dinamic, line-height trebuie recalculat la fiecare schimbare a configurației.