Lisibilité des sites web, font-size : 100% – 16px

Le travail des webdesigners est de concevoir et de réaliser des sites web répondant à la problématique de leurs clients. Il s’agit avant tout de communication sur le web et qui dit communication dit message à faire passer.

La lisibilité du contenu est donc un point crucial qui doit attirer toute notre attention. Il existe de nombreux outils, méthodes et rêgles de base pour optimiser la lisibilité du contenu d’un site web.

Pour une meilleure lisibilité sur le web

Bien qu’il n’existe pas de solution toute faite pour optimiser la lisibilité d’un contenu textuel sur le web, il existe cependant quelques rêgles qu’il est bon de connaître :

• Choisir un corps de texte suffisamment élevé. En général on évitera de descendre sous 10px.
• Eviter les lignes trop longues. Un affichage de 45 à 75 signes par ligne semble correct. (Autre formule : largeur colonne = 30 x corps de texte).
• Opter pour un line-height assez élevé qui ne descendra pas sous 1.2 en moyenne (là encore, tout dépend de la police utilisée et de la mise en page). En général nous voyons des valeurs comprises entre 1.3 et 1.6.
• Opter pour des polices optimisées pour les écrans avec une hauteur d’x confortable (exemple : Verdana, Georgia).
• Utiliser les css pour définir une pile de polices (css font-stack) proposant du « Websafe » en plus des choix plus spécifiques.
• Préférer les unités relatives (em) aux unités fixes (px, pt).
• Aérer au maximum le contenu en plaçant des espaces blancs de chaque côté du texte.
• Contraster suffisamment le texte par rapport au fond de la page.

Maintenant que nous avons posé les fondamentaux, je voudrais m’arrêter un peu plus sur le choix du corps de texte.

Optimisation du corps de texte pour une meilleure lisibilité

Si nous ne définissons aucun style, le navigateur affichera le texte d’un paragraphe avec un corps par défaut de 16px. Dans l’immense majorité des cas nous avons tendance à réduire cette valeur que nous considérons comme trop élevée.

Cela dit, nous pouvons nous interroger sur le choix de ce 16px par défaut… Certaines réponses se trouvent du côté du designer Wilson Miner ainsi que du site Information Architects qui nous montrent qu’un corps de 16px en Georgia nous semble élevé uniquement parceque l’on considère son environnement.

En effet, la taille du texte de la barre d’outils du navigateur étant assez faible, un texte de 16px semblera en comparaison très élevé. Une autre explication de cette impression de grosseur c’est tout simplement notre manque d’habitude. Nous ne sommes pas habitués à lire du texte de 16px sur un écran.

Wilson Miner nous propose un petit test intéressant illustré par cette photographie :

Wilson Miner : Relative Readability

Nous voyons qu’un corps de texte de 16px sur un écran correspond à peu près à un corps de 11pt sur papier. Nous sommes donc globalement sur un même niveau de lisibilité.

Alors que nous nous sommes habitués à cette taille pour lire sur un support papier, nous n’en avons pas encore pris l’habitude sur le web. La faute à une modification quasi systématique de la taille du texte pour une diminution parfois radicale ayant pour conséquence une perte de lisibilité.

Le rendu des polices

Avant de continuer je voudrais simplement dire un mot sur la grande différence de rendu entre les polices. Par exemple, une Georgia 16px possède une hauteur d’x et une chasse plus importante qu’une Garamond. Le réglage des styles typographiques dans les css sont donc en étroite corrélation avec la police utilisée.

Ainsi, il est important de connaître le rendu des polices que l’on souhaite utiliser pour adapter les css en conséquence. Même si un webdesigner n’est pas un typographe, il me semble important de considérer la typographie comme un aspect majeur de ce métier. Les polices véhiculent un message. Choisie judicieusement, une police peut apporter beaucoup à la stratégie de communication d’un site web.

Voici une comparaison de différentes polices avec un corps identique de 24px :

Ce petit schéma nous montre bien que la lisibilité d’une police ne dépend pas que de sa taille mais aussi et surtout de la police elle-même.

Inspiration web : Font-size : 100% – 16px

Pour terminer cet article voici une sélection de sites web nous proposant un affichage du texte à 100%, soit 16px, la taille de texte par défaut des navigateurs.

