Typographie fluide et responsive avec les fonctionnalités CSS de référence

Miriam Suzanne

Publié le 16 décembre 2025

Le responsive web design est une approche de conception de sites Web qui permet de créer des sites à l'apparence agréable et au fonctionnement efficace sur différents navigateurs, dimensions de fenêtre d'affichage, appareils et préférences utilisateur. Lorsqu'il est appliqué à la typographie, le problème central consiste souvent à ajuster font-size en fonction de la largeur du navigateur, ce qui peut également avoir des implications pour les valeurs d'espacement telles que line-height et margin.

En tant que concepteurs, il est logique de réfléchir à l'espace disponible dans le navigateur et d'ajuster votre typographie en conséquence. Il est également important de se rappeler que les besoins des différents utilisateurs en matière d'font-size varient selon les appareils, en fonction de circonstances personnelles qui échappent à votre contrôle ou à votre connaissance. Il est donc dangereux de faire quoi que ce soit qui puisse priver l'utilisateur du contrôle du résultat final. Les utilisateurs peuvent modifier la taille de la police de deux manières lorsqu'ils naviguent sur le Web :

  • Fournir une préférence font-size par défaut pour tous les sites Web.
  • Faire un zoom avant ou arrière sur un site spécifique

L'objectif de cette démo est de rendre la typographie responsive à la fois à la taille de la fenêtre d'affichage du navigateur et aux saisies de l'utilisateur. Toutefois, il est important de comprendre que plus votre typographie répond à la fenêtre d'affichage, moins elle répondra aux préférences de l'utilisateur. Si vous prévoyez d'implémenter une typographie responsives, il est important de le faire avec précaution et de tester l'accessibilité des résultats.

Négocier un font-size de base en fonction des préférences de l'utilisateur

La première étape pour définir une typographie en ligne consiste à négocier une taille de police initiale en fonction de la préférence font-size de l'utilisateur. Elle sera utilisée pour la majorité du texte sur la page et servira de base pour les autres tailles de police, comme les titres. L'option la plus simple consiste à donner à l'utilisateur un contrôle total en utilisant 1em, sans aucun ajustement. Lorsque vous ne définissez aucune autre valeur font-size, 1em fait référence à la préférence de l'utilisateur. À l'autre extrémité du spectre, définir une font-size en pixels ou dans d'autres unités absolues (et même dans des unités relatives à la fenêtre d'affichage) remplacera entièrement l'utilisateur, ce qui doit être évité.

Toutefois, différents cas d'utilisation nécessitent différentes typographies. Un article peut être plus facile à lire avec un texte de grande taille, tandis que les sites contenant beaucoup de données peuvent nécessiter une conception plus compacte avec un texte plus petit. Dans les deux cas, vous pouvez suggérer une valeur par défaut qui correspond à la conception, tout en permettant à l'utilisateur d'ajuster le résultat en fonction de sa situation particulière.

Option 1 : Calculer un multiplicateur basé sur des hypothèses

Un compromis courant consiste à définir un font-size ajusté en unités em ou %, par rapport au font-size par défaut de l'utilisateur. En général, cette approche part du principe que les navigateurs fournissent une valeur par défaut 16px et que la plupart des utilisateurs la laisseront en place. Si vous pensez qu'une taille de police 20px conviendra mieux à votre site, une valeur font-size de 1.25em ou 125% donnera généralement le résultat souhaité :

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

Vous pouvez également utiliser une fonction calc() ici pour afficher le calcul, mais vous devez toujours connaître l'équation : taille cible divisée par la taille attendue, multipliée par 1em :

html {
  font-size: calc(20 / 16 * 1em);
}

Les utilisateurs ayant une préférence plus ou moins élevée auront une certaine capacité à influencer le résultat, car votre valeur par défaut est désormais relative à la leur (1,25 fois leur préférence dans ce cas). Toutefois, cela peut être étrange si vous et l'utilisateur demandez tous les deux les valeurs par défaut de 20px et que le résultat est 25px (c'est-à-dire la valeur par défaut ajustée multipliée par 1,25), une taille que personne n'a demandée.

Option 2 : laisser clamp() faire le travail

