Pour séparer une paire de lettres trop serrée, vérifiez d’abord l’approche et le crénage de la police du titre. Pour un court libellé en alphabet latin, une marge en ligne locale peut ouvrir une seule limite, mais elle interrompt le façonnage à cet endroit. Ce flux de travail sur Mac explique dans quels cas ce compromis est approprié.

Le problème vient-il de l’approche, du crénage ou d’un chevauchement local ?

Ce guide s’adresse à une personne qui ajuste un titre web sur un Mac et peut modifier son HTML et son CSS. Il s’agit d’améliorer une paire problématique tout en gardant le reste du texte dans le flux normal du navigateur. Le titre fictif NOVA STUDIO sert d’exemple concret ; cela ne signifie pas que ces lettres se chevauchent dans toutes les polices.

L’approche contrôle l’espacement sur toute une sélection de texte. En CSS, elle se règle avec letter-spacing : les valeurs positives augmentent l’espacement, tandis que les valeurs négatives le resserrent. Augmenter cette propriété pour tout le titre modifie donc davantage que la seule paire problématique. Commencez par vérifier si une valeur négative héritée est à l’origine du problème. MDN : letter-spacing

Le crénage s’appuie sur les informations d’espacement stockées dans la police. La propriété CSS font-kerning accepte auto, normal ou none ; elle ne permet pas de définir une distance personnalisée pour une paire de lettres donnée. La valeur normal demande les informations de crénage de la police, mais ne peut ni fournir un ajustement de paire manquant ni garantir qu’une combinaison particulière aura un rendu satisfaisant. MDN : font-kerning

Utilisez cet aide à la décision avant d’ajouter du balisage :

Ce que vous observez Première action Quand poursuivre
La plupart des espaces semblent trop serrés Comparez le titre avec letter-spacing: normal Poursuivez uniquement si une paire nécessite encore un ajustement
Le titre change d’apparence au démarrage d’une animation du texte Comparez-le au texte d’origine, non découpé Examinez la configuration du découpage avant de compenser
Une limite semble trop serrée dans un mot latin court, par ailleurs acceptable Envisagez un ajustement local de l’espacement Acceptez que le façonnage change à cette limite
Le façonnage d’origine doit rester intact Gardez le segment de texte intact et comparez une autre police ou version de police adaptée Choisissez un rendu satisfaisant sans insérer de limite

Sur une page que vous examinez dans Chrome, appuyez sur Command–Option–C, puis cliquez sur le titre. Le panneau Elements sélectionne son balisage, et l’onglet Styles affiche les règles CSS applicables. Repérez les règles du titre, l’approche héritée et les éléments entourant des caractères individuels. Ces étapes d’inspection correspondent au flux de travail Mac documenté par Chrome. Ouvrir les outils de développement Chrome

Effectuez vos comparaisons avec la police, la graisse et la taille de titre prévues. La correction choisie pour le texte d’exemple en Arial n’est qu’une démonstration ; choisissez l’ajustement réel en affichant le titre visé. Notez les déclarations d’origine afin de comparer une modification à la fois.

Que peut préserver un ajustement local ?

Un simple span fournit un point d’accroche pour le style sans ajouter de signification propre. Il représente ses enfants ; un titre peut donc conserver le texte NOVA STUDIO tandis qu’une classe identifie le préfixe qui se termine à la limite problématique. Standard HTML WHATWG : l’élément span

Toutefois, un élément en ligne et un ajustement d’espacement n’ont pas les mêmes conséquences. Le projet de recommandation actuel CSS Text Level 3 du W3C indique que le façonnage doit rester continu aux limites des éléments en ligne en l’absence de changement de mise en forme effectif. Il précise également qu’une marge, une bordure ou un remplissage en ligne non nul séparant des caractères interrompt le façonnage à cette limite. Une marge locale ne peut donc pas garantir la préservation du crénage d’origine à travers la paire ajustée. CSS Text Module Level 3 : façonnage aux limites des éléments

Dans cet exemple, placez NOV dans un élément span en ligne et laissez A juste après. L’ajout d’une marge de fin à ce préfixe ouvre la limite entre V et A. Les autres lettres restent du texte en ligne ordinaire ; il n’est pas nécessaire de placer chaque caractère dans son propre bloc. Dans un texte horizontal de gauche à droite, margin-inline-end correspond à la marge droite. MDN : margin-inline-end

Cette limite est importante pour évaluer le résultat : le changement visible comprend la perte de tout ajustement de façonnage à cette limite, ainsi que la marge ajoutée. Il ne s’agit pas nécessairement de l’espacement d’origine de la paire augmenté exactement de la distance spécifiée. Si le façonnage d’origine doit être préservé, gardez le segment intact et comparez plutôt les polices.

Essayez un exemple local complet sur votre Mac

Créez un aperçu distinct avant d’adapter cette technique à un titre que vous gérez. Dans TextEdit, choisissez File → New, puis Format → Make Plain Text. Collez le document complet ci-dessous, enregistrez-le sous pair-preview.html, puis choisissez Use .html si une invite apparaît. Apple documente ce processus de création de fichiers HTML. Utiliser des documents HTML dans TextEdit sur Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Ouvrez le document enregistré dans votre navigateur. Gardez le texte du titre sur la même ligne source que celle indiquée : il n’y a pas d’espace entre NOV et A, et un espace ordinaire précède STUDIO. Le libellé conserve ainsi son texte sans ajout d’un caractère d’espacement visible ou spécial.

