Module 1Les bases du CSS
Chapitre 5 sur 15
Le texte et la typographie
Polices, Google Fonts, propriétés de texte, liens, listes et lisibilité.
- ≈ 150 min
- 6 leçons
- 4 vidéos
- 3 exercices
Module 1Les bases du CSS
Chapitre 5 sur 15
Polices, Google Fonts, propriétés de texte, liens, listes et lisibilité.
Objectifs
Avec ce chapitre, tu sauras…
font-family et une famille générique de secours ;font-size, font-weight, font-style et la notation raccourcie font ;Le web, c'est d'abord du texte : environ 95 % du contenu d'une page. Une bonne typographie rend un site agréable et crédible ; une mauvaise le rend fatigant à lire, même avec de belles images. Ce chapitre te donne toutes les propriétés du texte, et surtout les bons réglages.
Leçon 1
body {
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}Tableau: Les familles génériques
| Famille | Aspect | Exemples | Usage |
|---|---|---|---|
serif | avec empattements | Georgia, Times New Roman | textes longs imprimés, ton classique |
sans-serif | sans empattements | Arial, Inter, Roboto | écrans, interfaces |
monospace | chasse fixe | Consolas, Courier New | code |
system-ui | police du système | San Francisco, Segoe UI | applications, rapidité |
<link> dans le <head> de ton HTML, avant ta feuille de style.font-family: "Poppins", sans-serif;Leçon 2
| Propriété | Valeurs | Exemple |
|---|---|---|
font-size | rem, em, px, %, clamp() | font-size: 1.125rem; |
font-weight | 100 à 900, normal (400), bold (700) | font-weight: 600; |
font-style | normal, italic | font-style: italic; |
line-height |
Leçon 3
| Propriété | Rôle | Valeurs courantes |
|---|---|---|
color | couleur du texte | voir chapitre 4 |
text-align | alignement horizontal | left, center, right, justify |
text-decoration | soulignement, barré | none, underline, line-through |
text-underline-offset |
Leçon 4
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 5
| Propriété | Rôle | Valeurs |
|---|---|---|
list-style-type | forme de la puce ou de la numérotation | disc, circle, square, decimal, upper-roman, none |
list-style-position | puce dans ou hors de la boîte | outside (défaut), inside |
list-style-image | une image comme puce | url("puce.svg") |
list-style |
Leçon 6
1Une pile de polices se termine toujours par…
2Quelle valeur de font-weight correspond à bold ?
3La meilleure valeur pour line-height du texte est…
4Pour enlever le soulignement d'un lien :
5Après list-style: none, la liste reste décalée à cause…
6Une longueur de ligne confortable se règle avec…
L'essentiel du chapitre
font-family : une pile qui finit par serif, sans-serif ou monospace. Deux polices maximum.<link> dans le head, puis font-family: "Nom", sans-serif;.font-size en rem, font-weight de 100 à 900, line-height sans unité (1.5 à 1.7).text-align, text-decoration, text-transform, letter-spacing, text-shadow.:link, :visited, :hover, :focus-visible, :active ; soulignés dans le texte.list-style: none + padding: 0 ; ::marker pour colorer la puce. Lecture : max-width: 65ch.| nombre sans unité de préférence |
line-height: 1.6; |
font (raccourci) | style graisse taille/interligne famille | font: italic 700 1.25rem/1.4 Georgia, serif; |
0.2em |
text-transform | casse | uppercase, lowercase, capitalize |
text-indent | retrait de la première ligne | 2em |
letter-spacing | espace entre les lettres | 0.05em (petites capitales espacées) |
word-spacing | espace entre les mots | 0.1em |
text-shadow | ombre du texte | 1px 1px 2px rgb(0 0 0 / 30%) |
white-space | gestion des espaces et retours | nowrap (pas de retour à la ligne) |
text-overflow | texte qui déborde | ellipsis (« … », avec overflow: hidden) |
Vidéo · À regarder
FRFormation CSS, tuto complet pour démarrer
L'instant Code · YouTube
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
| raccourci |
list-style: square inside; |
::marker | styliser la puce elle-même | li::marker { color: #2f5bc4; } |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Intégrer une Google Font
Ajouter une police Google Fonts
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">Un site professionnel utilise rarement plus de deux polices : une pour les titres, une pour le texte (ou une seule avec plusieurs graisses). Chaque police et chaque graisse est un fichier à télécharger : charge seulement les graisses que tu utilises.
Pour héberger toi-même une police (meilleure performance, respect de la vie privée), on utilise la règle @font-face avec un fichier .woff2. C'est ce que fait Google Fonts en coulisses.
Tableau: Les propriétés de police
Tableau: Les propriétés de texte
a {
color: #21479e;
text-decoration: underline;
text-underline-offset: 0.2em;
}
a:visited {
color: #5b3fa6;
}
a:hover {
color: #17306e;
text-decoration-thickness: 2px;
}
a:focus-visible {
outline: 3px solid #f5b400;
outline-offset: 2px;
}
a:active {
color: #c0392b;
}Dans un texte, un lien doit se distinguer autrement que par la couleur seule (les personnes daltoniennes ne verraient pas la différence) : garde le soulignement dans les paragraphes. Dans un menu, où chacun sait que ce sont des liens, on peut l'enlever.
Le chapitre « Styling Links » de Dave Gray (anglais) : les états des liens et leur mise en forme.
Tableau: Les propriétés des listes
1rem (16 px) pour le texte courant, souvent 1.125rem ;max-width: 65ch ;line-height entre 1.5 et 1.7 pour le texte, 1.1 à 1.3 pour les titres ;#1d2433 sur #ffffff est plus doux) ;justify crée des « rivières » d'espaces sur les écrans étroits ;Écris le CSS d'une page d'article : texte de 1.125rem avec un interlignage de 1.65, largeur maximale de 68ch centrée, titres en police serif, premier paragraphe en 1.25rem et en gris foncé, liens soulignés dans le texte, citations blockquote en italique avec un retrait.
Intègre deux graisses d'une police Google Fonts dans ton CV. Applique-la au body avec une pile de secours. Les h1 et h2 sont en graisse 700, les titres de section h2 en majuscules espacées de 0.08em.
Stylise le menu du CV (header nav ul) : pas de puces, pas de décalage, liens sans soulignement en graisse 600, qui deviennent soulignés avec un décalage de 0.3em au survol, et un contour jaune visible au clavier.
line-height: 24px fixe l'interligne en pixels : si un titre hérite de cette valeur avec une police de 40 px, ses lignes se chevauchent. Un nombre sans unité (line-height: 1.5) est un multiplicateur de la taille de police de chaque élément : il s'adapte partout. C'est la bonne pratique.
.surtitre {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #2f5bc4;
}
.titre-section {
font: 700 clamp(1.75rem, 4vw, 2.5rem)/1.2 "Poppins", sans-serif;
color: #17306e;
}
.chapeau {
font-size: 1.125rem;
line-height: 1.6;
color: #4a5368;
}<div style="font-family:Inter,sans-serif">
<div style="font-size:7pt;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#2f5bc4">Nos formations</div>
<div style="font-weight:700;font-size:18pt;line-height:1.2;color:#17306e;margin:2px 0 4px">Apprends à coder à Rabat</div>
<div style="font-size:10pt;line-height:1.6;color:#4a5368">Des parcours intensifs en petits groupes, avec des projets réels et un accompagnement vers l'emploi.</div>
</div>Si un titre doit apparaître en majuscules, écris-le normalement en HTML et utilise text-transform: uppercase. Écrit en majuscules dans le HTML, il serait lu lettre par lettre par certains lecteurs d'écran, et impossible à repasser en minuscules sans modifier le contenu.
Les propriétés CSS dans la formation de L'instant Code : un long segment de onze minutes, qui présente de nombreuses propriétés de base. Garde-le aussi pour le chapitre 6.
Le chapitre « Typography » de Dave Gray (anglais) : pour revoir les polices et les propriétés de texte avec d'autres exemples.
.menu {
list-style: none; /* plus de puces */
margin: 0;
padding: 0; /* les listes ont un padding gauche par défaut */
}
.menu a {
text-decoration: none;
font-weight: 600;
}Après list-style: none, la liste garde un décalage à gauche de 40 px : c'est le padding-left par défaut des <ul> et <ol>. Ajoute padding: 0 (et margin: 0) pour l'enlever.
Le chapitre « List Styles » de Dave Gray (anglais) : pour revoir la mise en forme des listes.