Typographie
La typographie est avant tout une question de retenue : une échelle raisonnable, un espacement confortable, un contraste suffisant. Un libellé, une cellule de tableau, un titre marketing et un paragraphe d'article ne partagent pas le même ensemble de règles.
Lors de la relecture, lisez la page rendue plutôt que de parcourir le code. Les mauvais retours à la ligne, les veuves et les troncatures n'apparaissent qu'avec des longueurs de contenu réelles.
Rédigez chaque correctif dans le système de style du projet et utilisez les valeurs exactes ci-dessous plutôt que des équivalents d'apparence familière. La antisèche mappe chaque déclaration à son équivalent Tailwind.
Les mots eux-mêmes appartiennent à better-writing. La structure sémantique des titres appartient à better-accessibility. La disposition spatiale RTL et les propriétés logiques appartiennent à better-layout. La mesure du contraste appartient à better-colors. Cette compétence gère la manière dont le texte est rendu, s'enroule et se comporte dans un contenu multilingue.
Servir le bon format
Utilisez .woff2 sur le Web, pour la compression Brotli et une large compatibilité. .woff est une solution de repli pour les navigateurs très anciens. .ttf et .otf sont des formats de bureau sans compression Web. La façon dont les fichiers se chargent est une préoccupation du projet.
Propriétés plutôt que balises brutes
Lorsqu'une propriété CSS existe, utilisez-la. font-weight: 650 au lieu de font-variation-settings: "wght" 650. font-optical-sizing: auto au lieu de "opsz". font-variant-numeric: tabular-nums au lieu de font-feature-settings: "tnum" 1.
Les propriétés continuent de fonctionner lorsqu'un substitut non variable s'affiche. Réservez les balises brutes pour les axes personnalisés ("GRAD" 80) et les fonctionnalités de niche ("ss01" 1) sans propriété propre. Les axes et les balises de fonctionnalités sont listés dans polices-variables-et-opentype.md.
Charger les graisses et styles souhaités
Les navigateurs synthétisent une graisse ou un style que la famille active ne fournit pas, déformant ainsi le véritable rendu. Chargez les polices utilisées par le design.
font-synthesis: none désactive la synthèse, mais efface la mise en évidence plutôt que de la signaler. Ne la définissez qu'après avoir vérifié que chaque forme requise (gras, italique, petites capitales, exposant, indice) reste distincte dans toute la pile de secours.
Moins de polices, de tailles et de graisses
Utilisez rarement plus de trois polices. La graisse et la taille définissent la hiérarchie ; leur utilisation excessive nuit rapidement à la lisibilité. Associez pour le contraste, pas pour la similitude : un titre avec empattements sur un corps de texte sans empattements est perçu comme délibéré, deux polices sans empattements quasi identiques sont perçues comme une erreur.
En dessous de 18 px, restez à une graisse 400 ou plus lourde. Les graisses inférieures à 300 sont réservées à l'affichage à 28 px+ ; elles disparaissent aux tailles de texte. Les conseils d'appariement se trouvent dans choisir-polices.md.
Utiliser une échelle typographique avec des noms sémantiques
Définissez un petit ensemble de tailles et écartez-vous-en le moins possible. Les tailles codées en dur sans système sous-jacent se dégradent à grande échelle.
Les noms seuls par défaut comme text-sm sont acceptables lorsque les règles d'utilisation sont claires. Dans une équipe, nommez les tailles par usage (text-corps-sm) afin que les règles survivent aux autres personnes. La construction de l'échelle se trouve dans espacement-et-dimensions.md.
Les tailles des titres descendent avec le niveau
Mappez les niveaux de titre sur des paliers descendants de l'échelle typographique, de sorte qu'un titre visuellement subordonné ne domine jamais son parent. Les niveaux adjacents peuvent partager une taille vers l'extrémité inférieure de l'échelle, tant que la graisse ou l'espacement les maintient distincts. L'élément sémantique relève de better-accessibility ; cette compétence ne définit que le traitement visuel.
Interlignage par rôle
Titres plus serrés, autour de 1.1. Corps de texte 1.5 à 1.6. Préférez les valeurs sans unité, afin que l'interlignage s'adapte à la taille de la police ; un 24 px fixe ne le fait pas.
Un interlignage serré est destiné aux textes courts. Tout texte qui s'étend sur trois lignes ou plus nécessite au moins 1.4, même dans une ligne à hauteur contrainte.
Crénage par taille
Les grands titres sont souvent meilleurs avec un crénage légèrement négatif. Les petites étiquettes en majuscules ont besoin d'un peu de crénage positif, sinon les lettres donnent une impression d'étouffement. Le corps de texte aux tailles de lecture n'a besoin d'aucun des deux.
Limiter la mesure
Les longues lignes rendent difficile pour l'œil de trouver la suivante. Limitez le texte long à environ 60 à 75 caractères par ligne. N'importe quelle unité convient, tant qu'une limite existe et que la longueur de ligne se situe dans la fourchette. Voir choix d'unités et équivalents en pixels.
Enrouler délibérément
Quatre déclarations, quatre emplois :
text-wrap: balancedistribue le texte uniformément sur les lignes. Utilisez-le sur les titres.text-wrap: prettyempêche qu'un seul mot court atterrisse sur la dernière ligne. Utilisez-le sur les descriptions.overflow-wrap: break-wordlorsqu'un mot long, un lien ou un ID pourrait s'échapper du conteneur.white-space: nowrapsur les étiquettes et les badges où un saut de ligne semble cassé.
Évitez balance et pretty dans les textes longs.
Nombres tabulaires sur les valeurs changeantes
Les chiffres ont par défaut des largeurs différentes, de sorte que les minuteries, les compteurs et les prix décalent la disposition lors de la mise à jour. Appliquez font-variant-numeric: tabular-nums à toute valeur qui change.
Tronquer sans perdre de contenu
Pour une seule ligne, text-overflow: ellipsis avec overflow: hidden et white-space: nowrap. Pour plusieurs lignes, line-clamp. La troncature masque le contenu. Lorsque le texte manquant est important, conservez la valeur complète accessible dans une infobulle ou une vue développée.
Rédiger naturellement, styliser avec CSS
Stockez le texte en casse naturelle et contrôlez la présentation avec text-transform, afin qu'une refonte ne nécessite jamais de réécrire le contenu.
Utilisez une ponctuation intelligente dans le texte rendu :
- Guillemets courbes dans la prose, guillemets droits dans le code.
- Un tiret demi-cadratin pour les plages :
2010–2020. - Le caractère unique de points de suspension, pas trois points.
pour maintenir16 pxensemble lors d'un saut de ligne.­pour indiquer où un mot long peut être coupé.
Soulignements depuis la police
Les soulignements par défaut se trouvent là où le navigateur décide. Extrayez la position et l'épaisseur des propres métriques de la police avec text-underline-position: from-font et text-decoration-thickness: from-font. Ajustez manuellement avec text-decoration-thickness, text-underline-offset et text-decoration-skip-ink.
text-decoration-style dessine la ligne en pointillés, en tirets ou en ondulations. Un soulignement pointillé est un indice courant qu'un mot contient des informations supplémentaires, comme une abréviation ou un terme défini.
La couleur est la seule partie d'un véritable soulignement qui s'anime de manière fiable. Donc, à moins que la seule chose qui s'anime ne soit la couleur, construisez le soulignement comme un élément séparé plutôt que d'utiliser text-decoration.
Champs de saisie à 16 px sur mobile
Safari iOS zoome toute la page lorsque le texte d'un champ de saisie est plus petit que 16 px. Deux correctifs maintiennent la taille à 16 px et ont un aspect différent, alors demandez lequel le design souhaite :
- Augmentez la taille du champ sur mobile (
text-base sm:text-sm). Modifie son apparence sur les petits écrans. - Conservez
font-size: 16pxet rendez la taille souhaitée avectransform: scale(), en compensant la largeur etline-height. Identique à toutes les fenêtres, plus de code à maintenir.
Les deux recettes se trouvent dans details-et-accessibilite.md.
Tailles minimales et contraste
Commencez le corps du texte long à 16 px, la valeur par défaut du navigateur. Ne vous en écartez que pour une raison que vous pouvez nommer : la police est petite, la mesure est étroite, ou le produit est un outil professionnel dense.
Le texte de l'interface utilisateur peut être plus petit. 14 px est un bon point de départ pour les champs de saisie et les menus, 13 px pour les légendes et rarement en dessous de 12 px. Les champs de saisie ont toujours besoin de 16 px sur mobile.
Lorsque le texte semble à faible contraste, utilisez better-colors pour mesurer la paire rendue et better-accessibility pour classer l'exigence. Ne modifiez pas les couleurs sauf demande.
Lissage des polices sur la racine
Sur macOS, le texte s'affiche plus lourd que prévu. Appliquez -webkit-font-smoothing: antialiased et -moz-osx-font-smoothing: grayscale une fois sur la disposition racine, jamais par composant. La classe antialiased de Tailwind couvre les deux.
Comportement linguistique et bidi
Définissez lang pour que les navigateurs et les technologies d'assistance choisissent la prononciation, les guillemets et la césure corrects. Définissez dir au niveau du document ou à la limite de contenu où la direction change. Préservez l'ordre des chiffres et utilisez <bdi> pour isoler une valeur multilingue. La mise en miroir spatiale et les propriétés CSS logiques appartiennent à better-layout.
Garder le texte utile sélectionnable
Gardez le texte sélectionnable par défaut. ::selection peut apporter la marque dans l'expérience de lecture, tant que la combinaison sélectionnée reste lisible.
user-select: none appartient à une surface glissable ou pilotée par gestes où la sélection accidentelle interfère. Jamais dans toute l'interface et jamais parce qu'un libellé de bouton peut être mis en surbrillance.
Avant de terminer
| Erreur | Correctif |
|---|---|
| Le rendu synthétisé diffère du design | Charger la police réelle ; désactiver uniquement le mode de synthèse vérifié |
| Un titre enfant domine visuellement son parent | Mapper la hiérarchie de cette section aux paliers d'échelle descendants |
| Élément de titre choisi pour sa taille par défaut | Choisir la sémantique d'abord, puis définir la taille en CSS |
| Orpheline sur la dernière ligne d'un paragraphe | text-wrap: pretty |
| Titre sur deux lignes déséquilibré | text-wrap: balance |
| Texte justifié dans une interface | text-align: start ; réserver la justification pour des mises en page éditoriales spécifiques |
| Le soulignement traverse les jambages descendants | text-decoration-skip-ink: auto, métriques from-font |
| Valeur multilingue rendue dans le mauvais ordre | Corriger lang/dir ; isoler la valeur avec <bdi> |
| Sélection désactivée dans toute l'interface de l'application | La restaurer ; ne la supprimer que là où elle entre en conflit avec un glissement ou un geste |
| Indice d'info supplémentaire sans repère visuel | Soulignement pointillé via text-decoration-style: dotted |
Graisse Fine/Légère sur un texte d'interface à 14 px | Graisse 400+ en dessous de 18 px ; les graisses fines sont réservées à l'affichage |
leading-none sur une description de carte de trois lignes | Au moins 1.4 sur tout texte qui s'étend sur 3 lignes ou plus |
Rapport
Sévérité. HIGH rend le texte illisible ou tronque le contenu sans possibilité de le récupérer. MEDIUM casse le système typographique ou la hiérarchie des titres. LOW est un polissage isolé.
Vérification. Sans navigateur : taille et graisse calculées pour chaque niveau de titre, vérifiées descendantes ; interlignage et mesure déclarés ; règles de troncature par rapport aux longueurs de chaînes réalistes. Avec un navigateur : redimensionner la fenêtre pour détecter les retours à la ligne, les veuves et la troncature aux longueurs de contenu réelles. Signalez chaque vérification que vous n'avez pas pu effectuer comme Non vérifié.
Format. Regroupez les constatations sous le principe que chacune enfreint, ordonnées par sévérité, une ligne par cause racine listant chaque emplacement où elle apparaît :
| Sévérité | Emplacement | Avant | Après | Pourquoi |
|---|
Emplacement est chemin/vers/fichier:ligne. Pourquoi nomme le principe et l'impact utilisateur.
Terminez par Bloqué lorsqu'il reste des problèmes HIGH, Approuver dans le cas contraire, en laissant le reste dans le tableau comme travail à faire. N'approuvez jamais une couverture que vous n'avez pas inspectée. S'il n'y a rien à signaler, indiquez "Aucune constatation typographique exploitable" et signalez la vérification.