Le but n’est pas de présenter de nouveaux sites, en ce sens, vous retrouverez des grands classiques. J’ai plutôt axé mon regard sur la lisibilité du contenu textuel, sur la taille du texte et sur le travail typographique réalisé par les webdesigners.

Il m’a semblé utile de donner quelques lignes d’explication et de critique sur chacun des sites présentés. Dans la grande majorité des cas, le texte est affiché avec une police à empattement. Il s’agit parfois d’unités relatives (em), parfois d’unités fixes…

52 Weeks of UX

Comme vous l’avez surement deviné, la conception d’interfaces est le thème de ce site… Il a été créé par le designer Joshua Brewer. On pouvait s’en douter, ici c’est le contenu qui est mis en avant plus que le contenant (même si le contenant est excellent). Le créateur a utilisé le service Typekit pour sortir du sentier balisé des polices dites « websafe ». Nous avons donc une « Chronicle Text G1 » 16px/1.5 pour le texte courant, une police un peu plus claire et plus étroite qu’une Georgia mais cet interlignage assez élevé permet de conserver une bonne lisibilité. Concernant les titres, nous sommes en présence de « Proxima Nova » 24px affichés en bold et tout caps pour être bien visibles et très contrastés par rapport au texte (qui comprend lui aussi des titres de second niveau).

Analog

Le site de l’agence Analog présente un corps de texte de 16px pour un interligne confortable de 1.5. Cela permet l’utilisation de la police « American Typewriter » en haut de pile (suivi par Georgia). La structure très aérée de ce site favorise la lecture et la compréhension. Pour ne rien enlever, la mise en page asymétrique permet de donner beaucoup de dynamisme à l’ensemble décidément très réussi.

Artypapers

Chez Artypapers on a opté pour différents corps de texte selon les sections du site. Sur la partie blog, le corps du texte est de 1.2em pour une taille à 85% sur le body. Cela donne une valeur située entre 16px et 17px pour le texte des paragraphes. La police choisie « Helvetica Neue » apporte une excellente lisibilité et reste en phase avec la communication du site qui propose des outils de développement type framework : clarté, polyvalence, neutralité, simplicité. Le choix de la typo est important puisqu’il permet de véhiculer un message en accord avec la problématique du site.

Avalonstar

Le site du webdesigner Bryan Veloso est vraiment une réussite avec un joli travail typographique, simple et efficace. Corps de texte 16px pour une ligne de base de 24px, scrupuleusement respectée sur toutes les pages du site. Bryan a utilisé 2 polices : « Helvetica Neue » pour les légendes, l’introduction et les liens (bonne idée je trouve) tandis que titres et paragraphes sont affichés en « Palatino ». On pourra noter l’ajout d’une couche sémantique supplémentaire offerte grâce à une structure en HTML5 : balise Section / Article / Aside etc. Vraiment un chouette site.

Bobulate

Ce site a été conçu par Jason Santa Maria pour son amie Liz Danzico « User Experience » consultante pour Happy Cog Studios. Là aussi la taille du texte diffère selon les rubriques du site mais c’est la taille native de 16px qui a été choisie pour la section « About » avec un interligne fixé à 22px. On pourra noter le choix de « Skolar », une police qui exprime tout son caractère dans les grandes tailles mais qui garde une bonne lisibilité dans des corps plus petits. Selon Liz, le choix de cette police collait parfaitement à l’image du site : ni trop neutre, ni trop ostentatoire. La présentation est très claire, le design complet s’appuie sur le travail typographique (graisse, style, corps).

Branded07

Le webdesigner Rob Palmer a pour habitude de concevoir des sites très lisibles, avec des corps de texte assez grands et magnifiquement illustrés. Son site personnel Branded07 ne fait pas exception à la règle : un corps de texte de 16px pour un fort interligne de 150% soit 24px. Alors que la majorité des sites présentés dans cette liste mettent l’accent sur la lisibilité et sur un rendu souvent assez épuré, Branded07 concilie les deux : un design illustré, coloré et une grande lisibilité. Rob Palmer est un des webdesigners pour qui j’ai le plus d’admiration.

Chama.inc

