Stop Arial 11px !

À bas les chiures de mouches !

13 janvier 2011,
par Romy Têtue

Mots-clefs associés à cet article :

Cette page est exceptionnellement en Arial 11px, pour servir le propos. J’espère que vous me pardonnerez, car ce choix est déplorable pour la lisibilité à l’écran, tant par la taille que par la police. En 2011, prenons la saine résolution d’éradiquer le 11px !

Bien des graphistes déplorent la pauvreté typographique du Web... Mais pourquoi sont-ils si nombreux à nous servir et resservir de l’Arial de petite taille, comme s’il n’y avait pas mieux ? À croire qu’ils veulent se venger de leur frustration sur les internautes, qui plissent des yeux pour déchiffrer leurs pattes de mouches. Car ce choix est déplorable pour la lisibilité, tant par la taille que par la police.

Augmentez la taille : laissez à 100 % !

Je ne compte plus le nombre de maquettes graphiques que j’ai du intégrer avec de l’Arial en corps de texte principal de 11 pixels, voire 10 px — en allant même jusqu’à du 9 à 8 px pour les petites lignes. Je n’ai jamais compris cette obsession de petits corps de textes. Un créa a bien voulu m’expliquer : « c’est plus chic quand c’est écrit petit ». Ça ne m’a pas convaincue. Écrire petit permet surtout d’économiser encre et papier. Mais il est inutile de se restreindre ainsi sur le Web où les pages sont de dimensions infinies.

Je suppose que beaucoup appliquent 11 pixels à l’écran par habitude du nombre, parce qu’ils travaillent en 11 points sur papier. En réalité un texte imprimé en 11pt correspondrait à vue de nez, pour un confort de lecture équivalent, à un corps de texte de près de 16px sur un écran (cf. :  16px : trop grand ?). Ça tombe bien, c’est la valeur par défaut des navigateurs. Ce n’est certainement pas un hasard. Laissons donc le texte s’étaler en 100% (ou 1em) plutôt que de le réduire si radicalement !

Certes, beaucoup d’entre nous, tant créas, geeks qu’utilisateurs, trouvent cela trop gros. C’est certainement par manque d’habitude : les textes correctement calibrés pour l’écran, trop rares, ne nous sont pas familiers. Pourtant dès qu’on fait l’essai avec un corps de texte sensiblement plus gros, le confort de lecture est tellement amélioré qu’on ne prête plus attention à la typo, qui facilite la lecture au lieu de la freiner. Personne ne s’en plaint. À l’inverse, lorsqu’il est écrit petit, le texte réclame effort et concentration, freinant la lecture et gênant les utilisateurs.

Arial, pire que les autres...

Conçue pour être un substitut meilleur marché de la belle Helvetica, Arial est un caractère qui se remarque très peu et qui n’évoque pas grand chose. Si vraiment vous ne pouvez faire autrement, déclarez au moins dans cet ordre : Helvetica, Arial, sans-serif; plutôt que l’inverse.
C’est la police des débutants et des fainéants qui n’ont pas cherché bien loin : elle jouit d’une grande popularité parce qu’elle est inclue dans Windows, le système d’exploitation de Microsoft, qui incorpore pourtant d’autres typographies sans-serif depuis 2006, comme Calibri, Corbel ou Candara.

Arial et Verdana

C’est une police naturellement petite. Une lettre de 10em en Arial ne fait pas la même taille qu’une lettre de 10em en Verdana : la première est plus petite que la seconde. Évitons donc cette erreur, pourtant très fréquente sur le Web, qui consiste à les proposer comme sœurs de la même famille — bannissons la sempiternelle « font-family: Verdana, Arial, Helvetica, sans-serif; » ! —, car le remplacement de l’une par l’autre modifiera trop sensiblement l’équilibre de la page.

C’est même la plus petite des polices bâton courantes. Écrire en Arial 11px, c’est vraiment rechercher la miniaturisation typographique. La lisibilité réduite qui en résulte est parfois volontaire, quand c’est, par exemple, utilisé pour les mentions légales et autres informations contractuelles, pour éviter d’être emmerdé par les réclamations des internautes. Imaginez donc le message que vous faites passer en affichant l’intégralité de votre site dans cette taille !

