Apprendre CSS : Règles Typographiques
Un site web est essentiellement constitué de texte. En ce sens, CSS comporte de nombreuses propriétés typographiques.
Couleur
Il est possible de définir une couleur selon 3 grands systèmes de description.
| Système de description | Exemples |
|---|---|
| Mot-clé | blue, green, red, yellow… |
| Système de coordonnées cubique RGB / Hexadécimal | #f95050, rgb(200, 56, 196), rgba(200, 56, 196, 0.2)… |
| Système de coordonnées cylindrique HSL | hsl(0, 100%, 50%), hsla(235, 100%, 50%, 0.5)… |
Couleur du texte
La propriété color permet de modifier la couleur d’un texte.
p {
color: blue;
}
Couleur de fond
La propriété background-color permet de définir la couleur de fond d’un texte.
p {
background-color: #FF0000;
}
Taille
La propriété font-size permet de définir la taille d’un texte.
Il est possible de définir une taille de police de 2 manières :
- Absolue (
px,cm,mm,in…) Une unité absolue est fixe et déconseillée pour un design responsive. - Relative (
%,em,rem,vw,vh…) Une unité relative est basée sur un référentiel, ce qui est très intéressant en design responsive.
<p>Je suis un texte de démo en valeur absolue, <span class="bigger">et moi en valeur relative.</span></p>
p {
font-size: 24px;
}
span.bigger {
font-size: 1.5em;
}
Style de police
La propriété font-family permet de définir la famille ou le style de typographie d’un texte.
<p id="text-1">Je suis un texte de démo.</p>
<p id="text-2">Je suis un texte de démo.</p>
#text-1 {
font-family: Arial, Helvetica, sans-serif;
}
#text-2 {
font-family: "Lucida Console", Courier, monospace;
}
Lorsque plusieurs typographies sont définies, le navigateur cherchera à charger la première mais se rabattra sur la suivante en cas d’échec. Il est donc d’usage de spécifier en dernier lieu une famille de police (serif, sans-serif, monospace…), de sorte à ce que le navigateur cherche lui-même, si besoin, une police adéquate dans cette famille.
Graisse
La propriété font-weight permet de définir la graisse d’un texte. Les typographies sont déclinées selon une échelle numérique de graisse allant de 100 à 900.
- 100 (
thin) : il s’agit de la graisse la plus fine. - 200 (
extralight) - 300 (
light) - 400 (
regular) : il s’agit de la graisse par défaut pour un texte. - 500 (
medium) - 600 (
semibold) - 700 (
bold) : il s’agit de la graisse correspondant à une « mise en gras ». - 800 (
extrabold) - 900 (
black) : il s’agit de la graisse la plus épaisse.
#demo {
font-weight: 900;
}
Si vous souhaitez transformer votre texte en italique, il faudra écrire la règle font-style: italic;.
Ombres
La propriété text-shadow permet de définir l’ombre d’un texte.
On définit :
- Le décalage horizontal (
x) - Le décalage vertical (
y) - Le rayon de flou
- La couleur de l’ombre
p {
text-shadow: 5px 2px 3px rgba(0, 0, 0, 0.2);
}
Alignement
La propriété text-align permet de définir l’alignement d’un texte.
<p id="a">Je suis à gauche</p>
<p id="b">Je suis à droite</p>
<p id="c">Je suis au centre</p>
<p id="d">Je suis justifié.</p>
#a { text-align: left; }
#b { text-align: right; }
#c { text-align: center; }
#d { text-align: justify; }
Hauteur des lignes
La propriété line-height permet de définir la hauteur des lignes d’un texte. Les unités utilisées sont les mêmes que pour la taille de police.
p {
line-height: 40px;
}
Espacements
Espacement entre les lettres
La propriété letter-spacing permet de définir un espacement entre les lettres d’un mot. Les unités utilisées sont les mêmes que pour la taille de police.
<p id="a">Mes lettres sont très espacées.</p>
<p id="b">Mes lettres sont rapprochées.</p>
#a {
letter-spacing: 5px;
}
#b {
letter-spacing: -1px;
}
Espacement entre les mots
La propriété word-spacing permet de définir un espacement entre les mots d’un texte. Les unités utilisées sont les mêmes que pour la taille de police.
<p id="c">Mots éloignés les uns des autres.</p>
<p id="d">Mots rapprochés les uns des autres.</p>
#c {
word-spacing: 10px;
}
#d {
word-spacing: -2px;
}