Améliorer la lisibilité typographique à l'écran
44
Améliorer la lisibilité typographique à l’écran par Romy Duhem-Verdière 2013
-
Upload
romy-duhem-verdiere -
Category
Technology
-
view
3.502 -
download
2
description
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.
Transcript of Améliorer la lisibilité typographique à l'écran
Améliorer
la lisibilité
typographique
à l’écran
par Romy Duhem-Verdière
2013
Romy Duhem-VerdièreConsultante web UX
ergonomie et accessibilité
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
3
Les seniors :
1/3des internautes français
85 %ont des problèmes de vue
Sources : Ipsos, Datamonitor, Insee/SesiLe boom des seniors tactiles : http://romy.tetue.net/962
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
4
8 à 12 %de la population mondialeserait dyslexique
8 à 10 %de la population masculineest daltonienne
Source : OMS et Wikipédia
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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
Respecter les règlesde 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
Accentuerles 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 typographiquesen usage à l’Imprimerie nationale, page 12
Notice AcceDeWeb No 6.1WCAG 2.0 No 3.1
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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
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
Éviter les capitales
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
12
Pouvoirzoomer le texte
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
13
Pouvoirzoomer 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
Laisserle texte
à 100 %
Relative readability, by Wilson Miner, 2008http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/
14
16px 11pt
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
16px/1.5
16px/1.5
14pt/21pt
16px/24px
16px/20px
16px/1.5
1.6em/1.5
16px/1.5
15
16px/20px
16px/1.5
1.6em/1.5
16px/1.5
Laisserle 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
Responsive Typography: The Basics, by Oliver Reichenstein, 2012http://informationarchitects.net/blog/responsive-typography-the-basics/
16 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Laisserle texte
à 100 %
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"erCritè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
Augmenter l’interlignage
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
1.2 1.5
20
Augmenter l’interlignage
à 1.5Critè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_prisonniers.html
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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 Saleslhttp://blog.kissmetrics.com/7-usability-mistakes/
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Espacer les paragraphes
à 1.5
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
Rythmevertical
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
23
Largeurdes 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 policehttp://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
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
27La 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
28Source : http://www.ojr.org/ojr/stories/070312ruel/
Aérerfacilite la
compréhension
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
29Source : http://www.ojr.org/ojr/stories/070312ruel/
Aérerfacilite la
compréhension
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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 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
Outil : Colour Contrast CheckContrastes 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
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érerun contraste
négatif(dit « noir sur blanc »)
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
34
Préférerun fond
blanc cassé
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
35Source : http://www.fangpo1.com/ja/content/view/64/48/
Couleurs et lisibilité
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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-lienSource : http://www.philippe-donnart.com/Lire-un-pdf-sur-Kindle.html
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
37
Combien identi!ez-vousde liens sur cette page ?
Source : http://www.bouygues.com/developpement-durable/axes-strategiques/environnemental/strategie-carbone/Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
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 cliquablehttp://www.ergologique.com/conseils/conseils.php?id_tip=10
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
39
Police decaractères
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
40 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
Préférerune police
conçuepour l’écran
CSS Typography: The Basicshttp://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 Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013Police de caractères pour les dyslexiques : http://opendyslexic.org
Policepour les
dyslexiques
Le site Garamond maltraite la typohttp://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
Des questions ?
Romy Duhem-Verdièrehttp://romy.tetue.net/965
@tetue
Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013
