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;
}

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 */
}

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;
}

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).

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

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