Espacement des Caractères et des Lignes

L'espacement des caractères et des lignes joue un rôle crucial dans la lisibilité et l'esthétique du texte sur une page web. Les propriétés CSS dédiées à ces aspects offrent un contrôle précis sur la mise en page du texte.

Espacement des Caractères (letter-spacing)

La propriété letter-spacing ajuste l'espacement entre les caractères.

p {
    letter-spacing: 1px; /* Ajoute 1 pixel d'espacement entre les caractères des paragraphes */
}
 
span.code {
    letter-spacing: -0.5px; /* Réduit l'espacement entre les caractères des éléments avec la classe "code" */
}

• Explication : La première règle ajoute 1 pixel d'espacement entre les caractères des paragraphes, tandis que la deuxième règle réduit l'espacement entre les caractères des éléments avec la classe "code".

Espacement des Mots (word-spacing)

La propriété word-spacing contrôle l'espacement entre les mots.

p {
    word-spacing: 2px; /* Ajoute 2 pixels d'espacement entre les mots des paragraphes */
}
 
h3 {
    word-spacing: -1px; /* Réduit l'espacement entre les mots des titres de niveau 3 */
}

• Explication : La première règle ajoute 2 pixels d'espacement entre les mots des paragraphes, tandis que la deuxième règle réduit l'espacement entre les mots des titres de niveau 3.

Hauteur de Ligne (line-height)

La propriété line-height définit la hauteur de ligne du texte.

body {
    line-height: 1.6; /* Définit une hauteur de ligne de 1.6 pour le texte du corps du document */
}
 
blockquote {
    line-height: 2; /* Augmente la hauteur de ligne pour les blocs de citation */
}

• Explication : La première règle définit une hauteur de ligne de 1.6 pour le texte du corps du document, tandis que la deuxième règle augmente la hauteur de ligne pour les blocs de citation.

Alignement Vertical (vertical-align)

La propriété vertical-align ajuste l'alignement vertical des éléments en ligne.

sup {
    vertical-align: super; /* Ajuste l'alignement vertical des éléments <sup> vers le haut */
}
 
sub {
    vertical-align: sub; /* Ajuste l'alignement vertical des éléments <sub> vers le bas */
}

• Explication : La première règle ajuste l'alignement vertical des éléments <sup> vers le haut, tandis que la deuxième règle ajuste l'alignement vertical des éléments <sub> vers le bas.

Conclusion

En maîtrisant ces propriétés, vous pouvez optimiser l'espacement du texte pour améliorer la lisibilité et créer une mise en page textuelle esthétiquement agréable. Expérimentez avec différentes valeurs pour atteindre l'effet visuel souhaité sur votre site web.