Crénage : ce que c'est et comment ajuster l'espacement entre les lettres

Qu'est-ce que le crénage en typographie

Le crénage est le processus d'ajustement manuel ou automatique de la distance entre des paires de caractères spécifiques pour éliminer les artefacts optiques. Le problème vient du fait que chaque lettre a une géométrie unique : A a un sommet, V a une inclinaison droite, T a une barre transversale large. Lorsque ces lettres sont côte à côte, la distance entre leurs contours semble inégale, même si la largeur définie est la même.

Les tables de crénage des polices contiennent des paires de caractères avec des valeurs d'ajustement prédéfinies. Une bonne police peut avoir de 300 à 2000 paires de crénage. Les polices professionnelles — comme SF Pro d'Apple ou Roboto de Google — incluent des tables de crénage méticuleusement élaborées couvrant toutes les combinaisons possibles de lettres latines et cyrilliques. Selon le Fontshop Guide to Kerning, la qualité des tables de crénage est l'un des principaux indicateurs d'une police professionnelle.

L'effet visuel du crénage est particulièrement perceptible dans les titres, les logos et les textes en grandes tailles (24 pt et plus). Dans les petits textes (12–14 pt), l'espacement entre les lettres est plus serré et le crénage est moins visible, bien qu'il fonctionne toujours. Les navigateurs web et les systèmes d'exploitation mobiles appliquent le crénage intégré par défaut, mais le développeur peut le désactiver ou l'ajuster pour des designs spécifiques.

Crénage vs Tracking : différences clés

Les développeurs débutants confondent souvent le crénage et le tracking, mais ce sont des paramètres typographiques fondamentalement différents. Le crénage travaille au niveau des paires de caractères et ajuste l'espacement uniquement entre des combinaisons spécifiques où la géométrie des lettres crée un déséquilibre optique. Le tracking (interlettrage) modifie l'intervalle entre tous les caractères du fragment sélectionné de manière égale — en l'augmentant ou en le diminuant uniformément.

Quand le tracking est utilisé : pour améliorer la lisibilité des petits textes (tracking positif), pour créer des titres d'accentuation (tracking négatif), pour styliser le texte dans la conception d'interfaces. Le tracking est défini comme une valeur numérique et appliqué à chaque caractère, y compris les paires déjà crénées — les corrections de crénage sont préservées mais un décalage global est ajouté par-dessus.

Règle importante : avec un tracking négatif (compression), surveillez les paires de crénage — elles peuvent créer des chevauchements indésirables de lettres. En CSS, la propriété letter-spacing s'applique par-dessus la table de crénage de la police, et avec une forte compression (letter-spacing: -1px), les corrections de crénage peuvent provoquer la fusion des caractères.

Implémentation du crénage sur iOS avec NSAttributedString

Sur iOS, le crénage est géré via l'attribut .kern dans NSAttributedString. La valeur de l'attribut est un Float, où un nombre positif augmente l'espacement, un nombre négatif le diminue et 0 désactive le crénage. La valeur par défaut est nil, ce qui signifie utiliser la table de crénage de la police. L'API principale pour travailler avec le crénage est NSMutableAttributedString avec l'attribut ajouté à une plage de texte.

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// Activer le crénage (utilise la table de la police)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Appliquer à UILabel
label.attributedText = attributedText

Valeur par défaut .kern = nil active le crénage depuis la table de la police. Si vous devez désactiver complètement le crénage, définissez .kern = 0. Les valeurs 0.0 et nil sont des états différents : nil utilise la table, 0 force tous les paires de crénage à zéro. Selon l'Apple Text Programming Guide, définir explicitement 0 est utile pour le texte à chasse fixe ou les cas où le crénage interfère — par exemple, dans les boutons à largeur fixe.

SwiftUI fournit le modificateur .kerning() pour Text. Contrairement à UIKit, dans SwiftUI le crénage est défini au niveau de la vue, pas sur une chaîne attribuée. Le modificateur accepte un CGFloat et s'applique à tout le texte à l'intérieur du bloc Text. Pour un crénage partiel dans SwiftUI, une combinaison de l'opérateur + sur Text et de modificateurs individuels est utilisée.

struct KerningView: View {
    var body: some View {
        Text("Titre avec crénage")
            .kerning(1.0)
            .font(.title)
    }
}

Performances : NSAttributedString avec un attribut de crénage recalcule les positions des caractères lors du rendu. Pour le texte statique, cela se produit une fois. Pour le texte dynamique (texte changeant dans UICollectionView) — à chaque changement. L'utilisation d'une grande plage avec crénage sur des chaînes longues (plus de 500 caractères) peut réduire les FPS lors du défilement.

