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

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ère — 2013

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

4
8 à 12 %
de la population mondiale
serait dyslexique
8 à 10 %
de la population masculine
est daltonienne
Source : OMS et Wikipédia

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

6
Respecter les règles
de la langue

7
UN GENDARME TUE

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

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/

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

11
Éviter les
capitales

12
Pouvoir
zoomer le texte

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

Laisser
le texte
à 100 %
Relative readability, by Wilson Miner, 2008
http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/
14
16px 11pt

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/

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
Ne pas justi"er

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]

19
Augmenter
l’interlignage

1.2 1.5
20
Augmenter
l’interlignage
à 1.5
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

21
Source : 7 Usability Mistakes That Will Kill Your Online Salesl
http://blog.kissmetrics.com/7-usability-mistakes/
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
Rythme
vertical

23
Largeur
des lignes

Source : Enlarge your police
http://phollow.fr/2012/02/enlarge-your-police
25
60 à 80
caractères
par ligne
66

Laisser
25 % à 50 %
d’espace « blanc »
sur chaque page
Aérer l’information :
Webdesign : di#cile de vendre du vide, et pourtant…
http://blog.axe-net.fr/webdesign-di#cile-de-vendre-du-vide/

27
La lecture facile à l’écran : http://www.uzine.net/article1738.html
Ne craignez pas
la verticalité
de la page web

28
Source : http://www.ojr.org/ojr/stories/070312ruel/
Aérer
facilite la
compréhension

29
Source : http://www.ojr.org/ojr/stories/070312ruel/
Aérer
facilite la
compréhension

30
Contraster

31
Source : http://www.typogabor.com/typographie-analyse/pages/lisibilite-
NauB_4.html
Contraster
su#samment
WCAG 2.0 No1.4.3 [AA]

32
Outil : Colour Contrast Check
Contrastes de texte : http://openweb.eu.org/127
Contraster
su#samment
WCAG 2.0 No1.4.3 [AA]

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 »)

34
Préférer
un fond
blanc cassé

35
Source : http://www.fangpo1.com/ja/content/view/64/48/
Couleurs
et lisibilité

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

37
Combien identi!ez-vous
de liens sur cette page ?
Source : http://www.bouygues.com/developpement-durable/axes-strategiques/environne

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

39
Police de
caractères

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

Police de caractères pour les dyslexiques : http://opendyslexic.org
Police
pour les
dyslexiques

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;

Des questions ?
Romy Duhem-Verdière
http://romy.tetue.net/965
@tetue

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

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