letter-spacing
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS letter-spacing définit le comportement d'espacement horizontal entre les caractères du texte. Cette valeur s'ajoute à l'espacement naturel entre les caractères lors du rendu du texte. Des valeurs positives de letter-spacing écartent davantage les caractères, tandis que des valeurs négatives de letter-spacing rapprochent les caractères.
Exemple interactif
letter-spacing: normal;
letter-spacing: 0.2rem;
letter-spacing: 1px;
letter-spacing: -1px;
<section id="default-example">
<p id="example-element">
Il y a autant de boue dans les rues que si les eaux venaient à peine de se
retirer de la surface de la terre, et il ne serait pas étonnant de croiser
un Mégalosaure, long d'une douzaine de mètres, se dandinant comme un lézard
éléphantesque dans Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: "Amstelvar";
font-style: normal;
}
section {
font-size: 1.2em;
font-family: "Amstelvar", serif;
}
Syntaxe
/* Valeur avec mot-clé */
letter-spacing: normal;
/* Valeurs de type <length> */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;
/* Valeurs globales */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;
Valeurs
normal-
L'espacement normal des lettres pour la police courante. Contrairement à une valeur de
0, ce mot-clé permet à l'agent utilisateur de modifier l'espace entre les caractères afin de justifier le texte. <length>-
Définit un espace supplémentaire entre les caractères en plus de l'espace par défaut entre les caractères. Les valeurs peuvent être négatives, mais il peut exister des limites propres à chaque implémentation. Les agents utilisateur ne peuvent pas augmenter ou diminuer davantage l'espace entre les caractères afin de justifier le texte.
Accessibilité
Utiliser une valeur trop grande (positive ou négative) pour letter-spacing rendra les mots illisibles. Si une valeur positive trop importante est utilisée, les lettres seront trop éloignées les unes des autres et on ne pourra pas distinguer les mots. Si une valeur négative trop faible est employée, les lettres se chevaucheront et on ne pourra pas lire le texte.
L'espacement doit être déterminé au cas par cas car chaque famille de polices utilise des caractères de largeurs différentes. Il n'existe pas de valeur unique qui permette de s'assurer que, quelle que soit la police utilisée, le texte soit lisible.
Problèmes d'internationalisation
Certaines langues écrites ne doivent pas avoir d'espacement entre les lettres. Par exemple, les langues utilisant l'alphabet arabe attendent que les lettres restent visuellement connectées, comme dans l'exemple suivant. Appliquer un espacement entre les lettres rendra le texte visuellement incorrect.
شسيبتنمك
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | oui |
| Valeur calculée | une valeur optimale consistant en une longueur absolue ou normal |
| Type d'animation | une longueur |
Syntaxe formelle
letter-spacing =
normal |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir l'espacement des lettres
HTML
<p class="normal">Et voici l'interlettre</p>
<p class="large-em">Et voici l'interlettre</p>
<p class="tres-large-em">Et voici l'interlettre</p>
<p class="court-em">Et voici l'interlettre</p>
<p class="large-px">Et voici l'interlettre</p>
CSS
.normal {
letter-spacing: normal;
}
.large-em {
letter-spacing: 0.4em;
}
.tres-large-em {
letter-spacing: 1em;
}
.court-em {
letter-spacing: -0.05em;
}
.large-px {
letter-spacing: 6px;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Text Module Level 3 # letter-spacing-property |
| Scalable Vector Graphics (SVG) 2 # LetterSpacingProperty |
Compatibilité des navigateurs
Voir aussi
- La propriété
font-kerning - La propriété
word-spacing - L'attribut SVG
letter-spacing