Line Height dans le développement d'applications — définition et impact sur la typographie

Qu'est-ce que le Line Height en typographie

Line Height (hauteur de ligne) est un paramètre typographique fondamental qui détermine la distance entre les lignes de base (baseline) de lignes consécutives. Dans le développement web et mobile, le line height définit le rythme vertical du texte : chaque ligne occupe une hauteur définie, et ce paramètre s'accumule lors du passage à la ligne suivante. Le line height inclut non seulement la hauteur réelle des glyphes (ascendante + descendante), mais aussi l'espace supplémentaire qui améliore la lisibilité.

Mathématiquement, le line height s'exprime comme suit : line-height = font-size × multiplier. Si font-size = 16 px et multiplier = 1,5, alors line-height = 24 px. L'interlignage (leading) dans ce cas serait de 24 - (ascendante + descendante) pixels. La plupart des systèmes de conception et plateformes utilisent le multiplicateur précisément parce qu'il s'adapte automatiquement lorsque la taille de la police change.

Selon Material Design Type Scale (2025), le line height est l'un des trois paramètres clés du système typographique d'une application, avec font-size et font-weight. Des valeurs cohérentes de line height pour tous les niveaux de la hiérarchie typographique créent un rythme vertical qui rend l'interface visuellement cohérente. Un écart de 10 % du line-height par rapport à la valeur optimale est déjà perceptible à l'œil nu et réduit la qualité perçue de l'interface.

Line Height vs Leading : quelle est la différence

Leading (prononcé « lédine ») est un terme typographique historique qui désigne la distance entre les lignes de base à base moins la hauteur des glyphes. Dans la composition métallique, le leading était les bandes de plomb insérées entre les lignes pour augmenter l'espacement. Le line height est un concept plus moderne qui inclut à la fois la hauteur de la police et le leading.

Dans la pratique, la différence est importante lors de la traduction de maquettes Figma ou Sketch en code. Les outils de conception spécifient généralement le line-height (ou simplement la hauteur de ligne). Les API des plateformes mobiles peuvent utiliser des termes différents : iOS utilise lineSpacing (plus proche du leading) avec minimumLineHeight/maximumLineHeight, Android utilise LineHeightStyle avec alignment et trim, Flutter utilise height (multiplicateur sans 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 différence clé : si vous définissez minimumLineHeight, toutes les lignes auront la même hauteur, ce qui est bon pour une grille rythmique. Si vous définissez uniquement lineSpacing, la hauteur de ligne variera en fonction de la taille de la police — c'est une approche plus flexible mais moins prévisible. Pour les systèmes de conception, minimumLineHeight est recommandé car il donne un résultat strictement contrôlé.

Selon IBM Carbon Design System — Typography Guidelines (2025), la différence entre line height et leading est particulièrement notable lors de l'utilisation de polices personnalisées. Si la police a un grand leading intégré (par exemple, SF Pro), lineSpacing = 0 donne un résultat acceptable. Si le leading de la police est petit (certaines polices open source), les lignes apparaîtront collées sans lineSpacing supplémentaire.

Line Height optimal pour les interfaces mobiles

Le line height optimal dépend de plusieurs facteurs : taille de la police, longueur de ligne, police de caractères et public cible. Pour le texte principal sur les appareils mobiles (longueur de ligne de 35 à 55 caractères), la plage recommandée est de 1,4 à 1,6 fois la taille de la police. Cette valeur offre un espacement vertical suffisant pour un mouvement confortable de l'œil entre les lignes sans perdre la cohésion visuelle du texte.

Pour les titres, où la longueur de ligne est généralement plus courte (2 à 6 mots), le line height peut être plus petit — 1,1 à 1,25 fois la taille de la police. Les titres ne nécessitent pas un grand interlignage car leur fonction principale est d'attirer l'attention, non la lecture prolongée. De plus, les grandes tailles de police des titres (24–32 pt) avec un line-height de 1,5 créeraient des espaces excessifs qui brisent le rythme vertical de la page.

• Texte principal (16–18 pt) — line-height 1,4–1,6. Minimum pour une lecture confortable sur les appareils mobiles, où la longueur de ligne est limitée par la largeur de l'écran.
• Petit texte (11–13 pt) — line-height 1,3–1,5. Les petites tailles de police nécessitent un multiplicateur plus petit car les lignes sont plus courtes et l'œil trouve la ligne suivante plus rapidement.
• Grand texte (20–32 pt) — line-height 1,1–1,25. Plus la police est grande, moins l'espacement relatif entre les lignes est nécessaire pour la lisibilité.
• Texte à chasse fixe — line-height 1,3–1,5. Les polices à chasse fixe (pour le code) ont généralement des métriques plus grandes, donc le line-height peut être réduit à 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
    );
}

Selon W3C — Accessibility Requirements for Typography (2025), un line height inférieur à 1,2 pour le texte principal est considéré comme une barrière d'accessibilité : les utilisateurs dyslexiques et malvoyants éprouvent des difficultés significatives à lire un texte dense. WCAG 2.2 recommande un line-height d'au moins 1,5 pour le contenu principal, bien que dans les interfaces mobiles, cette valeur puisse être abaissée à 1,4 compte tenu de la largeur d'écran limitée.

