Typographie française sur le web : espaces, guillemets, césure et lisibilité
Un texte français composé avec les habitudes de l'anglais se reconnaît au premier coup d'œil : deux-points collés au mot, guillemets droits, point d'exclamation renvoyé seul en début de ligne. Ces détails ne sont pas de la coquetterie : ils font partie de l'orthographe typographique du français et de la lisibilité. Voici comment les appliquer sur un site, et ce que le code doit prévoir.
Les espaces de la ponctuation
La règle française, telle que la codifient les ouvrages de référence comme le Lexique des règles typographiques en usage à l'Imprimerie nationale, distingue les signes simples et les signes doubles. Le point et la virgule se collent au mot qui précède. Les signes doubles, deux-points, point-virgule, point d'exclamation et point d'interrogation, sont précédés d'une espace. L'usage typographique soigné réserve une espace mot insécable au deux-points et une espace fine insécable aux trois autres ; beaucoup de sites se contentent d'une espace insécable ordinaire partout, ce qui est déjà l'essentiel.
Le mot important est insécable. Une espace ordinaire autorise le navigateur à couper la ligne à cet endroit, et le point d'interrogation se retrouve seul en début de ligne suivante, ce qui est une faute visible. Il existe deux caractères pour l'éviter :
| Caractère | Unicode | Entité HTML | Usage |
|---|---|---|---|
| Espace insécable | U+00A0 | | Avant « : », dans les guillemets, entre nombre et unité |
| Espace fine insécable | U+202F |   | Avant « ; », « ! », « ? » dans une composition soignée |
Les mêmes espaces s'utilisent dans les nombres : séparateur des milliers (1 000, 25 000), entre un nombre et son unité (12 km, 30 €), entre un nombre et le signe pour cent (50 %).
Guillemets, apostrophe, tirets
Le français utilise les guillemets en chevrons, « ainsi », avec une espace insécable après le guillemet ouvrant et avant le guillemet fermant. Les guillemets anglais “ ” servent pour une citation à l'intérieur d'une citation. L'apostrophe typographique ’ remplace avantageusement l'apostrophe droite de la machine à écrire. Pour les incises, on emploie le tiret demi-cadratin – ou le tiret cadratin —, jamais le trait d'union.
WordPress applique par défaut un filtre de « texturisation » qui remplace certains caractères à l'affichage, notamment les apostrophes droites par des apostrophes typographiques. Ce traitement ne pose pas les espaces insécables françaises. Le plus sûr reste de les saisir directement, ou de faire relire les contenus par un correcteur qui sait les insérer.
Majuscules accentuées
En français, les accents ont pleine valeur orthographique, y compris sur les capitales : « État », « Île-de-France », « À propos ». L'Académie française le rappelle régulièrement. Sur le web, il n'y a aucune excuse technique pour s'en dispenser : les claviers proposent ces caractères, et toutes les polices sérieuses les contiennent. C'est un point à vérifier en choisissant une police, en particulier pour les titres en capitales : text-transform: uppercase conserve les accents saisis en minuscules, ce qui est un argument pour écrire les titres normalement et confier les capitales à la CSS.
Déclarer la langue et couper les mots
Le W3C recommande de toujours déclarer la langue par défaut de la page avec un attribut lang sur l'élément html, et de baliser les passages dans une autre langue avec un lang sur l'élément qui les contient. C'est aussi un critère d'accessibilité de niveau A (3.1.1, langue de la page) : un lecteur d'écran qui ignore que le texte est en français le prononcera avec les règles de l'anglais, de façon incompréhensible.
Cette déclaration conditionne également la césure automatique. La propriété CSS hyphens: auto ne coupe les mots que si le navigateur connaît la langue du texte. Pour un texte justifié, ou en colonnes étroites sur mobile, elle évite les « rivières » d'espaces blanches. Pour les titres, il vaut mieux la désactiver, une coupure au milieu d'un titre court étant rarement heureuse.
Longueur de ligne et interlignage
Les recommandations typographiques classiques situent le confort de lecture entre 45 et 75 signes par ligne environ. Sur le web, cela se traduit par une largeur maximale du bloc de texte exprimée en unités relatives, par exemple max-width: 40rem, plutôt qu'en pixels fixes. L'interlignage du texte courant, entre 1,5 et 1,7 fois la taille du corps, aère la lecture sur écran ; les titres se contentent d'un interlignage plus serré.
Le critère 1.4.12 des WCAG, de niveau AA, va plus loin : il n'impose pas un espacement, mais exige qu'aucun contenu ni aucune fonction ne soit perdu quand l'utilisateur applique lui-même un interlignage d'au moins 1,5 fois la taille de police, un espacement après les paragraphes d'au moins 2 fois cette taille, un espacement des lettres de 0,12 fois et un espacement des mots de 0,16 fois. Une mise en page aux hauteurs fixes, où le texte déborde ou se fait couper, échoue à ce test.
Choisir des polices pour le français
Une police pour un site francophone doit au minimum contenir les lettres accentuées, majuscules comprises, les ligatures « œ » et « æ », les guillemets en chevrons et le symbole de l'euro. Les familles qui proposent un jeu « latin étendu » couvrent aussi les noms propres d'autres langues européennes. Pour la lisibilité, des formes de lettres bien distinctes (le « l » minuscule, le « I » capitale et le chiffre « 1 » ne doivent pas se confondre) et une hauteur d'x généreuse aident à petite taille. La façon de les servir efficacement est expliquée dans notre article sur les polices auto-hébergées.
Une check-list pour les rédacteurs
- Espace insécable avant « : », « ; », « ! », « ? » et à l'intérieur des guillemets.
- Guillemets « » plutôt que droits, apostrophe typographique ’.
- Majuscules accentuées partout.
- Nombres groupés par trois avec une espace insécable, et unité séparée du nombre.
- Intitulés de liens qui ont un sens hors contexte, plutôt que « cliquez ici ».
Ces règles demandent un peu d'attention au début, puis deviennent des réflexes. Elles pèsent peu dans le poids d'une page, contrairement aux images : voir notre article sur les images responsives pour l'autre moitié du travail de lisibilité et de rapidité.
Sources
- W3C Internationalization, « Declaring language in HTML » (consulté le 27 octobre 2026).
- W3C, « Understanding Success Criterion 1.4.12: Text Spacing » (consulté le 27 octobre 2026).
- Lexique des règles typographiques en usage à l'Imprimerie nationale, Imprimerie nationale.
- Unicode Consortium, tableaux de caractères U+00A0 (espace insécable) et U+202F (espace fine insécable).
Performance & typographieHéberger ses polices
WOFF2, @font-face, swap, préchargement : servir ses polices soi-même, plus vite et sans transmettre l'adresse IP des visiteurs.
Performance & typographieCore Web Vitals : LCP, INP, CLS
Affichage, réactivité, stabilité : les trois mesures, leurs seuils, et ce qu'un thème WordPress peut faire pour chacune.
Performance & typographieLes images responsives
srcset, sizes, lazy, fetchpriority, width et height : les attributs qui font qu'une image s'affiche vite, sans faire bouger la page.