La propriété letter-spacing
définit l'interlettre utilisée pour les caractères qui composent le texte.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
/* Valeurs de longueur */ /* Type <length> */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* Valeur avec mot-clé */ letter-spacing: normal; /* Valeurs globales */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;
Valeurs
normal
- L'interlettre est dictée par la police utilisée. À la différence de 0, cette valeur permet à l'agent utilisateur de modifier l'espace entre les caractères afin de le justifier.
<length>
- Cette valeur indique l'espace ajouté à l'espace par défaut. Les valeurs peuvent être négatives mais les limites imposées dépendent de l'implémentation du moteur. Les agents utilisateurs ne pourront plus augmenter ou réduire l'interlettre afin de justifier le texte. Pour les différentes unités possibles, se référer à la page
<length>
.
Syntaxe formelle
normal | <length>
Exemples
CSS
.premier { letter-spacing: 0.4em; } .deuxieme { letter-spacing: 1em; } .troisieme { letter-spacing: -0.05em; } .quatrieme { letter-spacing: 6px; }
HTML
<p class="premier">Et voici l'interlettre</p> <p class="deuxieme">Et voici l'interlettre</p> <p class="troisieme">Et voici l'interlettre</p> <p class="quatrieme">Et voici l'interlettre</p>
Résultat
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.
- Comprendre les règles WCAG 1.4
- Understanding Success Criterion 1.4.8, W3C Understanding WCAG 2.0 (en anglais)
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Text Module Level 3 La définition de 'letter-spacing' dans cette spécification. |
Version de travail | Aucune modification. |
CSS Transitions La définition de 'letter-spacing' dans cette spécification. |
Version de travail | letter-spacing peut désormais être animée. |
CSS Level 2 (Revision 1) La définition de 'letter-spacing' dans cette spécification. |
Recommendation | Aucune modification. |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de 'letter-spacing' dans cette spécification. |
Recommendation | Définition initiale pour SVG. |
CSS Level 1 La définition de 'letter-spacing' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | normal |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Média | visuel |
Valeur calculée | une valeur optimale consistant en une longueur absolue ou normal |
Type d'animation | une longueur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
letter-spacing | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | IE Support complet 4 | Opera Support complet 3.5 | Safari Support complet 1 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android Support complet 10.1 | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
SVG support | Chrome Support complet 1 | Edge Support complet 12 | Firefox Aucun support Non | IE Support complet 10 | Opera Support complet Oui | Safari Support complet 1 | WebView Android Support complet 1 | Chrome Android Support complet 18 | Firefox Android Aucun support Non | Opera Android Support complet Oui | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support