🎨 Le cours : couleurs, tailles et typographie
Couleur et typographie sont les deux premiers leviers du style. Les bien régler suffit à transformer une page brute en page lisible. Cette fiche couvre les formats de couleur, les unités de taille, les polices et la mise en forme du texte.
Les formats de couleur
| Format | Exemple (le même bleu) | À retenir |
|---|
| nom | royalblue | pratique pour essayer, mais peu de choix |
| hexadécimal | #4169e1 | trois paires de chiffres hexa : rouge, vert, bleu (#rgb est un raccourci : #f80 = #ff8800) |
rgb() | rgb(65 105 225) | trois nombres de 0 à 255 |
hsl() | hsl(225 73% 57%) | teinte, saturation, luminosité : le plus intuitif pour éclaircir ou assombrir |
Le code hexadécimal est de la numération en base 16 vue dans Hexadécimal et tailles : #ef4a34 est le rouge ef (239), le vert 4a (74) et le bleu 34 (52). Chaque canal tient sur un octet, soit 256 niveaux, d'où 256 × 256 × 256 = 16,7 millions de couleurs.
Transparence et opacité
Un quatrième nombre donne la transparence (alpha) : rgb(0 0 0 / 40%), #00000066, hsl(0 0% 0% / 0.4). Ne le confonds pas avec la propriété opacity, qui rend transparent tout l'élément, texte et enfants compris : pour un fond translucide sous un texte net, utilise un alpha dans background.
Fonds : couleur, image, dégradé
background-color pose une couleur, background-image une image (url(…)) ou un dégradé (linear-gradient, radial-gradient). background-size: cover remplit la zone en recadrant ; contain montre toute l'image. background-position: center la centre.
.hero {
background-color: #14141a;
background-image: url("images/fond.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Les unités de taille
| Unité | Signification | Quand l'employer |
|---|
px | pixel CSS, taille fixe | bordures fines, ombres |
rem | multiple de la taille de police de la page (16 px par défaut) | tailles de texte et espacements : respecte les réglages de l'utilisateur |
em | multiple de la taille de police de l'élément | espacements qui suivent la taille du texte (boutons) |
% | pourcentage de l'élément parent | largeurs fluides |
vw vh | 1 % de la largeur / hauteur de la fenêtre | sections plein écran |
ch | largeur du caractère « 0 » | longueur de ligne de texte |
Choisir et charger une police
font-family accepte une liste : si la première police n'est pas disponible, le navigateur essaie la suivante, et la dernière est une famille générique (serif, sans-serif, monospace, system-ui). Mets entre guillemets les noms de plus d'un mot ("Open Sans"). Pour utiliser une police absente de l'ordinateur, on la charge avec @font-face (ou un lien vers un service de polices) ; font-display: swap affiche un texte de secours en attendant.
@font-face {
font-family: "MaPolice";
src: url("fonts/ma-police.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
body {
font-family: "MaPolice", system-ui, sans-serif;
}
Mettre en forme le texte
| Propriété | Effet | Valeurs courantes |
|---|
text-align | alignement horizontal | left, center, right, justify |
line-height | interligne | 1.4 à 1.7 pour un texte courant (sans unité) |
letter-spacing | espace entre les lettres | 0.05em, -0.02em |
text-decoration | soulignement, barré | none, underline, line-through |
text-transform | casse | uppercase, lowercase, capitalize |
text-shadow | ombre du texte | 1px 1px 2px rgb(0 0 0 / 30%) |
text-indent | retrait de première ligne | 1.5em |
Pour couper un titre trop long avec des points de suspension :
.titre-long {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Lisibilité : contraste et longueur de ligne
- Contraste : au moins 4,5:1 entre texte et fond pour un texte courant (voir Accessibilité). Un gris clair sur blanc échoue presque toujours.
- Longueur de ligne : 45 à 75 caractères est le confort de lecture.
max-width: 65ch le garantit.
- Interligne : 1,4 à 1,7 pour un texte courant, plus serré pour les titres.
article {
max-width: 65ch;
margin-inline: auto;
line-height: 1.6;
}
