@font-face — Déclarer une police personnalisée

@font-face {
  font-family: 'MaPoliceTitre';
  src: url('fonts/mapolice-titre.woff2') format('woff2'),
       url('fonts/mapolice-titre.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Utilisation */
h1 {
  font-family: 'MaPoliceTitre', sans-serif;
}

Google Fonts — Intégrer des polices gratuites

<!-- Méthode 1 : Balise link (recommandée — plus rapide) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

/* Méthode 2 : @import (plus lent, bloque le rendu) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Utilisation */
body { font-family: 'Inter', sans-serif; }
h1 { font-family: 'Playfair Display', serif; }

Fonts variables — La typographie moderne

/* Déclaration d'une police variable */
@font-face {
  font-family: 'InterVariable';
  src: url('fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Utilisation */
.titre { font-weight: 800; }
.corps { font-weight: 400; }
.fin { font-weight: 200; }

/* Avec Google Fonts — ajouter le paramètre wght */
/* https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap */

2.2 Propriétés de texte (Text)

line-height — L'interligne

/* Sans unité (recommandé : multiplicateur) */
p { line-height: 1.6; }      /* 160% de la taille de police */
p { line-height: 1; }        /* Pas d'espace supplémentaire */

/* Avec em — même comportement que sans unité */
p { line-height: 1.6em; }    /* = 1.6 × font-size de CE calcul */

/* Avec px — valeur fixe */
p { line-height: 24px; }

/* Avec pourcentage */
p { line-height: 160%; }     /* = 1.6 × font-size du calcul */

/* Mots-clés */
p { line-height: normal; }   /* Défaut du navigateur (~1.2) */

letter-spacing — Espacement entre les lettres

/* Espacement positif — texte plus aéré */
.titre {
  letter-spacing: 0.05em;
}

/* Espacement négatif — texte plus serré */
.compact {
  letter-spacing: -0.02em;
}

/* En pixels */
.titre {
  letter-spacing: 2px;
}

/* Réinitialisation */
.normal {
  letter-spacing: normal;
}

word-spacing — Espacement entre les mots

.normal { word-spacing: normal; }
.large { word-spacing: 0.5em; }
.serre { word-spacing: -0.1em; }

text-align — Alignement du texte

.gauche { text-align: left; }       /* Aligné à gauche */
.droite { text-align: right; }     /* Aligné à droite */
.centree { text-align: center; }   /* Centré */
.justifie { text-align: justify; } /* Justifié */

/* Valeurs logiques (directionnelles) */
.debut { text-align: start; }     /* Début du texte (gauche en LTR) */
.fin { text-align: end; }         /* Fin du texte (droite en LTR) */
.match-parent { text-align: match-parent; } /* Hérite du parent */

text-transform — Transformation de la casse

.majuscules { text-transform: uppercase; }    /* TOUT EN MAJUSCULES */
.minuscules { text-transform: lowercase; }    /* tout en minuscules */
.capitalise { text-transform: capitalize; }   /* Première Lettre De Chaque Mot */
.aucun { text-transform: none; }              /* Pas de transformation */

text-shadow — Ombre du texte

/* Ombre simple */
.ombre-simple {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Ombre sans flou */
.ombre-nette {
  text-shadow: 2px 2px 0 #333;
}

/* Effet néon */
.neon {
  text-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #e60073,
    0 0 40px #e60073;
}

/* Effet embossé */
.emboss {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* Supprimer une ombre */
.sans-ombre {
  text-shadow: none;
}

white-space — Gestion des espaces et retours à la ligne

.normal { white-space: normal; }     /* Comportement par défaut */
.pas-sauter { white-space: nowrap; } /* Pas de retour à la ligne */
.pre { white-space: pre; }           /* Comme <pre> HTML */
.pre-wrap { white-space: pre-wrap; } /* Préserve les espaces + wrap */
.pre-line { white-space: pre-line; } /* Préserve les retours HTML + wrap */

Ceci préserve    les espaces
et les retours à la ligne.

Ceci préserve    les espaces
mais ajoute des retours à la ligne
quand c'est nécessaire.

overflow-wrap & word-break — Gestion du dépassement

/* overflow-wrap (anciennement word-wrap) */
.ew-normal { overflow-wrap: normal; }        /* Pas de césure */
.ew-break { overflow-wrap: break-word; }     /* Césure si nécessaire */
.ew-anywhere { overflow-wrap: anywhere; }    /* Césure partout */

/* word-break */
.wb-normal { word-break: normal; }   /* Règles du navigateur */
.wb-all { word-break: break-all; }   /* Césure partout (y compris mots) */
.wb-keep { word-break: keep-all; }   /* Pas de césure dans les mots */

hyphens — Césure automatique

<html lang="fr">  <!-- Nécessaire pour la césure -->

.hyphens-auto {
  hyphens: auto;      /* Césure automatique selon la langue */
}

.hyphens-manual {
  hyphens: manual;    /* Césure uniquement aux endroits marqués avec &shy; */
}

.hyphens-none {
  hyphens: none;      /* Pas de césure */
}

/* Insérer un point de césure manuel */
<p>Unmot&shy;long</p>

text-decoration — Décorations du texte

/* Propriété raccourcie */
.souligne { text-decoration: underline; }
.barre { text-decoration: line-through; }
.suscrit { text-decoration: overline; }
.aucun { text-decoration: none; }

/* Avec style et couleur */
.personnalise {
  text-decoration: underline wavy #dc2626;
}

/* Sous-propriétés détaillées */
.deco {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #7c3aed;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

text-overflow — Dépassement du texte

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

text-indent — Retrait du premier ligne

.retrait {
  text-indent: 2em;          /* Retrait de 2em */
}

.retrait-negatif {
  text-indent: -2em;         /* Dépasse à gauche (utile avec padding-left) */
}

.retrait-pourcentage {
  text-indent: 10%;          /* 10% de la largeur du conteneur */
}

vertical-align — Alignement vertical

/* Valeurs en longueur */
span { vertical-align: 10px; }   /* Décalage vers le haut */

/* Valeurs en pourcentage */
span { vertical-align: -50%; }   /* Relatif à la ligne de base */

/* Mots-clés */
sub { vertical-align: sub; }       /* Aligné en indice */
sup { vertical-align: super; }     /* Aligné en exposant */
.top { vertical-align: top; }      /* Haut du conteneur */
.bottom { vertical-align: bottom; } /* Bas du conteneur */
.mid { vertical-align: middle; }   /* Milieu de l'x-height */
.baseline { vertical-align: baseline; } /* Défaut : ligne de base */
.text-top { vertical-align: text-top; }
.text-bottom { vertical-align: text-bottom; }

direction & unicode-bidi — Direction du texte

/* Texte de droite à gauche (arabe, hébreu) */
.rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}

/* Texte de gauche à droite (défaut) */
.ltr {
  direction: ltr;
  unicode-bidi: normal;
}

/* Mots-clés pour unicode-bidi */
/* normal — comportement par défaut */
/* embed — imbrique le texte dans une direction */
/* isolate — isole le contenu d'une direction différente */
/* bidi-override — force la direction même pour les chiffres */
/* isolate-override — combine isolate et bidi-override */