letter-spacing
Modifie l’espacement entre les lettres.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- oui, en tant que longueur
- S’applique à
- tous les éléments
- JavaScript
element.style.letterSpacing = "0.1em"
Exemple
#.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.75rem;
}<p class="eyebrow" style="text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: #a78bfa; margin: 0">Nouveau module</p>
<h2 style="margin: 4px 0 0">Les animations en CSS</h2>Définition et utilisation
#La propriété letter-spacing ajoute ou retire de l’espace entre les caractères. Une valeur positive écarte les lettres, une valeur négative les resserre. Le plus pratique est de la donner en em, car elle s’adapte alors à la taille de la police.
Écarter les lettres fonctionne bien sur de courts textes en majuscules, par exemple des étiquettes ou des boutons. Les grands titres gagnent souvent à être légèrement resserrés, par exemple -0.02em.
Dans du texte courant, modifiez les espacements avec prudence. Des lettres trop serrées ou trop écartées réduisent la lisibilité.
Syntaxe
#letter-spacing: normal | <longueur>;Valeurs
#Valeurs en pratique
#normal
.demo { letter-spacing: normal; }0.2em
.demo { letter-spacing: 0.2em; }-0.05em
.demo { letter-spacing: -0.05em; }4px
.demo { letter-spacing: 4px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Les petits textes en majuscules ont presque toujours besoin d’un léger écartement, environ 0.05-0.15em.
- Utilisez l’unité
empour que l’espacement grandisse avec la police.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.