Choisir une police pour le Web
Par défaut, le navigateur n’affiche que les polices installées sur l’ordinateur du visiteur (Arial, Times, Georgia…). Pour utiliser une police personnalisée, il faut la charger depuis une source externe. Le choix typographique a un impact majeur sur la perception et la lisibilité de votre site. Une police Web (web font) est une police chargée depuis un serveur distant et affichée dans le navigateur du visiteur, même s’il ne l’a pas installée sur sa machine.
La valeur après la virgule (sans-serif, serif, monospace) est la police de repli à ne pas oublier : si la police personnalisée ne se charge pas, le navigateur utilisera une police système de cette famille.
/* Application d'une police personnalisée */
h1 {
font-family: "Poppins", sans-serif;
}
p {
font-family: "Lora", serif;
}Charger une police via Google Fonts
La méthode la plus simple pour intégrer une police Web : rendez-vous sur fonts.google.com, choisissez votre police, sélectionnez les graisses souhaitées, puis copiez le code fourni.
Étape 1 : le lien dans le head du HTML
<head>
<meta charset="UTF-8">
<title>Ma page</title>
<!-- Je charge la police Roboto en graisses 400 (normal) et 700 (bold) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>Étape 2 : l’utilisation dans le CSS
/* J'applique la police chargée aux éléments souhaités */
body {
font-family: "Roboto", sans-serif;
}
h1, h2, h3 {
font-family: "Roboto", sans-serif;
font-weight: 700; /* graisse bold */
}Alternative : charger une police avec @font-face
Si vous disposez du fichier de la police (formats .woff2, .woff), vous pouvez l’héberger directement sur votre serveur sans dépendre de Google :
/* Je déclare ma police en début de CSS */
@font-face {
font-family: "MaPolice";
src: url("fonts/ma-police.woff2") format("woff2"),
url("fonts/ma-police.woff") format("woff");
font-weight: 400;
font-display: swap; /* affiche un texte de repli en attendant le chargement */
}
/* Je l'utilise ensuite normalement */
body {
font-family: "MaPolice", sans-serif;
}La taille du texte : font-size et les unités
La propriété font-size définit la taille du texte. Le choix de l’unité est important :
| Unité | Type | Référence | Usage |
|---|---|---|---|
| px | Fixe | Un pixel écran | Bordures, petits ajustements ponctuels |
| rem | Relative | Taille de police de l'élément racine (html) | Tailles de texte, marges — unité recommandée |
| em | Relative | Taille de police de l'élément parent | Espacements relatifs au texte (padding d'un bouton) |
| % | Relative | Valeur de la propriété parente | Largeurs, hauteurs de ligne |
| vw / vh | Relative | Largeur / hauteur de la fenêtre du navigateur | Titres adaptatifs, sections plein écran |
/* Utilisation recommandée : rem pour les tailles de texte */
body {
font-size: 1rem; /* 16px par défaut */
}
h1 {
font-size: 2.5rem; /* 40px (2.5 × 16) */
}
h2 {
font-size: 1.75rem; /* 28px */
}
small {
font-size: 0.875rem; /* 14px */
}Les propriétés de mise en forme du texte
La graisse : font-weight
p {
font-weight: normal; /* ou 400 — épaisseur standard */
}
strong, h1 {
font-weight: bold; /* ou 700 — gras */
}
.sous-titre {
font-weight: 300; /* light — fin, léger */
}Le style : font-style
em {
font-style: italic; /* italique */
}
.droit {
font-style: normal; /* annule un italique hérité */
}La transformation : text-transform
.majuscules {
text-transform: uppercase; /* TOUT EN CAPITALES */
}
.premiere-lettre {
text-transform: capitalize; /* Première Lettre De Chaque Mot */
}
.minuscules {
text-transform: lowercase; /* tout en minuscules */
}La décoration : text-decoration
a {
text-decoration: underline; /* souligné (par défaut sur les liens) */
}
a.discret {
text-decoration: none; /* supprime le soulignement */
}
.barre {
text-decoration: line-through; /* texte barré */
}L’alignement : text-align
.centre {
text-align: center;
}
.droite {
text-align: right;
}
p {
text-align: left; /* valeur par défaut */
}
.justifie {
text-align: justify; /* aligne les deux côtés — à utiliser avec prudence */
}Améliorer la lisibilité : line-height et letter-spacing
La hauteur de ligne : line-height
L’espace entre les lignes de texte (l’interlignage) est l’un des réglages les plus importants pour la lisibilité. La valeur recommandée pour le texte courant se situe entre 1.5 et 1.8.
body {
line-height: 1.6; /* 1.6 fois la taille de la police — bonne lisibilité */
}
h1 {
line-height: 1.2; /* plus serré sur les titres — évite les grands espaces */
}L’espacement des lettres : letter-spacing
.titre-espace {
letter-spacing: 2px; /* écarte les lettres — utile sur les titres en capitales */
}
.compact {
letter-spacing: -0.5px; /* resserre les lettres — subtil, sur les gros titres */
}L’espacement des mots : word-spacing
.aere {
word-spacing: 0.2rem; /* écarte légèrement les mots */
}La propriété raccourcie : font
La propriété font permet de déclarer plusieurs propriétés typographiques en une seule ligne. L’ordre des valeurs est strict :
/* Syntaxe raccourcie */
h1 {
font: italic bold 2.5rem/1.2 "Poppins", sans-serif;
/* style weight size/line-height family */
}
/* Équivalent en propriétés séparées */
h1 {
font-style: italic;
font-weight: bold;
font-size: 2.5rem;
line-height: 1.2;
font-family: "Poppins", sans-serif;
}Bonnes pratiques typographiques
- 2 polices maximum par site : une pour les titres, une pour le texte courant. Au-delà, la page perd en cohérence et en performance
- Utilisez
rempour les tailles de texte — vos pages resteront accessibles et adaptatives line-height: 1.5minimum pour le texte courant — en dessous, les lignes se chevauchent visuellement et la lecture devient fatigante- Évitez le texte justifié (
text-align: justify) en français — les espaces inter-mots irréguliers nuisent à la lisibilité - Ne chargez que les graisses nécessaires : chaque graisse ajoutée (light, regular, bold, extra-bold…) est un fichier supplémentaire à télécharger
- Ajoutez
font-display: swapquand vous chargez des polices personnalisées — le texte reste lisible pendant le chargement de la police au lieu d’être invisible - Pensez à la hiérarchie visuelle : vos titres, sous-titres et texte courant doivent être clairement distinguables par leur taille, leur graisse ou les deux
Exemple d’échelle typographique cohérente
/* Une échelle simple et harmonieuse */
:root {
--texte-xs: 0.75rem; /* 12px — mentions légales, légendes */
--texte-sm: 0.875rem; /* 14px — texte secondaire */
--texte-base: 1rem; /* 16px — texte courant */
--texte-lg: 1.25rem; /* 20px — introductions, chapeaux */
--texte-xl: 1.5rem; /* 24px — sous-titres */
--texte-2xl: 2rem; /* 32px — titres de section */
--texte-3xl: 2.5rem; /* 40px — titre principal */
}
body {
font-family: "Lora", serif;
font-size: var(--texte-base);
line-height: 1.6;
}
h1 { font-size: var(--texte-3xl); line-height: 1.2; }
h2 { font-size: var(--texte-2xl); line-height: 1.3; }
h3 { font-size: var(--texte-xl); line-height: 1.4; }Ressources & références
- Developper Mozilla | font-familyArticle
- Developper Mozilla | Polices webArticle
- Developper Mozilla | Les unités CSSArticle
- Google Fonts | Bibliothèque de polices gratuitesOutil
- Adobe Fonts | Polices pour abonnés AdobeOutil
- Fontsquirrel | Polices libres et générateur @font-faceOutil
- Type Scale | Calculateur d'échelle typographiqueOutil
- Hipsum | Générateur de faux texteOutil