Le tracking dans le développement mobile — essence et réglage de l’espace entre caractères

Qu’est-ce que le tracking en typographie

Le tracking est l’ajustement de la distance entre les caractères, appliqué uniformément à tous les caractères d’un bloc de texte. Contrairement au crénage, où chaque paire de caractères reçoit un ajustement individuel basé sur la table de crénage de la police, le tracking est défini comme une seule valeur numérique pour l’ensemble de la plage. Un tracking positif augmente l’intervalle (espacement élargi), un tracking négatif le réduit (espacement condensé).

Le terme provient de la typographie métallique, où l’espace entre les caractères était réglé par la distance physique entre les sortes. En typographie numérique, le tracking est appliqué par-dessus la table de crénage : d’abord, la police applique ses paires de crénage intégrées, puis le système ajoute un tracking uniforme à tous les caractères. L’intervalle résultant = crénage + tracking, ce qui est important à prendre en compte lors d’une condensation agressive du texte.

Unités de mesure : le tracking peut être spécifié en unités absolues (points, pixels, millimètres) et relatives (em, pourcentage de la taille de police). Dans le développement mobile, le tracking est typiquement spécifié en points (iOS) ou sp (Android) comme valeurs absolues, sur le web en em comme valeurs relatives. Les unités relatives sont préférables pour l’accessibilité car elles se mettent à l’échelle lorsque l’utilisateur modifie la taille de la police.

Tracking et crénage : différences fondamentales

La confusion entre tracking et crénage est l’une des erreurs les plus fréquentes parmi les designers et développeurs débutants. Le crénage fonctionne au niveau micro — il ajuste l’intervalle entre des paires de caractères spécifiques (AV, Te, To) en fonction de leur géométrie. Le tracking fonctionne au niveau macro — il déplace uniformément tous les caractères d’un fragment sans tenir compte de leur forme.

Effet visuel : avec le crénage, les distances entre différentes paires de caractères varient — entre A et V, elle est plus petite qu’entre A et I, car les formes des lettres se compensent mutuellement. Avec le tracking, toutes les distances sont identiques — entre A et V, A et I, T et o — le même décalage partout. Cela fait du tracking un outil de réglage global et du crénage un outil de réglage fin.

Utilisation combinée : dans la typographie d’interface, le tracking et le crénage sont utilisés ensemble. La police inclut une table de crénage pour l’optimisation de base, et le développeur ajoute du tracking pour le style ou l’accessibilité. La table de crénage est appliquée en premier, puis le tracking est ajouté par-dessus. Avec un tracking négatif (condensation), les paires de crénage peuvent créer des chevauchements indésirables — vérifiez les combinaisons problématiques.

Tracking positif et négatif : quand les utiliser

Tracking positif augmente la distance entre les caractères. Il est utilisé pour améliorer la lisibilité des petits textes (10–13pt), où les caractères fusionnent visuellement avec un espacement standard. Il est également utilisé en accessibilité pour les utilisateurs dyslexiques — l’augmentation de l’espace entre les caractères facilite la reconnaissance des lettres. Valeurs typiques : 0.3–1pt pour iOS, 0.02–0.05em pour le web.

Tracking négatif réduit la distance entre les caractères. Il est utilisé dans les titres (dès 24pt) et le texte d’accent, où un texte dense semble cohérent et moderne. Les grandes tailles supportent bien la condensation car les distances entre les caractères sont visuellement grandes. Valeurs typiques : de -0.3 à -1pt. Limitation : avec un tracking inférieur à -1pt, les caractères peuvent se chevaucher, en particulier dans les paires avec des éléments saillants (fi, fj, TT).

Règle empirique : pour chaque taille de police, il existe une plage de tracking acceptable. Plus la police est grande, moins le tracking est nécessaire pour une lisibilité optimale. Formule : tracking optimal ≈ font-weight × 0.01 − font-size × 0.001. Pour une police en gras (weight 700) de 16pt : 700 × 0.01 − 16 × 0.001 = 6,84, ce qui, ajusté selon la police, donne environ 0,5pt de tracking positif.

Tracking pour différents types de texte

Texte courant (14–18pt) : tracking non nécessaire ou minimal positif 0.1–0.3pt. Les polices professionnelles contiennent déjà un espacement optimal pour le texte courant. Toute intervention dans le tracking du texte courant doit être justifiée par des exigences de conception ou d’accessibilité. Titres (20–36pt) : un tracking négatif de -0.3 à -0.8pt est acceptable selon la police et le poids. Capitales (ALL CAPS) : un tracking positif de 0.5–2pt est recommandé, car les lettres majuscules en capitales fusionnent visuellement sans espacement supplémentaire.

Spécificité des polices : les polices à géométrie grotesque (Helvetica, Inter, SF Pro) supportent mieux le tracking négatif que les polices à empattement (Times, Georgia, PT Serif). Dans les polices à empattement, les empattements créent des connexions visuelles supplémentaires entre les lettres, et la condensation rend le texte illisible. Pour les polices à empattement, seul le tracking positif est recommandé.