Line Height sur iOS : UIKit et SwiftUI

Sur iOS, le line height est contrôlé via NSMutableParagraphStyle ou les modificateurs intégrés de SwiftUI. UIKit fournit trois propriétés clés : minimumLineHeight et maximumLineHeight (définissent la hauteur exacte de la ligne) et lineSpacing (espace supplémentaire entre les lignes). Lors de l'utilisation de TextKit (NSTextStorage, NSLayoutManager), le line height est pris en compte dans lineFragmentRect et affecte le calcul de la géométrie du bloc de texte.

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

Dans SwiftUI, le line height est défini via le modificateur .lineSpacing(value), qui ajoute un espace supplémentaire entre les lignes, ou via .font avec un TextStyle personnalisé incluant le line height. SwiftUI prend également en charge les types dynamiques : le line height spécifié s'adapte lorsque l'utilisateur modifie la taille de la police dans les paramètres.

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

Selon Apple HIG — Typography Implementation (2025), lors de l'utilisation d'un line-height fixe via minimumLineHeight, il faut s'assurer que la valeur n'est pas inférieure au line-height naturel de la police. Si minimumLineHeight est inférieur à ascendante + descendante, UIKit ignore le réglage et utilise la hauteur naturelle. Cela peut entraîner des résultats inattendus lors du changement de police ou de taille.

Line Height sur Android : système View et Compose

Dans le développement Android, le line height est géré différemment dans le système View classique et Jetpack Compose. Dans le système View, on utilise la méthode TextView.setLineSpacing(extra, multiplier). Le paramètre extra est un espace supplémentaire en pixels, multiplier est un facteur de la hauteur naturelle de la ligne. La hauteur résultante = line-height naturel × 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" />

Dans Jetpack Compose, la classe LineHeightStyle est utilisée pour gérer le line height, permettant de définir l'alignement (Alignment) et le rognage (Trim) de l'espace interligne. Cela offre un contrôle plus précis qu'un simple multiplicateur. Par exemple, vous pouvez spécifier que l'espace interligne supplémentaire soit réparti équitablement au-dessus et au-dessous de la ligne (align.Center) ou ajouté entièrement au-dessus (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)
    )
)

Selon Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (par défaut) conserve l'espace sur la première et la dernière ligne, ce qui peut briser l'alignement dans Card ou Column. Trim.Both est recommandé pour les conteneurs à hauteur fixe et Trim.LastLine pour les blocs de texte où le bord inférieur est important.

Line Height dans Flutter : TextStyle et StrutStyle

Dans Flutter, le line height est défini via la propriété height de la classe TextStyle. C'est un multiplicateur sans unité du font-size : height: 1,5 avec fontSize: 16 donne un line-height de 24,0. La valeur height multiplie implicitement fontSize, donc le line-height s'adapte proportionnellement lorsque la taille de la police change. Flutter propose également StrutStyle — un mécanisme pour forcer un line-height fixe indépendamment des glyphes réels dans la ligne.

// 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 est particulièrement utile pour les listes avec différentes tailles de police (par exemple, chats, fils d'actualité), où toutes les lignes doivent avoir la même hauteur indépendamment du contenu. Sans StrutStyle, une ligne contenant uniquement des lettres sans jambage inférieur aura une hauteur réelle plus petite qu'une ligne avec des lettres comme « p » et « y », provoquant un tremblement du texte lors du défilement.

Selon Flutter Documentation — Text Layout (2025), StrutStyle avec forceStrutHeight: true garantit que la hauteur de chaque ligne est égale à la valeur spécifiée, et les glyphes réels sont alignés par la ligne de base dans cet espace. C'est l'approche standard pour les listes de texte où le rythme vertical est critique pour la perception visuelle.

Line Height adaptatif pour différents écrans

Les applications mobiles fonctionnent sur des appareils avec différentes tailles d'écran, densités de pixels et paramètres d'accessibilité. Le line height doit s'adapter à ces changements tout en maintenant la lisibilité. La règle principale : utilisez des multiplicateurs sans unité (unitless), pas de valeurs fixes en px ou pt, afin que le line-height s'adapte avec le font-size.

Lors de l'utilisation de Dynamic Type (iOS) ou fontScale (Android), la taille de la police peut augmenter de 20 à 50 % par rapport à la valeur de base. Le line-height défini via un multiplicateur s'adapte automatiquement. Si le line-height est défini comme une valeur fixe (par exemple, 24 px avec font-size 16 pt), lorsque la police passe à 22 pt, le line-height relatif chute à 1,09 — déjà en dessous du seuil de lisibilité.

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

Selon Material Design — Responsive Typography (2025), pour les tablettes et grands écrans (plus de 600 dp de large), il est recommandé d'augmenter le line-height du texte principal de 0,1 à 0,2 par rapport aux téléphones, car la longueur de ligne devient plus grande. Pour les appareils pliables, où la largeur de l'écran change dynamiquement, le line-height doit être recalculé à chaque changement de configuration.