Convertisseur d'Unités CSS

Deux familles d'unités

Toute longueur CSS appartient à l'une de deux familles. Les unités absolues, comme px, pt, cm, mm et in, décrivent une taille physique ou matérielle fixe qui ne change pas selon le contexte. Les unités relatives, comme em, rem, le pourcentage, vw, vh, ch et ex, décrivent une taille par rapport à autre chose, le plus souvent une taille de police ou la fenêtre d'affichage. Tout l'art d'un CSS responsive et accessible se résume à choisir la bonne famille pour chaque usage, et ce convertisseur existe précisément pour traduire proprement de l'une à l'autre.

La ligne de partage est importante, car les unités absolues figent une valeur tandis que les unités relatives la laissent s'adapter. Un titre défini en pixels conserve la même taille quelle que soit la configuration du navigateur de l'utilisateur, alors que le même titre en rem grandit lorsqu'il augmente sa taille de texte par défaut. L'un de ces comportements est bienveillant ; l'autre exclut discrètement certaines personnes.

Le pixel et la référence de 16px

Le px est le point de référence de presque toutes les conversions. Malgré son nom, un pixel CSS ne correspond pas toujours à un seul point physique de l'écran ; sur les écrans haute densité, le navigateur le projette sur plusieurs points de l'appareil afin qu'un mot en 16px reste d'une taille de lecture confortable, ce qui explique que le px soit considéré comme absolu même si le matériel varie. La plupart des conversions de cet outil reposent sur un seul nombre, la taille de police racine, qui vaut 16px par défaut parce que c'est la taille que les navigateurs appliquent à l'élément html d'origine. Modifiez cette base dans les Paramètres avancés et chaque résultat en rem et en em sera recalculé en fonction d'elle.

em ou rem : la différence de cascade

C'est la distinction qui piège le plus de développeurs. Un rem est toujours relatif à la taille de police racine, si bien que 1.5rem représente la même longueur partout dans le document, prévisible et plat. Un em est relatif à la taille de police de l'élément sur lequel il s'applique, ce qui signifie que les em se cumulent. Si un élément de liste est défini à 1.2em et que son parent l'est aussi à 1.2em, l'enfant vaut 1.2 fois 1.2 du grand-parent, et l'imbrication peut faire grossir discrètement votre texte jusqu'à des tailles surprenantes.

Ce cumul est parfois exactement ce que l'on souhaite. Un padding ou une marge exprimés en em s'adaptent au texte de l'élément lui-même, de sorte qu'un bouton reste proportionnellement espacé à mesure que son libellé s'allonge. Mais pour l'échelle typographique globale, rem est généralement la valeur par défaut la plus sûre, précisément parce qu'il ne se cumule pas. Ce convertisseur vous laisse définir séparément la taille de police racine et la taille de police parente, afin que le résultat en rem et le résultat en em reflètent exactement cette différence.

Les unités de fenêtre pour les mises en page fluides

Les unités de fenêtre se mesurent par rapport à la taille de la fenêtre elle-même. 1vw vaut un pour cent de la largeur de la fenêtre d'affichage et 1vh vaut un pour cent de sa hauteur, si bien que 50vw représente toujours la moitié de la largeur de la fenêtre, indépendamment des réglages de police. Elles sont la colonne vertébrale des mises en page fluides et des grands titres d'affichage censés s'adapter à l'écran plutôt qu'à la taille du texte.

Utilisez-les toutefois avec précaution. Dimensionner le corps de texte uniquement en vw signifie que le texte devient illisible sur un téléphone étroit et démesuré sur un large moniteur, et que cela peut ignorer le zoom de l'utilisateur sur certaines configurations. Le remède moderne est la fonction clamp, qui prend un minimum, une valeur fluide préférée et un maximum, ce qui permet à un titre de grandir avec la fenêtre sans jamais passer sous un plancher ni dépasser un plafond. Convertissez ici votre plancher et votre plafond en rem afin qu'ils respectent toujours les réglages de police de l'utilisateur.

Pourcentage, ch et ex

Le pourcentage est relatif, mais à quoi dépend de la propriété. Pour la largeur, il s'agit d'un pourcentage de la largeur du bloc conteneur ; pour la taille de police, c'est un pourcentage de la taille de police du parent, ce qui le fait se comporter beaucoup comme em pour le texte. Cette sensibilité au contexte explique pourquoi cet outil demande une taille de police parente lorsque vous convertissez des pourcentages de taille de police. Deux autres unités relatives à la police sont faciles à négliger : ch est la largeur du chiffre zéro dans la police courante, parfait pour limiter un paragraphe à une mesure de lecture confortable d'environ 60ch, tandis que ex est la hauteur d'un x minuscule, utile pour les ajustements verticaux liés aux proportions de la fonte.

Unités d'impression absolues : pt, in, cm, mm

Les unités physiques sont régies par des rapports exacts dans la spécification CSS, ce qui explique pourquoi les conversions proposées ici ne sont pas des approximations. Un pouce vaut 96px, un point vaut un soixante-douzième de pouce, ce qui revient à un pixel et un tiers, un centimètre vaut environ 37.8px, et un millimètre en est le dixième. Ces rapports sont fixes, quel que soit l'écran réel.

À l'écran, ces unités sont surtout un piège, car un centimètre sur la page correspond rarement à un centimètre mesuré avec une règle posée sur le moniteur. Leur véritable domaine, ce sont les feuilles de style d'impression, où une feuille de papier physique leur donne un sens réel, et pt en particulier reste la façon conventionnelle dont les graphistes et les traitements de texte décrivent les tailles de caractères. Recourez à pt, cm et mm lorsque vous travaillez pour l'impression, et à rem, em et aux unités de fenêtre lorsque vous travaillez pour les écrans.

Accessibilité : pourquoi les polices en px posent problème

Lorsque vous définissez les tailles de police en px, vous les figez. Un utilisateur qui augmente la taille de texte par défaut de son navigateur, souvent parce qu'il en a besoin, ne voit aucun changement, car une valeur en pixels fixe ignore totalement cette préférence. Dimensionner le texte en rem signifie au contraire qu'il s'adapte à la taille de police racine que l'utilisateur a choisie, ce qui constitue l'un des gains d'accessibilité les plus marquants offerts par le CSS et ne vous coûte rien visuellement pour le lecteur par défaut.

Un flux de travail concret en découle : concevez en pixels parce qu'ils sont intuitifs, puis convertissez votre typographie et vos espacements en rem avant la mise en production afin que la mise en page respecte les réglages de l'utilisateur. C'est la conversion la plus courante qu'effectue cet outil, et avec la base de 16px par défaut, l'arithmétique est conviviale, puisque 16px font 1rem, 24px font 1.5rem et 8px font 0.5rem.