Tailles d’icônes sur la grille (16, 20, 24)

Les tailles d’icônes d’interface les plus courantes — 16, 20, 24 et 32 pixels — sont des tailles de boîte englobante : chaque nombre désigne le conteneur carré dans lequel une icône est dessinée, pas le dessin qu’il contient. Le menu est court pour la même raison que les menus d’espacement le sont, et il s’aligne avec tout le reste : les quatre valeurs se placent sur la grille de 4px, et 16 et 32 sont des pas exacts de l’échelle modulaire à partir de laquelle beaucoup de systèmes génèrent leur espacement.

Cet article explique d’où viennent les tailles standard, pourquoi deux icônes à « la même taille » peuvent paraître de tailles différentes, quelle taille d’icône va à côté de quelle taille de texte, et comment aligner la paire une fois choisie — le coin en forme d’icône d’un système d’espacement complet.

D’où viennent les tailles d’icônes standard ?

Les mêmes pressions qui ont produit la grille de 8 points. Les multiples de 4 survivent aux facteurs de densité 1,5×, 2× et 3× auxquels les écrans effectuent le rendu sans tomber sur des demi-pixels, et une boîte englobante qui partage son arithmétique avec le menu d’espacement se compose proprement — une icône de 24px avec 12px de marge interne de chaque côté forme un contrôle de 48px, sans reste. Au sein du menu, chaque taille a un rôle : 16 convient aux interfaces textuelles denses et à l’usage en ligne (elle correspond à la taille de corps classique), 24 est la valeur par défaut confortable à laquelle la plupart des jeux d’icônes sont dessinés, 20 fait le compromis pour les interfaces compactes, et 32 et au-delà servent les états vides et les illustrations de fonctionnalité.

Sur une échelle d’espacement modulaire partagée — base 16, ratio 2, deux notes par doublement, générant 8, 11, 16, 23, 32, 45, 64 — les tailles d’icônes tombent sur les pas ou tout près : 16 et 32 sont exactes, 24 se situe un pixel au-dessus du pas 23, et 20 appartient à la couche de 4pt entre les pas. Sur les pas ou tout près suffit. Ce qui doit rester sur la grille, ce n’est pas l’icône seule mais la somme — boîte plus marge interne — car cette somme est la taille par rapport à laquelle les éléments voisins s’espacent.

Pourquoi deux icônes de la même taille paraissent-elles de tailles différentes ?

Parce que le nombre désigne la boîte, et les jeux diffèrent selon la part de la boîte qu’ils utilisent. Les jeux d’icônes dessinent leurs glyphes à l’intérieur d’une zone active avec une marge interne intégrée : les icônes système de Material, par exemple, sont conçues sur une grille de 24px dont le dessin reste à l’intérieur d’une zone active de 20px, avec 2px de rognage de chaque côté. Une icône Material « de 24px » représente en réalité environ 20px de dessin dans une boîte de 24px.

Cette marge interne n’est pas du gaspillage — c’est ainsi qu’un jeu équilibre la taille optique. Les formes remplissent l’œil de manière inégale : un carré plein dessiné aux mêmes limites qu’un cercle fin en contour paraît nettement plus grand, alors les jeux donnent aux formes rondes et diagonales un peu plus d’étendue et aux formes carrées denses un peu moins, le tout dans un même conteneur partagé. La cohérence réside dans la boîte ; le dessin varie délibérément à l’intérieur.

La conséquence pratique : mélanger des jeux d’icônes, c’est ainsi que les interfaces deviennent subtilement inégales. Si un jeu conserve environ 20px de dessin dans sa boîte de 24px et un autre environ 22px, les icônes du second jeu s’affichent environ 10% plus grandes à taille nominale identique. Rien n’est mesurablement faux — chaque boîte fait 24px — et pourtant la barre d’outils paraît irrégulière. Les correctifs fiables consistent à rester dans un seul jeu, ou à redimensionner les glyphes importés à la zone active de votre jeu avant de les livrer.

