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

Dans ce nouvel article je vais présenter les solutions mises en place par les webdesigners pour améliorer la lisibilité de leur contenu textuel. Je ferai une analyse des « bonnes » pratiques typographiques pour optimiser la lisibilité du contenu et présenterai une sélection de sites web affichant leur contenu textuel à la taille par défaut de 100% soit 16px. Trop gros ? Pas esthétique ? Hum… pas si sur que ça…

Cet article est disponible en Français et en Anglais :

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.

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 notre métier. Les polices véhiculent un message. Choisie judicieusement, une police peut apporter beaucoup à la communication d’un site web.

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

Comparaison de différentes polices à 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 affichée par défaut par nos 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 (La dernière fois que j’ai fait ça, j’ai eu pas mal de retours positifs donc je continue). Dans la grande majorité des cas, le texte est affiché avec une police à empatement. Il s’agit parfois d’unités relatives (em), parfois d’unités fixes…

52 Weeks of UX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

The webdesigner’s work is to design and realize websites that meet their client’s problematic. It is all about communication on the web and who talk about communication is also talking about a message to convey.

Web content’s readability is a crucial point that should attract our attention. There are many tools, methods and rules for optimizing textual contents.

For a better readability/legibility of website’s content

Although there are no easy solutions to optimize the readability of text content on the web, there are some rules that it is good to know :

  • Choosing high enough font-size values. In general we avoid falling below 10px.
  • Avoid long lines : a display 45 to 75 characters per line seems correct. (Other formula: column width = 30 x font-size value).
  • Choosing a line-height value high enough that will not fall below 1.2 in average (again, depending on the typeface chosen and layout). In general, we often see line-height values between 1.3 and 1.6.
  • Choosing typefaces optimized for screen display with a comfortable x-height (example: Verdana or Georgia).
  • Using the power of CSS to define a font-stack with « websafe » typefaces in addition of more specific ones.
  • Prefer relative units (em) to fixed units (px, pt).
  • Lightening the content with white spaces on both side of the text.

Now that we have laid the fundamentals, I would like to dwell a little on the choice of the font-size value.

Optimizing font-size value for better readability

If we do not define any style, the browser will display the text of a paragraph with a 16px font-size. In the vast majority of cases we (webdesigners) tend to reduce this value that we consider too high.

However, we can question the choice of the default 16px … Some answers are to the designer Wilson Miner and the site Information Architects shows us a 16px font-size in Georgia seems high only because of its environment.

Indeed, the font-size of the text on the toolbar of the browser is fairly low, a 16px text seem high in comparison. Another explanation of this too large size feeling is simply our lack of familiarity. We are not accustomed to read 16px text on screen.

Wilson Miner offers us an interesting little test illustrated by this photograph:

Wilson Miner : Relative readability

We see that a 16px font-size text on screen corresponds roughly to a 11pt font-size text on paper. We therefore broadly on the same level of readability.

While we are accustomed for reading this font-size on paper, we have not yet acquired the same habit on the web for lack of quasi systematic modification of default font-size that sometimes resulting a loss of readability.

Typefaces rendering

Before continuing let me just say a word about the vast difference between typefaces rendering. For example, a 16px Georgia got a large x-height and a larger width than a Garamond. Adjusting the typographical styles in the css are in close correlation with the typeface used.

Thus, it is important to know the typeface rendering in order to adjust accordingly the typographic styles in the CSS. Even if a web designer is not a typographer, it seems important to consider typography as a major aspect of our business. Typefaces convey a message. Chosen wisely, a typeface/font can bring much to the disclosure of a website.

Here is a comparison of different typefaces at the same size : 24px

Comparaison de différentes polices à 24px

This small visual shows us that the readability/legibility of a font depends not only size but also and especially the typefaces themselves.

Web inspiration : readability with default 100% font-size

To conclue this article here is a selection of websites displaying their current copy-text in the default 100% font-size (=16px)

The goal is not to introduce new sites, in this way, you will find some very well know websites. Instead, I focused on the legibility of text content, the font-size of copy-text and typographical work done by web designers.

It seemed useful for me to give few lines of explanation and criticism on each website presented (The last time I did that, I had a lot of positive feedback so I continue). In the vast majority of cases, the text is displayed with a serif font. It is sometimes relative units (em), and sometimes units fixed …

52 Weeks of UX

52 Weeks of UX

As you probably guessed, the User interfaces design is the theme of this site … It was made by designer Joshua Brewer. It could be expected, here is the content that is put forward more than the container (even if the container’s design is excellent). The author has used the service Typekit to leave the marked trail of websafe typefaces. We therefore have a « Chronicle Text G1 » 16px/1.5 for the text, a little clearer and more condensed typeface than a Georgia but this large line-height value is giving a good legibility to the text. For headlines, we are dealing with «  Nova Proxima Nova » 24px displayed in bold and caps to be very legible and very contrasting to the copy-text (which also includes second level headings).