Dernier argument pour abandonner la miniature : l’affichage à l’écran merdoie dans les petites tailles. En particulier, Arial est connue ne pas supporter le gras dans les petites tailles. Pour être précis : sous Windows XP, sans lissage des caractères, le Arial bold en corps 10px est affiché comme du Arial regular 10px. Bref, c’est pas gras. [1].

Privilégiez les polices conçues pour l’écran, comme Verdana

Pour du texte à lire à l’écran, mieux vaut éviter la Times et l’Arial. Par défaut sur Windows et présentes sur la plupart des ordinateurs, ces polices conviennent bien aux documents imprimés, mais ne sont pas adaptées à la lecture à l’écran.

Savez-vous qu’il existe des polices conçues spécialement pour être utilisées à l’écran, telles que Verdana, Trebuchet ou Georgia ? Celles-ci ont de plus l’avantage d’être présentes sur la plupart des systèmes d’exploitation. Alors, pourquoi s’en priver ? Si ça ne rend pas bien sur la maquette web que votre client valide, c’est que votre méthode de travail est inadaptée : quand cesserez-vous de lui présenter des impressions sur papier ? Une maquette graphique web se consulte dans le navigateur.

Exemples comparatifs rapides
À éviter à l’écran Meilleure lisibilité
Sans empattement (sans-serif) Arial 10px : Portez ce vieux whisky au juge blond qui fume

Arial 11px : Portez ce vieux whisky au juge blond qui fume

Arial 14px : Portez ce vieux whisky au juge blond qui fume

Verdana 10px : Portez ce vieux whisky au juge blond qui fume

Verdana 11px : Portez ce vieux whisky au juge blond qui fume

Verdana 14px : Portez ce vieux whisky au juge blond qui fume

À empattement (serif) Times 10px : Portez ce vieux whisky au juge blond qui fume

Times 11px : Portez ce vieux whisky au juge blond qui fume

Times 14px : Portez ce vieux whisky au juge blond qui fume

Georgia 10px : Portez ce vieux whisky au juge blond qui fume

Georgia 11px : Portez ce vieux whisky au juge blond qui fume

Georgia 14px : Portez ce vieux whisky au juge blond qui fume

Les polices adaptées à l’écran ont des caractères plus massifs. Elles sont courtes en jambes et ont un large œil de lettre ou « hauteur d’x » [2], pour améliorer leur lisibilité. C’est le cas de Georgia et Verdana, mais pas d’Arial ni du Times, dont l’œil est réduit et les lettres moins larges.

Mieux vaut privilégier les polices présentant des caractéristiques formelles favorables à la lecture à l’écran. Essayez par exemple Tahoma, qui est grosso-modo une version étroite de la Verdana et dont la chasse est proche de l’Arial. Également conçues pour l’écran, Geneva et la belle Lucida Grande, présentes sur MacOS, permettent d’étoffer la famille, en déclarant par exemple :

  • font-family: Verdana, Geneva, sans-serif;
  • font-family: 'Trebuchet MS', Tahoma, sans-serif;
  • font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif;

Répétez après moi : en 2011, on éradique Arial 11px !


Pour en savoir plus :


[1] Cf. : discussion : Pb affichage bold en arial, forum Alsacréations, août 2007.

[2] En typographie, la hauteur d’x (X-height) désigne l’espacement entre le jambage et la hampe d’une police d’écriture. Il s’agit de la hauteur de la lettre minuscule « x ».

Partagez cet article :

Voter pour cet artice sur hellocoton.fr Netvibes Del.ico.us