Une approche plus nuancée implique des fonctions de comparaison CSS, sans aucun calcul ! Plutôt que de supposer que 1 em est égal à 16px et d'effectuer des conversions peu fiables de px en em, vous pouvez considérer 1em comme une variable qui fait référence à la préférence de l'utilisateur. Quelle que soit la valeur en pixels représentée par 1em, une font-size de max(1em, 20px) renverra toujours la plus grande valeur entre la préférence de conception (20px) et la préférence de l'utilisateur (1em). Cela permet à l'utilisateur de choisir des tailles de police plus grandes, mais pas plus petites.

En passant à une fonction clamp(), vous pouvez permettre à l'utilisateur de mettre à l'échelle dans les deux sens lorsque sa taille préférée s'éloigne trop de la taille par défaut que vous avez choisie. Par exemple, une font-size de clamp(1em, 20px, 1.25em) sera définie par défaut sur 20px tant que cette valeur est supérieure à la valeur par défaut de l'utilisateur, mais pas plus de 125% de sa valeur par défaut.

Cela permet à votre conception d'être prioritaire lorsqu'elle est proche de la préférence de l'utilisateur, mais l'utilisateur reste prioritaire lorsque sa préférence se situe en dehors de la plage spécifiée. Aucun calcul de conversion n'est nécessaire, aucune hypothèse n'est émise sur la taille préférée de l'utilisateur et aucune multiplication des valeurs du concepteur et de l'utilisateur n'est effectuée.

En définissant cette valeur comme font-size racine sur l'élément html, vous pouvez désormais référencer 1rem n'importe où sur le site, en tant que taille de base négociée.

Ajouter la réactivité

Pour rendre ce font-size réactif à la fenêtre d'affichage, vous pouvez ajouter des points d'arrêt de requête média (ou de requête de conteneur). Par exemple, vous pouvez modifier la valeur bloquée en fonction de la taille de l'écran :

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

L'autre option consiste à ajouter des unités de fenêtre d'affichage ou de conteneur à la valeur de base statique :

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

Les unités vw (largeur de la fenêtre d'affichage) ou vi (taille en ligne de la fenêtre d'affichage) représentent 1 % de la fenêtre d'affichage totale, c'est-à-dire la partie du navigateur qui affiche votre site. De même, les unités cqw et cqi représentent 1 % d'un conteneur de taille en ligne sur la page. Pour en savoir plus, consultez la démonstration des requêtes et des unités de conteneur.

Cette approche est souvent appelée typographie fluide, car la modification de font-size est constante sur une plage de largeurs de fenêtre d'affichage, au lieu de passer d'une valeur à une autre au niveau des points d'arrêt de média ou de conteneur. Toutefois, ne vous laissez pas distraire par la fluidité de la transition. Cette distinction n'est généralement visible que lors des tests, si vous ajustez la taille de la fenêtre de manière fluide. Cet effet est rarement (voire jamais) visible par les utilisateurs. Les utilisateurs peuvent modifier régulièrement la taille du navigateur ou le niveau de zoom, mais ils devraient effectuer ces ajustements de manière lente et fluide pour remarquer la différence entre un point d'arrêt et une unité de fenêtre d'affichage. Elle n'a d'incidence que sur la transition, et non sur le résultat après le redimensionnement.

