Typographie avancée : donner une voix à la marque

La typographie est la voix, pas l’habillage

La présentation de la landing Sereno s'est bien passée — très bien, même. Mais en sortant de la salle, le client a glissé une phrase qui change la suite du projet : « C'est beau. Maintenant je veux qu'on reconnaisse Sereno les yeux fermés. » Le directeur de Studio Mango te regarde : « Ça, c'est de la typographie. » Il a raison : une interface est composée à 90 % de texte. Change la typo d'un produit et tu changes sa voix — avant même la couleur, avant les images.

Au chapitre 2, tu as posé une échelle de tailles en ratio 1,25 et deux familles choisies un peu vite. C'était suffisant pour prototyper ; ce n'est plus suffisant pour une identité. Ce chapitre descend d'un étage : comment lire la personnalité d'une police, comment en marier deux sans dissonance, comment régler la mesure et les détails de micro-typographie qui séparent l'amateur du professionnel — et comment rendre tout cela fluide entre mobile et desktop avec une seule ligne de CSS.

Lire la personnalité d’une police

Une police n'est pas « jolie » ou « moche » : elle a des traits de caractère mesurables. Les empattements (les petites terminaisons des serifs) évoquent l'héritage, l'édition, la chaleur ; leur absence évoque la neutralité moderne. Le contraste des pleins et déliés — la différence d'épaisseur au sein d'une même lettre — apporte de l'élégance quand il est fort, de la robustesse quand il est faible. La hauteur d'x (la taille des minuscules par rapport aux capitales) joue sur la lisibilité en petit corps. Les formes ouvertes ou fermées des lettres comme le « e » ou le « a » rendent une police accueillante ou stricte.

Tu n'as pas besoin de devenir typographe : tu as besoin de ce vocabulaire pour briefer. Et l'IA est un excellent professeur particulier ici aussi — montre-lui deux polices et demande : « compare la personnalité de Fraunces et de Playfair Display en termes d'empattements, de contraste et de formes ; laquelle traduit le mieux “calme premium chaleureux” et pourquoi ? ». Tu obtiens une analyse argumentée, et surtout les mots pour justifier ton choix au client demain.

Marier deux familles sans fausse note

La règle d'or du mariage typographique tient en une phrase : contraste franc ou parenté totale, jamais l'entre-deux. Deux polices presque identiques (deux sans-serif géométriques, par exemple) créent une dissonance subtile — l'œil sent que quelque chose cloche sans savoir quoi. Deux polices franchement différentes (une serif à fort caractère pour les titres, une sans-serif neutre pour le corps) se mettent mutuellement en valeur. C'est le duo le plus sûr, et c'est celui de Sereno : Fraunces qui parle, Inter qui s'efface.

Deuxième critère, moins connu : la hauteur d'x comparable. Si la police de titres a des minuscules proportionnellement beaucoup plus grandes que celle du corps, les deux sembleront mal calibrées côte à côte, même à tailles « identiques ». Enfin, limite-toi à deux familles — la troisième est réservée aux cas très particuliers (du code à afficher, un chiffre de tableau de bord en display). Chaque famille supplémentaire est un poids de chargement et un risque de cacophonie.

Propose 3 paires de polices Google Fonts pour Sereno, app de méditation, direction « calme, premium, chaleureux » :
- pour chaque paire : la police de titres, la police de corps, et 2 phrases qui justifient le mariage en termes d'empattements, de contraste plein/délié et de hauteur d'x
- contrainte : la police de corps doit rester impeccable à 16 px et en graisse 400
- exclus : les polices vues partout sans intention (pas de Montserrat ni de Roboto par défaut)
Puis recommande UNE paire et explique en quoi elle se distingue des deux autres pour ce produit précis.

La mesure : 45 à 75 caractères, pas un de plus

La mesure est la longueur d'une ligne de texte, comptée en caractères. En dessous de 45, l'œil saute de ligne sans arrêt et la lecture devient hachée ; au-delà de 75, l'œil se perd au retour à la ligne et relit la même ligne deux fois. La zone de confort se situe entre 45 et 75 caractères, avec un idéal autour de 65 pour les textes longs. C'est l'erreur la plus fréquente du web : des paragraphes étirés sur toute la largeur d'un écran 27 pouces, soit 150 caractères et plus — illisible, quel que soit le soin du reste.

La solution tient en une propriété : max-width: 65ch sur les blocs de texte (l'unité ch vaut environ la largeur d'un caractère de la police courante). Couple-la à la hauteur de ligne : plus la mesure est longue, plus l'interligne doit être généreux pour aider l'œil à retrouver la ligne suivante. Et côté alignement, une règle simple sur le web : fer à gauche, jamais justifié — la justification crée des rivières d'espaces irrégulières que les navigateurs gèrent mal, surtout sans césure.

