Leading et interlignage : ce que c’est et configuration sous iOS et Android

Qu’est-ce que le leading et l’interlignage

Leading (prononcé «léding») — est la distance verticale entre les lignes de base des lignes adjacentes en typographie. La ligne de base est la ligne invisible sur laquelle les caractères du texte sont positionnés. Plus le leading est grand, plus les lignes sont disposées librement les unes par rapport aux autres. En typographie numérique, le leading est souvent appelé interlignage ou hauteur de ligne.

Historiquement, le terme est apparu à l’ère de la typographie métallique : les compositeurs inséraient de fines bandes de plomb entre les lignes pour augmenter l’intervalle. Dans les polices modernes, le leading est défini comme un rapport à la taille de la police. Valeur système par défaut — 1.2 (120% de la taille de la police), mais pour les textes longs et les interfaces mobiles, une valeur plus grande est recommandée. Selon les Material Design Typography Guidelines, la hauteur de ligne optimale pour les interfaces web et mobiles est de 1.4 à 1.5 pour le texte principal.

Différence entre leading et interlignage : le leading est la distance totale de ligne de base à ligne de base, l’interlignage est la distance entre la limite inférieure d’une ligne et la limite supérieure de la suivante. Dans la plupart des API mobiles (iOS NSParagraphStyle, Android TextView), l’interlignage est utilisé comme espacement supplémentaire au-dessus de la hauteur naturelle de la ligne. Ceci est important à prendre en compte lors du calcul de l’interlignage total.

Valeurs optimales de leading pour les interfaces mobiles

Le choix du leading optimal dépend de plusieurs facteurs : la taille de la police, la longueur de la ligne, le contexte d’utilisation et le public. Pour les interfaces mobiles avec une largeur de ligne typique de 40 à 60 caractères, un leading de 1.4 à 1.6 de la taille de la police est recommandé. Les lignes courtes (étiquettes, boutons) peuvent utiliser un leading plus petit — 1.0 à 1.2. Les textes longs (articles, descriptions) — un leading plus grand, jusqu’à 1.8 pour une lisibilité maximale.

Données expérimentales : une étude du Wichita State University Software Usability Laboratory a montré qu’un leading de 1,5 augmente la vitesse de lecture de 7,5% par rapport à un leading de 1,0 à largeur de ligne égale. Pour les utilisateurs dyslexiques, le leading optimal est encore plus élevé — jusqu’à 1,8. Ces données sont confirmées par les recommandations WCAG 2.2, qui exigent la possibilité d’augmenter l’interlignage jusqu’à 1,5 sans perte de contenu.

Influence de la police : les polices avec une hauteur de x élevée (hauteur relative des lettres minuscules) nécessitent un leading plus grand que les polices avec une hauteur de x faible. Par exemple, Helvetica (hauteur de x élevée) recommande un leading de 1.5 pour le corps du texte, tandis que Didot (hauteur de x faible) — 1.3. Cela est lié au fait qu’avec une hauteur de x élevée, les lignes fusionnent visuellement plus rapidement avec le même interlignage.

Implémentation du leading sous iOS via NSParagraphStyle

Sous iOS, l’interlignage est contrôlé via la classe NSMutableParagraphStyle, qui contient deux propriétés clés : lineSpacing (espacement supplémentaire entre les lignes en points) et lineHeightMultiple (multiplicateur de hauteur de ligne). Ces propriétés fonctionnent ensemble : la hauteur de ligne finale est calculée comme la hauteur naturelle de la police multipliée par lineHeightMultiple, plus lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Méthode 1 : multiplicateur de hauteur de ligne
paragraphStyle.lineHeightMultiple = 1.5

// Méthode 2 : espacement supplémentaire entre les lignes
paragraphStyle.lineSpacing = 4.0

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

lineHeightMultiple — est la méthode préférée, car elle est automatiquement mise à l’échelle lorsque la taille de la police change. lineSpacing est défini en points absolus et n’est pas mis à l’échelle, ce qui peut entraîner des incohérences lors de l’utilisation de Dynamic Type. Selon le Apple Text Programming Guide, pour les interfaces compatibles avec l’accessibilité, utilisez lineHeightMultiple en combinaison avec UIFontMetrics.