La propriété personnalisée --pair-gap contrôle la marge à la limite sélectionnée. Sa valeur initiale est donnée à titre d’illustration. Avec une taille de police de 64px, 0.02em représente 1.28 pixels CSS de marge ; à 40px, cela représente 0.8 pixels CSS. La marge s’adapte à la taille du texte, mais il faut tout de même vérifier visuellement la correction. MDN indique que les marges en em sont relatives à la taille du texte. MDN : margin-inline-end

L’élément span externe .keep-word applique white-space: nowrap uniquement à NOVA. Il maintient ce mot court sur une seule ligne tout en laissant l’espace ordinaire qui précède STUDIO disponible pour le retour à la ligne. Évitez d’appliquer cette règle à tout le titre, sauf si vous avez délibérément besoin d’une ligne sans coupure. MDN : white-space

Si TextEdit ouvre ensuite le fichier comme du contenu mis en forme, choisissez File → Open, sélectionnez le fichier, cliquez sur Show Options, puis sélectionnez Ignore rich text commands. Vous pouvez aussi activer Display HTML files as HTML code instead of formatted text dans TextEdit → Settings → Open and Save. Guide HTML de TextEdit d’Apple

Comment choisir la plus petite correction utile ?

Procédez à une comparaison contrôlée au lieu d’augmenter la marge à répétition jusqu’à ce qu’elle attire l’attention :

  1. Réglez --pair-gap sur 0em, enregistrez et rechargez la page. Examinez d’abord le titre sans ajustement.
  2. Essayez 0.01em, puis 0.02em, en enregistrant et en rechargeant entre les comparaisons. Ce sont des valeurs d’essai, pas des normes typographiques recommandées.
  3. Évaluez la paire avec les lettres qui l’entourent immédiatement. Arrêtez quand elle s’intègre au rythme général du mot.
  4. Réduisez la largeur de la fenêtre du navigateur jusqu’à ce que le titre passe à la ligne. Vérifiez le titre entier, pas seulement les lettres ajustées.
  5. Recommencez pour chaque taille et graisse de titre réellement utilisées dans votre mise en page.

Comparez soigneusement une marge nulle à une marge non nulle. Franchir ce seuil crée la limite de façonnage décrite plus haut ; le premier changement peut donc être plus marqué que ne le laisse penser la valeur numérique de la marge. Si une toute petite valeur positive rend déjà la paire trop espacée, supprimez cette solution de contournement et réexaminez la police ou le style existant du titre.

L’ajustement occupe aussi de l’espace dans la mise en page. Les lettres après la limite se déplacent avec le texte, et un titre proche de la largeur disponible peut passer à la ligne différemment. Un espacement local évite d’ajouter de l’approche à tous les interstices ; il ne garantit pas que la coupure de ligne reste la même. Avant de conserver la modification, vérifiez la mise en page abstraite dans ses versions étroite et large.

Limitez l’élément empêchant le retour à la ligne à un mot court. Si le mot dépasse la largeur disponible, il risque de déborder. Réduisez la taille du titre dans cette mise en page ou réexaminez l’élément au lieu de masquer le débordement. MDN distingue le contrôle du retour à la ligne avec white-space des propriétés qui autorisent les coupures à l’intérieur des mots. MDN : white-space

Que faire si le titre utilise déjà SplitType ?

SplitType est un outil d’animation qui entoure les lignes, les mots et les caractères d’éléments. Sa documentation officielle recommande font-kerning: none sur les éléments ciblés pour éviter de légers décalages de caractères lors du découpage ou du rétablissement du texte. Cette recommandation concerne son flux d’animation ; l’appliquer peut modifier l’espacement de tout un titre. Documentation de SplitType

Si un titre existant utilise SplitType, comparez le texte d’origine avant d’ajouter une autre correction. La bibliothèque documente une méthode d’instance, instance.revert(), qui rétablit le contenu d’origine. Dans une implémentation qui gère déjà une instance SplitType, utilisez le cycle de vie documenté pour examiner cet état d’origine. L’exemple HTML local ci-dessus ne dépend d’aucune bibliothèque. SplitType : rétablir le texte découpé

Vérifiez également le comportement au redimensionnement. SplitType indique que les découpages de mots et de caractères positionnés relativement peuvent se redistribuer, tandis que le découpage des lignes ou le positionnement absolu exige un nouveau découpage après le redimensionnement du conteneur. Si le chevauchement apparent survient uniquement après un changement de largeur, examinez ce comportement de mise en page avant d’encoder une correction permanente pour la paire. SplitType : texte adaptatif

Pour cette tâche qui concerne une seule paire, mieux vaut éviter d’introduire un découpage des caractères uniquement pour obtenir un point d’accroche pour l’espacement. Cela ajoute davantage de limites à la mise en page que nécessaire pour cet exemple.

Dans quels cas faut-il garder le segment de texte intact ?

Utilisez l’exemple de marge locale uniquement pour une limite délibérément choisie entre des lettres latines simples. Ne généralisez pas cette méthode au point d’entourer chaque position d’une chaîne. Le W3C avertit que la séparation des graphèmes ou des ligatures par des limites entre éléments peut entraîner un rendu incohérent ou indésirable. Une position dans une chaîne ne constitue pas automatiquement un endroit approprié pour interrompre le façonnage. CSS Text Module Level 3 : caractères et lettres

Lorsque le façonnage exact doit rester intact, laissez le titre sous forme de texte continu, comparez ses réglages de crénage natifs et choisissez un rendu de police qui traite la paire de façon satisfaisante. Si une exception locale contrôlée est acceptable, ajoutez une seule limite, utilisez la plus petite marge utile et vérifiez ensemble le mot obtenu et les coupures de ligne.

Sources