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

Améliorer

la lisibilité

typographique

à l’écran

par Romy Duhem-Verdière

Romy Duhem-VerdièreConsultante web UX

ergonomie et accessibilité

Améliorer la lisibilité typographique — Romy Duhem-Verdière — 2013

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

8 à 12 %de la population mondialeserait dyslexique

8 à 10 %de la population masculineest daltonienne

Source : OMS et Wikipédia

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

Respecter les règlesde la langue

UN GENDARME TUE

Accentuerles capitales

Accentuez les lettres capitales et majuscules :http://wiki.accede-web.com/notices/graphique-ergonomique/conserver-les-accents-sur-les-lettres-capitales

UN GENDARME TUÉ Lexique des règles typographiquesen usage à l’Imprimerie nationale, page 12

Notice AcceDeWeb No 6.1WCAG 2.0 No 3.1

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/

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

Éviter les capitales

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

Laisserle texte

à 100 %

Relative readability, by Wilson Miner, 2008http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/

16px 11pt

16px/1.5

14pt/21pt

16px/24px

16px/20px

16px/1.5

1.6em/1.5

16px/1.5

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/

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 %

Ne pas justi"er

Le texte se justi"e-t-il ?http://www.ergologique.com/conseils/conseils.php?id_tip=818

Ne pas justi"erCritère AccessiWeb 2.2 No 10.9 [Or]

Test RGAA 2.2 No 7.12 [AAA]

Augmenter l’interlignage

1.2 1.5

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

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/

Espacer les paragraphes

à 1.5

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

Largeurdes lignes

Source : Enlarge your policehttp://phollow.fr/2012/02/enlarge-your-police

60 à 80 caractères

par ligne

Critère AccessiWeb 2.2 No 10.11 [Or]WCAG 2.0 No1.4.8 [AAA]

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/

27La lecture facile à l’écran : http://www.uzine.net/article1738.html

Ne craignez pas la verticalité

de la page web

28Source : http://www.ojr.org/ojr/stories/070312ruel/

Aérerfacilite la

compréhension

29Source : http://www.ojr.org/ojr/stories/070312ruel/

Aérerfacilite la

compréhension

Contraster

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]

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]

Contraste négatif

Contraste positif

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

Préférerun fond

blanc cassé

35Source : http://www.fangpo1.com/ja/content/view/64/48/

Couleurs et lisibilité

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

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

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

Police decaractères

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

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

Prévoir des polices

de substitution

font-family: 'StempelGaramondW01-Ital';

font-family: 'StempelGaramondW01-Ital',Garamond, Georgia, serif;

Des questions ?

Romy Duhem-Verdièrehttp://romy.tetue.net/965

@tetue

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

Technology

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

L’entreprise en difficulté en France Gagner plus de lisibilité pour … · 2018-11-09 · L’entreprise en difficulté en France - Gagner plus de lisibilité pour aller de l'avant

La Revue de l'écran, n°259

Astuces sur l'écran tactile L'écran tactile de l'appareil ...static.garmin.com/pumac/Approach_S4_OM_FR.pdf · Manuel d'utilisation de l' Approach ® S4 Mise en route AVERTISSEMENT

FT2DE C4FM/FM Retour à l'écran de fonctionnement … · Appuyez sur la touche Sélection de la bande d'exploitation pour afficher l'écran de saisie alphabétique. Utilisez l'écran

Lettre de la Société typographique de Neuchâtel (STN) à F.-B. De ...

Etude tns sofres - fracture numérique par l'écran

Wild Manuel d'utilisation V1 - Crosscall · 2.4 Verrouiller ou déverrouiller l'écran 2.4.1 Verrouiller l'écran Pour verrouiller l'écran appuyez sur la touche MARCHE/ARRÊT. Pour

La conduite apaisée, PAYSAGE ET LISIBILITÉ

Bonheur d'occasion à l'écran : fidélité ou trahison?

L'Écran de la FFCV N°106

Charte ortho-typographique du Journal officiel · Cette charte typographique constitue le document de référence dans le cadre de la production du Journal officiel, ... et dans le

Dessin typographique

Du papier à l'écran, lire se transforme

L'écran de la ffcv n°108

L'écran comme dispositif de présentation et de médiation ...€¦ · ÉCOLE DU LOUVRE POLINA ZVERKOVA L'écran comme dispositif de présentation et de médiation. L'exemple du

Évaluation de la lisibilité et de la fluidité de l ...

Lisibilité de l'environnement, management stratégique ... · Lisibilité de l’environnement, management stratégique: éléments de recherche sur les PMI Hugues SILVESTRE Régis

Graphe de lisibilité Extension de la notion de niveau de détail.

Cours de typographie (2) - Le flux typographique dans le prépresse

Les apports du TAL à la lisibilité du FLE · Problematique Methodologie ResultatsConclusionReferences Les apports du TAL à la lisibilité du FLE Thomas François1, 2 (1) B.A.E.F