letter-spacing |
Espacement de lettre |
|---|---|
| CSS |
Syntaxe
|
letter-spacing: paramètres; |
Paramètres
| Paramètre | Description | ||
|---|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer l'espacement : | ||
| Valeur | Aperçu | Description | |
| normal | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères à un affichage normal | |
| -2px | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un rapprochement de 2 pixels entre les caractères. | |
| -1px | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un rapprochement de 1 pixel entre les caractères. | |
| -0.7px | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un rapprochement de 0,7 pixel entre les caractères. | |
| -0.5px | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un rapprochement de 0,5 pixel entre les caractères. | |
| -0.3px | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un rapprochement de 0,3 pixel entre les caractères. | |
| 1px | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un éloignement de 1 pixel entre les caractères. | |
| ... | ... | ... | |
Description
Cette propriété permet de fixer la variante (normal, majuscule,...) de la police de caractères utilisé.
Remarques
- Espacement entre les lettres : La propriété letter-spacing permet de contrôler l'espacement horizontal entre les caractères d'un texte. Elle est utile pour ajuster l'apparence visuelle des mots, notamment dans les titres, les logos ou les textes décoratifs.
- Valeurs acceptées : letter-spacing accepte des valeurs en unités absolues (comme px, pt) ou relatives (comme em). Une valeur positive augmente l'espacement entre les lettres, tandis qu'une valeur négative les rapproche, ce qui peut créer des effets visuels intéressants, mais doit être utilisé avec précaution.
- Amélioration de la lisibilité : Une légère augmentation de l'espacement (letter-spacing: 0.05em;) peut améliorer la lisibilité des textes en petites tailles ou des polices de caractères condensées. Cependant, un espacement excessif peut avoir l'effet inverse, rendant le texte difficile à lire.
- Effets stylistiques : Dans les titres ou les textes décoratifs, un grand espacement (letter-spacing: 0.2em; ou plus) peut donner une impression d'élégance et de sophistication. Cela est particulièrement efficace pour les polices de caractères en majuscules.
- Compatibilité avec les polices de caractères : Les effets de letter-spacing varient en fonction de la police de caractères utilisée. Certaines polices de caractères, comme les polices de caractères monospace, peuvent ne pas bénéficier de cette propriété de manière aussi visible que les polices proportionnelles.
- Impact sur la largeur du contenu : Modifier letter-spacing peut affecter la largeur totale d'un élément contenant du texte. Cela peut nécessiter des ajustements dans la mise en page, notamment dans les cas où l'espace est limité (par exemple, sur les boutons ou les cartes de contenu).
- Interaction avec d'autres propriétés : letter-spacing fonctionne bien en combinaison avec d'autres propriétés typographiques comme font-size, word-spacing et line-height. Par exemple, dans des titres avec un grand espacement entre les lettres, une hauteur de ligne adaptée peut améliorer l'équilibre visuel.
- Considérations culturelles et linguistiques : L'utilisation de letter-spacing doit tenir compte des conventions typographiques spécifiques à certaines langues. Par exemple, en japonais ou en chinois, l'espacement entre les caractères est rarement modifié, tandis qu'en anglais ou en français, cela peut être courant pour des effets stylistiques.
Dernière mise à jour : Dimanche, le 20 décembre 2015