Analog

Analog

The website of the Analog agency has body font-size=16px with a comfortable 1.5 line-height value. This allows the use of « American Typewriter » typeface on first position in the css font-stack (second is Georgia). The lightened layout encourages readability. The asymetrical structure give lot of punch and dynamism to this very successful website.

Artypapers

Artypapers

On the Artypapers website they have chosen different font-size depending on the pages. For the blog part, the font-size is set to 1.2em with a 85% font-size for the body. It corresponds to a font-size value between 16px and 17px for the paragraphs. The typeface « Helvetica Neue » bring an excellent readability/legibility and stay connected to the communication of this site who sells development tools (framework-like) : brightness, polyvalence, neutrality, simplicity. The choice of the typeface is important as it convey a message accordingly to the website problematic.

Avalonstar

Avalonstar

The site of the webdesigner Bryan Veloso is really a success with a nice typographic work, simple and effective. Font-size:16px for a 24px leading strictely respected n each pages of the site. Bryan have used 2 typefaces : « Helvetica Neue » for the aside, introduction and links (I think it’s a good idea) while headings and paragraphs are displayed in « Palatino ». We could notice the addition of an additional semantic layer with the use of HTML5 and its specific tags : Section / Article / Aside etc. Really a nice website.

Bobulate

Bobulate

This site was designed by Jason Santa Maria for her friend Liz Danzico « User Experience » consultant at Happy Cog Studios. Once again the font-size depends of the pages of the website but it’s the 16px default font-size that have been chosen for the « About » page with a 22px line-height. We could notice the choice of « Skolar », a typeface that express its personality in higher larger font-size but which keep a good legibility in small sizes. According to Liz, this typeface fits perfectly with the image of the site : « it incorporates a subtle personal style, neither neutral nor conspicuous ». The layout of the website is very clear, lighten, the whole design is directly connected to the typographic work.

Branded07

Branded07

The webdesigner Rob Palmer always make some very readable websites, with large font-size and beautifully illustrated. His personal website « Branded07 » don’t make exception to this rule : a 16px font-size copy-text with a large line-height of 150% (24px). While the majority of sites in this list focus on content’s readability and a quite often minimalist design, Branded07 reconciles an illustrated and colorful design and a very readable content. Rob Palmer is one of web designers for who I have the greatest admiration..

Chama.inc

Chama.inc

Unlike the previous site, Chama.inc offers almost exclusively letterpress content . Typography is serving webdesign … We are here in a rather extreme scheme, since the text used for paragraphs is 18px! The line-height is 1.57 and it was necessary to ventilate this large « Georgia » typeface already well known for its large x-height. We can see that a « Garamond » typeface (Regular, Italic et Alternate Italic) is used for introduction text and for headings.

Chris Kaufman

Chris Kaufman

On his website, Chris Kaufman have also chosen a couple font-size/line-height of 12pt/24px what represents a 16px/24px. The x-height seems smaller than on the previous websites of this list because of the typeface which is used here : « Baskerville », much smaller x-height than a Georgia or a Hoefler, the secondary choice in the font-satck. On the homepage, Chris succed in making a 1,2 or 4 column layout on the same page. The design is rather heavy-detailed, the background texture gives a strong personality to the site already referenced in numerous css galleries.

Christopher Meeks

Christopher Meeks

The personal site of Christopher Meeks is particularly simple and very readable. The focus is on content rather than on the container. Here, no flashy colors, but a site in black and white (or rather grayscale). Even if the author has set a font-size: 14px in the body of the page, we found a font-size:16px for the paragraphs in many sections of the site, example for the « Blog » part. The typeface « Helvetica Neue » brings neutrality and legibility. The 24px line-height is enough to properly ventilate the text. We might regret the lack of contrast between text and links which are not underlined.

Designr

Designr

In his website « Designr » the designer Piotr Fedorczyk shows a fine mastery of typography as a whole and a lot of detail in implementation. Like Chris Kaufman, he has also opted for a « Baskerville » in 16px/1.5em. With this kind of typeface, a line-height of 1.5 is rather high, that’s what gives this very airy and legible content. Here, everything is filled with small details such as drop caps made not only with an image (+Letter Ornament) but simply with a transparent ornamental background image that just decorate a « Baskerville » character 3em (ie 48px). This site has been created with great precision, even the links are highlighted via a border-bottom of 1px, much clearer than the default underlined border.

Note : a new version of the site is available : Designr.it redesign

DesignWorkPlan

