wensity/wensity-typography

Wensity Typographie

La typographie fait l'essentiel du travail dans une interface. Bien réalisée, une page simple a l'air conçue ; mal réalisée, aucune couleur ni animation ne la sauve. Cette compétence vous donne un système à configurer une fois et des règles à appliquer partout.

Les valeurs ci-dessous sont des valeurs par défaut. Si le projet a déjà un système typographique, conservez-le et améliorez son utilisation. Remplacez-le uniquement si demandé.

1. Choisir les familles

• Une seule famille suffit généralement. Une bonne sans-empattement avec une vraie gamme de graisses couvre les affichages, les titres, le corps de texte et l'interface. N'ajoutez une deuxième famille que pour un rôle que la première ne peut pas remplir : une sans-empattement d'affichage avec du caractère pour une page marketing, ou une chasse fixe pour le code et les données.
• Sans-empattement uniquement : pas de serif ni d'italique. Les titres, le corps de texte, les citations et les légendes sont tous composés en droit dans une sans-empattement. Un titre avec empattement ou une ligne en italique fait office de costume de modèle sur un produit web ; laissez donc les deux de côté, même sur les blogs, les pages de documentation et les pages de luxe ; portez le ton avec la graisse, la taille et l'espacement.
• Jamais plus de deux familles plus une chasse fixe. Une troisième famille de texte trahit une indécision.
• Choisissez en fonction du sujet, pas par habitude. Ne mettez pas la même police sur tous les projets. Demandez-vous à quoi ressemble l'univers du produit sur papier ou sur du matériel, puis choisissez une police ayant ce caractère :

Le produit ressemble à	Choisissez	Exemples gratuits
un outil précis (outils de développement, données, infrastructure)	une grotesque serrée, chasse fixe pour les données	Geist, Switzer, Onest ; Geist Mono, JetBrains Mono
l'argent ou la santé calmes (finance, assurance, cliniques)	une néo-grotesque stable ou une humaniste sans-empattement	Inter, Public Sans, Source Sans 3
un consommateur convivial (réseaux sociaux, alimentation, voyage, éducation)	une géométrique ou humaniste sans-empattement plus arrondie	Plus Jakarta Sans, Figtree, Nunito Sans, DM Sans
une marque confiante ou une page marketing de startup	une sans-empattement avec de la personnalité aux grandes tailles	General Sans, Manrope, Bricolage Grotesque, Space Grotesk
la lecture et la publication (documentation, blogs, magazines)	une sans-empattement calme avec une vraie coupe texte, des titres serrés dans la même famille	Inter, Satoshi, Source Sans 3
la mode, l'éditorial ou le luxe	une sans-empattement d'affichage raffinée, grande et serrée, titres seulement	Satoshi, General Sans, Clash Grotesk

• Vérifiez que la police peut faire le travail : les graisses dont vous avez besoin (généralement 400, 500, 600), les chiffres tabulaires, une bonne ponctuation, les langues que vous prenez en charge, et une version variable si vous utilisez plusieurs graisses.

2. Définir des rôles, pas des tailles

Nommez le texte par son travail. Les composants utilisent des noms de rôle ; seule la définition du rôle contient des valeurs en pixels. Sept rôles couvrent presque toutes les interfaces :

Rôle	Utilisé pour	Page marketing	Interface applicative
display	titre principal, un par page	48 à 80 px, graisse 600, interlignage 0,95 à 1,05, espacement -0,03 em à -0,04 em	rarement utilisé
title	titres de page et de section	32 à 44 px, graisse 600, interlignage 1,1, espacement -0,02 em	20 à 24 px, graisse 600, interlignage 1,25, espacement -0,01 em
heading	titres de carte, de panneau et de sous-section	20 à 24 px, graisse 600, interlignage 1,25, espacement -0,01 em	15 à 16 px, graisse 600, interlignage 1,4
body	paragraphes	16 à 18 px, graisse 400, interlignage 1,55 à 1,65	14 à 15 px, graisse 400, interlignage 1,5
label	boutons, champs de saisie, navigation, en-têtes de tableau	14 à 15 px, graisse 500, interlignage 1,3	13 à 14 px, graisse 500, interlignage 1,3
caption	texte d'aide, métadonnées, horodatages	13 à 14 px, graisse 400, interlignage 1,45	12 à 13 px, graisse 400, interlignage 1,4
code	code en ligne, blocs de code, identifiants	0,9 em du texte environnant, chasse fixe	identique

