Line Height nello sviluppo di app — cos'è e impatto sulla tipografia

Cos'è il Line Height in tipografia

Line Height (altezza della riga) è un parametro tipografico fondamentale che determina la distanza tra le linee di base (baseline) di righe consecutive. Nello sviluppo web e mobile, il line height definisce il ritmo verticale del testo: ogni riga occupa un'altezza specifica e questo parametro si accumula passando alla riga successiva. Il line height include non solo l'altezza effettiva dei glifi (ascendente + discendente), ma anche lo spazio aggiuntivo che migliora la leggibilità.

Matematicamente, il line height si esprime come: line-height = font-size × multiplier. Se font-size = 16 px e multiplier = 1,5, allora line-height = 24 px. L'interlinea (leading) in questo caso sarebbe 24 - (ascendente + discendente) pixel. La maggior parte dei sistemi di design e piattaforme utilizza il moltiplicatore proprio perché si adatta automaticamente quando la dimensione del carattere cambia.

Secondo Material Design Type Scale (2025), il line height è uno dei tre parametri chiave del sistema tipografico di un'applicazione, insieme a font-size e font-weight. Valori coerenti di line height per tutti i livelli della gerarchia tipografica creano un ritmo verticale che rende l'interfaccia visivamente coesa. Una deviazione del 10% del line-height dal valore ottimale è già percepibile a occhio nudo e riduce la qualità percepita dell'interfaccia.

Line Height vs Leading: qual è la differenza

Leading (pronunciato «lédin») è un termine tipografico storico che indica la distanza tra le righe da baseline a baseline meno l'altezza dei glifi. Nella composizione tipografica metallica, il leading erano le strisce di piombo inserite tra le righe per aumentare la spaziatura. Il line height è un concetto più moderno che include sia l'altezza del carattere che il leading.

In pratica, la differenza è importante quando si traducono progetti da Figma o Sketch in codice. Gli strumenti di design solitamente specificano line-height (o semplicemente l'altezza della riga). Le API delle piattaforme mobili possono usare termini diversi: iOS usa lineSpacing (più vicino al leading) insieme a minimumLineHeight/maximumLineHeight, Android usa LineHeightStyle con alignment e trim, Flutter usa height (moltiplicatore senza unità).

// 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

La differenza chiave: se si imposta minimumLineHeight, tutte le righe avranno la stessa altezza, il che è utile per una griglia ritmica. Se si imposta solo lineSpacing, l'altezza della riga varierà in base alla dimensione del carattere — questo è un approccio più flessibile ma meno prevedibile. Per i sistemi di design, si raccomanda minimumLineHeight perché dà un risultato strettamente controllato.

Secondo IBM Carbon Design System — Typography Guidelines (2025), la differenza tra line height e leading è particolarmente evidente quando si utilizzano caratteri personalizzati. Se il carattere ha un leading integrato grande (ad esempio, SF Pro), lineSpacing = 0 dà un risultato accettabile. Se il leading del carattere è piccolo (alcuni caratteri open source), le righe appariranno attaccate senza lineSpacing aggiuntivo.

Line Height ottimale per interfacce mobili

Il line height ottimale dipende da diversi fattori: dimensione del carattere, lunghezza della riga, tipo di carattere e pubblico di destinazione. Per il testo principale sui dispositivi mobili (lunghezza della riga 35–55 caratteri), l'intervallo consigliato è 1,4–1,6 volte il font-size. Questo valore fornisce una spaziatura verticale sufficiente per un movimento confortevole dell'occhio tra le righe senza perdere la coesione visiva del testo.

Per i titoli, dove la lunghezza della riga è solitamente più corta (2–6 parole), il line height può essere più piccolo — 1,1–1,25 volte il font-size. I titoli non richiedono una grande interlinea poiché la loro funzione principale è attirare l'attenzione, non la lettura prolungata. Inoltre, dimensioni grandi dei titoli (24–32 pt) con line-height 1,5 creerebbero spazi eccessivi che rompono il ritmo verticale della pagina.

• Testo principale (16–18 pt) — line-height 1,4–1,6. Minimo per una lettura confortevole su dispositivi mobili, dove la lunghezza della riga è limitata dalla larghezza dello schermo.
• Testo piccolo (11–13 pt) — line-height 1,3–1,5. Le dimensioni del carattere piccole richiedono un moltiplicatore minore poiché le righe sono più corte e l'occhio trova la riga successiva più velocemente.
• Testo grande (20–32 pt) — line-height 1,1–1,25. Più grande è il carattere, minore è la spaziatura relativa tra le righe necessaria per la leggibilità.
• Testo monospaziato — line-height 1,3–1,5. I caratteri monospaziati (per codice) hanno solitamente metriche più grandi, quindi il line-height può essere ridotto a 1,3.

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

Secondo W3C — Accessibility Requirements for Typography (2025), un line height inferiore a 1,2 per il testo principale è considerato una barriera di accessibilità: gli utenti con dislessia e disabilità visive incontrano difficoltà significative nella lettura di testo denso. WCAG 2.2 raccomanda un line-height di almeno 1,5 per il contenuto principale, sebbene nelle interfacce mobili questo valore possa essere ridotto a 1,4 considerando la larghezza limitata dello schermo.

Line Height su iOS: UIKit e SwiftUI

Su iOS, il line height è controllato tramite NSMutableParagraphStyle o i modificatori integrati di SwiftUI. UIKit fornisce tre proprietà chiave: minimumLineHeight e maximumLineHeight (impostano l'altezza esatta della riga) e lineSpacing (spazio aggiuntivo tra le righe). Quando si utilizza TextKit (NSTextStorage, NSLayoutManager), il line height viene considerato in lineFragmentRect e influisce sul calcolo della geometria del blocco di testo.

// 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, il line height viene impostato tramite il modificatore .lineSpacing(value), che aggiunge spazio extra tra le righe, o tramite .font con un TextStyle personalizzato che includa il line height. SwiftUI supporta anche i tipi dinamici: il line height specificato si adatta quando l'utente modifica la dimensione del carattere nelle impostazioni.

// 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

Secondo Apple HIG — Typography Implementation (2025), quando si utilizza un line-height fisso tramite minimumLineHeight, è necessario assicurarsi che il valore non sia inferiore al line-height naturale del carattere. Se minimumLineHeight è inferiore a ascendente + discendente, UIKit ignora l'impostazione e utilizza l'altezza naturale. Ciò può portare a risultati imprevisti quando si cambia il carattere o la dimensione.

Line Height su Android: sistema View e Compose

Nello sviluppo Android, il line height è gestito diversamente nel sistema View classico e in Jetpack Compose. Nel sistema View si utilizza il metodo TextView.setLineSpacing(extra, multiplier). Il parametro extra è spazio aggiuntivo in pixel, multiplier è un fattore dell'altezza naturale della riga. L'altezza risultante = line-height naturale × 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, la classe LineHeightStyle viene utilizzata per gestire il line height, consentendo di impostare l'allineamento (Alignment) e il ritaglio (Trim) dello spazio tra le righe. Ciò fornisce un controllo più preciso rispetto a un semplice moltiplicatore. Ad esempio, è possibile specificare che lo spazio aggiuntivo tra le righe sia distribuito equamente sopra e sotto la riga (align.Center) o aggiunto completamente sopra (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)
    )
)

