Typographie & texte

Donne de la voix et une personnalité à ton site.

Imagine : tu es en train de créer les personnages d'un jeu vidéo. Le HTML a défini leur rôle ("Guerrier", "Mage", "Marchand"). Maintenant, avec le CSS, tu fais le casting des voix.

La typographie, c'est la voix de ton site. Une police épaisse et massive pour un titre, c'est la voix grave d'un guerrier. Une police fine et élégante pour une description, c'est le ton posé d'un mage. La taille de la police, c'est le volume ; l'espacement entre les lignes, c'est le rythme de la parole. Une bonne typo rend ton site lisible et lui donne du caractère !

2.1 Le casting de la voix : font-family

C'est la propriété la plus importante pour définir le style de ton texte. Elle indique au navigateur quelle police utiliser. La bonne pratique est de proposer une liste (un "fallback") : si la première n'est pas installée, le navigateur essaie la suivante.

body {
  /* On essaie "Inter". Sinon, "Segoe UI". Sinon, n'importe quelle police sans-serif. */
  font-family: "Inter", "Segoe UI", sans-serif;
}

Serif ou Sans-serif ? Les polices "Serif" (ex: Times New Roman) ont des petites extensions (empattements), un style classique. Les polices "Sans-serif" (ex: Arial, Inter) ont des lignes épurées, un style plus moderne et souvent plus lisible sur écran.

2.2 Couleur et volume : color et font-size

Ces deux propriétés sont le B.A.-BA. color définit la couleur du texte, tandis que font-size ajuste sa taille. Pour la taille, oublie les px et privilégie l'unité rem pour un site accessible qui s'adapte au zoom du navigateur.

h1 {
  font-size: 2.5rem; /* Un titre principal bien visible */
  color: #1e293b;   /* Un gris-bleu foncé, plus doux que le noir pur */
}

p {
  font-size: 1rem;    /* Taille de base pour le texte courant (souvent 16px) */
  color: #475569;  /* Un gris plus clair pour un bon contraste */
}

Un titre qui en impose

Un paragraphe facile à lire, avec un contraste soigné pour le confort des yeux.

2.3 L'intonation : font-weight et font-style

Besoin de faire ressortir un mot ? C'est ici que ça se passe. font-weight gère l'épaisseur du texte (le gras), et font-style son inclinaison (l'italique).

font-weight : Peut être un mot-clé (normal, bold) ou un chiffre de 100 à 900. `400` est la norme, `700` correspond au gras.
font-style : Les valeurs les plus courantes sont normal et italic.

.promo {
  font-weight: 700; /* ou 'bold' */
  color: #ef4444; /* Rouge pour attirer l'oeil */
}

.citation {
  font-style: italic;
  border-left: 3px solid #cbd5e1;
  padding-left: 1rem;
}

Offre spéciale : -50% sur tout le site !

"La typographie est l'art de bien faire les choses avec des lettres."

2.4 La posture et la respiration : text-align et line-height

Un texte bien aligné et aéré est beaucoup plus agréable à lire. text-align gère l'alignement horizontal, tandis que line-height contrôle l'espace vertical entre les lignes (l'interligne).

Astuce pro pour line-height : Utilise une valeur sans unité (ex: 1.6). Cela signifie "1.6 fois la taille de la police". C'est une méthode robuste qui s'adapte automatiquement si tu changes la font-size.

.titre-centré {
  text-align: center;
}

.texte-lisible {
  line-height: 1.6; /* Un interligne aéré pour un confort de lecture optimal */
}

Une section bien présentée

Ce paragraphe est un exemple parfait. L'espacement entre les lignes le rend facile à suivre du début à la fin, sans que vos yeux ne se fatiguent. C'est un détail crucial pour retenir l'attention de vos lecteurs.