DesignWorkPlan

The design of the DesignWorkPlan website is very simple, balanced, and that really works well. There are two typefaces used on this site : on one side « Axel » bold for headings and « Georgia » 16px/23px for the copy-text. For information, The Axel typeface was created by Erik Spiekermann to be used in spreadsheets such Excel. It is assumed that on average, cells of spreadsheets used to be filled with text for 90% and olny 10% to insert numbers. As « Classical » typefaces such as Arial, Verdana and others are too large for this use, Eric Spiekermann created « Axel ». A typeface optimized for monitors (ClearType), very readable and condensed. (Saves up to 30% space compared to a Verdana).

Drawar

Drawar

This Webdesign community created and run by Paul Scrivens present some « interesting and deep content ». Here, no list-articles like « The 50 best blogs of the moment » but rather in-depth articles a bit provocative sometimes disturbing but always speaking about something new, creative, these kind of discussion that makes evolving the community in a good way. On Drawar, which talk us about a return to basics, the fundamentals of a great webdesign, it is not really surprising to see a streamlined design that leaves its place to the content. The articles in the blog are presented in « Georgia » 16px/24px for a near-optimal readability. The posts are presented on full page width for a complete reading immersion. For those seeking a little more than the Smashing Smashing (though sometimes very interesting), I advise you to take a little look to Paul Scrivens’ website.

Dustin Curtis

Dustin Curtis

Dustin Curtis is a 23years old designer who publishes very interesting articles on his personal website. The concept is simple enough : an article, a layout, sometimes with the words of other authors. Apart from a tiny navigation bar, each article has 100% of the screen width, which leaves enough space for that expresses the creativity of the author(s). I included the site of Dustin in this list because many articles are written using a 16px font-size text for a great readability.

Giant Creative

Giant Creative

The website of this agency has a graphic chart quite successful with all colors agree very well with the chocolate background. The typefaces presented are : « Sexsmith » for headings and « Georgia » 16px/20px for the text. We can see the great care given to the semantics of html code with the use of definition lists dl dt dd rather than simple paragraphs. This design is a great success and css galleries seems to be quite agree with me.

Information Architects

Information Architects

IA is a web agency known worldwide for high quality projects they have done. The design is minimalist, efficient, accessible and consistent with the philosophy of the agency. We have an optimum readability with the use of « Georgia » 16px/1.5 for the text. The font-size for headings H1 and H2 has just been increased to 200% respectively (32px) and 150% (24px), always « Georgia ». I suggest you go read the blog posts always very interesting.

Information Highwayman

Information Highwayman

This absolutely amazing design have been created by the designer Bnonn D Tennant. The author has chosen a centered layout what is already unusual. Typography plays a central role in the design of the site : « Justus », the first typeface of the stack, is used throughout the website in various fonts. For the text we have 1em/1.6em (here it’s like a 16px/26px) which is enough to get a legible and readable text for this quite dark and large width typeface. For the headings, the author used the « Bodoni » (I’m not on the exact font) 48px/55px transformed into an image in order to give the same rendering for everyone.

Klepas

Klepas

The Simon Pascal Klein’s website is a model in terms of readability. Besides the very lightened structure, the site is built with « Georgia » for first choice. The graphic chart is very simple but effective, typo plays once again a leading role since the author has used many tricks to break the monotony and bring dynamism to its layout.With differents fonts and font-size, « Georgia » shows its full potential, including its excellent readability at 16px/1.5.

Miles Dowsett

Miles Dowsett

Miles Dowsett, UI Designer, showing us a website that can sometimes make you remember Eliott Jay Stocks’ website one, but which nevertheless has its own personality. For the text the author has opted for a « Georgia » 16px/1.5 for all the blog part. With 690px width, the columns have a little to high line length but it’s not a real problem because the rest of the site is really well done

Mix Online

Mix Online

Mix Online is a community of designers and developers who has a wonderful website full of small details to make the communication easier. The information is well structured, visually it’s really successful with graphic details that attract attention but not encroach on legibility. There are different typefaces here, with a couple « Tungsten / Sentinel » for headings (turn into pictires), while a « Georgia » 1.6em/1.5 was chosen for the entire content (font-size: 10px on the body so 1.6em = 16px).

One by Four

One by Four

Difficult to forget this website when you have see it just once. The lack of this superb main title and a clean design, solid and attractive. This small studio based in Florida is led by four longtime friends who share a common idea of design and art in general. Their website is particularly successful, we feel that there has been an important consideration before arriving at this balance. The title « OnebyFour » is an original creation of the studio backdrop of « Verlag » a bit redesigned and a complete new creation for the 2 characters of the word « by ». Otherwise, the current text is « Helvetica Neue » 14pt/21pt. A beautiful website that shows us beautiful works.

