Comment rendre la typographie responsive

Une typographie responsive garde un titre lisible et lui donne la bonne importance lorsque l’espace environnant change. Une typographie fluide fait varier sa taille en continu dans une plage ; une typographie à points de rupture la modifie à des largeurs définies. Les deux approches ont besoin de limites et d’une colonne de texte adaptée au contenu. Réduire la taille sur téléphone n’est qu’une partie du travail. Un titre peut tenir dans son conteneur et rester serré, se couper maladroitement ou écraser le paragraphe qui l’explique.

Prenons ce titre fictif : « Une manière plus sereine de gérer les projets complexes ». Il peut former deux lignes équilibrées sur une page large. Sur un écran étroit, il peut devenir cinq lignes denses avec « complexes » isolé en bas. La réponse n’est pas automatiquement une taille plus petite. La colonne est peut-être inutilement étroite, la police possède des proportions larges ou un saut de ligne de bureau impose une mauvaise forme.

GOV.UK a modifié les petits textes, pas seulement les grands titres

GOV.UK fournit un contre-exemple utile à « tout réduire sur mobile ». Son échelle typographique actuelle garde le corps à 19px sur petit écran, tandis qu’un titre extra-large passe de 48px à 32px. Les rôles réagissent différemment parce qu’ils n’assurent pas le même travail de lecture.

Dans son explication de la révision typographique, l’équipe rapporte les préoccupations de la communauté concernant la réduction des petits textes et ses effets sur les personnes ayant une déficience visuelle. L’implémentation actuelle sert de référence pour les valeurs ci-dessous ; l’article antérieur explique la motivation.

Pour une page produit, cela suggère de séparer deux décisions souvent prises ensemble. Un grand titre peut avoir besoin de moins de poids visuel lorsque l’écran se resserre. Les instructions, les conditions d’éligibilité et les paragraphes doivent rester confortables à lire. Appliquer le même multiplicateur à chaque rôle peut résoudre un problème de titre en créant un problème de texte courant.

Une règle CSS de typographie fluide à tester

Pour un grand titre, voici une règle de départ illustrative :

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

Avec une taille racine par défaut de 16px, elle produit environ 32px pour une fenêtre de 390px, 43px à 768px et 63px à 1440px. L’intérêt est de donner au texte un plancher et un plafond.

Le calcul possède deux transitions à vérifier. Sous 400px de largeur de fenêtre, le minimum de 32px s’applique. Au-dessus d’environ 1467px, le maximum de 64px s’applique. Entre les deux, 100px de largeur supplémentaires ajoutent 3px au titre. La règle devient ainsi plus facile à comprendre : si un titre gagne une ligne maladroite autour de 900px, vous pouvez examiner la largeur de sa colonne face à ce rythme de croissance plutôt que deviner une autre taille mobile.

Traitez la formule comme une proposition. À une largeur intermédiaire, le titre peut grandir plus vite que sa colonne, produisant une ligne supplémentaire alors même que l’écran s’élargit. Placez le plus long titre réel à côté de la vraie image avant d’accepter la courbe. Si l’état intermédiaire échoue, réduisez la vitesse de croissance ou changez la répartition des colonnes ; ajouter des sauts de ligne manuels à chaque titre crée plutôt un problème de maintenance.

La présence d’une composante rem ne garantit pas qu’une règle fluide réussisse les vérifications de redimensionnement du texte. Le zoom du navigateur modifie l’espace effectif de la fenêtre et la taille du texte, et le terme lié à la fenêtre peut compenser partiellement l’augmentation. Testez le rendu avec le zoom et une taille de texte par défaut agrandie. L’exigence porte sur un contenu lisible et disponible, pas sur la simple présence d’une unité relative dans la feuille de style.

Décrivez la gêne avant de changer la police

Lorsqu’un titre paraît incorrect, identifiez ce que vous voyez. « Trop grand » diffère de « trop de lignes ». « Trop serré » peut désigner des lettres qui se touchent, des lignes trop proches ou un bloc entier collé à l’image. Chaque diagnostic conduit à un réglage différent.

Lisez le titre à voix haute, puis regardez comment les lignes divisent la phrase. Une ligne qui se termine après un petit mot de liaison peut casser le rythme naturel. Une dernière ligne très courte peut sembler accidentelle. Ce ne sont pas automatiquement des échecs d’utilisabilité, mais cela peut expliquer pourquoi une page autrement propre paraît inachevée.

