CSS • Page 3 / Polices & texte

Polices, tailles de texte & mise en forme

Sur cette page, tu vas apprendre à contrôler l’apparence du texte : police, taille, gras, italique, alignement, etc.

1. Choisir une police (font-family)

La propriété font-family permet de choisir la police d’écriture. 

body {
  font-family: Arial, Helvetica, sans-serif;
}

On donne souvent une “liste” de polices : si la première n’est pas disponible, le navigateur essaie la suivante.

Polices génériques

  • serif : avec empattements (style Times New Roman)
  • sans-serif : sans empattements (Arial, Roboto…)
  • monospace : largeur fixe (style code)
h1 {
  font-family: "Trebuchet MS", sans-serif;
}

code {
  font-family: "Consolas", monospace;
}

Quel mot-clé générique utilise-t-on pour une police “sans empattement” ?

2. Tailles & confort de lecture

font-size

Quelques unités courantes :

  • px : pixels
  • rem : relatif à la racine (html)
  • em : relatif au parent
p {
  font-size: 16px;
}

small {
  font-size: 0.8rem;
}

line-height

Contrôle l’espace entre les lignes.

p {
  font-size: 16px;
  line-height: 1.6;  /* 1.6 × la taille du texte */
}
Un line-height entre 1.4 et 1.8 améliore souvent la lisibilité.

La propriété qui contrôle l’espace entre les lignes est :

3. Gras, italique, alignement & décoration

Gras & italique

h1 {
  font-weight: bold;   /* ou 700 */
}

em {
  font-style: italic;
}
  • font-weight : 400 (normal), 700 (bold)…
  • font-style : normal, italic

Alignement & déco

h1 {
  text-align: center;  /* left, right, center, justify */
}

a {
  text-decoration: underline;   /* none, underline, line-through */
}

Comment aligner un texte au centre horizontalement ?

4. Mini labo de typo

Joue avec les options pour voir comment la police et le texte changent.


Aperçu du texte

Ceci est un exemple de texte. Modifie les options et appuie sur “Appliquer” pour voir le rendu.

5. Mini-projet : fiche de profil stylée

Crée une page profil-stylé.html et un fichier profil.css. Objectif : afficher une “carte de profil” bien lisible, avec un beau texte. 

/* Exemple dans profil.css */
body {
  background-color: #050814;
  color: #e4e6ff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.profil-card {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  background-color: #090f23;
  border-radius: 16px;
  border: 1px solid #252b46;
}

.profil-card h1 {
  font-size: 26px;
  text-align: center;
  font-weight: 700;
}

.profil-card p {
  font-size: 15px;
  line-height: 1.7;
}
Tu peux reprendre cette carte comme base pour des fiches joueurs, personnages RP, membres de ton serveur, etc.
← Retour à CSS page 2 Page suivante : Boîtes & mise en page (box model) →