Made by Sofa

Made by Sofa

The site of agency « Made by Sofa » is a nice illustration of readability on the web. The elements are very lighten, the typeface « Georgia » shows its potential since it is used almost everywhere except for the copyright and some small items displayed in Lucida Grande. The choice of « Georgia » has much to do in optimizing readability. The text is 16px/24px and the website’s author have managed to use all the tools offered by the css to play with the letterpress, sometimes with extreme care … Look for example the adjustment of the subtle kerning on the two characters « We » forming the first word of the main title. The characters have been moved a little closer thanks to a « letter-spacing:-0.13em. Then there is the space between the word « We » and the word « are », which was modified via a « padding-right: 0.06em ».

Ryan Clark Merrill

Ryan Clark Merrill

Here is the successful design made by Ryan Clark Merrill, a designer of 26 years old living in Cincinnati. Here, we can see a very graphical use of letterpress with the « League Gothic » typeface displayed at 3.6em font-size with caps for headings (about 58px) which is huge for a typeface already very massive. The result is not bad and gives a lot of personality to this design. ìn addition, we have the « Skolar » typeface which is used for the text in 1.6em/24px (here’s 16px/24px), a very readable typeface thanks to its big serifs and large x-height. If you want to really see the work on letterpress, you could take a look at the « About » page.

The Netsetter

The Netsetter

The Netsetter is still an Envato website, more business focused. What immediately punchs you at the beginning is the very large font-size for the paragraphs text, quite unusual on a blog. The mix between very strong sans-serif headings, probably not far away from a « Helvetica Neue » Condensed and « Georgia » 20px/27px works rather well I think. Yes I know we’re on top of 16px and therefore out of context … Hmm … Yes … ok next

Use it

Use it

Here we are … What better way to support a concept than to see it on application on Useit.com, the site of ultimate of Web usability’s guru I named : Jackob Nielsen. Here we tip clearly toward extreme usability above all, no fuss. A website is designed to display information appropriately in multiple formats, so readable, accessible and meeting certain codes in uses : blue underlined links, no image for an unbeatable weight and a suitable display almost everywhere, styles optimized for printing and … font-size by default of 100% so 16px, with a default line-height of 21px. The selected font at the top of the stack is the « Verdana » and that, for the entire content (no fuss I said!). Just for your information, the css file is less than 2kb ah ah).

