Typographie CSS moderne : Personnaliser le texte avec les propriétés avancées

La typographie web est l’art de rendre le texte lisible, élégant et performant. En 2025, CSS offre des dizaines de propriétés pour contrôler chaque aspect du texte : casse, espacement, alignement, césure, décoration… Bien au-delà du simple font-family et font-size.

Ce guide explore les propriétés typographiques CSS modernes, des basiques aux avancées, pour créer des interfaces textuelles professionnelles.

Text-transform : Contrôler la casse automatiquement

La propriété text-transform modifie la casse (majuscules/minuscules) du texte sans toucher au HTML. Essentielle pour les titres, labels et interfaces cohérentes.

Les quatre valeurs de text-transform

/* Première lettre de chaque mot en majuscule */
.title-case {
  text-transform: capitalize;
}

/* Tout en majuscules */
.uppercase {
  text-transform: uppercase;
}

/* Tout en minuscules */
.lowercase {
  text-transform: lowercase;
}

/* Aucune transformation (défaut) */
.normal-case {
  text-transform: none;
}

Cas d’usage professionnel

/* Titres de sections en majuscules */
.section-heading {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #6b7280;
}

/* Nom d'utilisateur en capitalize */
.user-name {
  text-transform: capitalize;
}

/* Labels de formulaires */
.form-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

Attention aux limitations linguistiques

Problème : capitalize ne gère pas les articles et prépositions en français ou anglais.

/* HTML : "introduction à la typographie" */
.title { text-transform: capitalize; }
/* Résultat : "Introduction À La Typographie" */
/* Attendu : "Introduction à la typographie" */

Solution : Pour un title case correct, utilisez JavaScript ou écrivez directement le HTML avec la casse souhaitée. CSS capitalize reste utile pour les noms propres simples.

Letter-spacing et word-spacing : Maîtriser l’espacement

L’espacement entre caractères et mots influence considérablement la lisibilité et l’esthétique. Ces propriétés sont fondamentales pour la hiérarchie typographique.

Letter-spacing : Espacement entre caractères

/* Valeurs en pixels (déconseillé) */
.spaced-px {
  letter-spacing: 2px; /* Absolu, ne scale pas */
}

/* Valeurs en em (recommandé) */
.spaced-em {
  letter-spacing: 0.05em; /* Relatif à la taille de police */
}

/* Valeurs négatives pour resserrer */
.tight {
  letter-spacing: -0.02em;
}

Règles typographiques modernes

Word-spacing : Espacement entre mots

/* Augmenter l'espace entre mots */
.wide-words {
  word-spacing: 0.2em;
}

/* Réduire (rare) */
.tight-words {
  word-spacing: -0.1em;
}

/* Usage combiné pour effet visuel */
.display-text {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  word-spacing: 0.3em;
  font-weight: 700;
}

Exemples professionnels

/* En-tête de section Material Design */
.section-header {
  text-transform: uppercase;
  letter-spacing: 0.0892857143em; /* 1.25px à 14px */
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.54);
}

/* Bouton avec texte uppercase */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.0892857143em;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
}

/* Logo avec espacement custom */
.brand-logo {
  letter-spacing: 0.15em;
  word-spacing: 0.4em;
  font-weight: 300;
  font-size: 1.5rem;
}

Text-indent : Indentation et effets typographiques

La propriété text-indent contrôle l’indentation de la première ligne d’un bloc de texte. Traditionnellement utilisée pour les paragraphes, elle offre aussi des possibilités créatives.

Indentation classique de paragraphe

/* Indentation typographique traditionnelle */
.paragraph-indent {
  text-indent: 2em;
  margin-bottom: 0; /* Pas d'espace entre paragraphes */
}

/* Premier paragraphe sans indent (convention éditoriale) */
.paragraph-indent:first-of-type {
  text-indent: 0;
}

/* Alternative moderne : espacement vertical */
.paragraph-modern {
  text-indent: 0;
  margin-bottom: 1.5em; /* Espacement entre paragraphes */
}

Valeurs négatives : Hanging indent

/* Indent négatif (première ligne ressort) */
.hanging-indent {
  text-indent: -2em;
  padding-left: 2em; /* Compense l'indent négatif */
}