Règles pour l'échelle :

• Les paliers doivent être évidents. Les rôles voisins diffèrent d'au moins environ 20 % en taille, ou d'un palier de taille plus un palier de graisse (14 px 500 label au-dessus de 13 px 400 caption est correct ; 15 px 400 à côté de 16 px 400 avec des travaux différents ne l'est pas).
• Un rapport aide, mais le tableau l'emporte. Les pages marketing conviennent avec un rapport de 1,25 à 1,333 entre les paliers ; l'interface applicative dense convient avec 1,125 à 1,2. Arrondissez à des pixels entiers.
• Trois graisses maximum : regular (400), medium (500) pour les labels, semibold (600) pour les titres et l'affichage. La hiérarchie vient aussi de la taille, de la couleur et de l'espace, elle n'a donc pas besoin de cinq graisses. Si 600 semble trop lourd pour une grande ligne d'affichage, utilisez 500 pour l'affichage plutôt que d'ajouter une quatrième graisse.
• Taille fluide uniquement pour display et title sur les pages marketing : font-size : clamp(2,5 rem, 1,5 rem + 4 vw, 5 rem). Gardez le corps de texte et le texte de l'interface fixes pour que les mises en page denses restent prévisibles.
• Seuil minimal pour le corps de texte : 16 px sur les pages marketing et de lecture, 14 px dans l'interface applicative dense. Le texte des champs de saisie est en 16 px sur mobile, sinon iOS Safari zoome la page lorsque le champ est focalisé.

Dans Tailwind CSS v4, définissez les rôles une fois (remplacez les noms de famille par ceux que vous avez choisis) :

@theme {
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.035em;
  --text-display--font-weight: 600;

  --text-title: 2.25rem;
  --text-title--line-height: 1.1;
  --text-title--letter-spacing: -0.02em;
  --text-title--font-weight: 600;

  --text-heading: 1.25rem;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.01em;
  --text-heading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.6;

  --text-label: 0.875rem;
  --text-label--line-height: 1.3;
  --text-label--font-weight: 500;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.45;
}

Utilisez ensuite text-display, text-title, text-body dans le balisage au lieu de text-[44px] ou d'une chaîne de text-4xl leading-tight tracking-tight. Dans Tailwind v3, placez les mêmes valeurs sous theme.extend.fontSize sous forme de tuples [size, { lineHeight, letterSpacing, fontWeight }].

3. Interlignage et espacement des lettres

• L'interlignage diminue à mesure que la taille augmente. Display 0,95 à 1,05, titres 1,1 à 1,2, corps de texte 1,5 à 1,65, labels 1,2 à 1,35. Un titre de 64 px avec un interlignage de 1,5 se désagrège en lignes séparées.
• Espacement serré pour les grands textes, aucun pour le corps de texte. Display -0,03 em à -0,04 em, titres -0,02 em, titres de section -0,01 em, corps de texte et labels 0. Ne serrez pas plus que -0,05 em ; les lettres commencent à se toucher. Ajustez à l'œil pour la police que vous avez choisie.
• Pas d'espacement positif sur le corps de texte en minuscules et le texte d'interface. L'espacement positif n'aide que le texte en majuscules, et le texte en majuscules doit être rare (voir section 6).
• Les lignes larges ont besoin de plus d'interlignage. Si le corps de texte approche les 75 caractères, utilisez un interlignage de 1,6 ou plus ; à 50 caractères, 1,5 suffit.
• Le texte clair sur fond sombre paraît plus lourd et plus serré. Sur les thèmes sombres, ajoutez environ 0,05 à l'interlignage du corps de texte.

4. Mesure et coupures de ligne

• Corps de texte : 60 à 75 caractères par ligne. Définissez max-width: 65ch sur les paragraphes, pas sur toute la page. Les légendes et le texte d'aide peuvent être plus étroits.
• Titres d'affichage : environ 12 à 20 caractères par ligne. Un titre qui s'étend sur un écran de 1440 px en une seule ligne n'a pas de forme. Contraignez-le avec max-width en ch ou une largeur de conteneur.
• Équilibrez les titres, enveloppez joliment les paragraphes :

h1, h2, h3, .text-display, .text-title { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

Les deux sont progressifs : les anciens navigateurs les ignorent. balance égalise les lignes des titres ; pretty empêche un seul mot de rester seul sur la dernière ligne d'un paragraphe.

• Faites les sauts de ligne manuels uniquement entre les phrases, et vérifiez-les à chaque largeur à laquelle le texte s'affiche. Un <br> qui tombe au milieu d'une ligne sur un téléphone est pire que l'enveloppement par défaut. Préférez max-width à <br>.
• Les mots longs et les URLs dans le contenu utilisateur ont besoin de overflow-wrap: anywhere sur leur conteneur, sinon ils poussent la mise en page sur le côté sur mobile.
• La troncature est un dernier recours. Tronquez les labels sur une seule ligne dans une interface serrée (truncate dans Tailwind). Si la partie cachée est importante, rendez le texte complet accessible au clavier et au toucher (une infobulle sur un élément focalisable, une ligne extensible, une vue détaillée) ; un attribut title seul ne suffit pas. Ne tronquez jamais le corps de texte ni rien que l'utilisateur doit lire pour agir.
• Pinces multi-lignes (line-clamp-2) : gardez l'interlignage à 1,3 ou plus sur le texte pincé afin que les jambages descendants (g, y, p) ne soient pas coupés. N'ajoutez pas de rembourrage inférieur à l'intérieur de la pince ; cela montrerait le haut de la ligne suivante.

5. Couleur et contraste du texte

• Trois couleurs de texte suffisent : primaire (titres et corps de texte), secondaire (texte de support, légendes, espaces réservés) et désactivé. Définissez-les comme des tokens. Évitez d'en créer une quatrième en réduisant l'opacité à la volée.
• Seuils de contraste (WCAG 2.2 AA) : 4,5:1 pour le corps de texte et les petits textes, 3:1 pour les textes de 24 px et plus (ou 18,66 px en gras). Le texte secondaire et le texte des espaces réservés ont également besoin de 4,5:1. Seul le texte dans les contrôles désactivés est exempté.
• Sur les fonds sombres, utilisez du blanc cassé, pas du blanc pur, pour les longs textes (environ 90 à 94 % de luminosité). Le blanc pur sur du quasi-noir éblouit.
• Sur les surfaces colorées ou teintées, teintez le texte secondaire vers la teinte de la surface au lieu d'utiliser un gris neutre, qui a l'air sale sur la couleur.

6. Ce qu'il faut éviter

• Les sourcils et les amorces : petits labels en majuscules avec espacement au-dessus d'un titre ("FONCTIONNALITÉS", "POURQUOI NOUS", "COMMENT ÇA MARCHE"). Ne les utilisez pas. Ce sont les signes les plus clairs d'une interface modèle. Si un titre a besoin de contexte, écrivez un meilleur titre.
• Les labels en majuscules en général, y compris les petits titres de section dans les barres latérales, les panneaux de paramètres, les cartes, les pieds de page et les contrôles de démonstration. La casse de phrase se lit plus vite ; donnez plutôt une petite graisse (500 ou 600) et la couleur de texte secondaire à un petit titre. Réservez les majuscules pour les véritables abréviations (API, URL).
• Le texte en dégradé et un mot coloré dans un titre. L'emphase vient de la taille, de la graisse et du placement, pas de la peinture.
• L'italique, n'importe où. Utilisez la graisse pour l'emphase, et placez les citations en droit avec une règle ou une taille plus grande à côté.
• Les polices avec empattement. Les empattements d'affichage et de lecture font tous deux office de costume sur un produit web. Choisissez plutôt une sans-empattement avec du caractère.
• La chasse fixe comme décoration. La chasse fixe est pour le code, les données, les identifiants, les touches de clavier et les nombres dans les colonnes. Les labels en chasse fixe sur une page marketing sont un costume.
• Les paragraphes centrés de plus de deux lignes. Centrez uniquement les titres courts et les appels à l'action sur une seule ligne.
• Le texte justifié sur le web. Sans césure, il crée des rivières d'espace blanc.
• Les soulignements pour autre chose que les liens.

7. Nombres, code et données

• Chiffres tabulaires dans tout ce qui s'aligne ou se met à jour : tableaux, prix, minuteries, compteurs, statistiques. font-variant-numeric : tabular-nums ; (Tailwind tabular-nums). Sans cela, un nombre qui compte vibre latéralement lorsque les largeurs des chiffres changent.
• Zéro barré pour les identifiants et les codes où 0 et O peuvent être confondus : font-variant-numeric : tabular-nums slashed-zero ;.
• Alignez les nombres à la fin des cellules de tableau (text-align : end) afin que les décimales s'alignent. Les colonnes de texte s'alignent au début.
• Code : chasse fixe à environ 0,9 em du texte environnant pour que sa hauteur d'x corresponde. Le code en ligne reçoit un fond subtil et un rembourrage horizontal de 0,2 em, sans bordure. Les blocs de code reçoivent un interlignage d'environ 1,6 et un défilement horizontal, jamais d'enveloppement qui casse l'indentation.
• Touches de clavier (<kbd>) dans la police à chasse fixe à la taille des légendes.

8. Liens

Soulignez les liens dans le texte courant ; la couleur seule échoue pour les lecteurs daltoniens. Limitez-le à la prose afin que les listes de navigation et les boutons ne soient pas soulignés (.prose est ce qui enveloppe votre article ou contenu long) :

:where(p, td, dd, figcaption, blockquote) a,
:where(.prose, article) li a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

La navigation, les boutons et les liens de carte n'ont pas besoin de soulignements ; leur position indique déjà qu'ils sont interactifs.

9. Charger les polices sans décalage de mise en page

• Next.js : utilisez next/font (next/font/google ou next/font/local). Il auto-héberge, précharge et génère un repli avec des métriques correspondantes, de sorte que la page ne saute pas lorsque la police arrive. Exposez-la en tant que variable CSS et mappez la police du thème sur celle-ci avec @theme inline (afin que la variable soit lue là où elle est utilisée, et non résolue une fois à :root) :

// app/layout.tsx
import { Onest } from "next/font/google";
const sans = Onest({ subsets: ["latin"], variable: "--font-brand", display: "swap" });
// <html lang="en" className={sans.variable}>

@theme inline {
  --font-sans: var(--font-brand), ui-sans-serif, system-ui, sans-serif;
}

• Taille optique : une police avec un axe opsz (Inter, Roboto Flex, Fraunces) ne l'obtient que si vous la chargez : Inter({ subsets: ["latin"], axes: ["opsz"] }). Gardez font-optical-sizing: auto afin que les petits textes reçoivent la coupe plus robuste et les grands textes la plus fine.
• Ailleurs : auto-hébergez le WOFF2, font-display: swap, préchargez uniquement le ou les deux fichiers utilisés au-dessus de la ligne de flottaison, et définissez size-adjust, ascent-override et descent-override sur une police de repli locale afin que l'échange ne décale pas la mise en page.
• Ne chargez que ce que vous utilisez. Préférez un fichier de police variable à six graisses statiques. Sous-ensembles les scripts que vous diffusez.

10. Détails de rendu

• -webkit-font-smoothing: antialiased sur les thèmes sombres rend le texte clair moins boursouflé sur macOS. Laissez les thèmes clairs par défaut.
• Définissez ::selection sur la teinte de la marque et gardez-le lisible. Le bleu par défaut du navigateur est un signe que la page n'a pas été terminée.
• Utilisez une ponctuation réelle dans la copie : guillemets courbes (“ ” ‘ ’), le caractère points de suspension (…), et le signe de multiplication (×) dans les dimensions.
• Respectez les réglages de l'utilisateur : dimensionnez le texte en rem, ne bloquez jamais le zoom, et vérifiez que le texte tient encore à 200 % de la taille du texte et avec un espacement des lettres et des lignes plus grand.

11. Vérifiez avant de terminer

• Chaque style de texte provient d'un rôle nommé ; pas de tailles en pixels éparses.
• Les rôles voisins sont clairement différents en taille, ou en taille plus graisse.
• Au plus deux familles plus une chasse fixe, au plus trois graisses, toutes chargées.
• Corps de texte 16 px (14 px pour une interface dense), champs de saisie 16 px sur mobile.
• Paragraphes limités à environ 65 ch ; lignes d'affichage environ 12 à 20 caractères.
• Titres équilibrés, paragraphes joliment enveloppés.
• Pas de sourcils, pas de texte en dégradé, pas de couleur