Leading e spaziatura tra le righe: cosa sono e configurazione in iOS e Android

Cosa sono il leading e la spaziatura tra le righe

Leading (pronunciato “lèding”) — è la distanza verticale tra le linee di base delle righe adiacenti in tipografia. La linea di base è la linea invisibile su cui sono posizionati i caratteri del testo. Maggiore è il leading, più liberamente le righe sono disposte l’una rispetto all’altra. Nella tipografia digitale, il leading viene spesso chiamato spaziatura tra le righe o altezza della riga.

Storicamente, il termine è apparso nell’era della tipografia metallica: i compositori inserivano sottili strisce di piombo tra le righe per aumentare l’intervallo. Nei caratteri moderni, il leading viene definito come un rapporto rispetto alla dimensione del carattere. Valore predefinito di sistema — 1.2 (120% della dimensione del carattere), ma per testi lunghi e interfacce mobili si consiglia un valore maggiore. Secondo le Material Design Typography Guidelines, l’altezza della riga ottimale per interfacce web e mobili è 1.4-1.5 per il testo principale.

Differenza tra leading e spaziatura tra le righe: il leading è la distanza totale da linea di base a linea di base, la spaziatura tra le righe è la distanza tra il bordo inferiore di una riga e il bordo superiore della successiva. Nella maggior parte delle API mobili (iOS NSParagraphStyle, Android TextView), la spaziatura tra le righe viene utilizzata come spazio aggiuntivo sopra l’altezza naturale della riga. Questo è importante da considerare nel calcolo della spaziatura totale tra le righe.

Valori ottimali di leading per interfacce mobili

La scelta del leading ottimale dipende da diversi fattori: dimensione del carattere, lunghezza della riga, contesto d’uso e pubblico. Per le interfacce mobili con larghezza tipica della riga di 40-60 caratteri, si consiglia un leading da 1.4 a 1.6 della dimensione del carattere. Le righe corte (etichette, pulsanti) possono utilizzare un leading minore — 1.0-1.2. I testi lunghi (articoli, descrizioni) — un leading maggiore, fino a 1.8 per la massima leggibilità.

Dati sperimentali: uno studio del Wichita State University Software Usability Laboratory ha mostrato che il leading 1.5 aumenta la velocità di lettura del 7,5% rispetto al leading 1.0 a parità di larghezza della riga. Per gli utenti con dislessia, il leading ottimale è ancora più alto — fino a 1,8. Questi dati sono confermati dalle raccomandazioni WCAG 2.2, che richiedono la possibilità di aumentare la spaziatura tra le righe fino a 1,5 senza perdita di contenuto.

Influenza del carattere: i caratteri con x-height alta (altezza relativa delle lettere minuscole) richiedono un leading maggiore rispetto ai caratteri con x-height bassa. Ad esempio, Helvetica (x-height alta) raccomanda un leading di 1.5 per il corpo del testo, mentre Didot (x-height bassa) — 1.3. Ciò è dovuto al fatto che con x-height alta le righe si fondono visivamente più rapidamente con la stessa spaziatura tra le righe.

Implementazione del leading su iOS tramite NSParagraphStyle

Su iOS, la spaziatura tra le righe viene controllata tramite la classe NSMutableParagraphStyle, che contiene due proprietà chiave: lineSpacing (spazio aggiuntivo tra le righe in punti) e lineHeightMultiple (moltiplicatore di altezza della riga). Queste proprietà lavorano insieme: l’altezza finale della riga viene calcolata come l’altezza naturale del carattere moltiplicata per lineHeightMultiple, più lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Metodo 1: moltiplicatore di altezza della riga
paragraphStyle.lineHeightMultiple = 1.5

// Metodo 2: spaziatura extra tra le righe
paragraphStyle.lineSpacing = 4.0

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

lineHeightMultiple — è il metodo preferito, poiché viene ridimensionato automaticamente quando la dimensione del carattere cambia. lineSpacing viene definito in punti assoluti e non viene ridimensionato, il che può portare a incongruenze quando si utilizza Dynamic Type. Secondo l’Apple Text Programming Guide, per interfacce compatibili con l’accessibilità, utilizzare lineHeightMultiple in combinazione con UIFontMetrics.