Contrairement au site précédent, Chama.inc propose un contenu assez épuré et presque exclusivement typographique. La typo au service du webdesign… Nous sommes ici dans un cas assez extrémiste puisque le corps du texte utilisé pour les paragraphes est de 18px ! L’interligne est de 1.57 et il fallait bien ça pour aérer une « Georgia » 18px déjà bien connue pour sa grande hauteur d’x. Nous pouvons voir que du « Garamond » (Regular, Italic et Alternate Italic) est utilisé pour le texte d’introduction ainsi que pour les titres.

Chris Kaufman

Pour son site, Chris Kaufman a lui aussi opté pour un couple corps/interligne de 12pt/24px ce qui correspond à du 16px/24px. Le corps de texte semble plus petit que les sites précédents en raison de la police utilisée : « Baskerville », bien plus petite qu’une Georgia ou Hoefler, police de second choix dans la « font-stack » du site. Sur la homepage, Chris a su manier habilement une mise en page sur 1, 2 et 4 colonnes. Le design est assez fourni, la texture en background confère une forte personnalité à ce site référencé dans de nombreuses galeries.

Christopher Meeks

Le site de Christopher Meeks est particulièrement sobre et très lisible. Le focus est mis sur le contenu plus que sur le contenant. Ici, pas de couleurs flashy mais un site en noir et blanc (ou plutôt en niveaux de gris). Même si l’auteur a défini un font-size : 14px dans le body de la page, le corps de texte atteint 16px dans de nombreuses sections du site et particulièrement sur toute la partie « Blog ». La police « Helvetica Neue » apporte neutralité et bonne lisibilité. L’interligne de 24px est suffisant pour aérer correctement le texte. On pourrait peut-être regretter le manque de contraste entre le texte et les liens qui ne sont d’ailleurs pas soulignés.

Designr

Dans son site « Designr » Piotr Fedorczyk nous montre une belle maîtrise de la typo dans son ensemble et beaucoup de minutie dans la réalisation. Tout comme Chris Kaufman il a lui aussi opté pour une « Baskerville » en 16px/1.5em. Sur ce type de police et à cette taille, un interligne de 1.5 est plutôt élevé, c’est d’ailleurs ce qui donne cet aspect très aéré et lisible. Ici, tout est rempli de petits détails comme par exemple les lettrines réalisées non pas uniquement avec une image (Lettre+Ornement) mais simplement avec une image de fond ornementale en background qui vient décorer un caractère baskerville 3em (soit 48px). Dans ce site tout a été réalisé avec une grande précision, même les liens sont soulignés via un border-bottom de 1px, bien plus net que le soulignement par défaut.

Note : une nouvelle version du site est disponible : Designr.it redesign

DesignWorkPlan

DesignWorkPlan est un site au design très simple, équilibré, et qui fonctionne vraiment très bien visuellement. Il y a deux polices utilisées sur ce site : d’un côté « Axel » bold pour les titres et « Georgia » 16px/23px pour le texte courant. Pour info, la police Axel a été créée par Erik Spiekermann pour être utilisée dans les tableurs type Excel. Il est parti du principe qu’en moyenne, les cellules des tableurs servent à écrire du texte pour 90% et 10% seulement pour y insérer des chiffres. Les polices « classiques » type Arial, Verdana et autres étant trop larges pour cet usage, il a donc créé Axel. Une police optimisée pour les écrans (cf : cleartype), très lisible, et condensée. (Gain de place de 30% comparé à une Verdana).

Drawar

Ce site communautaire créé et dirigé par Paul Scrivens fait vraiment parti de ce que j’appel « le haut du panier ». Ici, pas d’articles de type « Les 50 plus beaux blogs du moments » mais plutôt des articles de fond un brin provocateurs voir dérangeants mais ayant toujours pour but de faire avancer les choses, de faire du nouveau et non du réchauffé. Sur Drawar, qui prône un retour aux bases, il n’est pas vraiment surprenant de voir un design épuré qui laisse toute sa place au contenu. Les articles de la partie blog sont présentés en « Georgia » 16px/24px pour une lisibilité quasi optimale. Les articles sont présentés sur toute la largeur de la page pour une immersion totale. Pour tous ceux qui cherchent un peu plus que du Smashing Magazine (néanmoins parfois très intéressant) je vous conseille d’aller faire un tour chez Paul Scrivens.

