web-dev-qa-db-fra.com

Pourquoi arrondir les tailles de police impaires à paires?

Aujourd'hui, j'ai commencé à implémenter un design qui avait du texte de copie avec une taille de police de 17 pixels. Mon collègue développeur Web m'a dit que nous devrions arrondir cela à 18 pixels et plus généralement que nous ne devrions pas utiliser de tailles de police impaires. Il pensait que c'était parce que le texte pouvait être plus beau.

Ma question est donc la suivante: le texte avec une taille de police uniforme est-il meilleur que impair? Ou quelle est la raison pour arrondir les tailles de police impaires, comme indiqué par la conception, même dans le CSS?

26
user131683

Je pense que votre collègue développeur est en quelque sorte correct. Pour être honnête, pour autant que je sache, il n'y a pas de règle "figée" pour cela, donc personne n'a tort ou raison en tant qu'absolu. Cependant, selon l'implémentation, vous pouvez vous retrouver avec des navigateurs rendant votre police sous forme de nombres entiers. Ce qui n'est pas un problème sur les écrans modernes, mais certains écrans plus anciens commenceront à ajouter rendu sous-pixel et les résultats peuvent donc sembler incohérents. Voyez comment le rendu des sous-pixels fonctionne dans l'image ci-dessous

enter image description here

Cela étant dit, à ce stade, nous parlons de cas Edge , de nos jours la plupart des écrans n'auront aucun problème avec le rendu et l'affichage des sous-pixels seront cohérents dans la plupart des cas.

Le cas pratique

Cependant, il existe un scénario où même les tailles sont vraiment utiles: le développement. Si vous définissez un nombre pair, il est plus facile à développer en fonction des tailles rem ou em. De cette façon, vous pouvez définir une taille de base, puis utiliser des tailles telles que 2rem, 1rem, .25 rem, .5em. Par exemple, si vous utilisez 16px comme taille de base, il est très facile de mettre à l'échelle en utilisant rem ou em sachant qu'ils deviendront quelque chose comme 16px: 1rem ; 8px: 0.5rem ; 4px: 0.25rem etc.

Veuillez noter que j'ai choisi 16px parce que c'est la valeur par défaut et parce que nous utilisons système de rythme vertical 8pt par défaut sur tous nos projets, mais vous pouvez utiliser n'importe quelle taille, bien sûr

19
Devin

Les polices Sans, qui sont couramment utilisées sur les écrans, sont principalement conçues pour avoir la même épaisseur de tiges et de barres.
enter image description here

Lorsque la taille de la police est assez petite et étrange, comme 17 pixels, la police est rendue de manière à ce que les barres soient environ 2 fois plus fines que les tiges. enter image description here

Un tel rendu représente mal l'apparence réelle de la police, et c'est pourquoi il existe des tailles de police recommandées:

6, 8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72 px

10
Pavlo Grubyi

Cela repose davantage sur une perspective très psychologique (la psychologie des nombres pour être précis) que sur les conceptions ou la programmation ou toute autre chose.

Les nombres pairs ont en quelque sorte le calme et le sentiment `` Je ne fais rien de gênant ou hors de propos '' et ont été au fil du temps utilisés comme tailles de police standard sur divers appareils et plates-formes (même MS Word a ses polices prédéfinies dans même Nombres).

Les nombres impairs ont en quelque sorte cette recherche d'attention et ce sentiment `` chaotique '' et si vous concevez et que votre police est impaire, beaucoup de designers arrondissent au nombre pair le plus proche.

Vous pouvez lire plus de la recherche d'un concepteur UX sur la disparité ici .

7
Wurah

Il n'y a absolument aucune raison (générale) pour laquelle les tailles de nombre pair seront "meilleures" que les tailles de nombre impair. La façon dont ces chiffres correspondent au degré auquel les largeurs et les positions des traits s'alignent naturellement sur une grille de pixels (vs nécessitant un indice laid ou un positionnement en sous-pixels) est complètement dépendante de la police, et dans un contexte Web moderne où px les tailles ne sont même pas nécessairement des pixels physiques, juste une unité logique correspondant aux résolutions d'affichage historiques, également dépendant du périphérique. Sur les appareils à haute résolution/"rétine", la correspondance est de toute façon peu pertinente, sauf à des tailles extrêmement petites.

Cependant, il peut y avoir de bonnes raisons de travailler même incréments, et même les plus grands au-delà d'un certain point. 13px et 14px, ou même plus de 17px et 18px, vont être difficiles à distinguer visuellement, et l'utilisation des deux dans le même contexte crée un sentiment déconcertant que quelque chose est "éteint" (probablement, que quelqu'un a copié et collé du texte avec une mise en forme et n'a pas effacé/corrigé le formatage) plutôt que d'utiliser des tailles distinctes intentionnellement.