`

Wilson Miner

Wilson Miner

Wilson Miner is a designer living in San Francisco. He has worked during 10 years as UI Designer for Apple before to create EveryBlock. The site is a perfect example of minimalist web design content with for optimal readability for the media screen. To this end, Wilson has initialized the font-size to 16px on the body and chose a « Helvetica Neue » 3em/1em for headings (with a modified kerning of -0.05em) and a « Palatino » 1em/1.5em for the text. It is also interesting to note the differentiation between simple line breaks and changes of sections. In the HTML code in the 2 cases we add a simple paragraph but Wilson has chosen to shift the first line of 1em in the first case while a margin of 1em means the change of section (example). This particulary interesting solution have been presented by Robert Bringhurst in The elements of typographic Style Applied to the Web.

Your Neighbours

Your Neighbours

The website of this small web agency based in Berlin is really well designed, very clear, readable with special care given to typography. If we put aside the logo displayed with the typeface « New Yorker », the entire content is displayed with « Georgia ». For the text we’ve got some 1em/1.5 (16px/24px). Overall I found this site very balanced, readable, and made with great success. Another fine example of what can be done with « Georgia » definitely very flexible and particularly suitable for reading on screen. I suggest you to take a look at the nice video projects presented (even if it’s a fairly new site with not to much content).

Conclusion

When it comes to webdesign, readability is not taken lightly. With the multitude of tools at our disposal, it is up to us to design websites ergonomically friendly constraints of the web and support screen.

We have seen in this article that many web designers have realized the importance of presenting readable and screen optimized content, and so, without turning into an aesthetic design.

I think we can easily enrich our practices of the webdesign by asking ourselves about the uses of the Web (user side) and trying to analyze and understand the choices of the best webdesigners.

Note : The design of this blog is not really optimized for the web I know and I plan to make a redesign that include best webdesign practices when I would have some time to do it.

Quelques liens pour finir :

36 réflexions au sujet de « Lisibilité des sites web, font-size : 100% – 16px »

  1. Ping : Tweets that mention Lisibilité des sites web, font-size : 100% – 16px | All For Design -- Topsy.com

  2. Salut Aurélien,

    Intéressant cet article et je pense en effet que beaucoup de webdesigners ont tendance à choisir des textes trop petits, moi y compris quelque fois.

    Seule critique à propos de l’article mais qui n’en est pas vraiment une : la majorité des sites présentés comme exemple sont des sites au design minimalistes. De ce fait ce n’est pas vraiment de ta faute puisque typographie travaillée va de pair avec design minimaliste, du moins dans la mode actuelle.
    J’aurai en tout cas été intéressé de voir des designs avec de grandes polices qui ne sont pas minimalistes.
    Beau boulot ;)
    .-= Dernier blog de Design Spartan : Présentation : Alexis Marcou =-.

  3. Salut Gaétan,
    merci pour ton commentaire.
    Effectivement on remarque en général que les webdesigners (et agences) ayant de solides compétences optent pour des sites épurés. Le plus difficile c’est pas d’en mettre mais plutôt de savoir en enlever.
    Je pense que plus on grimpe en compétence, plus on apprend à suivre l’adage « Form follows function ». Cela se vérifie sur les sites web de presque toutes les bonnes agences.

    Perso plus j’avance, plus je m’oriente vers ce type de design assez épuré. J’essaie de justifier chacun de mes choix et si je ne peux pas le faire, cela signifie que je peux supprimer cet élément de mon design.

    Bon on aura tous compris que ce blog n’est absolument plus à l’image de ce que j’aime concevoir aujourd’hui (même si le design que j’ai créé il y a 2 ans semble encore plaire aujourd’hui).

    Mon portfolio (réalisation en cours) sera beaucoup plus en accord avec mes compétences et ma vision actuelle du webdesign.

  4. Merci, encore un article que j’ai pris plaisir à lire.

    La lisibilité est vraiment importante dans la création d’un site web, et là tu nous le rappelle encore une fois. Il est vrai que je varie entre 12 et 14px, ou aux alentour de 1em.

    Puis ce que tu mentionnes dans le commentaire du dessus, le fait d’en enlever au plus on évolue, je suis tout à fait d’accord. Je le vois même pour moi, j’en suis encore qu’a mes débuts, mais petit à petit je deviens un peu plus adepte du « Less is more ».

    J’ai vraiment apprécié le fait que tu es décortiqué chaque site, je comprend maintenant pourquoi ton article t’as pris du temps :)

    Maintenant on attend de voir ton portfolio, qui te correspond apparemment encore mieux…

    Encore merci pour ton travail, je partage !
    .-= Dernier blog de lazy : Romain Loubersanes – Showreel 2010 =-.

  5. Merci Jerem :)
    Et oui je crois que nous évoluons tous à peu près de la même manière et c’est plutôt bon signe tant que nous arrivons à proposer des choses un peu novatrices.

    Je suis content de savoir que cet article t’ait plu ;)
    Oui la recherche, la rédaction et la traduction m’ont pris un certain temps :)

  6. Bonjour à tous, et merci Aurélien pour cet article documenté.
    La lisibilité des contenus est évidemment une priorité. Tous les designers ont intégré cela depuis leur 1ere année d’apprentissage. C’est la base, tu as tout à fait raison de le rappeler.
    Je reviens brièvement sur un point technique: la lisibilité des fontes dépends aussi de la résolution de l’affichage et de la taille des écrans, or, la résolution et la taille des écrans a pas mal évoluée depuis 2 ans. Les utilisateurs s’équipent de plus en plus d’écrans 21 alors qu’il y a encore 3 ans la plupart des postes étaient encore équipés de 17′ ou 19′ en 1024×768.
    Parallèlement à ça, d’autres surfent sur des mobiles, des ipads ou autres notebooks en 13′ ou 14′.
    Le véritable enjeux pour les designers, ça va être aussi de permettre une bonne lisibilité quelque soit le support de lecture. C’est là que ça se complique :-)

    Pour l’heure, il faut se référer aux stats de fréquentation du projet et cours et baser son design sur les résolutions majoritaires des visiteurs.

    Pour un affichage dans un navigateur web, j’utilise aussi beaucoup la taille 16 qui lorsqu’elle est utiliser dans un contexte graphique adéquat passe très très bien. J’insiste sur le contexte : L’harmonie d’une fonte avec son contexte, par la gestion des espaces, de l’interlignage, ou des respirations et du rythme entre les éléments ont une incidence majeure sur l’harmonie visuelle générale de l’interface. La taille des fonte est un faux problème. L’harmonie est plus une affaire de contexte.

    Sinon vous avez vu, la Georgia est très utilisée en ce moment, c’est vrai qu’elle reste très cohérente dans ces différentes tailles, contrairement à d’autre (verdana en tête).
    .-= Dernier blog de Laurent DEMONTIERS : Quelle rémunération pour les web designers? =-.

  7. Hello Laurent,

    Je te rejoins complètement sur le fait qu’un des enjeux majeur est de proposer du contenu qui s’adapte aux différents supports de lecture.
    En ce sens le choix d’un design assez minimaliste avec peu d’images est un atout puisque la compatibilité semble plus évidente. J’ai par exemple en tête le design du site web de Jonathan Snook dont la version Iphone est très similaire à la version web.

    Concernant la suite de ton commentaire je suis bien d’accord.
    Finalement c’est une question de parti pris.

    Est-ce que je conçois mon site en fonction du confort de lecture ou est-ce que je privilégie autre chose. Si le confort de lecture est privilégié (en optant notamment pour une taille de police importante) et que cet élément est intégré en amont du processus de conception d’un site web alors il est évident que l’harmonie sera là (si le webdesigner n’est pas trop mauvais) puisque tout aura été optimisé : structure, design, choix des polices.

    Après avoir rédigé cet article j’avoue que je suis maintenant assez partisan d’une taille de police allant dans le sens d’une lecture confortable. Reste encore à convaincre nos clients qui eux n’y sont peut-être pas encore assez habitués mais là c’est encore une autre histoire hum?!…

    Pour finir Georgia… ahhh Georgia. Je trouve que cette police est vraiment un régal à utiliser, hyper flexible, on peut vraiment l’exploiter dans de nombreux styles, graisses, corps, couleurs bref son seul défaut c’est finalement d’être devenue victime de son succès puisqu’on la voit partout. D’ailleurs, le site Inspiration Bit a proposé un super article sur les sites web conçus en Georgia : Georgia on my mind.

    Merci pour ton commentaire ;)

  8. Thanks for featuring my site, and apologies for my lack of French! For your own interest, the font I used for my main headings was BodoniFLF, a very attractive open source interpretation of the old classic. I would have just used the font embedded with @font-face, but I wanted the headings to be a bit special and incorporate textures and transparencies; hence the painfully large PNGs!
    .-= Dernier blog de D Bnonn Tennant : Are you losing conversions because of a high WF/SPP ratio? =-.

  9. D Bnonn Tennant > Aaaah it was « BodoniFLF », thanks for the information I didn’t know a free Bodoni existed, looks very good.
    Again all my respect for your very creative and absolutely great Website.
    You don’t have to appologize for your lack of french. I have proposed a translated article beacause I know that English is « THE » language.

    See you soon !

  10. Très bon article. Juste une précision concernant l’interlignage. Je trouve que c’est un élément aussi important que la taille de la police, sinon plus. Perso, je trouve que le minimum est plus proche de 1.5 que de 1.2.

    Je dirais que 1.2 ça marche bien pour du texte dans des colonnes étroites. Pour ma part, je commence à augmenter sensiblement la taille de mes polices à 13px ou 14px avec un interligne de 1.6.

    Pour rebondir sur l’utilisation du Verdana évoquée par Laurent, je pense que cette fonte a fait son temps : elle était très utilisée dans les années 2000 parce qu’à l’époque on mettait du 10px partout et à cette taille, Verdana est très lisible. Par contre, à 14px ou plus, c’est une vraie catastrophe visuelle ;)

  11. >Bruno salut ;)
    L’interligne est important c’est clair, le top est de savoir garder une ligne de base identique sur toutes les pages tout en conservant l’équilibre visuel.
    Si je ne me trompe pas je crois que c’est d’ailleurs ce que tu as fais sur ton blog.

    Concernant Verdana, en 16px on a un exemple et pas des moindres : Jackob Nielsen. Bon ok c’est quand même un peu de l’abus. hu hu :)

    —–

    >Lam : Hi friend ;) Thanks for coming ! Happy to know you like the article and if you have learn something it’s pretty cool :)

    See you soon on Aext ;)

  12. Hello,

    Bel article. Les principes décrits en première partie sont classiques mais ça ne fait pas de mal de les rappeler, surtout pour ceux qui n’ont pas encore lu articles et bouquins sur la question ou qui n’ont pas une grande expérience du webdesign.

    Pour ma part j’apprécie surtout les exemples, qui sont choisis avec goût (bon, pas fan du “design” de useit.com, j’estime pour ma part qu’un design graphique bien pensé améliorerait l’utilisabilité du site).

    Je reviens juste sur les principes décrits en première partie. Il me semble qu’il manque un critère essentiel: le contraste entre le texte et le fond. Le présent blog est un bon exemple de contraste un peu limite (environ 3.4:1 pour le texte et fond principal, en sachant que le minimum demandé par WCAG2 est 4.5:1), d’autant plus que le fond est texturé. En commençant à lire cet article, j’ai failli dégainer Firebug pour augmenter le contraste. :)
    Même si le cas particulier de ce site peut se discuter, il reste qu’un texte en gris clair sur fond blanc est beaucoup moins lisible qu’un texte en gris sombre sur le même fond blanc, par exemple. Donc le critère en lui-même doit être pris en compte.

  13. Hello Florent,
    merci de t’arrêter par ici et merci pour ton commentaire.
    Mea Culpa pour le « faites ce que je dis pas ce que je fais » je reconnais bien volontiers que ce site est très loin d’être un modèle de webdesign et cela me dérange de plus en plus mais je préfère focaliser mes efforts et mon temps ailleurs…
    Celà dit, je devrais peut-être quand même au moins ajuster la couleur de mon texte pour les raisons que tu évoques.

    J’aurais effectivement pu rajouter le contraste dans ma petite liste de début d’article car c’est un élément très important je te rejoins là dessus sans pb.
    Il existe un site qui est d’ailleurs super bien pour analyser les couleurs d’un site web c’est CheckMyColours qui calcule les ratios de contraste, luminosité etc.. sur une url donnée.

    Merci pour ton commentaire et à bientôt ;)

  14. Les sites que tu présentes sont très épurés et souvent très soignés. C’est loin de représenter ce qui se fait habituellement. Débarrassé des 46 colonnes, la pub, des bandeaux, des outils, des systèmes de navigation… et on peut se permettre de prendre ses aises sur toute la page.

    Pour ce qui est du site de Nielsen, il reconnaît que son site est « affreux et sans design ». Il profite de cet état de fait qui n’arrête pas d’alimenter des discussions sans fin sur le rapport entre ergonomie et design. C’est en quelque sorte devenu une marque de fabrique.

    ps: merci pour cette recherche conséquente. Sympa cet effet du choix de la langue (j’ai cliqué plusieurs fois dessus rien que pour voir l’effet ^^)

  15. Il manque dans ton article une partie sur les couleurs de contraste, par exemple eviter de mettre du texte marron beige sur un fond marron beige clair… ;)

    De plus ta typo aurait été plus lisible avec un corps plus gras et je ne parle pas de letter-spacing qui évite d’avoir trop de blanc entre les mots :)

    (oups je publie quand même mais je viens de voir que mon idée rejoint le commentaire précédent)
    .-= Dernier blog de keusta : Core Xplosion =-.

  16. > Katsoura : merci ! Oui les sites que je présente dans ma petite liste possèdent tous un design particulièrement minimaliste et très soigné. Comme le remarquait Laurent Desmontiers dans son commentaire, tout est affaire d’harmonie. Si le webdesigner accorde une grande place à la lisibilité du contenu dès la conception, alors tout sera construit en conséquence et le site sera surement très réussi.
    Merci pour ton commentaire

    > Keusta : Bon, je m’attendais un peu à avoir des commentaires dans ce genre et je m’étonne même de n’en avoir eu plus tôt. TU AS RAISONS, j’ai créé ce blog il y a quelques temps maintenant et je ne l’ai jamais amélioré.
    Partant de ça, est que le fait d’avoir un blog dont le contenu manque de lisibilité m’empêche de faire un article sur la lisibilité des sites web? Je suis 100% d’accord sur le fait que c’est un peu « moyen » mais bon j’avais envie de partager un peu quoi :)

    Merci quand même de d’être arrête ici :)

  17. Ping : Lisibilité des sites web, font-size : 100% – 16px | All For Design » Web Design

  18. Ping : links for 2010-03-29

  19. « le fait d’avoir un blog dont le contenu manque de lisibilité m’empêche de faire un article sur la lisibilité ? »

    Tu y vas fort. Comme je te l’ai déjà écrit, ton blog est une petite merveille graphique. Dans son ensemble, on sent une bonne maîtrise des outils et un sens particulier de l’esthétisme. Il y a un bon travail sur la mise en page, la gestion des blancs et la typo. Alors, oui il est perfectible, oui il reste des petites corrections comme le contraste texte/fond mais – comme tu l’as dit – tu es conscient de ces défauts.

  20. J’ai enfin pris le temps de lire cet article, et je n’ai pas regretté. Pour info concernant l’interlignage, il me semble que Blueprint part du ratio 1.5, qui est assez tout-terrain.

  21. STPo, merci à toi ;)
    Je suis allé jeter un petit coup d’oeil aux pages de démo BluePrint et tu as bien raison, c’est un interligne de 1.5 qui a été choisi. C’est une valeur qu’on retrouve très souvent c’est clair, même Robert Bringhurst a opté pour ce choix dans « the elements of typographic style applied to the web« .
    Tiens j’y pense, il y a un bon article sur « A List Apart » qui propose une petite étude sur les unités à choisir pour la typo dans les css (em/px/%).

    Merci d’avoir pris le temps de venir par chez moi ;)
    A bientôt.

    ps : je suis retourné sur ton blog et je suis vraiment impressionné par la précision dans la réalisation… Tout est nikel, parfaitement aligné, texturé, très détaillé… Vraiment du superbe travail..clap clap… :)

  22. Ping : Les codes de la Typographie #1 - Structure et vocabulaire de la lettre | BlogduWebdesign

  23. Ping : Le Kit du parfait Webdesigner

  24. Bonjour,

    Je viens de relire cet article, et ses commentaires, avec beaucoup d’intérêt.

    Il y a aussi un autre point non négligeable pour la lisibilité d’une page Web : le choix des couleurs. le contraste entre les couleurs de fond et celles du texte est particulièrement important… et pour ce blog, mon impression est confirmée par l’extension WCAG Contrast checker https://addons.mozilla.org/fr/firefox/addon/7391/ le contraste n’est pas suffisant ;-)

    Amicalement,
    Monique
    .-= Dernier blog de Monique : Atelier Paris-Web- les handicaps cognitifs =-.

  25. Hello @Monique,
    Merci d’être passée par ici !
    Effectivement il n’y a pas que le contraste qui pose problème sur ce blog… La v2, en cours de réalisation, sera très différente mais bien plus en phase avec ma façon de concevoir le web aujourd’hui : focus sur le contenu !
    Merci pour ton commentaire, content que cet article t’ai plu.
    A bientôt !

  26. Bonjour,

    Je travaille sur une appli sur iPad/iPhone qui permet de lire des articles d’histoire (25-35mn par article).

    J’aurais aimé avoir des conseils de typo pour ma version iPhone.
    J’ai une largeur de colonne de 300px (4.5cm) et j’hésite entre texte justifié ou texte aligné à gauche. Sachant que je peux avoir les césures (-webkit-hyphens: auto;) et que j’utilise la police Palatino.

    Mes questions seraient donc : quelle taille de police, césure ou pas, aligné ou pas, agrandir l’espace entre les lignes et entre les lettres ?
    J’y connais pas grand chose d’ou mes questions un peu bateau…
    (Si tu as un iPad l’application s’appelle Une Touche d’Histoire)

  27. Hello cedric,

    J’ai l’impression qu’une durée de lecture de 25-35min sur un Iphone doit être assez fatiguante. Autant sur un Ipad il n’y a pas de pb mais sur un Iphone c’est plus difficile.

    Pour compenser cela il faudra vraiment mettre le paquet sur le confort de lecture : hauteur d’x / interlignage et éviter les sources de polution visuelle. Focus sur le contenu !

    Si tu prends Palatino tu peux essayer un couple 15/22 (approximativement 45 signes par ligne dans ton cas) voir 16/24 (texte plus lisible mais plus de retour à la ligne donc potentiellement + fatiguant pour le lecteur).

    Je ne me prononcerais pas sur la propriété css hyphens que je ne connais pas assez mais en général on préfère ne pas justifier le texte pour éviter les pb… Fer à gauche tout simplement.

    Pour ce qui me concerne je ne modifie pas l’interlettrage pour les bas de casse (laissons cela aux typographes qui ont déjà pensé à tout) mais l’augmente parfois (souvent même) pour les capitales.

    Concernant l’app Ipad j’aurais peut-être augmenté un peu (très légèrement) l’interlignage et augmenté l’espace entre les sous-sections pour mieux dégager les différentes parties. Les sous-titres me semble un petit trop collés aux paragraphes qui les précèdent.
    J’aurais également laissé les valeurs d’interlettrage à 0 pour les paragraphes. Sauf erreur de ma part (ce qui est tt à fait possible) on dirait que tu as augmenté cette valeur, j’ai l’impression qu’il y a bcp d’espace entre les lettres mais je me trompe peut-être.

    Bon courage pour le dev

  28. Merci beaucoup pour ces conseils. J’ai essayé de faire ce que je pouvais avec ma maitrise de css. Tu me diras ce que tu en penses (sortie prévu d’ici ~10 jours)

  29. Ping : Lisibilité des sites web, font-size : 100% – 16px | All For Design « la bibliothèque, et veiller

  30. Ping : Refonte fiche produit Pimkie « Fauveauxm

  31. Bonjour,
    Oui tout à fait d’accord avec cet article, généralement les textes sont souvent trop petit dans les sites web et sur les écrans… Pour le confort et la fatigue des yeux il est important d’avoir des textes lisible pour tous, ça devrait faire parti des standards et de l’ergonomie du web!

  32. Ping : Le Kré-veille du 10 septembre |Le krédaction

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

CommentLuv badge