Avertissement. Je laisse cet article en ligne pour l’historique mais il utilise une définition erronée de la notion de pixel. Ce que je pensais être les pixels sont en fait des “points physiques” (pixel device) c’est-à-dire PAS les pixels que l’on manipule en CSS. Le pixel en CSS est le 96ème d’un pouce observé à un bras de distance. Les écrans classiques font 96 dpi et donc dessus un pixel CSS équivaut à un point d’écran mais cela n’est plus vrai sur les écrans à haute résolution. Cela signifie qu’on peut faire du design adaptatif en pixels.
Pourquoi ne faut-il plus utiliser les pixels dans les règles CSS pour écrans (le média screen) ?
C’est parce que… la taille du pixel devient trop variable d’un écran à l’autre. La finesse de l’affichage des écrans s’accroit sans cesse. Les résolutions sont de plus en plus hautes même sur des écrans de téléphones de tailles réduites. La très classique résolution de 1024×768 pixels sur des écrans d’ordinateur de quatorze ou quinze pouces sera bientôt rejointe par celle des smartphones qui tiennent dans la poche. Gageons que celle des écrans d’ordinateurs s’envolera à son tour. Avec les écrans Retina Apple a lancé la course à la finesse, et il est bien possible que dans les prochaines années les écrans multiplient plusieurs fois leur nombre de pixels.
Aussi, une largeur en pixels ne permet plus d’avoir une idée de la taille affichée. Par exemple sur les écrans d’ordinateurs actuels une barre latérale large de trois cents pixels est affichée sur six ou sept centimètres et peut contenir une quarantaine de caractères. Sur les prochaines générations d’écrans, les mêmes trois cent pixels pourraient bien ne faire que deux centimètres de largeur et n’afficher que quelques caractères.
Je parle de positionnement en CSS mais il est évident que les tailles de caractères doivent encore moins être définies en pixels, la lisibilité des textes du site en dépend. Cela explique pourquoi le reset CSS de Eric Meyer définit une taille de police par défaut à 100%, c’est-à-dire qu’elle est laissée au choix du navigateur et des préférences de l’utilisateur.
Deux unités sont à privilégier en positionnement CSS : le pourcentage (%) et le cadratin (em).
Relativement à la largeur des blocs : le pourcentage (« % »)
Le pourcentage est l’unité privilégiée par Ethan Marcotte pour faire du responsive Web design, c’est-à-dire du design proportionnel ou encore « fluide ». Un design avec des largeurs proportionnelles est « élastique ». Il s’adapte à la largeur de l’écran, que celui-ci fasse trois ou vingt-trois pouces, et sans se soucier du nombre de pixels.
Relativement à la taille du texte : le cadratin (« em »)
La dimension d’un cadratin (la largeur d’un espace de texte, ou encore de la lettre « M ») est par nature lisible par l’œil humain. Et donc en travaillant en em on indexe le design sur les capacités de l’œil humain. Les blocs positionnés conserveront une largeur cohérente pour l’humain quelle que soit la finesse de la résolution ou la largeur de l’écran. Une barre latérale de 18.75em aura une largeur sensiblement équivalente sur les écrans de tablettes, de smartphones, d’ordinateurs etc. d’aujourd’hui et de demain.
Par rapport à nos habitudes sur les écrans d’ordinateurs classiques, la règle de conversion à suivre est simple : 16 pixels font 1 em.
L’unité em est utilisée pour les hauteurs dans les designs responsive (fluides). C’est également l’unité « à tout faire » des designs non proportionnels et en particulier des grilles frameless. Au passage, en ce qui concerne les grilles des designs, je recommande chaudement au lecteur l’unité em plutôt que les pourcentages.
L’unité em a en outre l’avantage d’être facile à manipuler pour l’impression (le média print). Elle est en effet indexée sur le point (pt). Par exemple si la taille du texte est 12pt alors le cadratin mesure douze points. Une mise en page réalisée pour écran sera donc réutilisable sur imprimante.
Pixels malgré tout ?
Il m’arrive encore d’utiliser les pixels sur écran dans un cas particulier : les images non vectorielles. Ces images ont en effet une taille optimale d’affichage en pixels et il est parfois justifié, pour les règles CSS qui les concernent (les décalages pour les images de background notamment), de travailler en pixels.