SwiftUI fournit le modificateur .lineSpacing() pour Text et VStack. Contrairement à UIKit, dans SwiftUI, l’interlignage est défini en points et n’a pas de multiplicateur intégré. Pour implémenter un multiplicateur, le développeur doit calculer manuellement l’interlignage en fonction de la taille de la police. Limitation : SwiftUI ne prend pas en charge lineHeightMultiple directement — utilisez .lineSpacing(CGFloat) avec une valeur calculée.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% de la taille de la police
    }

    var body: some View {
        Text("Interlignage")
        Text("Multiplicateur 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Configuration de l’interlignage sous Android

Sous Android, l’interlignage est défini via deux attributs de TextView : lineSpacingExtra (espacement supplémentaire en px) et lineSpacingMultiplier (multiplicateur de hauteur de ligne, par défaut 1.0). Comme sous iOS, le multiplicateur est mis à l’échelle lorsque la taille de la police change, tandis que l’extra est une valeur absolue. Pour les interfaces compatibles avec l’accessibilité, il est préférable d’utiliser le multiplicateur.

// En mise en page 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" />

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

Compose — le framework d’UI moderne d’Android — utilise le paramètre lineHeight dans le modificateur TextStyle. Contrairement à l’approche XML, dans Compose, lineHeight est défini comme la hauteur totale de la ligne en sp (par défaut = fontSize * 1.2). Pour définir un multiplicateur, le développeur spécifie lineHeight en pourcentage de fontSize : Exemple : TextStyle(fontSize = 16.sp, lineHeight = 24.sp) donne un multiplicateur de 1.5.

Limitation : sous Android jusqu’à l’API 28, lineSpacingExtra et lineSpacingMultiplier fonctionnent incorrectement avec certaines polices, en particulier les polices personnalisées (TTF/OTF). Il est recommandé de tester sur des appareils réels et de noter que systemTextView utilise par défaut lineSpacingMultiplier 1.0 — sans espacement supplémentaire. Pour les textes longs dans ScrollView, l’interlignage doit être explicitement défini.

Interlignage dans le développement web via CSS line-height

Sur le web, l’interlignage est défini par la propriété CSS line-height, qui peut être un nombre (multiplicateur), une valeur en pourcentage, des unités de longueur (px, em) ou le mot-clé normal. Le multiplicateur numérique est la méthode préférée, car il est hérité et mis à l’échelle par rapport à la taille de la police des éléments enfants. La valeur normal correspond à environ 1.2 pour la plupart des polices.

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

Multiplicateur numérique vs em : line-height: 1.5 et line-height: 1.5em sont des choses différentes. Le multiplicateur numérique est hérité comme valeur calculée et est recalculé pour chaque élément enfant en fonction de sa font-size. em est hérité comme valeur calculée fixe basée sur la font-size du parent. C’est une différence critique : lorsque font-size: 20px est à l’intérieur de font-size: 16px, line-height: 1.5 donnera 30px, tandis que line-height: 1.5em donnera 24px (du parent). Recommandation : utilisez toujours le multiplicateur numérique.

Comparaison des paramètres de leading sous iOS, Android et sur le web

Malgré des API différentes, le principe de configuration de l’interlignage est le même sur toutes les plateformes. Le multiplicateur est mis à l’échelle lorsque la taille de la police change et est compatible avec l’accessibilité. La valeur absolue (espacement) n’est pas mise à l’échelle et peut causer des problèmes lors de l’utilisation de Dynamic Type ou des paramètres de texte large.

Stratégie multiplateforme : définissez lineHeight dans le système de conception comme un multiplicateur de fontSize. Par exemple, dans les jetons de conception : line-height-body = 1.5, line-height-heading = 1.1. Chaque plateforme implémente ce multiplicateur via sa propre API : iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Cela garantit le même résultat visuel sur toutes les plateformes.

Nuance importante : sous iOS, lineHeightMultiple est appliqué à la hauteur totale de la ligne (incluant l’ascendant + descendant de la police), tandis que sous Android, lineSpacingMultiplier est appliqué à la hauteur de ligne calculée par le moteur de rendu Minikin. En pratique, cela entraîne de légères différences visuelles du leading avec la même valeur de multiplicateur. Pour une correspondance pixel-perfect, utilisez des valeurs absolues avec un ajustement spécifique à la plateforme.