Comment choisissez-vous une police pour un espace extrêmement limité, c'est-à-dire qu'elle s'adaptera au texte le plus lisible dans le plus petit espace?
J'ai souvent un espace très limité lors de la création de rapports et de tableaux de bord pour les utilisateurs. J'utilise habituellement Arial ou Arial Narrow, mais l'interface utilisateur n'est pas mon domaine d'expertise, donc je veux savoir comment déterminer une police optimale pour adapter le texte le plus lisible dans le plus petit espace?
Voici un exemple: Gardez à l'esprit qu'il ne s'agit que d'un exemple, car l'espace est souvent limité, par exemple lorsque vous devez compresser un million de colonnes dans un rapport, etc.
Cela dépend vraiment de beaucoup de facteurs tels que la fréquence de certains caractères que vous attendez et les polices disponibles.
J'ai fait un rudimentaire en créant un programme qui a itéré à travers toutes les polices disponibles que j'avais installées sur ma boîte Windows à l'époque et j'ai imprimé une ligne contenant chaque caractère ascii imprimable sur l'écran dans chacune de ces polices. J'ai également répété le test avec différentes tailles de police.
Les résultats dont je me souviens étaient que Segoe UI et Tahoma étaient les meilleurs en ce qui concerne l'utilisation de l'espace et la lisibilité à des fins d'interface utilisateur à des tailles de 10pt et 9pt. À court terme, nous nous sommes installés sur Tahoma car l'interface utilisateur de Segoe n'est pas disponible gratuitement pour les systèmes d'exploitation sous Windows Vista. Si vous n'avez pas besoin de prendre en charge Windows XP ou plus ancien un système d'exploitation Windows ou autre un système d'exploitation non Windows, alors j'irais certainement avec Segoe UI sinon j'irais avec Tahoma s'il est disponible et si tout Sinon, essayez Verdana. Voir cette liste pour une liste des polices Windows disponibles ainsi que des informations sur la meilleure utilisation de chacune.
Gardez également à l'esprit qu'à partir de Windows Vista, je crois, Microsoft recommande désormais d'utiliser une police 9pt au lieu d'une police 10pt pour les éléments d'interface utilisateur, car la police Sego UI s'affiche beaucoup plus clairement que les autres polices à basse résolution, en particulier sur les écrans plats.
Selon la plate-forme pour laquelle vous développez, vous pouvez également envisager de modifier les mesures de police si possible. Dans .NET avec WPF, je me souviens qu'il y avait pas mal de façons de modifier la façon dont le texte est rendu pour permettre de condenser l'espace entre les caractères et de rendre les caractères individuels plus étroits. En utilisant ce type de technique, vous pouvez vous en tenir à la police que vous aimez et juste ajuster le rendu pour obtenir les résultats dont vous avez besoin.
En ce qui concerne votre exemple de graphique spécifique que vous avez fourni: pour ce graphique particulier, je recommanderais de le faire pivoter afin que le texte le plus susceptible d'être lu soit horizontal pour une lecture plus naturelle. Je placerais également le nombre de sorte qu'il soit à l'intérieur de chaque barre du graphique à barres lorsqu'il s'adaptera à une couleur qui se démarque de la couleur d'arrière-plan, augmentant ainsi l'espace pour d'autres choses telles que les étiquettes. La disposition du graphique à barres en lignes faciliterait la lecture et l'impression sur plusieurs pages si nécessaire. Si une disposition des lignes n'est pas possible, la création d'une clé distincte pour chaque élément du graphique serait probablement raisonnable et de cette façon, chaque barre pourrait également être rapprochée pour économiser de l'espace. La clé permettrait à chaque barre d'être étiquetée comme A, B, C ... ou 01, 02, 03 ... par exemple et la clé (disposée en rangées ailleurs) donnerait des informations plus détaillées sur chacune.
N'oubliez pas qu'un graphique ou un diagramme est principalement utile pour obtenir rapidement des informations visuelles. Si cela devient trop lourd pour l'utilisateur/lecteur, il est probablement préférable de le simplifier, de consolider certains détails du graphique ou de simplement fournir plus de données brutes sous une forme plus tabulaire.
Voici une liste simple montrant les polices Arial, Segoe UI et Tahoma de différentes tailles. Notez que l'espace relatif occupé par chaque police est différent à différentes tailles de points. 
Mise à jour: J'ai ajouté une autre comparaison ci-dessous qui montre une liste plus complète des caractères communs, y compris les lettres majuscules et minuscules dans chacune des polices mentionnées précédemment avec l'ajout de Verdana et MS Sans Serif (police d'interface utilisateur par défaut dans Windows avant Windows 2000). Malheureusement et en réponse à la recommandation de bobsoap d'utiliser Verdana, il est assez clair que Verdana est à peu près la pire par rapport aux autres polices à 9 pt, mais gardez à l'esprit que cela peut ne pas être vrai pour d'autres tailles de points. De plus, la taille n'est pas nécessairement le détail le plus important, il est parfois plus important qu'une police soit lisible à de petites tailles que si elle est plus compacte par rapport à une autre police.
Vous le faites mal.
En général, il existe une "autre façon". Les réponses à cette question sont toutes excellentes, mais honnêtement, vous devriez regarder toutes les différentes options. Presser autant de texte dans le moins d'espace possible toujours signifie que vous avez bâclé un choix de conception précédent.
- Peut-être auriez-vous dû les transformer en barres horizontales, vous donnant BEAUCOUP plus d'espace pour travailler avec.
- Peut-être que vous n'auriez pas dû utiliser un graphique à barres ou que vous n'auriez pas dû utiliser des graphiques en premier lieu.
- Peut-être que le problème vient des données réelles, et vous auriez peut-être dû les diviser encore plus!
- Une barre latérale ou une légende/index pourrait aider
- Les survols peuvent fonctionner pour la version en ligne
Il y a tellement d'options, assurez-vous d'utiliser la bonne. Presser autant d'informations que possible dans une seule petite zone est toujours la mauvaise façon de procéder. L'information a besoin d'espace pour respirer, pour être lisible, pour être scannable et reconnaissable.
Oui, cela signifie généralement utiliser beaucoup plus d'espace. Mais ce n'est pas une mauvaise chose. Il faudra moins d'efforts à la personne qui consomme les données pour numériser rapidement quelques pages remplies d'informations bien structurées, que pour comprendre ce que signifie une barre sur ce rapport d'une page. Pensez à l'ancien membre du conseil d'administration, empochant ses lunettes de lecture tout en passant le papier à la personne à côté de lui: "Je ne peux pas lire ceci - que dit-il?"
Toutes mes excuses pour la dureté et le léger titre ironique, mais je vois cette bonne réponse et je pense simplement que la partie "a besoin d'une approche différente" avait besoin de plus d'élaboration.
. edit:
Comme il s'agit d'une réponse très contestée et assez en conflit avec la question d'origine, je pense que je devrais développer le raisonnement derrière la publication.
Tout d'abord: ce n'est pas une question UX, c'est une question de graphisme ou de typographie.
Il y a des hypothèses dans cette question, la plus importante étant que la "bonne solution" à ce problème UX est un petit texte. Mais ce n'est pas. Les petits textes deviennent illisibles, un problème aggravé par les tablettes et autres appareils mobiles. Et si votre utilisateur a une mauvaise vue? Que se passe-t-il s'il est affiché sur un ancien moniteur de résolution inférieure? Et s'il y a des reflets du soleil ou d'une lumière? Autant de raisons pour lesquelles un petit texte peut être illisible.
En tant que tel, cette réponse est là pour aider la prochaine personne qui a ce problème à ne pas faire la même erreur.
... cela dit - j'apprécie totalement que la personne qui pose la question ne dispose tout simplement pas de ressources pour autre chose qu'un changement de police :) Nous y sommes tous allés, et nous y serons tous à nouveau!
TLDR: J'ai traité cette question de la manière dont Henry Ford a traité l'appel à des chevaux plus rapides. (Avertissement: je ne suis pas Henry Ford)
Coda
Parfois, une police plus petite est un bon moyen de sortir d'une situation difficile. Dans ce cas particulier, au moins pour la partie du problème présenté, il existe une meilleure solution qui est à la fois plus claire et prend la moitié de l'espace, comme ceci:
J'utilise une police assez grande, 18pt Tahoma (image ouverte dans un nouvel onglet pour afficher en taille réelle), que l'espace de lettre négatif est OK.
En supposant que vous faites référence à une utilisation à l'écran sur un écran conventionnel (~ 96 DPI) par opposition à quelque chose comme un écran Retina, et que vous avez un système avec anti-aliasing sous-pixel, ce que vous recherchez est une police avec un pixel formidable allusion . Le conseil est l'art de prendre les courbes vectorielles conçues pour une utilisation d'impression et de personnaliser leur forme pour différentes tailles de points, généralement pour aligner les principales parties de la police sur la grille de pixels. Il s'agit de faire des compromis entre l'apparence de la police (son caractère si vous le souhaitez) avec la grille de pixels rigide et impitoyable. Ces compromis deviennent progressivement plus sévères à mesure que vous vous réduisez, car la grille de pixels fournit successivement moins de pixels à remplir.
De nombreuses polices ont été explicitement conçues pour être utilisées sur les écrans d'ordinateur (généralement appelées polices d'écran ). Le jeu de caractères de Matthew Carter; Verdana , Tahoma , Géorgie et al sont de bons exemples; ils ont été conçus dès le départ avec la grille de pixels à l'esprit. Cela les rend intrinsèquement bons pour une utilisation à des tailles plus petites (mais les rend généralement un peu gênants à l'impression).
En général, pour les petites tailles de points (se souvenir des tailles de points se réfèrent à hauteur), je recommanderais Verdana car un très haut hauteur x qui fournit large ouvert compteurs. Cela la rendra plus large que certaines autres polices, ce qui n'est pas ce que vous recherchez (d'après vos exemples).
Polices comme UI Segoe , Tahoma et MS Sans Serif sont tous conçus comme des polices d'écran polyvalentes (étant les polices de caractères par défaut pour Windows Vista/7, Windows XP et les versions antérieures de Windows respectivement) , ce sont donc de bons choix globaux (avec Segoe UI étant le seul conçu avec un indice de sous-pixel à l'esprit et étant le choix le plus moderne).
Il y a deux facteurs qui doivent également être pris en compte lors de la sélection d'une police; si vous exécutez le type verticalement, l'anticrénelage sous-pixel est naturellement différent, et généralement l'indication de pixel commence à être un peu pire (car les concepteurs de type ne sont pas susceptibles d'avoir testé leurs visages verticalement). Si vous exécutez les polices en diagonale ou non sur la grille de pixels, tout indice de pixel est jeté par la fenêtre.
Pour une explication très détaillée des indices de pixels, de la pixellisation et de tout cela, il n'y a pas de meilleure référence que ce site étonnant .
S'il y a un intérêt, je vais ajouter un paragraphe ou deux sur les choix d'impression pour les très petits caractères, mais il n'y a pas grand-chose que je pourrais ajouter au-delà cet article incroyablement bon .
Il est important de spécifier la dimension que vous essayez d'optimiser. Cherchez-vous à réduire la taille horizontalement (lignes plus courtes) ou également verticalement? Si vous cherchez à optimiser la largeur horizontale, vous devriez rechercher une police de caractères condensée. Arial Narrow et Helvetica Condensed sont deux options évidentes, mais je ne les trouve pas très lisibles et elles semblent bon marché.
Pour les sans-serifs similaires à Arial/Helvetica, mais plus étroits, jetez un œil à:
Myriad Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive et la nouvelle police Source Sans Pro d'Adobe.
Dans une comparaison que j'ai faite avec des nombres, j'ai trouvé que Myriad Pro, Source Sans Pro, Segoe UI et Tahoma étaient les meilleurs pour la lisibilité avec une largeur minimale à 9px-11px. Notez que ces polices gèrent les tailles très différemment, donc souvent un décalage de taille doit être incorporé pour faire une comparaison équitable.
Lato peut également bien fonctionner. Asana utilise Proxima Nova, qui est très ouvert et lisible à de petites tailles, mais n'a pas fière allure dans une taille plus grande lors de son utilisation.
Voici la comparaison que j'ai faite avec tout à 10 pixels. Cependant, il est préférable de jouer comme ça, car le changement de taille de police a souvent un effet non linéaire à ces petites tailles.
D'autres ont mentionné Verdana. Verdana est très lisible à petite taille, mais il n'optimise pas du tout la largeur. Cela dit, une police large lisible à de petites tailles optimise la hauteur plutôt que la largeur, et c'est peut-être ce que vous recherchez, mais sur le Web où le défilement vertical est plus naturel que le défilement horizontal, ce n'est généralement pas le cas .
Ma préférence personnelle est pour Arial à l'écran et si je recherche un look moins neutre ou si j'ai besoin d'optimiser la largeur, je pourrais regarder Source Sans Pro ou Segoe UI.
J'ai toujours aimé Segoe UI mais j'ai récemment dû admettre que Arial est en fait plus lisible (halètement) dans de nombreux cas. Si vous ne me croyez pas, comparez 12px Arial avec 12px Segoe UI dans une grille pleine de données numériques. Arial semble briller. Même l'exemple de texte présenté dans la réponse originale montre clairement que l'Arial est plus facile à lire. C'est moche mais plus lisible. Beaucoup de cela n'est que la subtile différence de taille.
De plus ... Lorsque vous emmenez Segoe à 13 pixels et au-delà, les chiffres commencent vraiment à paraître bizarres. En fin de compte, la plupart des applications sont pilotées par les données. Créez une grille pleine de données. Basculez entre les deux et demandez à quelques personnes ce qui est plus facile à lire ??? Hmmm ..
Si vous lisez du texte droit (sans chiffres) à 11 pixels, alors je pense que Segoe est plus facile à lire. Mais, celui qui a décidé que Segoe UI est une police plus facile à lire que Arial ... J'aimerais voir où ils ont obtenu ces données. J'ai demandé à plusieurs personnes et tout le monde pense que Arial est plus lisible pour les données à 12px (9pt) (y compris moi-même).
Il y a aussi beaucoup d'intracités avec les polices en ce qui concerne la couleur de la police. Segoe semble mieux légèrement plus léger ... (# 333333 ou # 212121) est généralement bon. Arial semble trop difficile à lire à ces couleurs et est généralement meilleur au noir uni. L'interface utilisateur de Segoe a trop de contraste et a tendance à être occupée par du noir solide.
Je trouve que Arial est plus lisible que Tahoma personnellement. Si vous parlez simplement de lisibilité directe. Tahoma peut sembler meilleur dans une interface Windows, mais c'est une chose esthétique.
L'espacement, la couleur et la taille de la police changent tout. Ne laissez personne vous dire que l'interface utilisateur de Segoe est une meilleure police. C'est mieux pour certains cas, mais pas pour tous. C'est sûrement attrayant.
Arial Narrow et Tahoma semblent être les meilleurs.
D'après mon expérience, Avenir Next Condensed est merveilleusement clair, tout en prenant très peu de place. Comparé à Arial Narrow, il prend moins de place et est plus facile à lire.
J'ai rencontré un problème où l'optimisation de l'espace des polices était un facteur important avec certains logiciels que j'utilise sur Mac (Soundminer, sur OS X Mavericks 10.9.5, mais j'imagine que cela pourrait être des informations utiles pour d'autres logiciels Mac et les futures versions d'OS X ainsi que). Le programme répertorie les métadonnées de fichier avec des lignes à hauteur fixe et permet à l'utilisateur de choisir la hauteur de ligne et la taille de police. Le retour à la ligne est une option, mais la hauteur de la ligne ne sera pas ajustée pour s'adapter automatiquement au contenu de chaque cellule.
Après avoir parcouru toutes les centaines de polices du système, celle qui contient le plus de données de caractères dans le moins d'espace, tout en restant lisible, était (étonnamment) Symboles Apple. Avec la taille de police réglée à 12 et une hauteur de ligne de 22, je peux confortablement tenir deux lignes de texte et plus de caractères qu'avec n'importe quelle autre police (même taille ou plus petite) tout en conservant une lisibilité facile à partir d'une position allant jusqu'à 3 'ou ainsi de l'affichage.
J'espère que cela s'avérera utile à quelqu'un d'autre avec le même problème (ou similaire).
La plupart des réponses ici ne doivent être utilisées que comme suggestions de polices possibles à utiliser. Après la lisibilité, c'est une question de goût. (Dans le commentaire qui disait que Verdana était clairement le pire choix, je l'ai préféré.) J'essaie souvent 8 ou 10 polices différentes, puis je décide laquelle me convient le mieux. Un choix dépend également du contexte. Je suis sûr que tout le monde utiliserait des polices différentes pour les cartes de visite d'une boutique de lingerie et d'une aciérie. Tous les BS sur serif et sans serif sont une perte de temps. Utilisez simplement ce qui semble bon, quel qu'il soit.
Je suis d'accord que le but ne devrait pas être d'introduire autant d'informations dans le texte que possible. La plupart des gens ne liront pas tout ou même une grande partie. Ils chercheront les points clés, et s'ils sont intéressants, ils peuvent lire les parties restantes ou, mieux encore, appeler pour plus d'informations.
Arial Narrow. Drôle, personne ne l'a mentionné (en un coup d'œil rapide à la réponse). Je l'ai utilisé à bon escient dans toutes les applications MS. Neeraj.
Je trouve que Verdana est idéal pour les petites tailles de police (pas tellement pour les plus grandes). Ou, si vous le pouvez, vous pouvez utiliser une police pixel.