Masquez ensuite l’illustration un instant. Si le titre devient confortable sans elle, le problème relève peut-être de la composition plutôt que de la seule typographie. Le bord d’une image peut faire paraître la colonne plus étroite qu’elle ne l’est. Une illustration chargée peut concurrencer des mots qui restaient clairs sur fond vide.

Attribuez un rôle à chaque niveau de titre

Un titre de page, un titre de section et un titre de carte ne font pas le même travail. Le premier établit le sujet principal. Les titres de section aident à parcourir l’argumentation ou l’offre. Les titres de carte distinguent les éléments répétés. Ils ne doivent pas tous varier aussi fortement simplement parce qu’ils utilisent la même police.

Sur l’exemple de gestion de projets, le titre principal peut être expressif. Une section intitulée « Gardez les décisions avec le travail » doit rester repérable sans réclamer la première attention. Une carte « Historique du projet » doit s’intégrer confortablement à sa description. Si tous les niveaux deviennent surdimensionnés sur ordinateur, la page peut ressembler à une collection de bannières promotionnelles.

Définissez les relations avant de choisir les valeurs exactes. Décidez quel niveau doit être vu en premier, quelle quantité de texte il contient habituellement et s’il apparaît près d’une image. Testez ensuite le plus long exemple réaliste à chaque niveau. Un système typographique qui ne fonctionne qu’avec le titre le plus court est une démonstration, pas une règle de page fiable.

N’utilisez pas la taille pour compenser un texte vague. « Tout ce qu’il vous faut » peut être magnifiquement composé sans identifier la section. Si le lecteur doit examiner chaque paragraphe pour découvrir le contenu de la page, des titres plus forts demanderont peut-être un vocabulaire plus précis autant que de meilleurs espacements.

Faites en sorte que la colonne de texte justifie sa largeur

Les retours à la ligne d’un titre dépendent de l’espace qui lui est attribué. Avant de réduire la police, examinez le conteneur. Des marges internes latérales, un écart de grille, une colonne vide ou une image inutilement grande peuvent prendre la place des mots. Ces choix étaient peut-être adaptés à une largeur supérieure et ont simplement persisté trop longtemps.

Pour le titre fictif, comparez deux dispositions étroites à typographie identique. Dans l’une, de grandes marges latérales compriment le texte dans une colonne mince. Dans l’autre, les marges deviennent plus modestes tout en restant cohérentes avec la page. La seconde peut rendre le titre plus serein sans modifier sa taille ni sa graisse.

Sur grand écran, le problème inverse apparaît. Laisser un titre traverser toute la page peut le transformer en longue bande horizontale et affaiblir son lien avec le contenu dessous. Une largeur maximale peut préserver sa forme éditoriale. Choisissez-la en examinant de vrais titres plutôt qu’en considérant un nombre de caractères comme une longueur de ligne garantie.

Souvenez-vous que les lettres d’une police n’ont pas toutes la même largeur. Une colonne qui accueille douze lettres étroites n’en accueille pas nécessairement douze larges. Les unités typographiques constituent des points de départ utiles, mais les mots rendus restent la preuve. C’est particulièrement important lorsqu’un nom de marque ou un terme technique doit rester intact.

Choisissez une plage d’échelle, pas une croissance sans fin

Vous pouvez utiliser quelques changements de taille ou une échelle fluide. Les deux fonctionnent avec des limites basses et hautes raisonnables. La question importante est le comportement du titre entre les vues que vous avez délibérément conçues.

La leçon de typographie de web.dev explique les tailles fluides et déconseille les unités de fenêtre utilisées seules pour la taille du texte. Son idée plus large est utile ici : la lecture ne dépend pas seulement du choix d’une police. Gardez une composante de taille relative au texte et testez ce qui se passe lorsque le lecteur change son zoom ou ses préférences de texte.

Vérifiez le milieu de la plage. Un titre peut être réussi au minimum et au maximum tout en formant un bloc maladroit sur trois lignes entre les deux. Modifier la colonne ou le rythme de croissance peut être plus efficace qu’introduire un nouveau changement brutal de taille. Gardez la règle assez compréhensible pour être maintenue lorsque le texte change.

Affinez les espaces autour des mots et à l’intérieur

Interlignage : gardez la phrase unie