Secondo Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (predefinito) conserva lo spazio sulla prima e sull'ultima riga, il che può rompere l'allineamento in Card o Column. Si consiglia Trim.Both per contenitori con altezza fissa e Trim.LastLine per blocchi di testo dove il bordo inferiore è importante.

Line Height in Flutter: TextStyle e StrutStyle

In Flutter, il line height viene impostato tramite la proprietà height della classe TextStyle. È un moltiplicatore senza unità del font-size: height: 1,5 con fontSize: 16 dà un line-height di 24,0. Il valore height moltiplica implicitamente fontSize, quindi il line-height si adatta proporzionalmente quando la dimensione del carattere cambia. Flutter offre anche StrutStyle — un meccanismo per forzare un line-height fisso indipendentemente dai glifi effettivi nella riga.

// 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 è particolarmente utile per elenchi con diverse dimensioni del carattere (ad esempio, chat, feed di notizie), dove tutte le righe devono avere la stessa altezza indipendentemente dal contenuto. Senza StrutStyle, una riga contenente solo lettere senza discendenti avrà un'altezza effettiva minore rispetto a una riga con lettere come «p» e «y», causando vibrazioni del testo durante lo scorrimento.

Secondo Flutter Documentation — Text Layout (2025), StrutStyle con forceStrutHeight: true garantisce che l'altezza di ogni riga sia uguale al valore specificato e che i glifi effettivi siano allineati per baseline all'interno di questo spazio. Questo è l'approccio standard per elenchi di testo dove il ritmo verticale è critico per la percezione visiva.

Line Height adattivo per diversi schermi

Le applicazioni mobili funzionano su dispositivi con diverse dimensioni dello schermo, densità di pixel e impostazioni di accessibilità. Il line height deve adattarsi a questi cambiamenti mantenendo la leggibilità. La regola principale: utilizzare moltiplicatori senza unità (unitless), non valori fissi in px o pt, in modo che il line-height si adatti insieme al font-size.

Quando si utilizza Dynamic Type (iOS) o fontScale (Android), la dimensione del carattere può aumentare del 20–50% rispetto al valore base. Il line-height specificato tramite un moltiplicatore si adatta automaticamente. Se il line-height è impostato come valore fisso (ad esempio, 24 px con font-size 16 pt), quando il carattere aumenta a 22 pt il line-height relativo scende a 1,09 — già al di sotto della soglia di leggibilità.

// 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

Secondo Material Design — Responsive Typography (2025), per tablet e schermi grandi (oltre 600 dp di larghezza), si consiglia di aumentare il line-height del testo principale di 0,1–0,2 rispetto ai telefoni, poiché la lunghezza della riga diventa maggiore. Per i dispositivi pieghevoli, dove la larghezza dello schermo cambia dinamicamente, il line-height deve essere ricalcolato a ogni cambio di configurazione.