SwiftUI fornisce il modificatore .lineSpacing() per Text e VStack. A differenza di UIKit, in SwiftUI la spaziatura tra le righe viene definita in punti e non ha un moltiplicatore incorporato. Per implementare un moltiplicatore, lo sviluppatore deve calcolare manualmente la spaziatura tra le righe in base alla dimensione del carattere. Limitazione: SwiftUI non supporta lineHeightMultiple direttamente — utilizzare .lineSpacing(CGFloat) con un valore calcolato.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% della dimensione del carattere
    }

    var body: some View {
        Text("Spaziatura tra le righe")
        Text("Moltiplicatore 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Configurazione della spaziatura tra le righe su Android

Su Android, la spaziatura tra le righe viene definita tramite due attributi di TextView: lineSpacingExtra (spazio aggiuntivo in px) e lineSpacingMultiplier (moltiplicatore di altezza della riga, default 1.0). Analogamente a iOS, il moltiplicatore viene ridimensionato quando la dimensione del carattere cambia, mentre extra è un valore assoluto. Per interfacce compatibili con l’accessibilità, è preferibile utilizzare il moltiplicatore.

// In layout XML
<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" />

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

Compose — il framework UI moderno di Android — utilizza il parametro lineHeight nel modificatore TextStyle. A differenza dell’approccio XML, in Compose lineHeight viene definito come l’altezza totale della riga in sp (default = fontSize * 1.2). Per impostare un moltiplicatore, lo sviluppatore specifica lineHeight come percentuale di fontSize: Esempio: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) dà un moltiplicatore di 1.5.

Limitazione: su Android fino all’API 28, lineSpacingExtra e lineSpacingMultiplier funzionano in modo errato con alcuni caratteri, specialmente quelli personalizzati (TTF/OTF). Si consiglia di testare su dispositivi reali e di notare che systemTextView utilizza per impostazione predefinita lineSpacingMultiplier 1.0 — senza spazio aggiuntivo. Per testi lunghi in ScrollView, è obbligatorio impostare esplicitamente la spaziatura tra le righe.

Spaziatura tra le righe nello sviluppo web tramite CSS line-height

Sul web, la spaziatura tra le righe viene definita dalla proprietà CSS line-height, che può essere un numero (moltiplicatore), un valore percentuale, unità di lunghezza (px, em) o la parola chiave normal. Il moltiplicatore numerico è il metodo preferito, poiché viene ereditato e ridimensionato rispetto alla dimensione del carattere degli elementi figli. Il valore normal corrisponde a circa 1.2 per la maggior parte dei caratteri.

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

Moltiplicatore numerico vs em: line-height: 1.5 e line-height: 1.5em sono cose diverse. Il moltiplicatore numerico viene ereditato come valore calcolato e viene ricalcolato per ogni elemento figlio in base al suo font-size. em viene ereditato come valore calcolato fisso basato sul font-size del genitore. Questa è una differenza critica: quando font-size: 20px è all’interno di font-size: 16px, line-height: 1.5 darà 30px, mentre line-height: 1.5em darà 24px (dal genitore). Raccomandazione: utilizzare sempre il moltiplicatore numerico.

Confronto delle impostazioni di leading su iOS, Android e web

Nonostante API diverse, il principio di configurazione della spaziatura tra le righe è lo stesso su tutte le piattaforme. Il moltiplicatore viene ridimensionato quando la dimensione del carattere cambia ed è accessibile. Il valore assoluto (spaziatura) non viene ridimensionato e può causare problemi quando si utilizza Dynamic Type o impostazioni di testo grande.

Strategia cross-platform: definire lineHeight nel sistema di design come moltiplicatore di fontSize. Ad esempio, nei token di design: line-height-body = 1.5, line-height-heading = 1.1. Ogni piattaforma implementa questo moltiplicatore tramite la propria API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Ciò garantisce lo stesso risultato visivo su tutte le piattaforme.

Sfumatura importante: su iOS, lineHeightMultiple viene applicato all’altezza totale della riga (inclusi ascender + descender del carattere), mentre su Android, lineSpacingMultiplier viene applicato all’altezza della riga calcolata dal motore di rendering Minikin. In pratica, ciò porta a piccole differenze nel leading visivo con lo stesso valore di moltiplicatore. Per una corrispondenza pixel-perfect, utilizzare valori assoluti con un aggiustamento specifico per piattaforma.