Dustin Curtis

Dustin Curtis est un designer de 23 ans qui publie des articles très intéressants sur son site personnel. Le concept est assez simple : un article, une mise en page avec parfois la parole donnée à d’autres auteurs. Mise à part une minuscule barre de navigation, chaque article dispose de 100% de l’écran ce qui laisse suffisamment de place pour que s’exprime la créativité de l’auteur. J’ai inclu le site de Dustin dans cette liste car de nombreux articles sont rédigés dans un corps de texte de 16px présentant ainsi une grande lisibilité.

Giant Creative

Le site de cette agence possède une charte graphique tout à fait réussie avec des couleurs qui s’accordent toutes très bien avec le fond chocolat. La typo est un mélange de « SexSmith » pour les titres et de « Georgia » 16px/20px pour le texte courant. On pourra constater la grande minutie apportée à la sémantique du code html avec l’utilisation de listes de définition dl dt dd plutôt que de simples paragraphes. Ce design est une belle réussite et les galeries css ne s’y sont d’ailleurs pas trompées puisque ce site est partout.

Information Architects

I.A est une web agency connue dans le monde entier pour la grande qualité des projets qu’elle a réalisé. Le design du site est minimaliste, efficace, accessible et correspond à la philosophie de l’agence. La lisibilité est optimum grâce à l’emploi d’une police « Georgia » 16px/1.5 pour le texte courant. Le corps de texte pour les titres H1 et H2 a simplement été augmenté respectivement à 200%(32px) et 150%(24px), toujours en « Georgia ». Je vous conseille d’aller lire les articles du blog toujours très enrichissants.

Information Highwayman

C’est le designer D Bnonn Tennant qui a créé ce site au design absolument surprenant. L’auteur a opté pour une mise en page centrée ce qui est déjà peu commun. La typographie joue un rôle central dans le design du site : la première police de la pile c’est « Justus » qui est utilisée partout sur le site, dans différents styles et graisses. Pour le texte courant nous avons du 1em/1.6em (correspond ici à un 16px/26px) ce qui est assez pour obtenir un texte lisible pour cette police plutôt sombre qui chasse beaucoup. Pour les titres, l’auteur a utilisé du « Bodoni » (je ne suis pas sur du type exact) 48px/55px transformé en image pour un rendu similaire pour tout le monde.

Klepas

Klepas c’est le site du graphiste et webdesigner Simon Pascal Klein et c’est un modèle en terme de lisibilité. Outre la structure très claire, le site est construit avec du « Georgia » en premier choix. La charte graphique est très simple mais efficace, la typo joue là encore un rôle de premier ordre puisque l’auteur a utilisé de nombreuses petites astuces pour rompre avec la monotonie et apporter du dynamisme à sa mise en page. La casse, la graisse, le style de texte, le corps bref… ici « Georgia » montre tout son potentiel, y compris son excellente lisibilité à 16px/1.5.

Miles Dowsett

Miles Dowsett, UI Designer, nous propose un site qui peut parfois faire penser à celui d’Eliott Jay Stocks mais qui possède néanmoins sa propre personnalité. Pour le texte l’auteur a opté pour du « Georgia » 16px/1.5 pour toute la partie réservée au blog. Les articles disposent d’une longueur de ligne de 690px ce qui est selon moi un brin trop grand mais qu’importe puisque le reste du site est vraiment bien réalisé.

Mix Online

Mix Online est une communauté de designers et de développeurs qui possède un superbe site web rempli de petits détails au service de la communication. L’information est bien structurée, visuellement c’est vraiment réussi avec des détails graphiques qui attirent l’attention mais n’entravent jamais la lisibilité. On trouve différentes polices sur le site avec un duo « Tungsten / Sentinel » pour les titres (en images) alors qu’une « Georgia » 1.6em/1.5 a été choisie pour tout le reste (font-size:10px sur le body donc 1.6em = 16px sur les paragraphes).

One by Four