L'avantage principal de la taille de police fluide est qu'elle élimine la nécessité de calculer ou de spécifier manuellement les points d'arrêt, en fournissant un résultat interpolé à n'importe quelle taille. Vous ne définissez que le point de départ (16px) et le taux de variation (0.25vw fournira une augmentation de 0.25px de font-size pour chaque augmentation de 100px dans la fenêtre d'affichage), ainsi que les valeurs min. et max. si nécessaire. Lorsque la fenêtre d'affichage mesure 1000px pixels de large, la valeur de font-size sera 16px + 2.5px ou 18.5px, mais ce calcul est entièrement géré par le navigateur. Il s'agit de l'approche utilisée dans la démo, qui utilise des unités cqi pour montrer la réactivité basée sur les conteneurs. Lorsqu'elles sont utilisées sur l'élément racine (html), où aucun conteneur n'est défini, les unités cqi font toujours référence à la taille de la fenêtre d'affichage.

Si vous préférez penser en termes de font-size spécifié pour une taille de fenêtre d'affichage donnée, envisagez d'utiliser l'approche de requête média plus directe, qui est un peu plus claire. Les choses se compliquent lorsque vous essayez de calculer les unités de fenêtre d'affichage en fonction des points d'arrêt prévus. De nombreuses personnes copient et collent des valeurs à partir d'outils tiers, mais le code obtenu est beaucoup plus difficile à comprendre ou à modifier directement. En général, avec le CSS, la meilleure option est celle qui exprime le plus clairement vos intentions.

Avertissement : Les modifications de la fenêtre d'affichage n'ont pas toujours la même signification.

Bien que les requêtes média et les unités vi soient appliquées différemment, les deux approches sont basées sur la même mesure de la fenêtre d'affichage. Si la fenêtre d'affichage mesure 600px de large, 100vw sera égal à 600px et les styles à l'intérieur de la requête média (width > 500px) seront appliqués.

Mais qu'est-ce que cela signifie pour la fenêtre d'affichage d'être 600px large ? En réalité, un pixel n'a pas une taille fixe ni une signification unique dans toutes les situations. Il est naturel de penser qu'une fenêtre d'affichage avec moins de pixels de largeur se trouve sur un écran plus petit (comme un téléphone) ou dans une fenêtre de navigateur étroite, mais ce n'est pas une hypothèse fiable. En fait, zoomer et réduire la taille de la fenêtre du navigateur auront le même impact sur la largeur de la fenêtre d'affichage mesurée. L'une (le zoom) modifie la taille d'un pixel, tandis que l'autre (le redimensionnement) modifie la taille du navigateur lui-même. Toutefois, les deux modifient le nombre de pixels sur la largeur du navigateur. La mesure de la fenêtre d'affichage nous donne une relation entre la taille actuelle en pixels et la fenêtre de navigateur actuelle.

Pour l'utilisateur, le zoom et le redimensionnement ont des objectifs très différents. Un utilisateur qui modifie le niveau de zoom essaie d'agrandir ou de réduire le contenu de la page, tandis qu'un utilisateur qui redimensionne le navigateur ne fait que gérer l'espace sur différents écrans. Même si l'intention de l'utilisateur est différente, le résultat des mesures CSS est le même. À mesure que la fenêtre se réduit ou que le pixel s'agrandit, le nombre de pixels sur la largeur du navigateur diminue.

Cette déconnexion rend la typographie responsive peu fiable. Si votre texte est défini pour être redimensionné uniquement en fonction d'une fenêtre d'affichage ou d'un conteneur, le zoom de l'utilisateur n'aura aucun effet.

Si vous définissez la valeur de l'unité relative à la fenêtre d'affichage sur 1vw ou 100vw, la relation exacte entre la taille de la police et la fenêtre d'affichage sera modifiée. Une police 1vw augmentera de 1px pour chaque 100px de taille de fenêtre d'affichage, tandis qu'une police 100vw aura exactement la même taille que la fenêtre d'affichage. Vous pouvez modifier cette valeur pour que la police grandisse plus ou moins vite par rapport au navigateur. En revanche, toute valeur relative à la fenêtre d'affichage restera constante lorsque l'utilisateur effectuera un zoom avant ou arrière, et ne répondra donc pas du tout aux commandes de l'utilisateur.

De même, ni 1vw ni 100vw ne tiennent compte de la valeur par défaut font-size de l'utilisateur.

L'utilisation seule d'unités relatives au conteneur ou à la fenêtre d'affichage pour font-size est toujours hostile à l'utilisateur. Lorsqu'un font-size est entièrement réactif à son conteneur, il ne peut pas l'être également aux paramètres par défaut ou aux ajustements de l'utilisateur. Même avec les meilleures intentions et les meilleures protections, il convient d'éviter de retirer aux utilisateurs le contrôle final font-size. Cela nuit à l'expérience utilisateur et peut également enfreindre les consignes d'accessibilité souvent requises par la loi. Plus précisément, la section 1.4.4 des consignes pour l'accessibilité des contenus Web exige que "le texte puisse être redimensionné sans technologie d'assistance jusqu'à 200 %".

S'assurer que les valeurs font-size sont sensibles au zoom

Pour qu'une font-size relative à la fenêtre d'affichage soit responsive au zoom, la valeur relative à la fenêtre d'affichage doit être appliquée en tant qu'ajustement à une autre valeur. C'est possible en CSS à l'aide de la fonction calc() ou de toute autre fonction mathématique acceptant les calculs, comme min(), max() et clamp(). Un font-size de calc(16px + 1vw) est basé à la fois sur la taille de la fenêtre d'affichage et sur la taille actuelle (relative au zoom) d'un pixel. Bien que l'unité vw ne soit pas affectée par le zoom, la valeur de base le sera.

Il en résulte un font-size qui répond à la fois à la taille de la fenêtre d'affichage et aux paramètres de zoom de l'utilisateur. Si l'utilisateur effectue un zoom sur 200%, la valeur de base sera affichée deux fois plus grande (32px), tandis que la valeur responsive restera inchangée. Une fenêtre d'affichage 1000px vous donnerait initialement une taille de police de font-size, soit 16px + 10px = 26px, mais avec un zoom de 200%, la taille de police ne passerait qu'à 42px, soit un peu plus de 160%. Cela peut sembler être un problème mineur, mais plus votre font-size est basé sur la fenêtre d'affichage, moins le zoom est efficace.

Sur les petits écrans, la valeur font-size proviendra principalement de la valeur de pixel de base et répondra bien au zoom. Toutefois, sur les écrans plus grands, la taille de la fenêtre d'affichage devient une fraction plus importante de la taille de police affichée, ce qui rend le zoom moins efficace. Cela devient particulièrement dangereux lorsque le zoom à 500 % (le maximum dans la plupart des navigateurs) ne permet plus d'augmenter la taille de la police de 200 % comme l'exige la norme WCAG 1.4.4. Mais même avant ce point, il peut être frustrant de constater que le zoom devient inefficace.

Graphique montrant l'efficacité de la taille de la police et du zoom par rapport à la largeur de la fenêtre d'affichage. La taille de la police, calculée comme `calc(17px + 2.5vw)`, augmente de manière linéaire avec la largeur de la fenêtre d'affichage. La ligne de zoom à 500 %, qui représente le zoom maximal possible, montre que le zoom devient moins efficace à mesure que la largeur de la fenêtre d'affichage augmente. Il ne permet pas d'augmenter la taille de la police de 200 % au-delà d'une largeur de fenêtre d'affichage de 2 040 px.
L'axe horizontal représente la taille de la fenêtre d'affichage, de 0 à 2600px de large. L'axe vertical de font-size est également en pixels et affiche le résultat de calc(17px + 2.5vw). La ligne de zoom 500% utilise le même axe horizontal de largeur de fenêtre d'affichage, mais traite l'axe vertical comme un pourcentage.

Sur le bord gauche du graphique (largeur de la fenêtre d'affichage 0), le zoom 500% est pleinement efficace. Toutefois, cette efficacité diminue rapidement à mesure que la taille du navigateur augmente et que les unités de fenêtre d'affichage (non zoomables) deviennent un facteur plus important dans font-size. Lorsque le navigateur a une largeur de 2040px, le zoom maximal de 500% ne permet d'augmenter la taille de la police que de 200%. Au-delà, il n'est plus possible d'effectuer un zoom efficace sur la police.200%

En déplaçant ce calcul dans une fonction clamp(), avec des valeurs min et max, vous pouvez appliquer des limites qui garantissent un texte zoomable. Selon Maxwell Barvian :

Si la taille de police maximale est inférieure ou égale à 2,5 fois la taille de police minimale, le texte sera toujours conforme à la règle WCAG SC 1.4.4, au moins sur tous les navigateurs modernes.

Étant donné que les requêtes @media et @container sont basées sur les mêmes mesures que les unités vw et cqw, la même logique s'applique lorsque vous utilisez un point d'arrêt pour modifier la taille de la police. Lorsque l'augmentation de la taille est trop importante, le zoom devient inefficace. Vous pouvez tester l'interaction de ces valeurs dans la visualisation suivante :

S'assurer que les valeurs font-size sont adaptées aux paramètres par défaut de l'utilisateur

Toutefois, calc(16px + 1vw) ne répond toujours pas aux paramètres de police par défaut de l'utilisateur. Pour ce faire, vous pouvez définir une base (ou des valeurs min. et max.) à l'aide des unités em ou rem plutôt que px. En combinant tous ces éléments, vous obtenez un résultat familier qui correspond à la démo associée :

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

Remarques :

  • Les valeurs minimale et maximale utilisent toutes deux des unités em, qui sont basées sur les préférences de l'utilisateur (et sont sensibles au zoom).
  • La valeur vw supplémentaire est maintenue au minimum afin que le zoom ne soit pas trop affecté.
  • La taille maximale (1.125em) est bien inférieure à 2,5 fois la taille minimale (1em), ce qui garantit qu'une valeur font-size efficace de 200% est toujours possible.

Échelles typographiques avec pow()

La plupart des conceptions utilisent plusieurs tailles de police. Une échelle typographique décrit la relation entre plusieurs tailles de police. Cela peut être exprimé sous la forme d'une taille de base et d'une série de multiplicateurs pour calculer les autres tailles. CSS fournit une échelle typographique intégrée par rapport au mot clé medium, qui fait référence à la préférence de taille de police de l'utilisateur ou à une valeur par défaut de 16px. Voici l'échelle des mots clés complète :

  • xx-small : 3/5 (0.6)
  • x-small : 3/4 (0,75)
  • small : 8/9 (0.89)
  • medium : 1 (la taille de base par laquelle les autres sont multipliées)
  • large : 6/5 (1.2)
  • x-large : 3/2 (1,5)
  • xx-large : 2/1 (2)
  • xxx-large : 3/1 (3)

Cette échelle est relative à la valeur par défaut de l'utilisateur plutôt qu'à la font-size racine. Elle ne fonctionne donc pas aussi bien une fois que vous avez modifié la font-size racine de votre site. La plupart des auteurs finissent par recréer une échelle typographique similaire avec des propriétés personnalisées, parfois en utilisant les mêmes noms de tailles de t-shirts, et parfois en préférant une série de pas vers le haut et vers le bas d'une échelle mathématique. Il existe de nombreux outils tiers permettant de générer ces échelles en fonction de ratios courants, principalement empruntés à une échelle musicale occidentale :

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

Toutefois, vous n'avez pas besoin d'outils externes pour créer votre propre échelle dans CSS. La nouvelle fonction pow() peut générer votre échelle pour vous, avec 1rem comme taille de base.

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

Vous n'avez pas besoin d'utiliser des pas entiers pour que l'échelle reste cohérente. En fait, l'échelle typographique 12pt courante utilise environ cinq fractions par étape. Alors que les grandes tailles utilisent des pas entiers dans l'échelle, les petites tailles utilisent des fractions pour une mise à l'échelle plus lente.

Les mixins et fonctions CSS permettent de condenser encore plus cette logique, tandis que d'autres outils intégrés comme progress() facilitent la création d'échelles qui s'ajustent de manière fluide d'une valeur à une autre. Mais ces fonctionnalités ne font pas partie de cette démo.

Répondre à la taille des conteneurs sur la page

Vous pouvez faire fonctionner tous ces calculs dans les requêtes de conteneur en utilisant l'unité cqi à la place de vw ou vi. Toutefois, il est également utile de laisser le font-size de l'utilisateur en place sur l'élément html, afin que chaque conteneur de typographie puisse se référer à cette préférence de l'utilisateur en tant que 1rem. Dans la démo, vous constaterez que l'ensemble de l'échelle typographique est appliqué à body plutôt qu'à l'élément racine html pour la typographie globale, puis réinitialisé en fonction de la taille du conteneur pour chaque élément avec l'attribut type-set.

Il s'agit toujours d'un compromis avec les tailles de police relatives au conteneur. Vous obtenez une taille de police plus fluide pour chaque élément dans son contexte, mais au détriment de la cohérence à l'échelle de la page. L'importance de chacun de ces éléments dépendra des spécificités de votre cas d'utilisation. N'oubliez pas que la typographie fluide est un compromis qui rend les commandes utilisateur telles que le zoom moins efficaces.

Bien que la typographie responsive et les échelles typographiques soient d'excellents outils pour les concepteurs, il n'est pas nécessaire de compliquer les choses si vous n'en avez pas besoin. L'échelle typographique intégrée et celle par défaut de l'utilisateur sont également d'excellentes options. Toutefois, si vous choisissez une typographie responsive (ou fluide), assurez-vous de tester le comportement des résultats en fonction des différents paramètres par défaut de l'utilisateur et des paramètres de zoom. Profitez-en bien !