Évaluation de la lisibilité et de l'intelligibilité

Les concepteurs d'imprimés qui avaient l'habitude d'utiliser des caractères de petite taille - ou qui utilisent encore des caractères de petite taille - devraient savoir que lorsqu'il s'agit de caractères sur des écrans numériques, plus c'est grand, mieux c'est. Bien que les "gros caractères" sur le web soient devenus un style à part entière et même une tendance, trouver la bonne taille de caractères se résume à la lisibilité, à l'intelligibilité et, comme toujours, à une bonne expérience pour l'utilisateur. Mais quelle taille est trop grande, quelle taille est trop petite ? Et quels sont les polices qui fonctionnent mieux que d'autres ?

Exemples de textes tirés de La métamorphose de Franz Kafka.

Bien que la taille du corps de texte soit de 12 pixels, certains experts considèrent qu'un corps de texte de moins de 16 pixels est trop petit pour les écrans numériques, car les compteurs de caractères et l'espacement entre les lettres se referment dans de nombreux cas.

Il arrive que les caractères étroits posent davantage de problèmes. À la petite taille de 10 pixels (à gauche), les caractères de la famille Helvetica® Narrow se heurtent à des formes voisines, voire à des compteurs qui se ferment, comme dans le cas du "A" majuscule de "ARROW", et certains lecteurs peuvent même percevoir le "13" comme un "B" majuscule.

Rangée du haut : en minuscules, les deux caractères "r" de "Arrow" pourraient commencer à ressembler à un "n" minuscule dans les tailles de 12 et 10 pixels. Rangée du bas : L'ouverture de l'espacement entre les lettres en augmentant le suivi commence à atténuer ce problème, mais le compteur du "A" se rapproche toujours de 12 pixels.

Comparée à l'Helvetica Narrow placée sur le côté gauche, la famille de caractères Trade Gothic® présente un espacement plus ouvert entre les terminaisons et les formes voisines, telles que le "e" minuscule. Par rapport à la Trade Gothic, l'Helvetica Narrow est justement trop étroite pour le corps du texte dans un environnement Web.

Il est important de noter que la taille des caractères est une question de lisibilité : la facilité avec laquelle l'utilisateur peut lire. Par convention, les concepteurs considéraient qu'un corps de texte de 12 points était acceptable, et la plupart des lecteurs ont estimé qu'une typographie comprise entre 9 et 12 points était facile à lire pour un contenu de longue durée. Les caractères des documents imprimés étaient et sont encore réglés à ces tailles, mais le fait de régler le corps du texte à 12 points ou pixels - ou plus petit - pour la lecture de longs textes sur un écran numérique pourrait non seulement compliquer la tâche de vos lecteurs, mais aussi vous coûter des lecteurs, surtout si cela a un impact négatif sur la lisibilité et la facilité de lecture.

Définition du texte du corps de texte avec Web Polices

• Trouver des polices de caractères optimisées pour le Web
• Recherchez une hauteur de x importante qui augmentera la taille globale et améliorera ainsi la lisibilité.
• Testez le site polices à différentes tailles, de 14 pixels à 16 pixels.
• La taille du corps du texte est supérieure à 16 pixels, surtout si la hauteur x du site policeest légèrement inférieure.
• Taillez les légendes et le contenu court à des tailles plus petites, telles que 12 pixels ou moins, en veillant à tester leur fonctionnement sur différents écrans numériques.
• En plus de varier la taille des caractères, utilisez plus d'une page police afin de guider le lecteur vers les titres, puis vers le corps du texte, en créant un sentiment de hiérarchie qui différencie les zones d'information.
• Fournir un contraste suffisant entre la typographie et l'arrière-plan

-

La famille de caractères Neue Helvetica® eText (à gauche) a une hauteur x sensiblement plus élevée que la famille de caractères Monotype Baskerville® eText (à droite). Ces deux polices sont idéales pour le web ( polices ), mais elles offrent des expériences de lecture différentes lorsqu'elles sont placées à la même taille en raison de leurs hauteurs x différentes.

Le corps de texte de 16 pixels en Neue Helvetica eText (à gauche) apparaît plus grand qu'en Monotype Baskerville eText (à droite) en raison de la hauteur x plus faible de Monotype Baskerville. Il pourrait être justifié d'augmenter la taille du corps de texte en Baskerville de Monotype.

La famille Frutiger Next® (à gauche) comparée à la famille de caractères Futura® (à droite) à une taille de titre de 64 pixels, révèle que les deux ont une hauteur x similaire, mais que les hautes hampes de Futura peuvent faire paraître les caractères minuscules plus petits. Les qualités géométriques de Futura, ses grands compteurs et ses terminaisons proches des traits voisins en font une police peu idéale pour le corps de texte. Cependant, le Futura fonctionnerait bien en grande taille, pour les titres et les sous-titres.

Comme tous les caractères Web Polices de Monotype, le caractère PMN Caecilia® eText a été développé spécifiquement pour la lecture à l'écran. Il est utilisé ici pour le corps du texte à 16 pixels et pour une citation tirée à 20 pixels.

Dans ce cas, plus d'un site police fait le travail, avec Monotype Baskerville pour le titre, Neue Helvetica en 16 pixels pour le corps de texte, et PMN Caecilia pour une citation.

La lecture est une négociation constante entre le lecteur et le matériel qu'il a entre les mains, qu'il s'agisse d'un document imprimé ou d'un écran numérique. Une multitude de polices de caractères sont en train d'être redessinées ou conçues spécialement pour le web, et ces nouvelles polices offriront un quotient émotionnel qui va au-delà des bases du système Polices que les concepteurs de sites web utilisent depuis des dizaines d'années. Pour trouver le bon site police et lui donner la bonne taille, il faut chercher, concevoir et itérer. Et ne vous contentez jamais d'une solution trop rapide.

Examinez la typographie et placez-la dans les scénarios du monde réel dans lesquels elle fonctionnera. Ne concevez pas une seule option, mais une gamme, afin de voir ce qu'une police fait par rapport à une autre, et comment les différentes tailles influencent la mise en page. Comparez l'impact de différents écrans numériques, de tailles et de résolutions différentes, sur la typographie. En ce qui concerne l'expérience de lecture, veillez à effectuer des tests de convivialité en interne, au sein de l'équipe de conception, et en externe, auprès des utilisateurs. Vous voulez que les lecteurs vivent une expérience gratifiante en lisant ce que vous avez présenté, ce qui les incitera à revenir plus tard.

Jason Tselentis est concepteur, écrivain et éducateur. Professeur associé au département de design de l'université Winthrop, il enseigne la communication visuelle, la stratégie et le développement de marques, la conception de sites web et la typographie. Ses écrits sur la conception et la culture visuelle ont été publiés dans les magazines Arcade, Eye, mental_floss, Open Manifesto, Print et HOW. M. Tselentis a également publié quatre livres sur le design, la typographie et l'histoire du design.