Difficile d’oublier ce site lorsqu’on y a mis les pieds. La faute à ce superbe titre principal et à un design épuré mais néanmoins solide et attrayant. Ce petit studio basé en Floride est dirigé par 4 amis de longue date qui partagent tous une idée commune du design et de l’art en général. Leur site est particulièrement réussi,on sent qu’il y a eu une importante réflexion avant d’aboutir à ce bel équilibre. Le titre est une création originale du studio sur fond de « Verlag » remaniée et d’une créa complète pour les 2 caractères formant le mot « by ». Pour le reste, le texte courant est en « Helvetica Neue » 14pt/21pt. Un joli site web qui présente… de jolis travaux.

Made by Sofa

Le site de l’agence « Made by Sofa » est une belle illustration de lisibilité sur le web. Les éléments sont très aérés, la police « Georgia » montre tout son potentiel puisqu’elle est utilisée presque partout hormis pour le copyright et certains petits éléments affichés en Lucida Grande. Le choix de « Georgia » y est pour beaucoup dans l’optimisation de la lisibilité. Le texte courant est en 16px/24px et les créateurs du site ont su utiliser tous les outils offerts par les css pour jouer avec la typo, parfois avec une extrême minutie… Regardez par exemple l’ajustement subtile de l’approche de paire sur les deux caractères « We » formant le premier mot du titre principal. Les caractères ont été rapprochés un peu plus grâce à un « letter-spacing:-0.13em ». C’est ensuite l’espace entre le mot « We » et le mot « are », qui a été modifié via un « padding-right:0.06em ».

Ryan Clark Merrill

Le design du site de Ryan Clark Merrill, un designer de 26ans vivant à Cincinnati, est particulièrement réussi. Ici, la typo à un rôle très graphique grâce à l’utilisation de la police « League Gothic » affichée en 3.6em tout caps pour les titres soit environ 58px ce qui est énorme pour une police déjà très massive. Le résultat n’est pas mal et donne beaucoup de personnalité à ce site. Il faut rajouter à cela l’utilisation de la police « Skolar » en 1.6em/24px (ici du 16px/24px)pour le texte courant, une police très lisible grâce à ses larges empattements et à sa hauteur d’x conséquente. Pour mieux vous rendre compte du travail typographique, je vous conseille d’aller faire un petit tour sur la page « About » du site.

The Netsetter

The Netsetter est encore un site d’Envato plutôt axé business cette fois-ci. Ce qui frappe tout de suite lorsqu’on arrive c’est ce corps de texte particulièrement élevé pour du web. Le mélange entre des titres sans-serif, assez massifs, surement pas loin d’une « Helvetica Neue » Condensed et une « Georgia » 20px/27px fonctionne plutôt bien je trouve. Oui je sais, nous sommes au dessus des 16px et donc hors-contexte… Hum… Oui…ok suivant.

Use it

Nous y voilà… Quoi de mieux pour appuyer un concept que de le voir en application sur Useit.com, le site du gourou ultime de l’utilisabilité web j’ai nommé : Jackob Nielsen. Ici on bascule clairement du côté extrême, l’utilisabilité avant tout, pas de chichi, un site web est fait pour afficher de l’information de façon adaptée sur de nombreux supports, de manière lisible, accessible et en respectant certains codes en vigueur dans les usages : liens bleus soulignés, aucune image pour un poids défiant toute concurrence et pour un affichage adapté quasi partout, styles optimisés pour l’impression et… corps de texte laissé nativement à 16px pour un interlignage natif lui aussi de 21px. La police choisie en haut de la pile c’est du « Verdana », et ce, pour tout le site (pas de chichi on a dit !). Juste pour info le fichier css pèse moins de 2ko ah ah:).

