5.1 Propriété line-height
Les paramètres du texte, tels que line-height, letter-spacing et word-spacing, jouent un rôle important dans la stylisation du texte sur les pages web. Ils permettent de contrôler l'interlignage (distance entre les lignes), l'espacement des lettres et l'espacement entre les mots respectivement. Voyons en détail chacune de ces propriétés.
La propriété line-height définit la hauteur de ligne du texte. Elle règle la distance entre les lignes de base des lignes voisines du texte, ce qui influe sur la densité et la lisibilité du texte.
Valeurs :
- Valeur numérique : valeur relative sans unités (par exemple, 1.5), qui est multipliée par la taille de police actuelle
- Valeur en pourcentage : valeur relative en pourcentage de la taille de police actuelle (par exemple, 150%)
- Valeur absolue : valeur en unités fixes (par exemple, en pixels) (par exemple, 24px)
- Mot-clé
normal: valeur par défaut, généralement égale à 1.2
Exemple d'utilisation :
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Ceci est un texte avec une hauteur de ligne normale. Ceci est un texte avec une hauteur de ligne normale.</p>
<p class="one-point-five">Ceci est un texte avec une hauteur de ligne de 1.5. Ceci est un texte avec une hauteur de ligne de 1.5.</p>
<p class="double">Ceci est un texte avec une double hauteur de ligne. Ceci est un texte avec une double hauteur de ligne.</p>
</body>
5.2 Propriété letter-spacing
La propriété letter-spacing définit l'espacement entre les lettres, c'est-à-dire l'espace supplémentaire entre les caractères du texte. Elle peut être utilisée pour améliorer la lisibilité ou créer des effets visuels.
Valeurs :
- Valeur absolue : valeur en unités fixes (par exemple, en pixels — 2px)
- Valeur négative : réduit l'espace entre les caractères (par exemple, -1px)
- Mot-clé
normal: valeur par défaut, égale à 0 (sans espace supplémentaire)
Exemple d'utilisation :
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Ceci est un texte avec un espacement des lettres normal.</p>
<p class="wide">Ceci est un texte avec un espacement des lettres augmenté.</p>
<p class="narrow">Ceci est un texte avec un espacement des lettres réduit.</p>
</body>
5.3 Propriété word-spacing
La propriété word-spacing définit l'espace entre les mots dans le texte. Elle ajoute ou soustrait de l'espace entre les mots, ce qui peut être utilisé pour améliorer la lisibilité ou créer des effets visuels.
Valeurs :
- Valeur absolue : valeur en unités fixes (par exemple, en pixels) (par exemple, 4px)
- Valeur négative : réduit l'espace entre les mots (par exemple, -2px)
- Mot-clé
normal: valeur par défaut, égale à l'espacement standard entre les mots (en général 0)
Exemple d'utilisation :
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Ceci est un texte avec un espacement entre les mots normal.</p>
<p class="wide">Ceci est un texte avec un espacement entre les mots augmenté.</p>
<p class="narrow">Ceci est un texte avec un espacement entre les mots réduit.</p>
</body>
GO TO FULL VERSION