Stop Arial 11px ! - commentaires Stop Arial 11px ! 2017-10-04T09:07:59Z http://romy.tetue.net/stop-arial-11px#forum7448 2017-10-04T09:07:59Z <p>Les px (pixel) ça n'impose pas une taille sur le support d'affichage.<br class="manualbr" />Les écrans actuels ont une densité de pixels allant de 70 à 280 px/pouce (px/in). Donc 11 px ça peut faire de de 1 mm a 4 mm (de haut).<br class="manualbr" />C'est totalement pas ergonomique de parler en px...<br class="manualbr" />Le mieux est de fixer une taille en mm et de laisser le client fixer la taille de police. <br class="manualbr" />Cela se rapproche des pratiques en imprimerie, et c'est bien normal car les écrans deviennent des supports à densité variable.<br class="manualbr" />Il y a les em et les pt pour définir des tailles de police... lire cet article :<br class="manualbr" /><a href="https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/" class="external external auto" rel="nofollow external">https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/</a></p> Stop Arial 11px ! 2014-07-19T15:03:55Z http://romy.tetue.net/stop-arial-11px#forum6015 2014-07-19T15:03:55Z <p>Arial ? En même temps c'est la police que Google utilise. En 13px.</p> Stop Arial 11px ! 2014-01-09T14:17:59Z http://romy.tetue.net/stop-arial-11px#forum5625 2014-01-09T14:17:59Z <p><span class="spip_document_2526 spip_documents right" style="float:right;"> <img src="http://romy.tetue.net/IMG/png/fnac-20140109.png" alt="" width="164" height="138" /></span><q>wow, font-size de 10px sur le site de la Fnac</q>, <a href="https://twitter.com/mauriz/status/421284723722571776" class="external" rel="external">s'étonne @mauriz</a>, début 2014…</p> Stop Arial 11px ! 2013-10-07T09:55:16Z http://romy.tetue.net/stop-arial-11px#forum5386 2013-10-07T09:55:16Z <p>Salut Romy !</p> <p>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é : <a href="http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px/" class="external external auto" rel="nofollow external">http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px/</a></p> <p>Bises et à bientôt ! :)</p> Stop Arial 11px ! 2012-11-05T06:14:27Z http://romy.tetue.net/stop-arial-11px#forum4198 2012-11-05T06:14:27Z <p>D'accord avec l'article, sauf au sujet du Verdana : franchement je ne suis pas fan du tout...</p> Stop Arial 11px ! 2012-07-05T13:17:03Z http://romy.tetue.net/stop-arial-11px#forum3878 2012-07-05T13:17:03Z <p>Bonjour,</p> <p>Nous sommes le 5 juillet 2012... rien de changé !<br class="manualbr" />J'ai même l'impression que le mouvement s'est emballé :-(</p> <p>Je viens d'ailleurs de lancer un coup de gueule sur <a href="https://twitter.com/webatou/status/220853065337667584" class="external" rel="external">Twitter</a></p> <p>Amicalement,<br class="manualbr" />Monique</p> Stop Arial 11px ! 2012-03-15T22:45:01Z http://romy.tetue.net/stop-arial-11px#forum4228 2012-03-15T22:45:01Z <p>Google vient de mettre en ligne une police de caractères similaire à Helvetica, <strong>Roboto</strong>, conçue pour Android 4.0 Ice Cream Sandwich :</p> <ul class="spip"><li> <a href="http://developer.android.com/design/style/typography.html" class="external" hreflang="en" rel="external">Typography</a> Android Developers</li> <li> <a href="http://theunderstatement.com/post/11645166791/roboto-vs-helvetica" class="external" hreflang="en" rel="external">Roboto vs. Helvetica</a>, the understatement</li> </ul> Stop Arial 11px ! 2012-02-14T10:36:07Z http://romy.tetue.net/stop-arial-11px#forum3357 2012-02-14T10:36:07Z <p>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...</p> Stop Arial 11px ! 2012-02-14T10:31:51Z http://romy.tetue.net/stop-arial-11px#forum3356 2012-02-14T10:31:51Z <p>Moi je le trouve très lisible, ton article en 11px ! J'ai tout lu d'une traite et j'ai tout compris !<br class="manualbr" />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.<br class="manualbr" />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...</p> <p>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 » !</p> <p>Merci pour l'article et bravo pour ton site très intéressant (et pas mal fait du tout).</p> Stop Arial 11px ! 2011-12-18T13:15:11Z http://romy.tetue.net/stop-arial-11px#forum3217 2011-12-18T13:15:11Z <p>J'utilise du Georgia ou du Verdana et je suis tout à fait d'accord avec ton article</p> Stop Arial 11px ! 2011-05-24T15:52:38Z http://romy.tetue.net/stop-arial-11px#forum2858 2011-05-24T15:52:38Z <p>Intuitivement j'avais opté, sur mon site, pour du Georgia il y a des années de ça et j'y suis toujours... <br class="manualbr" />Merci pour ce billet.</p> Stop Arial 11px ! 2011-02-21T11:03:53Z http://romy.tetue.net/stop-arial-11px#forum2675 2011-02-21T11:03:53Z <p>Je trouve l'article vraiment intéressant.<br class="manualbr" />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 ^</p> Stop Arial 11px ! 2011-02-08T21:09:51Z http://romy.tetue.net/stop-arial-11px#forum2643 2011-02-08T21:09:51Z <p>merci enfin quelqu'un qui le dit avec force arguments</p> Stop Arial 11px ! 2011-01-20T16:45:03Z http://romy.tetue.net/stop-arial-11px#forum2612 2011-01-20T16:45:03Z <p>@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.<br class="manualbr" />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)<br class="manualbr" />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.</p> Stop Arial 11px ! 2011-01-19T20:09:56Z http://romy.tetue.net/stop-arial-11px#forum2611 2011-01-19T20:09:56Z <p>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.</p> Stop Arial 11px ! 2011-01-19T10:34:35Z http://romy.tetue.net/stop-arial-11px#forum2609 2011-01-19T10:34:35Z <p>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...</p> Stop Arial 11px ! 2011-01-19T10:17:28Z http://romy.tetue.net/stop-arial-11px#forum2608 2011-01-19T10:17:28Z <p>Ah ah on se croirait sur <a href="http://www.pcinpact.com/" class="external external auto" rel="nofollow external">www.pcinpact.com</a> ;)</p> Stop Arial 11px ! 2011-01-14T09:27:16Z http://romy.tetue.net/stop-arial-11px#forum2601 2011-01-14T09:27:16Z <p>@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 ?</p> Stop Arial 11px ! 2011-01-14T07:52:07Z http://romy.tetue.net/stop-arial-11px#forum2600 2011-01-14T07:52:07Z <p>« 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). »</p> <p>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.</p> <p>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.</p> Stop Arial 11px ! 2011-01-14T06:59:17Z http://romy.tetue.net/stop-arial-11px#forum2599 2011-01-14T06:59:17Z <p>Bravo pour votre article. Même avec des lunettes, j'ai du mal à le lire.</p> Stop Arial 11px ! 2011-01-13T19:43:50Z http://romy.tetue.net/stop-arial-11px#forum2597 2011-01-13T19:43:50Z <p>@Eric :<br class="manualbr" />> Pourquoi des pt ?<br class="manualbr" />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.</p> Stop Arial 11px ! 2011-01-13T16:28:40Z http://romy.tetue.net/stop-arial-11px#forum2596 2011-01-13T16:28:40Z <p>Peut-on aussi faire formuler un décret pour interdire ou au moins sanctionner sévèrement l'utilisation de la police comic ?</p> <p>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.<br class="manualbr" />Verdana a certes des qualités plus « écran » qu'Arial, mais au risque de passer pour un intégriste, ça reste une police microsoft.</p> <p>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.</p> Stop Arial 11px ! 2011-01-13T15:26:08Z http://romy.tetue.net/stop-arial-11px#forum2595 2011-01-13T15:26:08Z <p>@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).</p> <p>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.</p> <p>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.</p> <p>Lâchez prise ! Et ce n'est pas une question d'accessibilité juste de profiter de tout ce qu'apporte notre média.</p> <p>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.</p> Stop Arial 11px ! 2011-01-13T15:16:42Z http://romy.tetue.net/stop-arial-11px#forum2594 2011-01-13T15:16:42Z <p>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 !</p> <p>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.</p> <p>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.</p> Stop Arial 11px ! 2011-01-13T15:11:20Z http://romy.tetue.net/stop-arial-11px#forum2593 2011-01-13T15:11:20Z <p>pas vu le final, je me suis arrêtée avant because mal aux yeux ;. la démonstration est donc réussie.</p> Stop Arial 11px ! 2011-01-13T15:02:24Z http://romy.tetue.net/stop-arial-11px#forum2592 2011-01-13T15:02:24Z <p>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<br class="manualbr" />vu dans le CSS :<br class="manualbr" />Styles incorporés dans cette page<br class="manualbr" /><code>body { font-size: 11px !important; font-family: Arial !important; }</code></p> Stop Arial 11px ! 2011-01-13T14:56:46Z http://romy.tetue.net/stop-arial-11px#forum2591 2011-01-13T14:56:46Z <p>Ca y est, j'ai les yeux qui piquent. Merci pour cet excellent billet. <br class="manualbr" />courage !</p> Stop Arial 11px ! 2011-01-13T14:06:37Z http://romy.tetue.net/stop-arial-11px#forum2588 2011-01-13T14:06:37Z <p>Rien lu, écrit trop petit. :p</p> Stop Arial 11px ! 2011-01-13T12:44:34Z http://romy.tetue.net/stop-arial-11px#forum2587 2011-01-13T12:44:34Z <p>Merci pour ce billet bien complet, au complément apporté par Florent près.<br class="manualbr" />Je me suis fait avoir comme un bleu... ;-) <a href="http://twitter.com/#!/nhoizey/statuses/25528132765229056" class="external external auto" rel="nofollow external">http://twitter.com/#!/nhoizey/statuses/25528132765229056</a></p> Stop Arial 11px ! 2011-01-13T12:33:27Z http://romy.tetue.net/stop-arial-11px#forum2586 2011-01-13T12:33:27Z <p>Et puis ce serait sympa de mettre les commentaires en dofollow...</p> Stop Arial 11px ! 2011-01-13T12:08:40Z http://romy.tetue.net/stop-arial-11px#forum2585 2011-01-13T12:08:40Z <p>Une dernière remarque (dans un deuxième commentaire car la limite à 1500 caractères m'a envoyé balader) : <strong>ce serait vachement bien si on pouvait utiliser des points en CSS</strong>. 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.</p> Stop Arial 11px ! 2011-01-13T12:07:48Z http://romy.tetue.net/stop-arial-11px#forum2584 2011-01-13T12:07:48Z <p>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).</p> <p>La formule pour calculer la correspondance entre points et pixels <i>pour un écran donné</i> : 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.)</p> Stop Arial 11px ! 2011-01-13T12:06:10Z http://romy.tetue.net/stop-arial-11px#forum2583 2011-01-13T12:06:10Z <p>> 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.</p> <p>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.<br class="manualbr" />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.<br class="manualbr" />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.<br class="manualbr" />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 :-)</p> Stop Arial 11px ! 2011-01-13T12:06:08Z http://romy.tetue.net/stop-arial-11px#forum2582 2011-01-13T12:06:08Z <p>epic fail :)</p> Stop Arial 11px ! 2011-01-13T12:00:31Z http://romy.tetue.net/stop-arial-11px#forum2581 2011-01-13T12:00:31Z <p>Belle leçon, si l'article n'était pas lui même en arial 11px. :D</p>