Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Améliorer la lisibilité typographique à l'écran

9,564 views

Published on

De nombreux sites sont difficiles à lire pour les internautes. N’êtes-vous pas souvent penché en avant sur votre chaise pour mieux lire à l’écran ? Il est pourtant assez simple et rapide d’améliorer cela.

Published in: Technology
  • Merci . Très bien fait et utile.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Remarquable. Le plus clair des guides graphiques pour publication sur internet.
    Encore !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Améliorer la lisibilité typographique à l'écran

  1. 1. Améliorer la lisibilité typographique à l’écran par Romy Duhem-Verdière 2013
  2. 2. Romy Duhem-Verdière Consultante web UX ergonomie et accessibilité Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  3. 3. 3 Les seniors : 1/3 des internautes français 85 % ont des problèmes de vue Sources : Ipsos, Datamonitor, Insee/Sesi Le boom des seniors tactiles : http://romy.tetue.net/962 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  4. 4. 4 8 à 12 % de la population mondiale serait dyslexique 8 à 10 % de la population masculine est daltonienne Source : OMS et Wikipédia Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  5. 5. 5 1. Respecter les règles de la langue 2. Pouvoir zoomer le texte 3. Ne pas justi!er 4. Augmenter l’interlignage 5. Largeur des lignes 6. Contraster 7. Police de caractères Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  6. 6. 6 Respecter les règles de la langue Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  7. 7. 7 UN GENDARME TUE Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  8. 8. Accentuer les capitales Accentuez les lettres capitales et majuscules : http://wiki.accede-web.com/notices/graphique-ergonomique/conserver-les- accents-sur-les-lettres-capitales 8 UN GENDARME TUÉ Lexique des règles typographiques en usage à l’Imprimerie nationale, page 12 Notice AcceDeWeb No 6.1 WCAG 2.0 No 3.1 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  9. 9. 9 FORTS DE LEURS CONQUÊTES, LES ROMAINS N’HÉSITAIENT PAS À GRAVER DES TEXTES SUR DE LA PIERRE. TOUT EST ÉCRIT EN CAPITALES SANS AUCUNE PONCTUATION. POUR GAGNER EN LISIBILITÉ, LES MOTS ÉTAIENT SÉPARÉS PAR UN POINT MÉDIAN. AU FUR ET À MESURE, LES LETTRES SE SONT PROGRESSIVEMENT DÉFORMÉES EN RAISON DE LA RAPIDITÉ D’ÉCRITURE. CE QUI A DONNÉ NAISSANCE AUX MINUSCULES QUE NOUS CONNAISSONS. La capitale dans le texte : http://www.ornicar.be/capitale-texte/ Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  10. 10. 10 Forts de leurs conquêtes, les Romains n’hésitaient pas à graver des textes sur de la pierre. Tout est écrit en capitales sans aucune ponctuation. Pour gagner en lisibilité, les mots étaient séparés par un point médian. Au fur et à mesure, les lettres se sont progressivement déformées en raison de la rapidité d’écriture. Ce qui a donné naissance aux minuscules que nous connaissons. Éviter les capitales Des minuscules sinon rien : http://www.graphemes.com/enews/41/41minuscule.html Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  11. 11. 11 Éviter les capitales Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  12. 12. 12 Pouvoir zoomer le texte Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  13. 13. 13 Pouvoir zoomer le texte à 200 % Critère AccessiWeb 2.2 No 10.4 [Argent] Test RGAA 2.2 No 7.13 [AA] Améliorer l’accessibilité par la typographie : http://www.pompage.net/ traduction/ameliorer-l-accessibilite-par-la-typographie Source : http://www.voyages-sncf.com/guide/accessibilite Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  14. 14. Laisser le texte à 100 % Relative readability, by Wilson Miner, 2008 http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/ 14 16px 11pt Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  15. 15. 16px/ 1.5 16px/ 1.5 14pt/ 21pt 16px/ 16px/ 20px 16px/ 1.5 1.6em/ 1.5 16px/ 15 16px/ 20px 16px/ 1.5 1.6em/ 1.5 16px/ Laisser le texte à 100 % Lisibilité des sites web, font-size : 100% – 16px : http://all-for-design.com/web- design/lisibilite-des-sites-web-font-size-100-16px/ Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  16. 16. Responsive Typography: The Basics, by Oliver Reichenstein, 2012 http://informationarchitects.net/blog/responsive-typography-the-basics/ 16 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013 Laisser le texte à 100 %
  17. 17. 17 Ne pas justi"er Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  18. 18. Le texte se justi"e-t-il ? http://www.ergologique.com/conseils/conseils.php?id_tip=818 18 Ne pas justi"er Critère AccessiWeb 2.2 No 10.9 [Or] Test RGAA 2.2 No 7.12 [AAA] Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  19. 19. 19 Augmenter l’interlignage Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  20. 20. 1.2 1.5 20 Augmenter l’interlignage à 1.5 Critère AccessiWeb 2.2 No 10.12 [Or] Test RGAA 2.2 No 7.17 [AAA] WCAG 2.0 No1.4.8 [AAA] Manifeste pour un interlignage minimum syndical : http://css.4design.tl/manifeste-pour-un-interlignage-minimum Source : http://www.le"garo.fr/international/20060906.WWW000000341_bush_prisonnie Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  21. 21. 21 Critère AccessiWeb 2.2 No 10.12 [Or] Test RGAA 2.2 No 7.17 [AAA] WCAG 2.0 No1.4.8 [AAA] Source : 7 Usability Mistakes That Will Kill Your Online Salesl http://blog.kissmetrics.com/7-usability-mistakes/ Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013 Espacer les paragraphes à 1.5
  22. 22. 22 8 façons simples d’améliorer la typographie dans vos designs : http:// www.pompage.net/traduction/8-facons-simples-d-ameliorer-la-typographie-dans- vos Rythme vertical Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  23. 23. 23 Largeur des lignes Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  24. 24. 24 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  25. 25. Source : Enlarge your police http://phollow.fr/2012/02/enlarge-your-police 25 60 à 80 caractères par ligne 66 Critère AccessiWeb 2.2 No 10.11 [Or] WCAG 2.0 No1.4.8 [AAA] Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  26. 26. Laisser 25 % à 50 % d’espace « blanc » sur chaque page Aérer l’information : http://www.ergologique.com/conseils/conseils.php?id_tip=17 Webdesign : di#cile de vendre du vide, et pourtant… http://blog.axe-net.fr/webdesign-di#cile-de-vendre-du-vide/ 26 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  27. 27. 27 La lecture facile à l’écran : http://www.uzine.net/article1738.html Ne craignez pas la verticalité de la page web Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  28. 28. 28 Source : http://www.ojr.org/ojr/stories/070312ruel/ Aérer facilite la compréhension Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  29. 29. 29 Source : http://www.ojr.org/ojr/stories/070312ruel/ Aérer facilite la compréhension Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  30. 30. 30 Contraster Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  31. 31. 31 Source : http://www.typogabor.com/typographie-analyse/pages/lisibilite- NauB_4.html Contraster su#samment Critère AccessiWeb 2.2 No 3.3 [Argent] WCAG 2.0 No1.4.3 [AA] Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  32. 32. 32 Outil : Colour Contrast Check Contrastes de texte : http://openweb.eu.org/127 Contraster su#samment Critère AccessiWeb 2.2 No 3.3 [Argent] WCAG 2.0 No1.4.3 [AA] Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  33. 33. Contraste négatif Contraste positif 33 Contraste et lisibilité : http://s.billard.free.fr/referencement/index.php? 2005/07/03/103-contraste-et-lisibilite Préférer un contraste négatif (dit « noir sur blanc ») Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  34. 34. 34 Préférer un fond blanc cassé Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  35. 35. 35 Source : http://www.fangpo1.com/ja/content/view/64/48/ Couleurs et lisibilité Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  36. 36. 36 Le contraste su#t-il ? Critère AccessiWeb 2.2 No 10.6.1 [Bronze] Test RGAA 2.2 No 7.10 [A] Un contraste su#t-il à distinguer un lien ? http://storify.com/tetue/la-couleur-su#t-elle-a-distinguer-un-lien Source : http://www.philippe-donnart.com/Lire-un-pdf-sur-Kindle.html Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  37. 37. 37 Combien identi!ez-vous de liens sur cette page ? Source : http://www.bouygues.com/developpement-durable/axes-strategiques/environne Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  38. 38. Rendre évident ce qui est cliquable Soulignez vos hyperliens ! http://romy.tetue.net/913 38 Critère AccessiWeb 2.2 No 10.6 [Bronze] Test RGAA 2.2 No 7.10 [A] Rendre évident ce qui est cliquable http://www.ergologique.com/conseils/conseils.php?id_tip=10 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  39. 39. 39 Police de caractères Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  40. 40. 40 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  41. 41. Préférer une police conçue pour l’écran CSS Typography: The Basics http://sixrevisions.com/css/css-typography-01/ Stop Arial 11px ! http://romy.tetue.net/stop-arial-11px 41 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  42. 42. 42 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013 Police de caractères pour les dyslexiques : http://opendyslexic.org Police pour les dyslexiques
  43. 43. Le site Garamond maltraite la typo http://romy.tetue.net/865 43 Prévoir des polices de substitution font-family: 'StempelGaramondW01-Ital'; font-family: 'StempelGaramondW01-Ital', Garamond, Georgia, serif; Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
  44. 44. Des questions ? Romy Duhem-Verdière http://romy.tetue.net/965 @tetue Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013

×