Quelle taille d’icône va à côté de quelle taille de texte ?

Un exemple d’appariement à partir de l’échelle ci-dessus (base 16, ratio 2, deux notes), avec les interlignes sur sa ligne de base de 8px — la ligne de base fait la moitié de la base, donc le rythme du texte et les boîtes d’icônes partagent un quantum :

Lisez les deux colonnes de droite comme des politiques concurrentes. La colonne fixe aligne chaque contexte sur la taille la plus proche que le jeu d’icônes livre réellement (12, 16, 24, 32), de sorte que les glyphes s’affichent à la taille pour laquelle ils ont été dessinés et que les traits restent sur des pixels entiers. La colonne 1em dimensionne l’icône en unités em pour qu’elle suive exactement son texte — une icône dans un sous-titre de 23px s’affiche à 23px, taille de dessin ou non.

Ouvrez l’échelle derrière ce tableau dans Scale Composer — base 16, ratio 2, deux notes — et relevez les pas d’où provient la colonne de texte : 8, 11, 16, 23, 32, 45, 64, avec la ligne de base de 8px sous les interlignes.

Faut-il dimensionner les icônes en px ou en em ?

Les pas fixes l’emportent généralement dans le chrome d’interface — barres d’outils, navigation, boutons, lignes de tableau — où les voisins d’une icône sont d’autres icônes et des contrôles dimensionnés à la grille plutôt que des phrases. La netteté y importe le plus : un dessin tracé sur des pixels entiers peut tomber sur des fractions lors du redimensionnement, et une colonne d’icônes à côté de tailles de texte variées veut tout de même une seule taille d’icône pour que la colonne se lise comme une colonne.

Le dimensionnement en em l’emporte généralement dans le texte fluide : une flèche de lien externe, un indicateur de statut en ligne, une icône dans un titre que les réglages de police de l’utilisateur peuvent redimensionner. Là, le seul voisin de l’icône est son propre texte, suivre ce texte prime sur la netteté des pixels, et 1em suit chaque futur changement de font-size sans comptabilité supplémentaire. Beaucoup de systèmes appliquent les deux politiques à la fois, avec une portée définie — fixe dans le chrome, em dans la prose — c’est ainsi que le tableau ci-dessus est censé être lu.

Comment aligner verticalement une icône avec son texte ?

Optiquement — par rapport à la hauteur d’x ou à la hauteur de capitale du texte — pas mathématiquement par rapport à la boîte de ligne. La masse visuelle des minuscules se situe entre la ligne de base et la hauteur d’x, pas au milieu de la boîte de ligne, si bien qu’une icône centrée sur la boîte se retrouve généralement à un pixel ou deux de ce que l’œil attend, et le décalage grandit à mesure que l’interligne devient plus généreux.

CSS le reconnaît : vertical-align: middle aligne le milieu d’un élément en ligne sur la ligne de base du parent plus la moitié de sa hauteur d’x — un alignement centré sur la hauteur d’x, ce qui explique pourquoi cela paraît souvent correct pour les icônes en ligne sans correction. Quand ce n’est pas le cas, la correction est un léger décalage de 1–2px, et ce décalage est légitime : la grille est un réducteur de décisions, pas une loi, et une icône déplacée de 1px pour paraître centrée est terminée, pas cassée.

Placez vos tailles d’icônes à côté de votre échelle typographique

Une taille d’icône est rarement choisie seule — elle est choisie par rapport au texte à côté duquel elle se placera, et le tableau d’appariement ci-dessus est une conséquence de trois nombres qui se redérive quand ils changent. Voyez-le se produire : ouvrez la même échelle à côté de sa rampe typographique et lisez les appariements directement — légendes à 11px, corps à 16px, sous-titres à 23px, titres à 32px, chacun à un pas d’icône de distance.