CSS : Pourquoi les px et pas les cm ? 🇫🇷

Si vous vous demandez pourquoi un guide sur les unités CSS a un intérêt, alors vous êtes au bon endroit (AViSTO 🚀).
Quand on pense au CSS, on imagine surtout :

• Qu'Il est mal aimé ! Du trio HTML / CSS / JavaScript, c'est celui qui reçoit le moins d'attention.
• On le refactorise (trop) régulièrement. Souvent à tâtons, et où le copier-coller sans réelle compréhension est une pratique malheureusement courante.
• On le sous-estime : ses capacités complètes sont très rarement connues et encore moins exploitées.

Nous allons nous concentrer sur les pratiques issues du développement d'applications web complexes (industriel et SaaS). Les sites statiques on des logiques ou besoins souvent trop simples, qui ne requièrent pas le même niveau de maîtrise des unités en CSS.

Au cœur de ce désintérêt, les unités sont probablement l'une des problématiques les plus sous-estimées actuellement. On observe bien souvent sur ce sujet un mélange de manque de réflexion et d'idées obsolètes mobilisées depuis de longues années.

Si c'est ok sur mon écran, c'est que c'est bon ! FAUX

Pourquoi ne pas dépoussiérer tout ça en faisant un tour d'horizon de l'existant, afin de comprendre pourquoi ce sujet, en apparence basique, est un véritable champ de bataille inter-métiers où se retrouvent impliqués les designers, les développeurs, les product owners et les coût associés.

📏 Présentation des différentes unités

En CSS, on retrouve plusieurs familles d'unités de longueur [1] :

• Les unités absolues.
• Les unités relatives.
• Les pourcentages.

Chaque famille comporte plusieurs unités et remplit une fonction bien précise.

Il faut comprendre que les unités de longueur doivent permettre de répondre aux besoins de plusieurs médias et pas uniquement des écrans d'ordinateurs et de smartphones / tablettes : l'impression, elle aussi, est particulièrement concernée [4].

Les unités absolues

Elles sont considérées comme des constantes, soit des valeurs fixes qui, pour un écran donné, ne changent pas :

Typiquement, en lisant ce tableau, vous pourriez vous dire que la plupart ne concernent pas le web. Et vous demander également : "Finalement, pourquoi utiliser des pixels et pas des centimètres ?".

Une partie de la réponse se trouve dans la définition d'un pixel, selon le W3C (World Wide Web Consortium) :

Le pixel est une unité de longueur qui correspond approximativement à la largeur ou à la hauteur d'un point unique, qui peut être vu confortablement par l'œil humain sans effort mais qui par ailleurs est aussi petit que possible.

La problématique est donc d'avoir une unité la plus précise possible malgré l'infinité des supports sur lesquels elle sera affichée. Nous ne détaillerons pas la solution technique évoquée par le W3C (ce serait beaucoup trop long pour ce document), cependant vous retrouverez des documents susceptibles de vous intéresser dans la section "Sources" en bas de page [3][7].

Concernant la question "pixels versus centimètres"

On comprend donc que même les unités absolues dépendent de la résolution de l'écran sur lequel elles sont affichées. Il est inévitable qu'il y ait une différence entre la valeur indiquée dans votre code et celle que vous pourriez être tenté de mesurer, par exemple à l'aide d'une règle.

Afin d'éviter les confusions, l'option la plus évidente pour le numérique est d'opter pour le pixel.

La taille exacte d'un pixel dépendra de la résolution du périphérique sur lequel il est affiché [15].

Les unités relatives liées à la police

Comme leur nom l'indique, ces dernières sont relatives à la taille de la police ou d'un caractère dans une police donnée :

Vous aurez peut-être remarqué qu'il manque une colonne "Nom" à notre tableau → La raison est simple : ces unités ne sont pas des abréviations.

L'unité 'ex' fait référence à l'espace pris par un 'x' : nous pourrions donc nous attendre à ce que 'em' fonctionne de manière similaire, mais ce n'est pas le cas [12] : c'est une unité en typographie qui détermine un espace de référence pour une police donnée [2].

Une chasse en métal. La hauteur de ligne, c, est le précurseur du em [10].

Les unités relatives liées au viewport

Ces longueurs sont relatives au viewport. Le viewport correspond à la zone d'affichage visible d'un appareil. Pour un navigateur web, c'est le contenu de la fenêtre, sans prendre en compte le reste de l'interface. Ce concept, supporté par les navigateurs depuis les années 2012, a grandement facilité la responsivité des interactivités, en particulier sur mobile :

La plupart du temps, on utilisera le viewport dynamique pour concevoir des interfaces adaptées aussi bien au desktop qu'au mobile.

Les pourcentages

Les pourcentages (%) s'interprètent de manière relative à la valeur de la même propriété définie sur l'élément parent. Width dépendra de la width du parent, tandis que font-size dépendra de la font-size du parent [3].

TL;DR : 99% des cas

Des unités, il en existe beaucoup mais nous n'allons en utiliser qu'une toute petite partie dans le cadre du développement web.
Vous trouverez ci-dessous un récapitulatif des unités les plus utilisées [6] :

Ce qui, honnêtement, nous enlève une bonne épine du pied, non ? Nous passons de plus de vingt unités, à seulement six !

Cependant, il reste essentiel de faire les bons choix parmi ces six unités, et ce, pour chaque propriété (ou presque) que vous utiliserez en CSS. Ce choix dépendra du contexte et des enjeux de votre projet.

Il fallait placer les bases, dans le prochaine article je m'attaquerai à des cas concrets et peut être même un petit peu d'architecture.

Source utile

1. Unités CSS : em, px, pt, cm, in. . . . (s. d.). https://www.w3.org/Style/Examples/007/units.fr.html
2. Wikipedia contributors. (2025, 25 mai). Quad (typography). Wikipedia. https://en.m.wikipedia.org/wiki/Quad_(typography)
3. Cascading Style Sheets, level 1. (s. d.). https://www.w3.org/TR/CSS1/#percentage-units
4. Media types. (s. d.). https://www.w3.org/TR/CSS2/media.html#q7.0 5.An Introduction to Cascading Style Sheets. (s. d.). https://nwalsh.com/docs/articles/css/
5. Valeurs et unités CSS - Apprendre le développement web | MDN. (1970, 1 janvier). MDN Web Docs. https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Values_and_units
6. Reichenstein, O. (2025, 14 mai). Responsive Typography : The Basics. iA. https://ia.net/topics/responsive-typography-the-basics
7. Wikipedia contributors. (2025a, mai 12). Em (typography). Wikipedia. https://en.m.wikipedia.org/wiki/Em_(typography)
8. Syntax and basic data types. (s. d.). https://www.w3.org/TR/CSS22/syndata.html#length-units