/* Usage : listes bibliographiques */
.bibliography-entry {
  text-indent: -2em;
  padding-left: 2em;
  margin-bottom: 1em;
}

/* Exemple HTML */
<p class="bibliography-entry">
  Doe, J. (2025). <em>Modern CSS Typography</em>. Publisher.
</p>

Unités modernes : ch et %

/* Unité 'ch' : largeur du caractère '0' */
.indent-ch {
  text-indent: 4ch; /* Équivalent à 4 caractères */
  /* Idéal pour texte monospace ou alignement précis */
}

/* Pourcentage : relatif à la largeur du conteneur */
.indent-percent {
  text-indent: 10%; /* 10% de la largeur du bloc */
}

Text-align : Au-delà de left, center, right

L’alignement du texte semble simple, mais CSS offre des options avancées souvent méconnues, essentielles pour une typographie professionnelle.

Les valeurs classiques

/* Alignements de base */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Justification (distribution sur toute la largeur) */
.text-justify { text-align: justify; }

Justify : Utilisation et limites

Problème : La justification crée des espaces irréguliers entre mots, nuisant à la lisibilité web.

/* ❌ Justification basique (mauvaise lisibilité) */
.bad-justify {
  text-align: justify;
}

/* ✅ Justification améliorée avec hyphens */
.good-justify {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align-last: left; /* Dernière ligne à gauche */
}

Recommandation 2025 : Évitez justify pour le texte web. Privilégiez left (LTR) ou right (RTL) pour une lisibilité optimale.

Start et end : Alignement logique

/* Valeurs logiques (direction-aware) */
.text-start {
  text-align: start; /* Gauche en LTR, droite en RTL */
}

.text-end {
  text-align: end; /* Droite en LTR, gauche en RTL */
}

/* Utile pour interfaces multilingues */
html[dir="rtl"] .text-start {
  /* Automatiquement à droite en arabe/hébreu */
}

Text-align-last : Contrôler la dernière ligne

/* Alignement spécifique de la dernière ligne */
.paragraph-special {
  text-align: justify;
  text-align-last: center; /* Dernière ligne centrée */
}

/* Usage créatif : effets typographiques */
.quote-block {
  text-align: justify;
  text-align-last: right;
  font-style: italic;
}

Line-height : La clé de la lisibilité

L’interligne (line-height) est probablement la propriété la plus importante pour la lisibilité. Une valeur mal choisie rend le texte illisible ou étouffé.

Règles d’or du line-height

Unités : Avec ou sans unité ?

/* ✅ Sans unité (recommandé) : relatif à font-size */
.text-body {
  font-size: 16px;
  line-height: 1.5; /* = 24px (16 × 1.5) */
}

/* ❌ Avec unité (problèmes héritage) */
.text-bad {
  font-size: 16px;
  line-height: 24px; /* Fixe, ne scale pas avec enfants */
}

/* Exemple du problème */
.parent {
  font-size: 16px;
  line-height: 24px; /* 24px fixe */
}

.child {
  font-size: 24px;
  /* Hérite line-height: 24px, trop serré! */
  /* Devrait être ~36px (24 × 1.5) */
}

Système typographique moderne

/* Variables CSS pour cohérence */
:root {
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
}

/* Application */
.heading {
  line-height: var(--line-height-tight);
}

.body-text {
  line-height: var(--line-height-normal);
}

.article-text {
  line-height: var(--line-height-relaxed);
}

Hyphens : Césure automatique pour texte justifié

La propriété hyphens active la césure automatique des mots longs, essentielle pour le texte justifié ou les colonnes étroites.

Syntaxe et support

/* Césure désactivée (défaut) */
.no-hyphens {
  hyphens: none;
}

/* Césure manuelle uniquement (via ­ en HTML) */
.manual-hyphens {
  hyphens: manual;
}

/* Césure automatique (nécessite attribut lang) */
.auto-hyphens {
  hyphens: auto;
  -webkit-hyphens: auto; /* Safari */
  lang: fr; /* Obligatoire pour règles de césure */
}

Usage avec text-align: justify