`

Wilson Miner

Wilson Miner est un designer vivant à San Francisco. Il a travaillé pendant 10 ans pour Apple en tant que designer d’interfaces avant de créer EveryBlock. Son site est l’exemple parfait d’un webdesign minimaliste plaçant le contenu avant le contenant et visant une lisibilité optimale sur ce support qu’est l’écran. Pour ce faire, Wilson a initialisé le corps de texte à 16px sur le body de la page et a opté pour une « Helvetica Neue » 3em/1em pour les titres (avec une approche de groupe modifiée : -0.05em) et pour une « Palatino » 1em/1.5em pour le texte courant. Il est aussi intéressant de noter la différenciation entre les sauts de ligne simples et les changements de sections. Au niveau du code HTML, dans les 2 cas on change de paragraphe mais Wilson a choisi de décaler la première ligne de 1em dans le premier cas tandis qu’une marge d’1em signifie le changement de section (exemple). Une solution intéressante qui est notamment présentée par Robert Bringhurst dans The elements of typographic style applied to the web.

Your Neighbours

Le site web de cette petite web agency basée à Berlin est vraiment bien réalisé, très clair, lisible avec un soin particulier apporté à la typographie. Si on met de côté le logo du site affiché avec la police « New Yorker », tout le texte est en « Georgia ». Pour le texte courant nous avons du 1em/1.5 donc 16px/24px pour un font-size de 16px sur le body. Globalement je trouve ce site très équilibré, lisible et réalisé avec beaucoup de goût. Encore un bel exemple de ce qu’il est possible de faire avec Georgia décidément très polyvalente et particulièrement adaptée à la lecture sur écran. Je vous conseille de parcourir un peu le contenu il y a des choses sympathiques même si c’est un site assez récent.

Conclusion

Lorsqu’on parle de webdesign, la lisibilité n’est pas à prendre à la légère. Avec la multitude d’outils à notre disposition, il ne tient qu’à nous de concevoir des sites ergonomiques, respectueux des contraintes du web et du support écran.

Nous avons vu dans cet article que de nombreux webdesigners ont compris l’intérêt de présenter un contenu dont la lisibilité est optimisée sans que cela n’entrave l’esthétisme du site.

Il me semble que nous pouvons facilement enrichir notre pratique du métier en nous interrogeant sur les usages du web (côté utilisateurs) et en essayant d’analyser et de comprendre les choix de certains webdesigners.

Quelques liens pour finir :

• Livre : Lisibilité des sites web ed.Eyrolles
• R.Bringhurst : The elements of typographic style applied to the Web
• I.A : Webdesign is 95% typography
I.A : Why so simple is so difficult
• I.A : The 100% Easy-to-read standard
• Mark Boulton : Designing for the web on the web
• Wilson Miner : Relative readability
• The potential of web typography

— Aurélien Foutoyet

Rubriques

• À la Une
• atypi
• événements
• commentaires
• conférences
• decoration
• expos
• fontes
• formations
• hors-sujet
• liens
• livres
• technologie

Recherche

Lancer la recherche

Trouvailles

• Le bureau du futur
  Spiekermann sur Arte, vidéo traduite en français.

• L’Imprimerie Nationale à NY!
  Nos Garamond et Romain du Roi dans le New York Times [Ang.]

• Fontclod
  Une pré-version d'un logiciel de création de caractères en ligne [Ang.]

• Des lignes…
  Où qu'ils aillent et quoi qu'ils fassent, les hommes tracent des lignes, Tim Ingold.

• Gestion des fontes
  Le plus sérieusement du monde sous Mac OS. Suivez les conseils d'alex.virginia.

• Robothon 2012
  Conférence les 8 et 9 mars 2011, La Haye: RoboFont, Superpolator, scripting, UFO3, Defcon, MetricsMachine [Ang.]

• François Boltana – Byblos
  F. Adebiaye & S. Cardinal en dédicace pour "François Boltana" à la librairie Byblos, 95 rue Blomet (Paris XV) le vendredi 18 novembre à 17h.

• Garamond 1561 – 2011
  Garamond 1561 – 2011. 450e anniversaire de la mort de Claude Garamont.

• Un futur pour l'IN?
  Les objets et œuvres viendront du Louvre […] de l'Imprimerie nationale… Dans Libération, 20 septembre 2011.

• Robofont
  Le nouvel éditeur Mac OS de fontes, au format UFO vient d'être présenté à l'ATypI 2011 [ang.]

• JT “Penguin”
  Les couvertures de Jan Tschichold chez Penguin dispo sur Flickr!

• Workshop typo
  Conduit par Olaf Mühlmann: Workshop typo plutôt poétique, fin 2008, Olivier de Serres, Paris.

• Fontsmith: 1/4
  Interview de Phil Garnham [Ang.]

• Mnemosyne
  Images du musée de l'éducation de Rouen.

• Slanted magazine #10
  Slanted #10 Heavy Metal. Lovers. est publié. Fontes gothiques et leurs applications contemporaines [Ang-All.]

Promotions

Publicité