Ce n’est pas un secret de dire que la typographie est un domaine qui me passionne. Et je ne suis pas le seul à m’y intéresser de près … De nombreux web designers sont dans mon cas et le « cancer » se propage… Mon collègue et ami Francis Chouquet s’est fait happer à son tour.

Le site Beautiful Type est tout simplement né de cette passion pour la typo que nous partageons avec Francis.

Que trouve t’on sur Beautiful Type ?

La ligne éditoriale du site sera dirigée par nos coups de coeur respectifs pour des travaux typographiques divers : print, web, illustrations, logos, posters etc. la passion n’a pas de limite :). Vous n’y trouverez pas d’articles, mais des visuels (accompagnés des sources bien entendu) mettant à l’honneur la belle typographie.

Nous avons également inclu une page Links où une liste de sites web en rapport avec le sujet vous attend et une page Books où vous trouverez une liste d’ouvrages de qualité.

Et côté technique ?

Nous avons donc choisi d’utiliser Tumblr pour sa grande simplicité (en espérant que les soucis de connexion ne seront pas trop problématiques…) et avons donc conçu un thème spécifique à nos besoins.

Le site est codé en HTML5 / CSS3 et nous utilisons Typekit pour servir Angie STD de Jean-François Porchez suivie des plus classiques : Optima, Candara et MgOpen Cosmetica.

Quelques screenshots pour finir

Homepage

Page article

Page books

Page links

Page about

En conclusion

Voici donc une belle collaboration qui s’achève. J’ai pris beaucoup de plaisir à travailler avec toi Francis et j’espère que nous aurons d’autres occasions de bosser ensemble. J’espère maintenant que vous serez nombreux à venir visiter notre nouveau site Beautiful Type!

Ah oui j’oubliais… Nous sommes aussi sur Twitter : @bftype !

This is not a secret that typography is a field that fascinates me. And I’m not the only one interested in it closely … Many web designers are in my case and the « typo-cancer » is spreading … My colleague and friend Francis Chouquet became caught up in turn.

The website Beautiful Type is born from this passion with Francis and will allow us to centralize the information and share it with you

What kind of content will you find on Beautiful Type ?

The editorial line will be led by our respective favorites for various typographic work: print, web, graphics, logos, posters etc.. Passion has no limits:). You will not find articles, but visuals (with sources of course) honoring the beautiful typography.

We also included a Links page where a list of websites related to the subject awaits you and a page where you will find Books with a list of quality books.

About the technical side…

We’ve decided to use Tumblr for its simplicity (hoping that rate limits and downtimes will not be too problematic …) and have designed a theme specific to our needs.

The site is coded in HTML 5 / CSS3 and we use to serve Typekit to serve Angie STD by Jean-François Porchez followed by the more classical : Optima, Candara et MgOpen Cosmetica.

Finally some screenshots

Homepage

Article page

Books page

Links page

About page

In conclusion…

Here is a beautiful collaboration that comes to the end. I really enjoyed working with you Francis, and hopefully we’ll have other opportunities to work together. I hope now that many of you will visit our new site Beautiful Type ! Oh yes I forgot … We’re also on Twitter: @bftype !

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 :

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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

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

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

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

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, 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 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

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

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

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 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

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 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

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.