Configuration du crénage sur Android avec letterSpacing

Sur Android, le crénage est géré via la propriété letterSpacing dans TextView et les mises en page XML. L'attribut est de type Float et fonctionne comme un multiplicateur de la taille em de la police. La valeur 0 correspond au crénage par défaut, les valeurs positives augmentent l'espacement, les négatives le diminuent. letterSpacing est disponible à partir de l'API Level 21 (Android 5.0 Lollipop).

Implémentation via SpannableString permet d'appliquer le crénage à une partie d'une chaîne plutôt qu'à l'ensemble du texte. La classe ScaleXSpan ou un ReplacementSpan personnalisé est utilisé pour un contrôle précis. Selon l'Android Developer Guide, ScaleXSpan met les caractères à l'échelle horizontalement, simulant les changements d'espacement entre les caractères, mais ne fournit pas de contrôle direct sur les paires de crénage.

// En mise en page XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programmatiquement en Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Limitation : Android ne prend pas en charge les tables de crénage directement — letterSpacing fonctionne comme un tracking pour tous les caractères. Pour le crénage par paires sur Android, des polices avec tables de crénage intégrées (OpenType GPOS feature kern) sont utilisées. La prise en charge dépend de la version de l'OS et du moteur de rendu : sur Android 10+, Minikin est utilisé avec un support complet des fonctionnalités OpenType, sur les versions antérieures HarfBuzz avec des limitations. Recommandation : testez l'affichage du crénage sur des appareils avec Android inférieur à 8.0.

Crénage dans le développement web avec CSS

Sur le web, le crénage est contrôlé via la propriété CSS font-kerning, qui active ou désactive les tables de crénage intégrées de la police. Valeurs : auto (le navigateur décide), normal (crénage activé), none (crénage désactivé). La propriété est prise en charge par tous les navigateurs modernes depuis 2016. Selon MDN Web Docs, font-kerning ne s'applique qu'aux polices OpenType avec une table de crénage.

La propriété CSS letter-spacing est l'analogue du tracking, mais elle est également utilisée pour des effets similaires au crénage. Contrairement à font-kerning, letter-spacing modifie l'intervalle entre tous les caractères uniformément, sans tenir compte des paires de crénage. Lorsque les deux propriétés sont utilisées, font-kerning est appliquée en premier, puis letter-spacing ajoute un décalage uniforme par-dessus.

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

Utilitaire TypeScript pour calculer le letter-spacing optimal en tenant compte du crénage peut analyser la table de crénage de la police via l'API Canvas. Mais en pratique, les développeurs web comptent sur font-kerning: normal qui donne des résultats optimaux dans la plupart des cas. L'ajustement supplémentaire de letter-spacing n'est nécessaire que pour les accents de design — par exemple, sur les pages d'atterrissage avec une grande typographie.

Recommandations pratiques pour configurer le crénage

Le crénage est un outil de réglage fin, et son application incorrecte nuit à la lisibilité. Première règle : ne modifiez pas le crénage pour le texte du corps. Les tables de crénage des polices professionnelles contiennent déjà des valeurs optimales pour les tailles 12–16pt. Interférer avec le crénage du texte du corps entraîne des irrégularités et un bruit visuel.

Deuxième règle : pour les titres à partir de 24pt, utilisez un crénage positif (0.5–1.5 pt selon la police). Les grands textes nécessitent plus d'espacement entre les lettres pour la lisibilité. Les polices avec une faible hauteur d'x (par exemple Didot) nécessitent plus de crénage que les polices avec une grande hauteur d'x (par exemple Helvetica). Données de référence : dans l'application iOS Apple Music, les titres utilisent un crénage de 0.8 pt.

Troisième règle : testez toujours le crénage sur des chaînes réelles, pas sur du Lorem Ipsum. Différentes combinaisons de caractères produisent différents effets visuels. Portez une attention particulière aux paires avec des voyelles et des consonnes à éléments saillants : AV, Te, To, Wa, LT. Avec un crénage négatif, surveillez les paires fi, fl, fj — dans certaines polices, elles peuvent fusionner sans ligature.

Aspect d'accessibilité : les utilisateurs dyslexiques lisent mieux un texte avec un léger crénage positif (0.3–0.5 pt). iOS et Android prennent en charge les paramètres d'accessibilité qui peuvent remplacer le crénage de l'application. Utilisez UIFontDescriptor avec Dynamic Type et tenez compte du crénage dans les paramètres d'accessibilité via UIAccessibility. Important : ne bloquez pas les paramètres système de crénage — cela viole la WCAG 2.2 Directive 1.4.12 sur l'adaptation du texte.