/* ✅ Justification professionnelle */
.justified-text {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align-last: left;
}

/* Nécessite attribut lang en HTML */
<p class="justified-text" lang="fr">
  Texte justifié avec césure automatique selon règles françaises.
</p>

Limites et support navigateur

Support 2025 : 95%+ des navigateurs modernes. Nécessite dictionnaire de langue intégré (via attribut lang).

Performance : La césure automatique a un léger coût CPU. Limitez son usage aux blocs de texte nécessitant justification.

Text-decoration : Bien au-delà du soulignement

La propriété text-decoration contrôle les lignes décoratives du texte. En 2025, elle offre un contrôle précis sur style, couleur et position.

Syntaxe moderne (propriétés décomposées)

/* Ancienne syntaxe (toujours valide) */
.old-style {
  text-decoration: underline;
}

/* Syntaxe moderne décomposée */
.modern-style {
  text-decoration-line: underline;
  text-decoration-color: #8300e9;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* Shorthand moderne */
.shorthand {
  text-decoration: underline wavy #8300e9 2px;
}

Text-decoration-line : Types de lignes

/* Valeurs possibles */
.underline { text-decoration-line: underline; }
.overline { text-decoration-line: overline; }
.line-through { text-decoration-line: line-through; }

/* Combinaisons multiples */
.multi-line {
  text-decoration-line: underline overline;
}

Text-decoration-style : Styles de ligne

/* Styles disponibles */
.solid { text-decoration-style: solid; }
.double { text-decoration-style: double; }
.dotted { text-decoration-style: dotted; }
.dashed { text-decoration-style: dashed; }
.wavy { text-decoration-style: wavy; }

/* Exemple créatif : liens avec wavy au hover */
a {
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}

a:hover {
  text-decoration: underline wavy #8300e9 2px;
}

Text-underline-offset : Contrôler la position

/* Décaler le soulignement (éviter chevauchement) */
.offset-underline {
  text-decoration: underline;
  text-underline-offset: 4px; /* Descend de 4px */
}

/* Usage moderne pour liens */
a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(131, 0, 233, 0.5);
  text-decoration-thickness: 2px;
}

a:hover {
  text-decoration-color: rgba(131, 0, 233, 1);
}

White-space : Contrôler espaces et retours ligne

La propriété white-space détermine comment les espaces et retours à la ligne sont traités. Essentielle pour le code, les citations et le texte préformaté.

Les cinq valeurs principales

Cas d’usage typiques

/* Empêcher retour ligne (boutons, labels) */
.no-wrap {
  white-space: nowrap;
}

/* Blocs de code (préservation formatage) */
pre, code {
  white-space: pre;
  font-family: 'Fira Code', monospace;
}

/* Poésie ou texte préformaté avec wrap */
.poem {
  white-space: pre-wrap;
  font-family: 'Crimson Pro', serif;
}

/* Citations avec retours ligne préservés */
blockquote {
  white-space: pre-line;
}

Text-overflow : Gérer le texte trop long

Déjà couvert dans notre article sur les propriétés CSS modernes, text-overflow contrôle l’affichage du texte débordant. Rappel des essentiels :

/* Texte tronqué avec ellipsis (...) */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-ligne avec line-clamp (moderne) */
.truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 3 lignes max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Font-variant : Small caps et variantes OpenType

La propriété font-variant active les variantes typographiques intégrées dans les polices OpenType. Les small caps sont les plus connues, mais ce n’est que la surface.

Small caps (petites capitales)

/* Vraies small caps (si police supporte) */
.small-caps-real {
  font-variant-caps: small-caps;
  /* ou shorthand : */
  font-variant: small-caps;
}

/* Fausses small caps (déconseillé) */
.small-caps-fake {
  text-transform: uppercase;
  font-size: 0.8em; /* Simule, qualité moindre */
}

Chiffres tabulaires et oldstyle

/* Chiffres alignés (tableaux financiers) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Chiffres oldstyle (élégance éditoriale) */
.oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}

/* Fractions automatiques */
.fractions {
  font-variant-numeric: diagonal-fractions;
  /* 1/2 devient ½ si police supporte */
}