/* Bloc de lecture confortable */
.prose {
  max-width: 65ch;          /* mesure : ~65 caractères */
  font-size: var(--text-base);
  line-height: var(--leading-body);  /* 1.6 pour cette mesure */
  text-align: left;          /* jamais justify sur le web */
  text-wrap: pretty;         /* évite les mots orphelins en fin de paragraphe */
}

.prose + .prose { margin-top: var(--space-6); }

/* Les titres : mesure plus courte, interligne serré */
h1, h2 {
  max-width: 22ch;
  line-height: var(--leading-tight);
  text-wrap: balance;        /* équilibre les lignes des titres */
}

La typographie fluide avec clamp()

Ton échelle du chapitre 2 est statique : un h1 à 3,052 rem fait cette taille partout. Or 49 px est parfait sur desktop et écrasant sur un téléphone de 375 px. La réponse classique était une cascade de media queries ; la réponse moderne tient en une fonction : clamp(min, valeur-fluide, max). Tu donnes une taille plancher, une taille plafond, et entre les deux une valeur qui respire avec la largeur de l'écran (en vw). Le titre grandit continûment de 2 rem sur mobile à 3,05 rem sur desktop, sans aucun saut.

Un détail d'accessibilité crucial : n'utilise jamais du vw seul dans la partie fluide. Une taille en vw pur ignore le zoom du navigateur — un utilisateur malvoyant qui zoome à 200 % verrait le texte… rester à la même taille. La formule sûre combine toujours une part en rem et une part en vw : clamp(2rem, 1.4rem + 2.6vw, 3.05rem). Le rem garantit que le zoom et les préférences de taille de police du système sont respectés.

:root {
  /* Échelle fluide — ratio 1.25 conservé aux extrêmes */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl:   clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --text-3xl:  clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.4rem);
}

Convertis mon échelle typographique statique (ci-dessous) en échelle fluide avec clamp() :
[colle ici tes tokens --text-* actuels]
Contraintes :
- viewport de référence : 375 px (mobile) à 1280 px (desktop)
- chaque clamp combine rem + vw (jamais de vw seul, pour respecter le zoom navigateur)
- conserve le ratio 1.25 entre niveaux aux deux extrêmes
- donne le bloc :root final, puis un tableau récapitulatif : taille à 375 px / à 768 px / à 1280 px pour chaque niveau
Enfin, indique les hauteurs de ligne recommandées par niveau.

Hiérarchiser sans grossir

Le réflexe du débutant pour hiérarchiser, c'est la taille : plus important = plus gros. Mais la taille n'est qu'un levier parmi cinq, et souvent le moins raffiné. La graisse distingue un titre d'un libellé à taille égale. La casse — un surtitre en petites capitales espacées (« MÉDITATION GUIDÉE ») au-dessus d'un grand titre — crée un étage de hiérarchie élégant qui ne consomme aucun pixel de plus. La couleur recule un texte secondaire (--color-text-muted) sans le rapetisser. L'espace isole et donc valorise. Combine deux leviers discrets plutôt qu'un seul levier criard : c'est la différence entre une page qui hurle et une page qui parle.

Un mot sur les polices variables, le standard moderne : un seul fichier contient toutes les graisses (et parfois d'autres axes, comme l'optique ou la largeur). Avantage double : tu charges un fichier au lieu de quatre, et tu peux utiliser des graisses intermédiaires précises (550 plutôt que le choix binaire 500/600). Fraunces, justement, est variable et expose un axe « optique » qui adoucit ou affirme le dessin selon la taille — exactement le genre de détail qui rend une identité reconnaissable « les yeux fermés ».

Micro-typographie : les détails qui font pro

Reste la couche finale, invisible quand elle est bien faite et criante quand elle manque. Les apostrophes courbes (l'apostrophe droite est un vestige de machine à écrire), les guillemets français (« » avec espaces insécables), les espaces insécables avant les ponctuations doubles ( : ; ! ? ) et entre un nombre et son unité — le français a des règles précises que le texte généré par IA ne respecte pas toujours. Demande systématiquement une passe : « applique les conventions typographiques françaises à tous les textes de la page ».

Côté technique, trois réflexes de livraison : sers les polices en woff2 (le format compressé moderne), ajoute font-display: swap pour que le texte s'affiche immédiatement avec une police système en attendant la vraie, et vérifie la licence — les polices Google Fonts sont libres, mais une police premium trouvée « quelque part » peut coûter cher au client en cas de contrôle. Deux familles bien servies pèsent moins de 200 Ko ; c'est le budget à ne pas dépasser pour que le premium ne se paie pas en secondes de chargement.