Vos commentaires

  • Le 13 janvier 2011 à 13:00, par julien En réponse à : Stop Arial 11px !

    Belle leçon, si l’article n’était pas lui même en arial 11px. :D

  • Le 13 janvier 2011 à 13:06, par roflcopter En réponse à : Stop Arial 11px !

    epic fail :)

  • Le 13 janvier 2011 à 13:06, par Emmanuel C. En réponse à : Stop Arial 11px !

    > Je n’ai jamais compris cette obsession de petits corps de textes. Un créa a bien voulu m’expliquer : « c’est plus chic quand c’est écrit petit ». Ça ne m’a pas convaincue.

    J’y vois deux raisons issues de l’imprimé : la gestion des blancs et le gris typographique d’une part et la contrainte de l’espace fini du papier.
    Pour la gestion du blanc et le gris typo, si la police est de petite taille, on pourra par exemple jouer sur de grandes marges (petit fond, grand fond etc.) et sur un interlignage plus important, aérant ainsi le texte. Composer un beau texte sur une belle feuille en balançant bien les masses dans l’espace.
    Ce point est complémentaire du second : l’espace fini du papier nécessite parfois d’écrire dans un corps plus petit afin de placer plus de texte sur une page. C’est d’ailleurs une raison d’être de l’italique : un corps plus fin et serré permettant de placer plus de texte sur une feuille.
    Autant ces raisons sont tout à fait valables dans l’imprimé (et dans une certaine mesure sur un écran), autant je partage entièrement ton avis Romy :-)

  • Le 13 janvier 2011 à 13:07, par Florent Verschelde En réponse à : Stop Arial 11px !

    Merci pour ce très bon article. Juste pour donner une précision : l’équivalence entre taille du texte en points (et je parle de points physiques, absolus, pas des correspondances habituelles dans tel ou tel logiciel !) et taille de texte en pixels dans le navigateur va dépendre de la résolution de l’écran. À l’heure actuelle ça varie entre 80ppi sur des ordinateurs de bureau (voire moins dans certaines configurations) et jusqu’à 200ppi sur certains périphériques mobiles (en laissant de côté l’iPhone4 et son Retina Display). Sur mon iMac 20 pouces, 11pt correspondent à peu près à 15px, et je trouve le Arial 14px très lisible et confortable. Sur mon portable Dell 13 pouces, 11pt correspondent à peu près à 17.5px, et le Arial 14px y est déjà assez petit (lisible, mais pas aussi confortable).

    La formule pour calculer la correspondance entre points et pixels pour un écran donné : taille visée en points ÷ 72 × résolution réelle de l’écran en ppp. (Par exemple sur iPhone 1-3 : 12pt ÷ 72 × 163 ≈ 27px. Vu que les périphériques mobiles ont maintenant des résolutions importantes, et que les sites continuent à demander du 11 ou 12px, il me semble que certains navigateurs mobiles agrandissent automatiquement la taille du texte et utilisent une taille de texte par défaut supérieure à 16px. Pour Safari Mobile il y a des règles assez complexes et casse-gueule, de mémoire.)

  • Le 13 janvier 2011 à 13:08, par Florent Verschelde En réponse à : Stop Arial 11px !

    Une dernière remarque (dans un deuxième commentaire car la limite à 1500 caractères m’a envoyé balader) : ce serait vachement bien si on pouvait utiliser des points en CSS. Malheureusement, on ne peux pas. Pour que ça marche, il faudrait que les navigateurs calculent la correspondance en pixels (valeur calculée de font-size) en prenant en compte la résolution de l’écran, et à ma connaissance il n’y a que Firefox qui le fasse. Ensuite, il faut que le système d’exploitation informe le navigateur sur la résolution réelle de l’écran, et à ma connaissance il n’y a que Linux qui le fait, tous les autres systèmes déclarent une résolution fictive de 72 ou 96 ppp. Dommage.

  • Le 13 janvier 2011 à 13:33, par Webdesign et cassoulet En réponse à : Stop Arial 11px !

    Et puis ce serait sympa de mettre les commentaires en dofollow...

  • Le 13 janvier 2011 à 13:44, par Nicolas Hoizey En réponse à : Stop Arial 11px !

    Merci pour ce billet bien complet, au complément apporté par Florent près.
    Je me suis fait avoir comme un bleu... ;-) http://twitter.com/#!/nhoizey/statuses/25528132765229056

  • Le 13 janvier 2011 à 15:06, par Nico En réponse à : Stop Arial 11px !

    Rien lu, écrit trop petit. :p

  • Le 13 janvier 2011 à 15:56, par cybie En réponse à : Stop Arial 11px !

    Ca y est, j’ai les yeux qui piquent. Merci pour cet excellent billet.
    courage !

  • Le 13 janvier 2011 à 16:02, par Sophie Ménart En réponse à : Stop Arial 11px !

    bon article, il est juste dommage que les caractères soient trop petits pour moi, et que la fonte utilisée soit... Arial 11 px
    vu dans le CSS :
    Styles incorporés dans cette page
    body { font-size: 11px !important; font-family: Arial !important; }

  • Le 13 janvier 2011 à 16:11, par Sophie Ménart En réponse à : Stop Arial 11px !

    pas vu le final, je me suis arrêtée avant because mal aux yeux ;. la démonstration est donc réussie.

  • Le 13 janvier 2011 à 16:16, par Stéphane Deschamps En réponse à : Stop Arial 11px !

    Tout cela est bel et bon, mais une autre raison vient sans doute, pour ceux qui bossent dans le domaine depuis longtemps, des petits écrans qu’on avait il y a 10 ans. On était le roi du monde quand on avait du 1280 !

    Donc de mémoire la majorité des gens était en 800*600, et du coup il était fréquent de le faire en 10px sans que ce soit très handicapant. Cela dit j’ai toujours (à l’époque) défendu soit le 10 soit le 12, parce que le 11 posait des problèmes de crénelage etc.

    Et enfin, pour la petite histoire, la dernière fois que j’ai refait mon site, où je mets un bête 100%, plein de gens (y compris du milieu) ont trouvé les polices trop grosses. C’est marrant, question de culture et d’habitude sans doute.

  • Le 13 janvier 2011 à 16:26, par Eric D. En réponse à : Stop Arial 11px !

    @Florent : Pourquoi des pt ? Si c’est juste pour fixer une taille « réelle », les navigateurs mobiles commencent déjà à faire ça avec les px (un px CSS peut faire plusieurs px écran).

    J’ai l’impression que la majorité des intégrateurs font du pixel alors que leur outil est quasiment vectoriel. Ca peut fonctionner, mais si dans notre tête on fonctionne toujours par mesure et pas par proportion, ça sera toujours frutrant.

    La taille, 8, 11, 16 ou 24px, n’est pas importante. La plupart des largeurs et des gouttières sont ou devraient être calculées en fonction de la hauteur d’une ligne, de la taille d’un caractère. Il restera des contraintes pixels pour l’insertion d’images non vectorielles et pour les tailles d’écran, mais la majorité des éléments doivent être indépendants de la taille d’affichage. Dans 11px ce n’est pas tant le 11 qui me gêne que le px.

    Lâchez prise ! Et ce n’est pas une question d’accessibilité juste de profiter de tout ce qu’apporte notre média.

    Par contre, pas de Verdana s’il vous plait. Cette police est « trop » optimisée pour l’écran et les petites tailles. Elle semble toujours avoir une taille ou deux de plus par rapport aux autres. Quand elle n’est pas dispo sur l’OS, les alternatives sembleront « petites », illisibles si en plus vous avez déjà réglé votre Verdana « petite » parce qu’elle est très lisible.

  • Le 13 janvier 2011 à 17:28, par Vincent M En réponse à : Stop Arial 11px !

    Peut-on aussi faire formuler un décret pour interdire ou au moins sanctionner sévèrement l’utilisation de la police comic ?

    Sinon comme le rappel Florent, malheureusement en dehors des navigateurs adoptant correctement le HTML5 on se retrouve contraints a des bricolages pourris faisant le pari que les bonnes fontes sont installées chez le client.
    Verdana a certes des qualités plus « écran » qu’Arial, mais au risque de passer pour un intégriste, ça reste une police microsoft.

    Il y a des fonderies ou des repères (genre openfontlibrary) proposant des fontes libres de qualité, et l’intérêt de leur libération est de pouvoir intégrer dans le code la possibilité de faciliter et automatiser leur chargement et installation côté client.

  • Le 13 janvier 2011 à 20:43, par Emmanuel Clément En réponse à : Stop Arial 11px !

    @Eric :
    > Pourquoi des pt ?
    parce que c’est l’unité de mesure la plus utilisée sur le papier et que l’on se figurera plus facilement le corps. Un peu comme en photographie ou on continue d’utiliser les équivalences avec le 24x36mm argentique pour mieux se figurer les focales d’objectifs.

  • Le 14 janvier 2011 à 07:59, par Kim En réponse à : Stop Arial 11px !

    Bravo pour votre article. Même avec des lunettes, j’ai du mal à le lire.

  • Le 14 janvier 2011 à 08:52, par Florent Verschelde En réponse à : Stop Arial 11px !

    « Pourquoi des pt ? Si c’est juste pour fixer une taille "réelle", les navigateurs mobiles commencent déjà à faire ça avec les px (un px CSS peut faire plusieurs px écran). »

    C’est effectivement pour fixer une taille absolue. Des mm ou autre unité absolue me contenteraient également. Mais attention : je ne veux pas de la gestion actuelle des unités absolues dans les navigateurs, qui est déplorable comme je le soulignais. Et non, les navigateurs mobiles ne commencent pas à le faire, il implémentent juste des correctifs et un système de « pixels CSS » théorique différent des pixels machine pour tenter d’afficher des textes lisibles ; c’est louable et bien vu, mais ce n’est pas ce que je demande.

    Une nuance en passant : les tailles de texte en absolu (redimensionnable par l’utilisateur, bien sûr) ce serait bien, mais ça ne prend pas en compte la distance entre les yeux et l’écran, qui sera plus importante sur un desktop que sur un mobile. C’est la limite des tailles absolues. Travailler en tailles relatives à une taille de texte par défaut fait donc sens, mais encore faut-il faire confiance au navigateur et au système pour définir une taille par défaut décente. Quand on voit que les navigateurs desktop sont tous bloqués à 16px, sans prendre en compte les différences entre les écrans qui peuvent varier du 70 au 150ppp, ça donne moyennement confiance.

  • Le 14 janvier 2011 à 10:27, par Eric D. En réponse à : Stop Arial 11px !

    @emmanuel : sauf que comme le dit Florent, tant que les écrans ne seront pas étalonnés, pt ne sera pas plus précis que px. Sur papier tu as besoin de définir une taille absolue, tu n’as pas le choix. Sur écran tu n’as pas besoin de fixer ou de t’occuper de cette taille. Pourquoi y importer des contraintes qui n’y sont pas natives ?

  • Le 19 janvier 2011 à 11:17, par Antwan En réponse à : Stop Arial 11px !

    Ah ah on se croirait sur www.pcinpact.com ;)

  • Le 19 janvier 2011 à 11:34, par Mr Peer En réponse à : Stop Arial 11px !

    Au risque de passer pour un gros troll : je suis le seul à penser que Verdana est très nettement moins lisible que Arial ? Son kerning est vraiment horrible...

  • Le 19 janvier 2011 à 21:09, par baroug En réponse à : Stop Arial 11px !

    Matthew Carter est un des plus grands typographes vivants, affirmer qu’une de ses œuvres puissent être techniquement défaillante est pour le moins étonnant. Le Verdana est clairement plus lisible à l’écran que l’Arial. Bon après, je trouve les deux polices très laides, mais c’est pas le débat.

  • Le 20 janvier 2011 à 17:45, par Emmanuel Clément En réponse à : Stop Arial 11px !

    @Eric D. Oui, je ne considérais pas la précision dans ma réponse, uniquement le fait que pour un graphiste, parler en point est… parlant :-) C’est l’unité de mesure que l’on utilise le plus couramment. Personne, ou presque, n’exprime plus les corps en pica, point didot, cm,… Du texte courant en corps 12, tout le monde voit ce que c’est.
    Ensuite, sur l’écran c’est la résolution qui permettra effectivement de retrouver la taille finale en point car elle se fait par rapport à une mesure fixe du monde « réel » : le pouce qui vaut 2.54cm (si l’on converti en cm)
    Le pixel c’est juste le PIcture ELement qui n’a que la taille qu’on veut bien lui donner, ou que l’on est capable de fabriquer, et ensuite le nombre de ces éléments que l’on va pouvoir caser dans un pouce.

  • Le 8 février 2011 à 22:09, par Morgane Castanier En réponse à : Stop Arial 11px !

    merci enfin quelqu’un qui le dit avec force arguments

  • Le 21 février 2011 à 12:03, par filnug En réponse à : Stop Arial 11px !

    Je trouve l’article vraiment intéressant.
    Un article (en anglais) intéressant de smashing magazine propose d’utiliser du 13 px comme étant la taille la plus adéquate à la lecture. Malheureusement, je ne l’ai pas sous la main ^

  • Le 24 mai 2011 à 17:52, par Laurent En réponse à : Stop Arial 11px !

    Intuitivement j’avais opté, sur mon site, pour du Georgia il y a des années de ça et j’y suis toujours...
    Merci pour ce billet.

  • Le 18 décembre 2011 à 14:15, par Saugrin Sonia En réponse à : Stop Arial 11px !

    J’utilise du Georgia ou du Verdana et je suis tout à fait d’accord avec ton article

  • Le 14 février 2012 à 11:31, par Charly En réponse à : Stop Arial 11px !

    Moi je le trouve très lisible, ton article en 11px ! J’ai tout lu d’une traite et j’ai tout compris !
    A partir du moment ou la règle du 450 px maximum pour la largeur des colonnes est respectée, le résultat est tout à fait lisible.
    C’est vrai qu’il existe une tradition chez nous graphistes du « petit=élégant », héritée de l’école suisse et du « Less is More » de Mies van der Rohe...

    Ceci dit je suis d’accord avec toi, le Verdana est sans doute à privilégier sur du 10 ou 11 px, mais sur du 14 je préfère quand même l’Arial : à une taille suffisamment lisible, ses caractères comportent quand même des proportions plus « sexy » !

    Merci pour l’article et bravo pour ton site très intéressant (et pas mal fait du tout).

  • Le 14 février 2012 à 11:36, par Charly En réponse à : Stop Arial 11px !

    J’ai aussi remarqué quelque chose : les personnes séduites par des petits textes sont souvent des hommes, tandis que les gros textes avec des caractères tout en rondeur séduisent plutôt les femmes, à méditer...

  • Le 15 mars 2012 à 23:45, par Romy Têtue En réponse à : Stop Arial 11px !

    Google vient de mettre en ligne une police de caractères similaire à Helvetica, Roboto, conçue pour Android 4.0 Ice Cream Sandwich :

  • Le 5 juillet 2012 à 15:17, par Monique En réponse à : Stop Arial 11px !

    Bonjour,

    Nous sommes le 5 juillet 2012... rien de changé !
    J’ai même l’impression que le mouvement s’est emballé :-(

    Je viens d’ailleurs de lancer un coup de gueule sur Twitter

    Amicalement,
    Monique

  • Le 5 novembre 2012 à 07:14, par Daria En réponse à : Stop Arial 11px !

    D’accord avec l’article, sauf au sujet du Verdana : franchement je ne suis pas fan du tout...

  • Le 7 octobre 2013 à 11:55, par Marie En réponse à : Stop Arial 11px !

    Salut Romy !

    Super cet article, je m’y réfère souvent. Je voulais juste te signaler que le lien vers l’article d’Aurélien a changé : http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px/

    Bises et à bientôt ! :)

  • Le 9 janvier à 15:17, par ? En réponse à : Stop Arial 11px !

    wow, font-size de 10px sur le site de la Fnac, s’étonne @mauriz, début 2014…

  • Le 19 juillet à 17:03, par Xoo En réponse à : Stop Arial 11px !

    Arial ? En même temps c’est la police que Google utilise. En 13px.

Un message, un commentaire ?


Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom