Typographie
La typographie consiste surtout en retenue : une échelle raisonnable, un espacement confortable, un contraste suffisant. Un intitulé, une cellule de tableau, un titre marketing et un paragraphe d'article ne partagent pas un seul ensemble de règles.
Lors de la révision, lisez la page rendue au lieu de parcourir le code. Les mauvaises césures, les veuves et les troncatures n'apparaissent qu'avec des longueurs de contenu réelles.
Écrivez chaque correction dans le système de stylisme du projet et utilisez les valeurs exactes ci-dessous plutôt que des équivalents familiers. La antisèche fait correspondre chaque déclaration à son équivalent Tailwind.
Les mots eux-mêmes relèvent de hr-better-writing. La structure sémantique des titres relève de hr-better-accessibility. La mise en page RTL spatiale et les propriétés logiques relèvent de hr-better-layout. La mesure du contraste relève de hr-better-colors. Cette compétence gère le rendu, la césure et le comportement du texte dans un contenu à direction mixte.
Servir le bon format
Utilisez .woff2 sur le web, pour la compression Brotli et une large compatibilité. .woff est un repli pour les navigateurs très anciens. .ttf et .otf sont des formats de bureau sans compression web. La manière de charger les fichiers relève du projet.
Propriétés plutôt que balises brutes
Quand 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 repli 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 variable-fonts-and-opentype.md.
Charger les graisses et les styles voulus
Les navigateurs synthétisent une graisse ou un style que la famille active ne fournit pas, déformant le vrai visage. Chargez les graisses utilisées par le design.
font-synthesis: none désactive la synthèse, mais elle efface l'emphase plutôt que de la signaler. Ne l'utilisez qu'après avoir vérifié que chaque forme obligatoire (gras, italique, petite capitale, exposant, indice) reste distincte dans la pile de repli.
Moins de polices, de tailles et de graisses
Utilisez rarement plus de trois polices. La graisse et la taille définissent la hiérarchie ; une surutilisation nuit rapidement à la lisibilité. Associez pour le contraste, pas pour la similitude : un titre avec empattement sur un corps sans empattement semble délibéré ; deux sans-empattements quasi identiques semblent être une erreur.
En dessous de 18px, restez à une graisse 400 ou plus lourde. Les graisses inférieures à 300 sont réservées à l'affichage à 28px et plus ; elles disparaissent aux tailles de texte. Des conseils d'association sont disponibles dans choosing-fonts.md.
Utiliser une échelle de tailles avec des noms sémantiques
Définissez un petit ensemble de tailles et déviez-en le moins possible. Les tailles codées en dur sans système sous-jacent se dégradent à grande échelle. Appliquez l'échelle avec une règle de lint ou un test de garde qui échoue sur une taille arbitraire en dehors de celle-ci.
Les noms simples par défaut comme text-sm sont acceptables lorsque les règles d'utilisation sont claires. En équipe, nommez les tailles par usage (text-body-sm) afin que les règles survivent aux changements de personnes. La construction de l'échelle est décrite dans spacing-and-sizing.md.
Les tailles des titres descendent avec le niveau
Faites correspondre les niveaux de titres aux paliers descendants de l'échelle de tailles, afin qu'un titre visuellement subordonné ne domine jamais son parent. Les niveaux adjacents peuvent partager une taille vers le bas de l'échelle, tant que la graisse ou l'espacement les maintient distincts. L'élément sémantique relève de hr-better-accessibility ; cette compétence ne définit que le traitement visuel.
Interlignage selon le rôle
Titres plus serrés, environ 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 24px fixe ne le fait pas.
Un interlignage serré est destiné aux textes courts. Tout ce qui se répartit sur trois lignes ou plus a besoin d'au moins 1.4, même dans une ligne de hauteur contrainte.
Espacement des lettres selon la taille
Les grands titres semblent souvent meilleurs avec un espacement des lettres légèrement négatif. Les petites étiquettes en majuscules ont besoin d'un espacement des lettres légèrement positif, sinon les lettres semblent trop serrées. Le corps de texte aux tailles de lecture n'a besoin ni de l'un ni de l'autre.
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é fonctionne, tant qu'une limite existe et que la longueur de ligne se situe dans la plage. Voir choix d'unité et équivalents en pixels.
Couper délibérément
Quatre déclarations, quatre emplois :
text-wrap: balancerépartit le texte uniformément entre 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-wordlà où un mot long, un lien ou un identifiant 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 le texte long.
Chiffres tabulaires pour les valeurs changeantes
Les chiffres ont par défaut des largeurs différentes, de sorte que les minuteries, compteurs et prix décalent la disposition lors de leur 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, line-clamp. La troncature cache du contenu. Lorsque le texte manquant est important, conservez la valeur complète accessible dans une infobulle ou une vue étendue.
Choisissez par champ. Enveloppez les noms et titres dont l'utilisateur a besoin en entier pour identifier un élément. Tronquez au milieu lorsque les éléments diffèrent à la fin, comme les noms de fichiers, chemins et e-mails partageant un domaine, car des points de suspension de fin les rendraient identiques. Ne tronquez jamais les nombres, montants ou dates que l'utilisateur compare. Les détails sont dans wrapping-and-punctuation.md.
Rédiger le contenu au naturel, styliser avec CSS
Stockez le texte en casse naturelle et contrôlez la présentation avec text-transform, de sorte qu'une refonte ne nécessite jamais de réécrire le contenu.
Utilisez la ponctuation intelligente dans le texte rendu :
- Guillemets courbes dans la prose, guillemets droits dans le code.
- Un tiret demi-cadratin pour les intervalles :
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 placent là où le navigateur décide. Tirez la position et l'épaisseur des métriques propres de la police avec text-underline-position: from-font et text-decoration-thickness: from-font. Ajustez à la main avec text-decoration-thickness, text-underline-offset et text-decoration-skip-ink.
text-decoration-style trace la ligne en pointillés, en tirets ou en ondulés. Un souligné pointillé est un indice courant qu'un mot contient une information supplémentaire, comme une abréviation ou un terme défini.
La couleur est la seule partie d'un vrai soulignement qui s'anime de manière fiable. Ainsi, à moins que la seule chose animée ne soit la couleur, construisez le soulignement comme un élément séparé plutôt que d'utiliser text-decoration.
Saisies à 16px sur mobile
Safari iOS zoome toute la page lorsque le texte d'une saisie est plus petit que 16px. Deux correctifs maintiennent la taille à 16px et ont un aspect différent, donc demandez lequel le design souhaite :
- Augmenter la taille de la saisie sur mobile (
text-base sm:text-sm). Modifie son apparence sur les petits écrans. - Conserver
font-size: 16pxet rendre la taille voulue avectransform: scale(), en compensant la largeur etline-height. Identique à toutes les largeurs de vue, plus de code à maintenir.
Les deux recettes sont dans details-and-accessibility.md.
Planchers de taille et de contraste
Commencez le texte long du corps à 16px, la taille 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 d'interface peut être plus petit. 14px est un point de départ utile pour les saisies et menus, 13px pour les légendes, et rarement en dessous de 12px. Les saisies ont encore besoin de 16px sur mobile.
Lorsque le texte semble à faible contraste, utilisez hr-better-colors pour mesurer la paire rendue et hr-better-accessibility pour classer l'exigence. Ne touchez pas aux couleurs sans y être invité.
Lissage de police 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 racine de la mise en page, jamais par composant. La classe antialiased de Tailwind couvre les deux.
Comportement de la langue et de la direction
Définissez lang afin que les navigateurs et les technologies d'assistance choisissent la bonne prononciation, les bons guillemets et la bonne césure. 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 à direction mixte. La mise en miroir spatiale et les propriétés CSS logiques relèvent de hr-better-layout.
Garder le texte utile sélectionnable
Gardez le texte sélectionnable par défaut. ::selection peut apporter de la marque dans l'expérience de lecture, tant que la combinaison sélectionnée reste lisible.
user-select: none appartient à une surface déplaçable ou gestuelle où une sélection accidentelle interfère. Jamais sur toute l'interface et jamais parce qu'un libellé de bouton peut être mis en surbrillance.
Avant de terminer
| Erreur | Correctif |
|---|---|
| Visage synthétisé différent du design | Charger le vrai visage ; désactiver uniquement le mode de synthèse vérifié |
| Titre enfant visuellement plus fort que son parent | Mapper la hiérarchie de cette section à des paliers d'échelle descendants |
| Élément de titre choisi pour sa taille par défaut | Choisir d'abord la sémantique, puis définir la taille en CSS |
| Orphelin 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 aux mises en page éditoriales spécifiques |
| Soulignement qui traverse les jambages | text-decoration-skip-ink: auto, métriques from-font |
| Valeur à direction mixte rendue dans le mauvais ordre | Corriger lang/dir ; isoler la valeur avec <bdi> |
| Sélection désactivée dans le chrome de l'application | Restaurer ; supprimer uniquement là où elle entre en conflit avec un glisser ou un geste |
| Indice d'information supplémentaire sans repère visuel | Soulignement pointillé via text-decoration-style: dotted |
Graisse fine/légère sur du texte d'interface à 14px | Graisse 400+ en dessous de 18px ; les graisses fines sont réservées à l'affichage |
leading-none sur une description de carte sur trois lignes | Au moins 1.4 sur tout texte qui se répartit sur 3 lignes ou plus |
Signalement
Gravité. HAUTE rend le texte illisible ou tronque le contenu sans possibilité de récupération. MOYENNE casse le système typographique ou la hiérarchie des titres. BASSE 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 testées avec des longueurs de chaînes réalistes. Avec un navigateur : redimensionner la fenêtre pour détecter les césures, veuves et troncatures aux longueurs de contenu réelles. Signalez chaque vérification que vous n'avez pas pu effectuer comme Non vérifié.
Format. Regroupez les résultats sous le principe que chacun enfreint, ordonnés par gravité, une ligne par cause racine listant chaque emplacement où elle apparaît :
| Gravité | Emplacement | Avant | Après | Pourquoi |
|---|
Emplacement est chemin/vers/fichier:ligne. Pourquoi nomme le principe et l'impact utilisateur.
Signalez Bloquant lorsqu'un élément de HAUTE gravité subsiste, Approuver sinon, en laissant le reste dans le tableau comme travail à effectuer. N'approuvez jamais une couverture que vous n'avez pas inspectée. S'il n'y a rien à signaler, indiquez "Aucun résultat typographique exploitable" et signalez la vérification.