📐 Règles typographiques pour la mise en page sur Internet
🎯 Introduction
La typographie est l'art d'organiser les caractères, les mots et les textes afin d'en faciliter la lecture et d'en améliorer l'apparence.
Sur Internet, les règles typographiques s'inspirent largement de celles utilisées dans la presse, l'édition et l'imprimerie. Cependant, elles doivent être adaptées aux spécificités des écrans, à la diversité des appareils et aux habitudes de lecture en ligne.
L'objectif est triple :
- 📖 La lisibilité : rendre le texte facile à lire et à comprendre.
- 🎨 L'harmonie visuelle : donner une identité graphique cohérente au site.
- 🧭 La hiérarchie de l'information : permettre au lecteur de distinguer immédiatement les titres, les sous-titres, le texte courant et les informations secondaires.
Une bonne mise en page ne cherche pas à impressionner par la quantité d'effets graphiques. Elle cherche avant tout à rendre le contenu agréable et accessible.
1. 🔤 Les familles de polices de caractères
Il existe plusieurs grandes familles typographiques. Le choix d'une famille dépend du contenu, du support et de l'identité visuelle recherchée.
1.1. Les polices avec empattements : Serif
Les empattements sont les petits prolongements qui terminent les extrémités de certaines lettres.
Exemples :
- Times New Roman
- Georgia
- Garamond
- Linux Libertine
- Palatino
Ces polices sont traditionnellement associées aux livres, aux journaux et aux publications imprimées.
Caractéristiques
- Aspect classique et littéraire.
- Bonne différenciation de certaines formes de lettres.
- Impression de sérieux, de tradition ou d'élégance.
- Adaptées aux textes longs lorsque leur dessin et leur taille sont appropriés.
Dans les livres imprimés, les polices avec empattements sont historiquement très répandues.
Sur Internet, elles restent parfaitement adaptées aux articles, aux essais, aux documents historiques et aux textes littéraires.
La police Georgia a notamment été conçue pour offrir une bonne lisibilité sur écran.
1.2. Les polices sans empattements : Sans Serif
Ces polices ne comportent pas d'empattements.
Exemples :
- Arial
- Helvetica
- Verdana
- Roboto
- Open Sans
- Noto Sans
- Hind Siliguri
Caractéristiques
- Aspect moderne et sobre.
- Formes souvent simples et directes.
- Bonne adaptation aux interfaces, menus et boutons.
- Très utilisées dans les sites Internet et les applications.
Elles conviennent particulièrement aux interfaces de navigation, aux tableaux de bord, aux formulaires et aux textes informatifs.
Elles conviennent également parfaitement aux textes longs, à condition de choisir une police agréable, une taille suffisante et un interlignage adapté.
1.3. Les polices monospace
Dans ces polices, chaque caractère occupe la même largeur.
Exemples :
- Courier New
- Consolas
- DejaVu Sans Mono
Elles sont surtout utilisées pour :
- Le code informatique.
- Les commandes de terminal.
- Les exemples techniques.
- Certaines données structurées.
Elles sont généralement peu adaptées aux longs textes destinés à une lecture courante.
1.4. Les polices décoratives et manuscrites
Elles imitent notamment l'écriture manuscrite ou présentent des formes particulièrement expressives.
Elles peuvent être utiles pour un logo, une courte citation graphique ou un élément décoratif.
En revanche, elles sont généralement déconseillées pour les paragraphes, car leur lecture prolongée est plus fatigante.
2. 📚 Les traditions typographiques du livre et de la presse
Les livres, les journaux et les sites Internet poursuivent un objectif commun : permettre au lecteur de parcourir un contenu et d'en comprendre le sens.
Leurs méthodes diffèrent cependant en raison des supports et des usages.
2.1. La typographie du livre
Le livre privilégie généralement une lecture continue et approfondie.
On y trouve souvent :
- Une ou deux familles de polices.
- Une taille de caractères relativement stable.
- Des marges généreuses.
- Un interlignage confortable.
- Des paragraphes organisés avec soin.
- Une hiérarchie discrète entre les titres et le texte courant.
- Une utilisation mesurée du gras et de l'italique.
Dans les romans et les essais, la première ligne des paragraphes est fréquemment marquée par un retrait plutôt que par une ligne blanche entre les paragraphes.
Les titres de chapitres peuvent être centrés ou séparés du texte par des espaces importants.
La composition tient compte de la longueur des lignes, des coupures de mots, des veuves et des orphelines.
Une veuve ou une orpheline désigne, selon les conventions éditoriales, une ligne de paragraphe isolée au début ou à la fin d'une page ou d'une colonne. Les définitions exactes varient selon les traditions typographiques.
2.2. La typographie de la presse
Les journaux et magazines doivent permettre au lecteur de repérer rapidement les informations.
Ils utilisent fréquemment :
- Des titres fortement différenciés.
- Des chapôs ou introductions.
- Des intertitres.
- Des colonnes.
- Des légendes d'images.
- Des encadrés.
- Des caractères gras pour certains éléments.
- Une hiérarchie visuelle plus marquée que dans un roman.
La taille des titres dépend de leur importance éditoriale et de la place disponible.
Dans la presse, le lecteur peut commencer par le titre, poursuivre avec le chapô, puis lire seulement certains paragraphes.
La mise en page facilite donc une lecture sélective.
2.3. La typographie sur Internet
Le Web combine ces deux traditions.
Un article de fond peut reprendre les principes du livre : texte calme, longueur de ligne maîtrisée, paragraphes confortables.
Une page d'actualité peut reprendre ceux de la presse : titres visibles, résumé, intertitres et informations rapidement repérables.
Une interface administrative privilégie plutôt la simplicité, la cohérence et l'efficacité.
La grande différence du Web est que la mise en page doit s'adapter à des écrans de dimensions très différentes.
Une page doit rester lisible sur un téléphone, une tablette et un ordinateur.
3. 🔠 Quelle taille choisir pour les caractères ?
La taille des caractères est l'un des facteurs les plus importants pour le confort de lecture.
Sur le Web, elle est généralement exprimée en pixels (px) ou en rem.
Le rem est une unité relative à la taille de police définie sur l'élément racine du document HTML. Par défaut, celle-ci est souvent de 16 pixels dans les navigateurs, mais elle peut varier.
3.1. Tailles indicatives pour une page Web
Les valeurs suivantes constituent des points de départ, et non des normes obligatoires.
| Élément | Taille indicative |
|---|---|
| Texte courant | 16 à 19 px |
| Texte dense ou secondaire | 14 à 16 px |
| Légende d'image | 13 à 15 px |
| Petit texte d'interface | 14 à 16 px |
| Titre principal H1 | 30 à 42 px |
| Titre H2 | 24 à 32 px |
| Titre H3 | 20 à 26 px |
| Titre H4 | 18 à 22 px |
Ces tailles doivent être adaptées à la police utilisée. Deux polices réglées à 16 px peuvent sembler sensiblement différentes, car leur hauteur apparente et leurs proportions ne sont pas identiques.
Sur un écran mobile, un titre peut être réduit afin de ne pas occuper toute la largeur disponible.
À l'inverse, sur un grand écran, un titre principal peut être plus grand.
3.2. Pourquoi éviter un texte trop petit ?
Un texte trop petit peut entraîner :
- Une fatigue visuelle accrue.
- Des difficultés de lecture sur les petits écrans.
- Un besoin de zoom plus fréquent.
- Une accessibilité réduite pour les personnes malvoyantes.
Il faut éviter de réduire systématiquement la taille du texte pour faire tenir davantage de contenu sur une page.
Il est généralement préférable de conserver une taille confortable et d'organiser l'information autrement.
3.3. Exemple de tailles exprimées en rem
Si la taille de base est de 16 px :
| Valeur | Équivalent indicatif |
|---|---|
0.75rem |
12 px |
0.875rem |
14 px |
1rem |
16 px |
1.125rem |
18 px |
1.25rem |
20 px |
1.5rem |
24 px |
2rem |
32 px |
2.5rem |
40 px |
Pour le texte courant, 1rem ou 1.0625rem constitue souvent un bon point de départ.
L'emploi de rem permet de mieux respecter les préférences de taille du lecteur et de faciliter l'adaptation globale du site.
4. 📏 L'interlignage : l'espace entre les lignes
L'interlignage correspond à la distance verticale entre les lignes successives d'un texte.
Il est aussi important que la taille des caractères.
Un texte peut utiliser une excellente police et rester fatigant si les lignes sont trop rapprochées.
4.1. Valeurs recommandées
| Type de contenu | Interlignage indicatif |
|---|---|
| Texte courant | 1.5 à 1.75 |
| Paragraphes courts | 1.4 à 1.6 |
| Titres | 1.1 à 1.3 |
| Code informatique | 1.4 à 1.6 |
| Petites légendes | 1.4 à 1.5 |
L'interlignage est souvent exprimé sans unité dans le CSS.
Par exemple :
body {
font-size: 1rem;
line-height: 1.65;
}Avec une taille de 16 px, un interlignage de 1.65 donne une hauteur de ligne d'environ 26,4 px.
Pour un titre, un interlignage plus serré évite que les lignes soient excessivement espacées.
h1, h2, h3 {
line-height: 1.2;
}Il faut toutefois tester le résultat avec les polices réellement utilisées.
5. ↔️ La longueur des lignes
Une ligne trop longue oblige l'œil à parcourir une grande distance avant de revenir au début de la ligne suivante.
Une ligne trop courte provoque au contraire des retours à la ligne trop fréquents.
Pour les textes de lecture courante, une longueur d'environ 60 à 80 caractères par ligne constitue une bonne référence.
Il s'agit d'un ordre de grandeur, pas d'une règle absolue.
Pour une lecture prolongée, une largeur de texte comprise approximativement entre 60 et 75 caractères est souvent confortable.
En CSS, on peut limiter la largeur avec l'unité ch, qui dépend de la largeur du caractère zéro de la police utilisée.
.article {
max-width: 70ch;
margin-inline: auto;
}Cette méthode permet de limiter la longueur des lignes sans imposer une largeur fixe en pixels.
Sur une tablette, le texte peut ainsi conserver une largeur agréable même lorsque l'écran est très large.
Il faut distinguer la largeur du texte de celle de la page : un site peut occuper toute la largeur de l'écran tout en maintenant une colonne de lecture relativement étroite.
6. 🔀 Faut-il mélanger plusieurs polices ?
Le mélange de polices peut donner une identité visuelle intéressante, mais il doit rester maîtrisé.
Une page qui utilise trop de polices différentes risque de paraître désordonnée.
6.1. La règle pratique : une ou deux familles
Pour un site classique, on peut utiliser :
- Une police pour le texte courant.
- Une autre pour les titres, si cela apporte une réelle valeur visuelle.
Une troisième famille peut être réservée au code informatique ou à un usage particulier.
Il ne s'agit pas d'une obligation absolue : certains sites utilisent une seule famille, tandis que certaines publications utilisent plusieurs familles avec une logique éditoriale précise.
6.2. Associations typographiques possibles
| Texte courant | Titres | Effet recherché |
|---|---|---|
| Noto Sans | Noto Sans | Sobriété et cohérence |
| Noto Sans | Linux Libertine | Contraste entre modernité et tradition |
| Georgia | Arial | Style éditorial classique |
| Linux Libertine | Linux Libertine | Aspect littéraire homogène |
| Hind Siliguri | Hind Siliguri | Présentation moderne et légère |
| Georgia | Georgia | Lecture éditoriale élégante |
Une association Serif pour les titres et Sans Serif pour le texte peut fonctionner, tout comme l'association inverse.
Le choix dépend de la personnalité du site et de la longueur des textes.
Le contraste entre deux polices doit être intentionnel. Deux polices presque identiques peuvent donner une impression d'incohérence plutôt que de contraste.
6.3. Les graisses de caractères
Une même famille propose souvent plusieurs graisses :
300: Light, assez fin.400: Regular, normal.500: Medium.600: SemiBold.700: Bold.800: ExtraBold.
Les graisses disponibles dépendent de la famille.
Pour une mise en page équilibrée, il est souvent suffisant d'utiliser :
400pour les paragraphes.600pour certains titres ou éléments importants.700pour les titres principaux ou les mises en évidence fortes.
La graisse 300 peut être élégante pour un grand titre, mais elle peut manquer de contraste lorsqu'elle est utilisée pour du texte petit ou sur un écran de qualité médiocre.
Il n'est pas nécessaire d'utiliser toutes les graisses disponibles.
7. 🎨 Le gras, l'italique, le soulignement et les capitales
Ces quatre procédés permettent de mettre en valeur une partie du texte. Ils ne doivent pas être utilisés indifféremment.
7.1. Le gras
Le gras sert à attirer l'attention sur un élément important.
Il peut être utilisé pour :
- Un concept essentiel.
- Un mot clé.
- Une courte phrase importante.
- Une information pratique.
- Le début d'une définition.
Il est préférable d'éviter de mettre des paragraphes entiers en gras : lorsque tout est mis en évidence, plus rien ne ressort.
7.2. L'italique
L'italique est traditionnellement employé pour :
- Les titres d'œuvres, selon les conventions éditoriales.
- Les mots étrangers.
- Certaines citations ou nuances de sens.
- Les termes techniques introduits dans un texte.
Sur le Web, il peut également servir à apporter une nuance ou à distinguer une remarque.
Il faut éviter les longs passages en italique, car ils sont souvent moins faciles à lire, notamment sur certains écrans.
7.3. Le soulignement
Dans la typographie traditionnelle, le soulignement est relativement peu utilisé dans le texte courant.
Sur Internet, il est fortement associé aux liens cliquables.
Il est donc préférable de réserver le soulignement aux liens ou à un usage très particulier, afin de ne pas induire le lecteur en erreur.
7.4. Les capitales
Les textes entièrement en majuscules sont généralement plus difficiles à parcourir que les textes utilisant les minuscules et les majuscules habituelles.
Les capitales peuvent convenir à :
- De courts libellés.
- Certains sigles.
- Une petite mention de catégorie.
- Un élément graphique ponctuel.
Il est préférable d'éviter les titres très longs en capitales.
En français, les titres peuvent conserver une casse classique, avec une majuscule initiale et les majuscules requises par les règles de la langue.
8. 🧱 Les paragraphes et les espaces
La présentation des paragraphes varie entre les livres imprimés et les pages Web.
8.1. Dans les livres
Les paragraphes sont souvent séparés par un retrait de première ligne.
Il n'y a pas nécessairement de ligne blanche entre eux.
Cette convention permet de conserver une composition compacte, adaptée à une lecture continue.
8.2. Sur Internet
Les paragraphes sont souvent séparés par un espace vertical.
Cette pratique facilite le repérage des blocs de texte, notamment sur les écrans.
Un paragraphe doit idéalement développer une idée principale.
Les paragraphes très longs peuvent être divisés lorsque cela améliore réellement la compréhension.
Il ne faut cependant pas transformer chaque phrase en paragraphe indépendant : cela fragmente excessivement la lecture.
8.3. Une base CSS possible
p {
margin-block: 0 1em;
line-height: 1.65;
}Cette règle ajoute un espace après chaque paragraphe.
Il faut éviter de cumuler plusieurs mécanismes d'espacement qui produiraient des écarts excessifs.
9. 📰 Les titres et la hiérarchie de l'information
Les titres permettent au lecteur de comprendre la structure du document avant même de lire chaque paragraphe.
Il est utile de distinguer :
- Le titre principal.
- Les titres de grandes sections.
- Les sous-sections.
- Les subdivisions plus précises.
En HTML, cette structure est exprimée par les éléments h1 à h6.
9.1. Exemple de hiérarchie
<h1>La vie de la commune</h1>
<h2>Les services municipaux</h2>
<h3>Les démarches administratives</h3>
<h4>Les horaires d'accueil</h4>Il ne faut pas choisir le niveau d'un titre uniquement en fonction de son apparence visuelle.
Un h3 ne doit pas être remplacé par un h2 simplement parce que l'on souhaite un titre plus grand.
L'apparence est définie par le CSS ; la structure est définie par le HTML.
9.2. Différencier les titres sans multiplier les effets
La hiérarchie peut être exprimée par plusieurs moyens :
- La taille.
- La graisse.
- La couleur.
- Les marges.
- Une bordure discrète.
- Un changement de famille typographique.
Il n'est pas nécessaire d'utiliser tous ces moyens simultanément.
Un titre bien conçu se distingue généralement du texte courant grâce à deux ou trois caractéristiques cohérentes.
10. 🇫🇷 Les principales règles typographiques françaises
La typographie française comporte des conventions qui méritent d'être respectées, même sur Internet.
10.1. Les espaces avant et après la ponctuation
En typographie française traditionnelle :
| Signe | Convention française |
|---|---|
Virgule , |
Pas d'espace avant, une espace après |
Point . |
Pas d'espace avant, une espace après |
Point-virgule ; |
Espace avant et après |
Deux-points : |
Espace avant et après |
Point d'interrogation ? |
Espace avant et après |
Point d'exclamation ! |
Espace avant et après |
Parenthèse ouvrante ( |
Espace avant si nécessaire, pas d'espace après |
Parenthèse fermante ) |
Pas d'espace avant, espace après si nécessaire |
Le mot « espace » est traditionnellement féminin en typographie.
Une particularité importante sur le Web
Dans les textes français, on utilise normalement une espace insécable avant les signes ;, :, ? et !.
Une espace insécable empêche le signe de ponctuation de se retrouver seul au début de la ligne suivante.
En HTML, on peut utiliser ou le caractère Unicode correspondant.
Exemple :
Une question ? Une réponse !Les conventions exactes varient selon les usages éditoriaux, les pays et les outils de composition. Les espaces insécables restent particulièrement utiles pour éviter les ruptures de ligne disgracieuses.
10.2. Les guillemets
En français, on utilise traditionnellement les guillemets français :
« Bonjour ! »
Ils sont généralement préférés aux guillemets anglais dans un texte français composé selon les conventions éditoriales françaises.
On peut écrire en HTML :
<p>Il déclara : « Tout est prêt ! »</p>À l'intérieur d'une citation déjà entre guillemets français, les guillemets anglais peuvent servir pour une citation de second niveau.
10.3. Les nombres et les unités
Quelques principes utiles :
- Utiliser une espace entre un nombre et une unité :
25 km,18 °C,50 €. - Utiliser une espace insécable lorsque la séparation en fin de ligne serait gênante.
- Conserver une présentation homogène des dates et des nombres.
- Utiliser la virgule comme séparateur décimal dans les textes français :
3,5. - Éviter les variations arbitraires de présentation dans une même page.
Pour les unités, il convient de respecter les symboles normalisés, qui ne prennent généralement pas de point final.
11. 📱 Adapter la typographie aux écrans
La mise en page Web doit fonctionner sur les téléphones, les tablettes et les ordinateurs.
Il ne suffit pas de réduire toute la page pour obtenir une version mobile satisfaisante.
11.1. Utiliser des dimensions adaptatives
Le CSS permet d'adapter les tailles selon la largeur disponible.
Exemple :
h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
}
body {
font-size: 1rem;
line-height: 1.65;
}La fonction clamp() définit une valeur minimale, une valeur préférée et une valeur maximale.
Le titre grandit donc progressivement avec la largeur de l'écran, sans devenir trop petit ni excessivement grand.
11.2. Ne pas désactiver le zoom
Il faut laisser le lecteur agrandir le contenu.
Une page accessible ne doit pas empêcher le zoom par des réglages abusifs de la balise viewport.
11.3. Contraste et lisibilité
Le texte doit être suffisamment contrasté par rapport à son arrière-plan.
Pour le texte courant, les recommandations WCAG préconisent généralement un rapport de contraste d'au moins 4,5:1. Un seuil de 3:1 est prévu pour le texte de grande taille, selon les critères concernés.
Il faut éviter les textes gris très pâles sur fond blanc, même si leur apparence peut sembler élégante sur un écran bien réglé.
Une bonne typographie doit rester lisible dans des conditions de consultation variées.
12. 🎨 Les couleurs et la sobriété graphique
La couleur est un outil de hiérarchie, mais elle ne doit pas remplacer une structure typographique claire.
Pour un site institutionnel ou municipal, une palette limitée suffit généralement :
- Une couleur principale pour certains titres ou éléments de navigation.
- Une couleur de texte suffisamment sombre.
- Une couleur de fond confortable.
- Une ou deux couleurs complémentaires pour les alertes et les informations particulières.
Les couleurs ne doivent pas être utilisées comme seul moyen de distinguer deux catégories d'informations.
Par exemple, une information importante doit aussi pouvoir être repérée par son libellé, son icône ou sa structure.
Il est préférable d'éviter les effets décoratifs systématiques : ombres marquées, contours multiples, dégradés inutiles ou couleurs différentes pour chaque niveau de titre.
La cohérence visuelle est généralement plus importante que la multiplication des effets.
13. 📐 Les marges et les espaces blancs
Les espaces blancs sont les zones libres qui entourent les textes, les images et les autres éléments.
Ils ne constituent pas de l'espace perdu : ils contribuent à la lisibilité.
Une page trop dense paraît souvent plus difficile à lire, même lorsque son texte est correctement composé.
Il est utile de prévoir :
- Une marge autour de la zone de lecture.
- Un espace avant et après les titres.
- Une séparation claire entre les sections.
- Des marges cohérentes entre les paragraphes.
- Un espacement suffisant entre les éléments interactifs.
Les espacements doivent suivre une logique commune.
Par exemple, on peut utiliser une échelle simple :
0.5rempour un petit espace.1rempour un espace courant.1.5rempour une séparation plus marquée.2remou davantage pour séparer de grandes sections.
Ces valeurs sont des exemples. L'essentiel est de conserver une cohérence dans l'ensemble du site.
14. 🖼️ Images, légendes et citations
Les images et les autres éléments éditoriaux doivent s'intégrer à la hiérarchie du texte.
14.1. Les images
Une image doit être suffisamment grande pour être compréhensible, sans prendre une place disproportionnée.
Il est utile de prévoir :
- Une largeur adaptée à la colonne de lecture.
- Des proportions cohérentes.
- Une légende lorsque l'image apporte une information qui mérite d'être précisée.
- Un texte alternatif pertinent lorsque l'image transmet une information.
Le texte alternatif ne doit pas simplement répéter une légende déjà présente : il doit fournir une alternative utile à la perception visuelle.
14.2. Les citations
Les citations peuvent être distinguées du texte courant par :
- Un retrait.
- Une bordure discrète.
- Un léger changement de taille.
- L'italique, si cela reste confortable à lire.
Il est rarement nécessaire de cumuler tous ces effets.
14.3. Les encadrés
Les encadrés peuvent servir à isoler :
- Une information importante.
- Une définition.
- Une note.
- Une recommandation.
- Un avertissement.
Ils doivent être réservés aux éléments qui méritent réellement d'être distingués.
Si chaque paragraphe est encadré, l'effet de mise en évidence disparaît.
15. 🧩 Exemple de feuille CSS typographique
Voici une base volontairement simple, que l'on peut adapter à une feuille de style existante.
/* Typographie générale */
body {
font-family: "Noto Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: #292929;
}
/* Zone de lecture */
.article {
max-width: 70ch;
margin-inline: auto;
padding-inline: 1rem;
}
/* Titres */
h1, h2, h3, h4 {
line-height: 1.2;
font-weight: 600;
margin-block: 1.6em 0.6em;
}
h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
}
h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
}
h3 {
font-size: 1.35rem;
}
h4 {
font-size: 1.15rem;
}
/* Paragraphes */
p {
margin-block: 0 1em;
}
/* Citations */
blockquote {
margin-inline: 0;
padding-inline-start: 1rem;
border-inline-start: 3px solid #999;
}
/* Code */
pre, code {
font-family: monospace;
}
pre {
overflow-x: auto;
line-height: 1.5;
}
/* Images */
img {
max-width: 100%;
height: auto;
}Cette feuille constitue un point de départ, et non une charte graphique universelle.
Elle doit être testée avec les polices réellement disponibles, les contenus du site et les différents écrans.
Si une police Web externe est utilisée, il faut également tenir compte de son chargement, de ses licences et de la possibilité de prévoir une police de remplacement.
16. ⚖️ Les erreurs typographiques les plus fréquentes
Voici les principaux défauts à éviter.
| Erreur | Conséquence |
|---|---|
| Trop de polices différentes | Perte de cohérence |
| Trop de tailles de caractères | Hiérarchie confuse |
| Texte courant trop petit | Lecture fatigante |
| Lignes trop longues | Retours à la ligne difficiles |
| Interlignage trop serré | Texte compact et peu confortable |
| Paragraphes interminables | Repérage des idées difficile |
| Tout mettre en gras | Plus aucune hiérarchie |
| Souligner du texte non cliquable | Confusion avec les liens |
| Trop de couleurs | Présentation désordonnée |
| Titres sans hiérarchie logique | Navigation et compréhension moins faciles |
| Contraste insuffisant | Accessibilité réduite |
| Marges irrégulières | Impression de désordre |
| Empêcher le zoom | Difficultés pour certains lecteurs |
La qualité typographique dépend rarement d'un effet isolé. Elle résulte de la cohérence entre la police, la taille, les espaces, les couleurs, la longueur des lignes et la structure du document.
17. ✅ Une charte typographique simple et efficace
Pour un site d'information, une mairie, une association ou un site documentaire, on peut adopter les principes suivants.
Polices
- Une famille principale pour le texte courant.
- Une seconde famille uniquement si elle apporte une différence visuelle utile.
- Une police monospace pour le code informatique.
Tailles
- Texte courant :
1remà1.125rem. - Titres : tailles graduées et cohérentes.
- Légendes : légèrement plus petites, sans devenir difficiles à lire.
Espacements
- Interlignage courant : environ
1.6. - Longueur de ligne : environ
60à75caractères. - Espaces réguliers entre les paragraphes et les sections.
Mise en valeur
- Gras pour les informations importantes.
- Italique avec modération.
- Soulignement principalement réservé aux liens.
- Capitales utilisées ponctuellement.
Structure
- Une hiérarchie logique de titres.
- Des paragraphes centrés sur une idée principale.
- Des listes lorsque plusieurs éléments doivent être comparés ou énumérés.
- Des tableaux lorsque les données se prêtent réellement à une comparaison.
Accessibilité
- Contraste suffisant.
- Zoom autorisé.
- Tailles adaptatives.
- Liens reconnaissables.
- Présentation correcte sur mobile, tablette et ordinateur.
🎯 Conclusion
Les règles typographiques du Web ne sont pas fondamentalement opposées à celles du livre ou de la presse.
Elles en reprennent les principes essentiels : une hiérarchie claire, une police adaptée, des caractères suffisamment grands, des lignes de longueur raisonnable et des espacements cohérents.
La différence principale tient à la nature du support.
Le livre privilégie souvent une lecture continue. La presse organise l'information pour permettre un repérage rapide. Le Web doit concilier ces deux usages, tout en s'adaptant à la largeur de l'écran et aux besoins de chaque lecteur.
La règle la plus importante est donc la suivante :
La typographie doit servir le contenu, et non obliger le lecteur à faire un effort supplémentaire pour le comprendre.
Une page réussie est une page dans laquelle le lecteur distingue naturellement les titres, parcourt les paragraphes sans fatigue excessive et trouve facilement les informations qu'il recherche.