Direction et writing-mode : Textes multilingues

Pour les interfaces multilingues supportant arabe, hébreu, japonais ou chinois traditionnel, CSS offre un contrôle précis de la direction d’écriture.

Direction : LTR vs RTL

/* Définir direction (plutôt via HTML dir="rtl") */
.rtl-text {
  direction: rtl;
  unicode-bidi: embed;
}

/* Utilisation avec attribut HTML (recommandé) */
<html dir="rtl"> <!-- Arabe, hébreu -->
<html dir="ltr"> <!-- Français, anglais -->

Writing-mode : Textes verticaux

/* Texte vertical (japonais, chinois traditionnel) */
.vertical-text {
  writing-mode: vertical-rl; /* Right-to-left vertical */
}

/* Horizontal (défaut) */
.horizontal-text {
  writing-mode: horizontal-tb; /* Top-to-bottom */
}

/* Usage créatif : Labels sidebar */
.sidebar-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Performance et accessibilité : Les bonnes pratiques

Performance typographique

• Text-rendering : Évitez optimizeLegibility sur gros blocs (coût CPU)
• Font-display : Utilisez swap pour éviter FOIT
• Hyphens: auto : Coût léger, limitez aux blocs justifiés
• Text-shadow multiples : Impact rendering, limitez à 2-3 max

Accessibilité typographique

/* Contraste suffisant (WCAG AA : 4.5:1 minimum) */
.accessible-text {
  color: #1f2937; /* Gris foncé */
  background: #ffffff;
  /* Contraste : 14.5:1 (AAA) */
}

/* Line-height pour lisibilité */
.readable-text {
  line-height: 1.6; /* Minimum 1.5 WCAG */
}

/* Éviter justify (problèmes dyslexie) */
.dyslexia-friendly {
  text-align: left;
  hyphens: none;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

Système typographique complet : Exemple production

/* Variables CSS pour cohérence */
:root {
  /* Échelle typographique */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  
  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Letter spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  
  /* Polices */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-mono: 'Fira Code', monospace;
}

/* Classes utilitaires */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }

/* Composants typographiques */
.heading-1 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-family: var(--font-sans);
}

.body-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  font-family: var(--font-sans);
  color: #1f2937;
}

.caption {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: #6b7280;
}

.label-uppercase {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: #6b7280;
}

Checklist : Typographie CSS professionnelle

• Utilisez line-height sans unité pour héritage correct
• letter-spacing en em (relatif) plutôt qu’en px (absolu)
• Évitez text-align: justify sauf avec hyphens: auto
• Préférez text-align: start/end pour interfaces multilingues
• text-transform: uppercase nécessite souvent letter-spacing
• Attribut lang obligatoire pour hyphens: auto
• Contraste minimum 4.5:1 (WCAG AA) pour texte courant
• white-space: nowrap + overflow: hidden + text-overflow: ellipsis pour truncate
• Utilisez variables CSS pour cohérence typographique
• Testez accessibilité avec screen readers et outils contraste

Conclusion : La typographie, fondement du design web

La typographie CSS est bien plus qu’une question de polices et de tailles. C’est un système complet de propriétés qui, bien maîtrisées, créent des interfaces lisibles, élégantes et accessibles.

Les propriétés de base (text-transform, letter-spacing, text-indent) restent essentielles, mais 2025 a apporté des outils puissants : hyphens pour la césure, text-decoration avancé, font-variant pour OpenType, et un contrôle précis du line-height.

Trois principes à retenir :

1. Lisibilité avant esthétique : Un texte illisible est un échec, quelle que soit sa beauté
2. Cohérence typographique : Utilisez un système d’échelle (variables CSS)
3. Accessibilité native : Contraste, line-height, éviter justify

La typographie web continue d’évoluer avec les variable fonts, les nouvelles features OpenType et les améliorations d’accessibilité. Maîtriser ces fondamentaux vous donne les outils pour créer des interfaces textuelles professionnelles, performantes et inclusives.

Besoin d’accompagnement pour créer un système de design typographique cohérent ? Chez Itamde, nous concevons des interfaces web élégantes et accessibles. Découvrez nos services de développement web et design.