L’espacement des lignes permet à un titre sur plusieurs lignes de former une unité lisible. Trop faible, il peut faire entrer visuellement les lignes en collision, notamment autour des capitales hautes et des lettres descendantes. Trop grand, il peut séparer si fortement les lignes que la phrase ressemble à plusieurs libellés sans lien.

Comparez les formes réelles des lettres, pas seulement les nombres dans le panneau de styles. Une police à grande hauteur de minuscules peut paraître serrée à un réglage qui convient à une autre. Des graisses fortes peuvent réduire la perception des espaces, car la page contient davantage de matière sombre. Les caractères accentués révèlent aussi parfois une boîte de ligne trop étroite pour l’exemple d’origine.

Pendant la revue, utilisez un titre mêlant capitales, minuscules et ponctuation. « TRAVAILLEZ MIEUX » remplace mal la phrase en casse mixte qui apparaîtra réellement : il cache plusieurs formes importantes. Si la page prend en charge plusieurs langues, le test devra aussi inclure leurs systèmes d’écriture.

Évaluez séparément l’espace sous le titre. Augmenter l’interlignage pour éloigner le paragraphe modifie l’intérieur du titre et peut produire un mauvais effet. Donnez à l’écart titre-paragraphe sa propre valeur et vérifiez que les deux éléments restent liés.

Approche : préservez la forme des mots

L’espacement des lettres mérite attention lorsqu’un titre semble comprimé malgré un espace suffisant entre ses lignes. Une approche fortement négative peut rendre un titre spectaculaire dans une grande composition statique, puis inconfortable à une taille réduite. Le même réglage peut aussi changer d’effet selon la graisse.

Partez de l’espacement normal de la police et comparez de petits ajustements. Regardez les combinaisons de lettres rondes, diagonales et verticales répétées. Ne jugez pas uniquement le premier mot. Un changement qui aère bien « sereine » peut rendre une autre partie de la phrase trop lâche.

Gardez les mots visuellement cohérents. Un espacement positif excessif peut ralentir la reconnaissance et transformer une phrase en suite de caractères isolés. Il augmente aussi la largeur totale, pouvant créer le retour à la ligne que vous vouliez éviter. Lorsque le titre est déjà long, évaluez ensemble approche et largeur de colonne.

Ne traitez pas de manière identique les titres en capitales et ceux en casse de phrase. Un petit surtitre en capitales peut bénéficier d’un peu d’espace supplémentaire, tandis qu’un long titre en casse de phrase demande souvent un réglage plus calme. Le but est de soutenir le rôle du texte. Un style copié sur un minuscule libellé fait rarement une bonne règle pour le titre principal.

Retours à la ligne : évitez les coupures fragiles

Un saut de ligne volontaire peut améliorer une composition, mais aussi la fragiliser. Si vous insérez une coupure après « gérer » dans le titre de gestion de projets, les derniers mots peuvent bien fonctionner sur grand écran. À une largeur inférieure, la première partie peut déjà passer à la ligne et produire une ligne supplémentaire inattendue.

Avant d’ajouter des sauts manuels, essayez d’ajuster largeur et échelle. Si une coupure reste importante, documentez les conditions où elle s’applique et vérifiez le comportement en dehors. Ne supposez pas qu’un saut choisi pour l’anglais doit rester dans toutes les traductions.

Évitez de rendre une longue expression insécable uniquement pour protéger une forme préférée. Empêcher tout retour peut faire sortir le texte du conteneur ou exiger une taille illisible. Limitez les éléments insécables aux cas où la séparation nuit réellement au sens, comme une valeur courte et son unité, puis examinez la place restante.

Lorsqu’une dernière ligne paraît trop courte, voyez si le texte peut être édité sans perdre de sens. Retirer une expression inutile peut améliorer la phrase et sa disposition. Mais la typographie ne doit pas imposer de supprimer une limite du produit, une nuance importante ou un terme nécessaire pour identifier l’offre.

Utilisez couleur et graisse pour soutenir la hiérarchie

Un grand titre n’a pas besoin de toutes les formes d’accentuation simultanément. Graisse forte, approche serrée, dégradé vif et ombre marquée peuvent se concurrencer dans un seul bloc. Décidez quel traitement porte la mise en avant et gardez les autres sobres.

