Règle de pixels, gratuite
Mesurez les distances en pixels sur votre écran.
Comment utiliser
- Cliquez-glissez sur la règle pour mesurer une distance. La règle affiche des incréments en pixels.
- Les points de départ et d'arrivée sont déplaçables, saisissez-les pour ajuster la mesure.
- Activez le mode vertical pour mesurer des distances verticales au lieu d'horizontales.
- Visualisez votre nombre de pixels et la taille physique estimée sous la règle.
Questions fréquentes
Quelle est la précision du calcul de la taille physique ?
La taille physique repose sur le ratio de pixels de votre appareil et une DPI supposée de 96. La DPI réelle des moniteurs varie, il s'agit donc d'une approximation. Pour des mesures précises sur documents imprimés, utilisez une règle physique.
Puis-je mesurer des distances verticales ?
Oui. Activez le mode vertical pour mesurer des distances verticales en pixels au lieu d'horizontales.
Que signifie le ratio de pixels de l'appareil ?
Les écrans haute densité (comme les écrans Retina) ont un ratio de pixels supérieur à 1, c'est-à-dire que plusieurs pixels physiques représentent un pixel CSS. Cet outil mesure en pixels CSS.
Ce que cette règle mesure (et ce qu'elle ne peut pas mesurer)
C'est un mètre à mesurer libre qui vit dans votre onglet de navigateur. Glissez sur le canevas ci-dessus pour obtenir une mesure en pixels CSS. Cela fonctionne sur tout ce qui est peint dans la zone d'affichage du navigateur (une capture d'écran ouverte dans un onglet, un export Figma affiché en ligne, une page web active dans un second onglet), mais cela ne peut pas mesurer les fenêtres du bureau, l'interface des applications natives, la barre des tâches, ni rien de ce qui est peint par le compositeur au niveau de l'OS en dehors du navigateur. Cela ne peut pas non plus détecter automatiquement les limites des éléments comme le peuvent Chrome DevTools ou Page Ruler Redux. C'est un autre type d'outil. Le cadrage honnête compte : cette règle est la bonne réponse lorsque vous voulez une mesure rapide et sans installation à l'intérieur du navigateur.
Les pixels CSS ne sont pas des points matériels
Le pixel qu'utilisent JavaScript et CSS est un pixel de référence défini par le W3C : « l'angle visuel d'un pixel sur un appareil ayant une densité de pixels de 96 dpi et situé à la distance d'un bras du lecteur. » Pour une longueur de bras nominale d'environ 28 pouces, cet angle visuel est d'environ 0,0213°, soit environ 0,26 mm à la surface de l'écran. Le pixel CSS est une unité d'angle visuel, pas un point matériel, intentionnellement indépendante de l'appareil, de sorte qu'une police de 16 px apparaît à peu près à la même taille physique sur un téléphone, un ordinateur portable et un téléviseur.
Toutes les autres longueurs CSS absolues y sont ancrées : 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. Ce tableau de conversion fixe est exactement ce qui fait de l'affichage « mm à 96 DPI » une estimation plutôt qu'une vraie mesure, voir ci-dessous.
Trois mots autour du pixel que les designers confondent
| Terme | Ce qu'il compte | Où il vit |
|---|---|---|
| Pixel CSS | Le pixel de référence du W3C ; l'unité que JS et CSS utilisent pour la mise en page | window.innerWidth, getBoundingClientRect(), toute longueur CSS |
| Pixel de l'appareil | Le point réellement adressable sur la dalle | screen.width × devicePixelRatio, résolution native du moniteur |
| Pixel d'image | La résolution intrinsèque d'un fichier matriciel | naturalWidth / naturalHeight sur une <img> |
La relation en une phrase : résolution physique de l'écran ≈ taille du viewport CSS × ratio de pixels de l'appareil, et une image nette nécessite une largeur intrinsèque ≥ largeur CSS rendue × DPR. Un logo dimensionné en CSS à 100 px sur un téléphone avec un DPR de 3 nécessite une image source d'au moins 300 pixels de large pour paraître nette.
Ratio de pixels de l'appareil
L'affichage du DPR dans le panneau d'information indique window.devicePixelRatio : « le rapport entre la résolution en pixels physiques et la résolution en pixels CSS pour le périphérique d'affichage actuel. » Valeurs courantes :
- 1,0 : écrans classiques à 96 DPI (anciens moniteurs, machines Windows à 100 % d'échelle).
- 2,0 : la plupart des MacBook Retina, de nombreux moniteurs 4K à 200 % d'échelle.
- 2,5–3,5 : téléphones modernes. Les modèles iPhone Pro indiquent 3,0 ; les fleurons Android se situent souvent à 2,625 / 2,75 / 3,5.
Deux comportements à connaître : le zoom de page (Ctrl/Cmd + et −) modifie bien le DPR, de sorte que l'affichage bondira à mesure que vous zoomez. Le zoom par pincement agrandit le viewport rendu sans changer la taille sous-jacente du pixel CSS, donc il ne le modifie pas. Apple a introduit l'écran Retina sur l'iPhone 4 en 2010, et pour éviter que les applications et pages existantes ne rétrécissent au quart de leur taille précédente lorsque les pixels de l'appareil ont doublé dans les deux dimensions, iOS a introduit les « points » (son équivalent du pixel CSS). Le web a hérité du même modèle : un pixel CSS 2× correspond à quatre pixels de l'appareil.
Normes de taille des cibles tactiles
L'une des choses les plus utiles que fait une règle de pixels est de vérifier que les boutons, les liens et les icônes respectent les minimums d'accessibilité pour les cibles tactiles. Trois normes reviennent généralement ensemble :
| Source | Minimum | Unité | ~Physique (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | px CSS | ~6,4 × 6,4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | px CSS | ~11,6 × 11,6 mm |
| Apple HIG | 44 × 44 | pt | ~11,6 × 11,6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (référence 160 dpi) |
WCAG 2.2 a ajouté le critère AA 24 × 24 en octobre 2023. Le test de conformité du W3C le formule ainsi : « Il doit être conceptuellement possible de dessiner un carré plein de 24 sur 24 pixels CSS… entièrement à l'intérieur de la cible. » Il existe cinq exceptions (espacement, équivalent, en ligne, contrôle de l'agent utilisateur, essentiel), mais en général, l'interface principale doit franchir cette barre. Le critère AAA plus ancien (2.5.5) exige 44 × 44, ce qui correspond au HIG d'Apple et grosso modo aux 48 dp de Material.
La grille de conception à 8 pixels
La plupart des conceptions d'interface modernes reposent sur une unité de base de 8 pixels (la « grille de 8 points » ou « grille de 8 dp » selon la plateforme). Material Design 2 et 3 s'appuient tous deux dessus, avec de plus petits ajustements de 4 dp pour les icônes et les composants denses. Le choix de 8 n'est pas accidentel : il se divise proprement dans les largeurs d'écran courantes (320, 360, 375, 1280, 1440), il s'échelonne selon des ratios entiers (8, 16, 24, 32, 40, 48), et il s'associe naturellement à un corps de texte par défaut de 16 px. Une sous-grille de 4 pixels gère l'alignement fin.
Usage pratique : lorsque vous mesurez un espace à 14 px ou 17 px, vous avez probablement repéré une erreur d'unité CSS. La valeur visée était presque certainement 16. La règle de pixels est le moyen le plus rapide de repérer un espacement hors grille.
Quand recourir à une règle dans le navigateur
- Contrôle qualité de design sur une page en production. Comparez le résultat en ligne aux spécifications. L'espace entre deux cartes fait-il 16 px ou 24 px ?
- Vérification des cibles tactiles. Posez la règle sur un bouton pour confirmer qu'il respecte le plancher AA de 24 px ou la cible AAA de 44 px.
- Audit d'espacement sur une maquette collée. Ouvrez un export Figma dans un onglet, posez la règle dessus, vérifiez le rythme.
- Vérifications des points de rupture responsives. L'affichage de la largeur du viewport sert aussi d'indicateur de point de rupture en direct pendant que vous redimensionnez la fenêtre.
- Pédagogie. Montrez à un développeur débutant ce que
devicePixelRatioindique sur sa propre machine, et comment cela change lorsqu'il appuie sur Cmd/Ctrl + pour zoomer. - Audits d'accessibilité. Vérifiez les zones cliquables des boutons-icônes, la longueur de ligne en pixels CSS et les tailles de texte minimales.
Les DevTools du navigateur et les autres règles
Chaque navigateur moderne fournit des outils de mesure, mais ils sont cachés derrière les panneaux développeur.
- Chrome DevTools : ouvrez le menu de commandes (Cmd/Ctrl+Shift+P), tapez « rulers », sélectionnez Show rulers on hover. Des règles apparaissent en haut et à gauche du viewport lorsque vous survolez un élément. Lié à la sélection d'un élément plutôt qu'à un glissement libre.
- Firefox DevTools : Paramètres → Boutons de la boîte à outils disponibles → activez Toggle rulers for the page. Un bouton de bascule de règle apparaît dans la barre d'outils des DevTools ; les règles se superposent sur les bords de la page avec les dimensions du viewport en haut à droite.
- Figma / Sketch / Adobe XD : tous disposent de règles superposées dans leur canevas. Figma utilise Maj+R pour les activer. Ils sont liés au fichier : ils mesurent à l'intérieur de leur propre modèle de document, pas une page web déployée.
- Extensions de navigateur : Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. Toutes nécessitent une installation et des autorisations ; toutes restent confinées au navigateur. Utiles si vous avez besoin de la détection automatique des éléments.
Une règle d'onglet de navigateur comme celle-ci est la solution pour les designers, les relecteurs qualité et les personnes en charge du contenu qui veulent un simple clic plutôt que des panneaux DevTools ou des installations d'extensions.
Autres questions
Quelle est la précision de l'affichage en millimètres ?
C'est une estimation. La conversion utilise la relation fixée par le W3C 1 in = 96 px CSS, exacte uniquement lorsque votre moniteur fait réellement 96 DPI, que le zoom du navigateur est à 100 % et que la mise à l'échelle de l'OS est à 100 %. Les moniteurs réels varient énormément : une dalle 1080p de 24 pouces tourne à environ 92 ppi, une 1440p de 27 pouces autour de 109 ppi, une 4K de 27 pouces autour de 163 ppi. Considérez le nombre en mm comme une estimation à l'ordre de grandeur près, jamais une mesure de qualité impression. Pour des tailles physiques réelles, tenez une règle physique contre l'écran.
Pourquoi le ratio de pixels de l'appareil change-t-il quand je zoome ?
Le zoom de page (Cmd/Ctrl + ou −) change littéralement la taille d'un pixel CSS par rapport au pixel de l'appareil, de sorte que le rapport entre eux change. Le zoom par pincement sur les appareils tactiles fonctionne différemment. Il agrandit le viewport rendu sans changer la taille sous-jacente du pixel CSS, donc il ne déplace pas le DPR.
Pourquoi 1366 × 768 n'est-il pas exactement du 16:9 ?
Parce que ça ne l'est pas tout à fait. 1366 ÷ 768 = 1.7786 ; le vrai 16:9 vaut 1.7778. Le ratio simplifié est en réalité 683:384. De nombreuses dalles d'ordinateur portable bon marché utilisent cette résolution légèrement hors spécification, ce qui explique en partie pourquoi la vidéo 1080p s'y sous-échantillonne parfois imparfaitement.
Puis-je mesurer en dehors du navigateur ?
Non. Une page web ne peut voir et peindre qu'à l'intérieur de son propre onglet de navigateur. Pour mesurer des fenêtres du bureau, l'interface d'applications natives, ou tout autre élément en dehors du navigateur, il vous faudrait un utilitaire au niveau de l'OS : la fonction « Afficher l'inspecteur » de l'Aperçu de macOS, l'outil Capture d'écran de Windows avec la superposition des dimensions, ou une règle d'écran tierce.
Des données sont-elles envoyées à un serveur ?
Non. La règle est rendue avec l'API canvas HTML5 ; les dimensions du viewport et le DPR proviennent de JavaScript en local ; l'affichage de la mesure est calculé dans votre navigateur. La page fonctionne hors ligne une fois chargée.