Skip to content
Narration Interactive

Les fondamentaux de la typographie

La typographie est l’un des aspects les plus importants de votre design. Une bonne typographie améliore la lisibilité et crée l’ambiance de votre site.

Les propriétés CSS typographiques

Section titled “Les propriétés CSS typographiques”

font-family : Choisir une police

Section titled “font-family : Choisir une police”
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

Le navigateur essaie d’utiliser la première police disponible. Si elle n’existe pas, il passe à la suivante.

Les familles génériques (toujours en dernier) :

  • serif : polices avec empattements (Times, Georgia)
  • sans-serif : polices sans empattements (Arial, Helvetica)
  • monospace : polices à chasse fixe (Courier, Consolas)
  • cursive : polices manuscrites
  • system-ui : police système de l’appareil

Comparaison visuelle :

serif : Les empattements donnent un aspect classique et élégant.

sans-serif : Design moderne et épuré, excellent pour l’écran.

monospace : Chaque lettre prend la même largeur, idéal pour le code.

cursive : Style manuscrit, à utiliser avec parcimonie.

font-size : Taille de police

Section titled “font-size : Taille de police”
body {
  font-size: 16px; /* taille de base */
}


h1 {
  font-size: 2.5rem; /* 2.5 fois la taille de base */
}


p {
  font-size: 1rem; /* taille de base (16px) */
}

Différence entre em et rem - Exemple visuel

Pour comprendre la différence, voici un exemple concret :

/* Taille de base du document */
html {
  font-size: 16px; /* 1rem = 16px */
}


/* Conteneur avec une taille de police modifiée */
.container {
  font-size: 20px; /* nouvelle base pour les "em" */
}


/* Éléments utilisant em (relatif au parent) */
.with-em {
  font-size: 1.5em; /* 1.5 × taille du parent */
}


/* Éléments utilisant rem (relatif à html) */
.with-rem {
  font-size: 1.5rem; /* 1.5 × 16px = 24px toujours */
}

Démonstration visuelle :

Conteneur normal (font-size: 16px par défaut)

Texte avec font-size: 1.5em → 1.5 × 16px = 24px

Texte avec font-size: 1.5rem → 1.5 × 16px = 24px

Dans ce cas, em et rem donnent le même résultat

Conteneur avec font-size: 20px

Texte avec font-size: 1.5em → 1.5 × 20px = 30px

Texte avec font-size: 1.5rem → 1.5 × 16px = 24px

Ici, em s’adapte au parent (20px) mais rem reste fixe (16px)

En résumé :

  • rem : toujours relatif à la taille de base du <html> (prévisible et cohérent)
  • em : relatif à la taille du parent (peut s’accumuler dans les éléments imbriqués)

font-weight : Graisse de la police

Section titled “font-weight : Graisse de la police”
h1 {
  font-weight: 700; /* gras */
}


p {
  font-weight: 400; /* normal */
}


.light {
  font-weight: 300; /* léger */
}

Valeurs courantes : 300 (light), 400 (normal), 600 (semi-bold), 700 (bold), 800 (extra-bold)

Comparaison visuelle :

font-weight: 300 - Texte léger et délicat

font-weight: 400 - Texte normal, poids standard

font-weight: 600 - Texte semi-gras, bon pour les sous-titres

font-weight: 700 - Texte gras, idéal pour les titres

font-weight: 800 - Texte extra-gras, très impactant

line-height : Hauteur de ligne

Section titled “line-height : Hauteur de ligne”
p {
  line-height: 1.6; /* 1.6 fois la taille de la police */
}

Recommandations :

  • Corps de texte : 1.5 à 1.8
  • Titres : 1.2 à 1.4

Comparaison visuelle :

line-height: 1.2 (serré)

Les lignes sont très proches les unes des autres. Ce line-height convient aux titres mais rend la lecture difficile pour les paragraphes. L’œil a du mal à passer d’une ligne à l’autre.

line-height: 1.6 (confortable)

Les lignes ont un espacement idéal pour la lecture. C’est le réglage recommandé pour les textes longs. L’œil peut facilement suivre le texte d’une ligne à l’autre.

line-height: 2.0 (aéré)

Les lignes sont très espacées. Cela peut convenir pour des textes courts ou poétiques, mais devient fatigant pour de longs paragraphes car l’œil doit parcourir plus de distance.

letter-spacing : Espacement des lettres

Section titled “letter-spacing : Espacement des lettres”
h1 {
  letter-spacing: -0.02em; /* rapprocher les lettres */
}


.caps {
  text-transform: uppercase;
  letter-spacing: 0.1em; /* espacer les lettres */
}

Comparaison visuelle :

letter-spacing: -0.05em - Lettres rapprochées, condensé

letter-spacing: 0 - Espacement normal par défaut

letter-spacing: 0.05em - Légèrement espacé, élégant

letter-spacing: 0.15em - Très espacé, aéré

text-transform : Transformation du texte

Section titled “text-transform : Transformation du texte”
.uppercase {
  text-transform: uppercase; /* TOUT EN MAJUSCULES */
}


.capitalize {
  text-transform: capitalize; /* Première Lettre De Chaque Mot */
}

Comparaison visuelle :

text-transform: none - texte normal sans transformation

text-transform: uppercase - texte en majuscules

text-transform: capitalize - première lettre de chaque mot en majuscule

text-transform: lowercase - TOUT EN MINUSCULES

Exemple complet de typographie

Section titled “Exemple complet de typographie”
/* Typographie de base */
body {
  font-family: 'Georgia', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}


/* Titres */
h1, h2, h3 {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}


h1 {
  font-size: 2.5rem; /* 40px */
  letter-spacing: -0.02em;
}


h2 {
  font-size: 2rem; /* 32px */
}


h3 {
  font-size: 1.5rem; /* 24px */
}


/* Texte */
p {
  margin-bottom: 1.5rem;
}


strong {
  font-weight: 700;
}


em {
  font-style: italic;
}