Implémentation du tracking sur iOS et Android

Sur iOS, le tracking est implémenté via le même attribut .kern dans NSAttributedString que le crénage, avec une différence : pour le tracking, une valeur numérique autre que nil est spécifiée. nil signifie crénage par défaut (de la table de la police), 0 désactive le crénage, tout autre nombre signifie un tracking par-dessus la table de crénage. Cela signifie que lorsque .kern = 2 est défini, tous les caractères reçoivent +2pt d’espacement entre les caractères par-dessus les paires de crénage intégrées.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Tracking positif +0,8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel avec tracking
label.attributedText = attributedString

SwiftUI utilise le modificateur .tracking() sur Text, qui accepte CGFloat. Contrairement à UIKit, le tracking SwiftUI s’applique à tout le texte à l’intérieur du modificateur et ne peut pas être partiel sans division en plusieurs blocs Text. SwiftUI gère automatiquement la combinaison du crénage et du tracking, en appliquant le tracking par-dessus la table de crénage de la police.

Android utilise la propriété letterSpacing dans TextView, spécifiée en em (multiplicateur relatif à la taille de police). Une valeur de 0 signifie un tracking par défaut, 0.05 signifie une augmentation de 5% d’em, -0.02 signifie une diminution. Sous Android, letterSpacing fonctionne comme un tracking (uniforme pour tous les caractères), tandis que la table de crénage de la police est appliquée automatiquement au niveau du moteur de rendu Minikin.

// Dans la mise en page XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programmatiquement en Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose sous Android utilise le paramètre letterSpacing dans TextStyle, spécifié en sp. Par exemple, TextStyle(letterSpacing = 0.5.sp) donne un tracking de 0.5 sp. Contrairement à l’approche XML, Compose permet de combiner letterSpacing avec d’autres paramètres typographiques dans un seul objet TextStyle, simplifiant la création de systèmes de design.

Configuration de letter-spacing dans le développement web

Sur le web, le tracking est implémenté via la propriété CSS letter-spacing, qui accepte toutes les unités de longueur ou le mot-clé normal. La valeur normal correspond à 0 (pas d’espacement supplémentaire entre les caractères). La propriété est héritée, prend en charge les valeurs négatives et peut être animée. Selon la spécification CSS, letter-spacing est appliqué après la table de crénage de la police.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px : letter-spacing en em se met à l’échelle lorsque le font-size change et est préférable pour l’accessibilité. px ne se met pas à l’échelle et peut entraîner des incohérences lorsque le navigateur zoome le texte. Recommandation : utilisez toujours em pour letter-spacing. L’exception concerne les cas où le tracking doit rester fixe indépendamment de la taille, comme dans les logos.

Animation de letter-spacing : la propriété prend en charge les transitions et animations CSS, permettant des effets fluides d’apparition de texte. Animer de letter-spacing: -0.05em à letter-spacing: 0.01em lors du chargement d’un titre est une technique populaire dans les interfaces modernes. Performance : l’animation de letter-spacing déclenche un reflow (recalcul de la mise en page) car elle modifie la largeur du texte. Utilisez transform et opacity pour les animations haute performance lorsque c’est possible.

Accessibilité et tracking dans les interfaces mobiles

Le tracking affecte directement la lisibilité du texte pour les utilisateurs ayant des déficiences visuelles et la dyslexie. La directive WCAG 2.2 1.4.12 (Espacement du texte) exige que le texte ne perde pas de contenu lorsque l’espacement entre les caractères, les lignes et les paragraphes est augmenté à certaines valeurs. letter-spacing doit supporter une augmentation à 0.12em sans rognage de contenu ni chevauchement d’éléments.

Dyslexie : des recherches de la British Dyslexia Association montrent que l’augmentation de letter-spacing à 0.12em améliore la vitesse de lecture des utilisateurs dyslexiques de 10–15%. Cependant, cela est individuel — certains utilisateurs préfèrent l’espacement standard. iOS et Android fournissent des réglages système d’accessibilité pour augmenter l’espacement entre les caractères que l’application doit respecter.

Règles pour le développeur : n’utilisez pas de largeurs/hauteurs fixes qui pourraient se briser lors de l’augmentation de letter-spacing. Évitez overflow: hidden sur les conteneurs de texte sans vérification d’accessibilité. Testez l’interface avec letter-spacing augmenté à 0.12em sur tous les écrans. Si le design se brise, revoyez la mise en page plutôt que d’ignorer l’accessibilité.

Support de plateforme : iOS augmente automatiquement letter-spacing lorsque la fonction Texte plus grand est activée dans les réglages d’accessibilité, si UIFont.preferredFont est utilisé. Android offre une option similaire via FontScale. Le développeur ne doit pas désactiver ces réglages. Scénario de test : activez la taille de texte maximale dans les réglages du périphérique et vérifiez que le tracking ne brise pas la mise en page de l’interface.