Sur une page à illustration colorée, un titre sombre uni peut établir l’ordre de lecture le plus clair. Si le design appelle un dégradé subtil, vérifiez que sa portion claire reste lisible sur le fond. Un titre net à pleine taille peut perdre du contraste lorsqu’il est réduit ou placé près d’une illustration lumineuse.

Distinguez les informations secondaires par une combinaison de taille, graisse et placement avant de les rendre très pâles. Un sous-titre plus discret doit rester facile à lire. Même chose pour les légendes et libellés : les rendre presque invisibles ne crée pas une hiérarchie utile, mais retire de l’information.

Comparez la page d’un coup d’œil, puis en lecture prolongée. Le coup d’œil doit établir le sujet principal. La lecture attentive doit révéler les détails sans effort. Si tous les titres crient aussi fort, réduire certaines graisses ou tailles peut faire davantage qu’ajouter une couleur d’accent.

Testez la police réellement chargée

Un design peut changer lorsque la police prévue devient disponible ou ne se charge pas. Des largeurs de lettres différentes peuvent modifier les retours à la ligne et pousser le contenu voisin. Traitez l’état de remplacement comme une partie de la revue plutôt que de supposer que tous les visiteurs voient immédiatement la même typographie.

Pendant une revue de développement, demandez quelle police est réellement affichée et si la graisse attendue existe. Demander une graisse absente du fichier peut produire un résultat inattendu. Si le titre semble inhabituellement lourd ou étroit, vérifiez la ressource avant de compenser avec l’espacement.

Regardez les conséquences du changement de forme du texte sur la disposition. Le paragraphe saute-t-il vers le bas ? Une pastille chevauche-t-elle le titre ? Une section d’accueil à hauteur fixe coupe-t-elle la dernière ligne ? Ces observations sont plus utiles que « la police semble différente », car elles identifient les conditions que la mise en page doit accueillir.

Une police de remplacement n’a pas besoin d’être visuellement identique à celle de la marque, mais elle doit préserver une page utilisable. Gardez assez de souplesse pour que le titre occupe un autre nombre de lignes sans casser la section. Même si le rendu exact de marque compte, il doit coexister avec la réalité de conditions de chargement variables.

Faites une revue courte des titres

Choisissez trois titres : le titre principal, un titre de section long et le plus long titre de carte habituel. Examinez-les avec le contenu environnant plutôt que comme un spécimen isolé. Regardez une vue étroite, intermédiaire et large, puis redimensionnez entre elles en surveillant les changements brusques.

À chaque vue, lisez la phrase complète. Vérifiez que les coupures préservent le sens, que l’espacement interne est confortable et que le titre se distingue du paragraphe. Augmentez ensuite le zoom et répétez la tâche de lecture essentielle. Observez le résultat plutôt que de supposer qu’une technique particulière de dimensionnement garantit un bon comportement.

Utilisez un titre alternatif plus long comme test de maintenance. Pour la page fictive, remplacez le titre par « Une manière plus sereine de gérer les projets d’équipes réparties ». Vous ne validez pas ce texte. Vous découvrez si le composant peut accueillir une modification éditoriale raisonnable sans réparation sur mesure.

Documentez la décision simplement : « Le titre peut occuper une ligne supplémentaire sur écran étroit ; garde la phrase intacte et laisse la section grandir. » C’est plus durable que préserver à toutes les tailles le nombre exact de lignes d’une capture. La personne qui éditera ensuite saura ce que le design privilégie et ce qui peut changer.

Rendez la modification précise dans OpenDesign

L’aperçu HTML et les vues ordinateur, tablette et mobile d’OpenDesign permettent de comparer le même titre entre dispositions. Pour une modification ciblée, identifiez le titre et la gêne observée. Si le problème concerne seulement un espacement ou une propriété de style prise en charge, une modification manuelle peut suffire ; une demande structurelle peut être décrite dans le chat avec les contraintes voulues.

Par exemple, demandez de garder le texte et la police, de desserrer l’approche trop compacte et d’autoriser une ligne supplémentaire dans la vue étroite. La modification reste ainsi typographique. Une demande vague visant à rendre toute la section d’accueil plus haut de gamme pourrait changer illustration, couleurs et texte sans résoudre le problème de lecture initial.

Après le changement, revenez aux trois titres du jeu de revue. Un style partagé peut affecter davantage que le titre que vous regardiez. Comparez les vues pertinentes et confirmez que le texte complémentaire garde le rôle prévu.