Améliorer
la lisibilité
typographique
à l’écran
par Romy Duhem-Verdière
2013
Romy Duhem-Verdière
Consultante web UX
ergonomie et accessibilité
Améliorer la lisibilité typographique — Romy Duhem-Verdi...
3
Les seniors :
1/3
des internautes français
85 %
ont des problèmes de vue
Sources : Ipsos, Datamonitor, Insee/Sesi
Le boo...
4
8 à 12 %
de la population mondiale
serait dyslexique
8 à 10 %
de la population masculine
est daltonienne
Source : OMS et...
5
1. Respecter les règles de la langue
2. Pouvoir zoomer le texte
3. Ne pas justi!er
4. Augmenter l’interlignage
5. Largeu...
6
Respecter les règles
de la langue
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
7
UN GENDARME TUE
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Accentuer
les capitales
Accentuez les lettres capitales et majuscules :
http://wiki.accede-web.com/notices/graphique-ergon...
9
FORTS DE LEURS CONQUÊTES, LES ROMAINS
N’HÉSITAIENT PAS À GRAVER DES TEXTES SUR
DE LA PIERRE. TOUT EST ÉCRIT EN CAPITALES...
10
Forts de leurs conquêtes, les Romains
n’hésitaient pas à graver des textes sur de la
pierre. Tout est écrit en capitale...
11
Éviter les
capitales
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
12
Pouvoir
zoomer le texte
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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’accessib...
Laisser
le texte
à 100 %
Relative readability, by Wilson Miner, 2008
http://wm4.wilsonminer.com/posts/2008/oct/20/relative...
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/
Laisse...
Responsive Typography: The Basics, by Oliver Reichenstein, 2012
http://informationarchitects.net/blog/responsive-typograph...
17
Ne pas justi"er
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Le texte se justi"e-t-il ?
http://www.ergologique.com/conseils/conseils.php?id_tip=818
18
Ne pas justi"er
Critère AccessiW...
19
Augmenter
l’interlignage
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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....
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 T...
22
8 façons simples d’améliorer la typographie dans vos designs : http://
www.pompage.net/traduction/8-facons-simples-d-am...
23
Largeur
des lignes
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
24 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Source : Enlarge your police
http://phollow.fr/2012/02/enlarge-your-police
25
60 à 80
caractères
par ligne
66
Critère Acce...
Laisser
25 % à 50 %
d’espace « blanc »
sur chaque page
Aérer l’information :
http://www.ergologique.com/conseils/conseils....
27
La lecture facile à l’écran : http://www.uzine.net/article1738.html
Ne craignez pas
la verticalité
de la page web
Améli...
28
Source : http://www.ojr.org/ojr/stories/070312ruel/
Aérer
facilite la
compréhension
Améliorer la lisibilité typographiq...
29
Source : http://www.ojr.org/ojr/stories/070312ruel/
Aérer
facilite la
compréhension
Améliorer la lisibilité typographiq...
30
Contraster
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
31
Source : http://www.typogabor.com/typographie-analyse/pages/lisibilite-
NauB_4.html
Contraster
su#samment
Critère Acces...
32
Outil : Colour Contrast Check
Contrastes de texte : http://openweb.eu.org/127
Contraster
su#samment
Critère AccessiWeb ...
Contraste négatif
Contraste positif
33
Contraste et lisibilité : http://s.billard.free.fr/referencement/index.php?
2005/07...
34
Préférer
un fond
blanc cassé
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
35
Source : http://www.fangpo1.com/ja/content/view/64/48/
Couleurs
et lisibilité
Améliorer la lisibilité typographique — R...
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 à disti...
37
Combien identi!ez-vous
de liens sur cette page ?
Source : http://www.bouygues.com/developpement-durable/axes-strategiqu...
Rendre évident
ce qui est
cliquable
Soulignez vos hyperliens ! http://romy.tetue.net/913
38
Critère AccessiWeb 2.2 No 10.6...
39
Police de
caractères
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
40 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Préférer
une police
conçue
pour l’écran
CSS Typography: The Basics
http://sixrevisions.com/css/css-typography-01/
Stop Ari...
42 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Police de caractères pour les dyslexiques : http://o...
Le site Garamond maltraite la typo
http://romy.tetue.net/865
43
Prévoir
des polices
de substitution
font-family: 'StempelG...
Des questions ?
Romy Duhem-Verdière
http://romy.tetue.net/965
@tetue
Améliorer la lisibilité typographique — Romy Duhem-Ve...
Prochain SlideShare
Chargement dans…5
×

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

7 629 vues

Publié le

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.

Publié dans : Technologie
2 commentaires
6 j’aime
Statistiques
Remarques
  • Merci . Très bien fait et utile.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Remarquable. Le plus clair des guides graphiques pour publication sur internet.
    Encore !
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
7 629
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4 862
Actions
Partages
0
Téléchargements
81
Commentaires
2
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×