Nous allons maintenant voir les dernières propriétés de mise ne forme du texte. Après les fonts, les graisses et les couleurs, nous allons aborder la gestion des masses de textes avec l'interlignage, l'interlettrage et les césures.
L'interlignage
La propriété qui permet de gérer l'interlignage est line-height
.
Celle-ci peut s'exprimer en plusieurs valeurs :
- em,
- pourcentage,
- pixels.
<p class="interlignage">
Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita.
</p><!-- .interlignage -->
p.interlignage{
line-height: 3em;
}
Résultat :
Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita.
L'interlettrage
C'est avec letter-spacing
que vous pourrez contrôler l'interlettrage de votre texte.
Attention toutefois ! Les navigateurs interprètent très mal cette propriété qui a tendance à dénatuer vos typos. Utilisez-la avec parcimonie.
Cette propriété peut s'exprimer en plusieurs valeurs :
- rem,
- em,
- pixels.
<p class="int_01">
Verum ad istam omnem orationem.
</p><!-- .int_01 -->
<p class="int_02">
Verum ad istam omnem orationem.
</p><!-- .int_02 -->
<p class="int_03">
Verum ad istam omnem orationem.
</p><!-- .int_03 -->
<p class="int_04">
Verum ad istam omnem orationem.
</p><!-- .int_04 -->
p.int_01{
letter-spacing: 1em;
}
p.int_02{
letter-spacing: 2em;
}
p.int_03{
letter-spacing: 3px;
}
p.int_04{
letter-spacing: -0.05em;
}
Résultat :
Verum ad istam omnem orationem.
Verum ad istam omnem orationem.
Verum ad istam omnem orationem.
Verum ad istam omnem orationem.
L'espacement entre les mots
Vous voulez rendre votre texte encore plus illisible ? word-spacing
est là pour ça ! Avec cette propriété, vous allez pouvoir gérer l'espacement entre les mots.
Cette propriété peut s'exprimer en plusieurs valeurs :
- rem,
- em,
- pourcentage,
- pixels.
<p class="word_01">
Verum ad istam omnem orationem.
</p><!-- .word_01 -->
<p class="word_02">
Verum ad istam omnem orationem.
</p><!-- .word_02 -->
p.word_01{
word-spacing: 15px;
}
p.word_02{
word-spacing: 3em;
}
Résultat :
Verum ad istam omnem orationem.
Verum ad istam omnem orationem.