Typographie & Décryptage de textes sur écran

Présentation au sujet: "Typographie & Décryptage de textes sur écran"— Transcription de la présentation:

1 Typographie & Décryptage de textes sur écran
Cours d’Ergonomie Typographie & Décryptage de textes sur écran

2 Test n°1

3 Comptez rapidement le nombre de 'F' dans le texte suivant :
FINISHED FILES ARE THE RE- SULT OF YEARS OF SCIENTIF- IC STUDY COMBINED WITH THE EXPERIENCE OF YEARS Vous avez 7 secondes… STOP!

4 3... …6 ! Bravo ! Comme la majorité des personnes, vous répondez
Alors que la réponse est …6 ! 

5 Vous pouvez recompter :
  FINISHED FILES ARE THE RE- SULT OF YEARS OF SCIENTIF- IC STUDY COMBINED WITH THE EXPERIENCE OF YEARS En fait, le cerveau ne peut traiter "OF", incroyable, non? Quiconque compte les six 'F' du premier coup est un génie, quatre est assez fréquent, cinq est plutôt rare, trois est normal. Moins de trois, vous devez changer de lunettes ;-)

6 Explication : Lors de la lecture rapide, les yeux font des microsaccades, fixent les mots "lexicaux", en sautant allègrement par dessus les mots "grammaticaux" (articles, conjonctions, ...). Les 3 "OF" du texte ne sont pas fixés directement Les enfants de 6 ans sont pour la plupart au stade de déchiffrage et fixent tous les mots donc pas d'oubli. Toutefois, le niveau de concentration peut expliquer facilement pourquoi vous avez réussi, ou pourquoi vous vous êtes fait piéger lors de ce test.

7 Test n°2

8 Essayez de décrypter le paragraphe suivant : sleon une édtue de l'Uvinertisé de Cmabrigde, l'odrre des ltteers dnas un mot n'a pas d'ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire lteetrs sinoet à la bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porblmèe. C'est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mmêe, mias le mot cmome un tuot. Essayez avec votre propre texte:

9 Test n°3

10 Lisez rapidement la phrase suivante : IL VA A LA LA PLAGE

11 Lisez rapidement la phrase suivante :  IL VA A LA LA PLAGE relisez lentement, alors ? 9 fois sur 10, un "LA" est éludé

12 Test n°4

13 Faites rapidement et dans l'ordre des chiffres ce calcul mental: 1000
+ 40 30 20 10 =?

14 La plupart du temps, si ce calcul est effectué rapidement et dans l'ordre, on trouve Refaisons le calcul pas à pas : = = = = = = = 4100 Explications : En fait, la plupart des personnes réalise convenablement la première partie des calculs jusqu'à atteindre Mais après avoir été bercé par la litanie en mille de ce calcul, le cerveau se laisse piéger par le Ainsi, la plupart des gens néglige leur attention pour se jeter sur le millier suivant, c'est un phénomène d'oblitération de la mémoire. la réponse n'est donc pas 5000 mais bien 4100.

15 Test n°5

16 Une expérience bizarre
Pouvez-vous lire la suite? Une expérience bizarre En 1843, un notaire nommé Leclerc publie une brochure qui parle de la réduction possible de moitié de tous les frais d’impression….

17 Une expérience bizarre
Et ce texte-ci? Une expérience bizarre En 1843, un notaire nommé Leclerc publie une brochure qui parle de la réduction possible de moitié de tous les frais d’impression….

18 Une expérience bizarre
En 1843, un notaire nommé Leclerc publie une brochure qui parle de la réduction possible de moitié de tous les frais d’impression…. Et voici son idée: Miracle, on arrive à lire assez facilement!

19 Pas si bizarre que ça…

20 Il y a 3 fois plus de caractéristiques sur le haut que sur le bas des lettres minuscules.

21 Conclusion: la lettre n’est pas l’unité de lecture mais bien le mot, voire le groupe de mots.

22 Test n°6

23 Chronométrez le temps nécessaire à votre voisin pour lire ce texte:
Ô rage ! ô désespoir ! ô vieillesse ennemie ! N’ai-je donc tant vécu que pour cette infamie ? Et ne suis-je blanchi dans les travaux guerriers Que pour voir en un jour flétrir tant de lauriers ? Mon bras qu’avec respect toute l’Espagne admire, Mon bras, qui tant de fois a sauvé cet empire, Tant de fois affermi le trône de son roi, Trahit donc ma querelle, et ne fait rien pour moi ? Ô cruel souvenir de ma gloire passée ! Œuvre de tant de jours en un jour effacée ! Nouvelle dignité fatale à mon bonheur ! Précipice élevé d’où tombe mon honneur ! Faut-il de votre éclat voir triompher le comte, Et mourir sans vengeance, ou vivre dans la honte ? Comte, sois de mon prince à présent gouverneur ; Ce haut rang n’admet point un homme sans honneur ; Et ton jaloux orgueil par cet affront insigne Malgré le choix du roi, m’en a su rendre indigne. Et toi, de mes exploits glorieux instrument, Mais d’un corps tout de glace inutile ornement, Fer jadis tant à craindre, et qui, dans cette offense, M’as servi de parade, et non pas de défense, Va, quitte désormais le dernier des humains, Passe, pour me venger en de meilleures mains. Don Diègue dans Le Cid de Corneille, scène IV Source:

24 Chronométrez le temps nécessaire à votre voisin pour lire ce texte:
Ô RAGE ! Ô DESESPOIR ! Ô VIEILLESSE ENNEMIE ! N’AI-JE DONC TANT VECU QUE POUR CETTE INFAMIE ? ET NE SUIS-JE BLANCHI DANS LES TRAVAUX GUERRIERS QUE POUR VOIR EN UN JOUR FLETRIR TANT DE LAURIERS ? MON BRAS QU’AVEC RESPECT TOUTE L’ESPAGNE ADMIRE, MON BRAS, QUI TANT DE FOIS A SAUVE CET EMPIRE, TANT DE FOIS AFFERMI LE TRONE DE SON ROI, TRAHIT DONC MA QUERELLE ET NE FAIT RIEN POUR MOI ? Ô CRUEL SOUVENIR DE MA GLOIRE PASSEE ! ŒUVRE DE TANT DE JOURS EN UN JOUR EFFACEE ! NOUVELLE DIGNITE FATALE A MON BONHEUR ! PRECIPICE ELEVE D’OÙ TOMBE MON HONNEUR ! FAUT-IL DE VOTRE ECLAT VOIR TRIOMPHER LE COMTE, ET MOURIR SANS VENGEANCE, OU VIVRE DANS LA HONTE? COMTE, SOIS DE MON PRINCE A PRESENT GOUVERNEUR; CE HAUT RANG N’ADMET POINT UN HOMME SANS HONNEUR ; ET TON JALOUX ORGUEIL PAR CET AFFRONT INSIGNE MALGRE LE CHOIX DU ROI, M’EN A SU RENDRE INDIGNE. ET TOI, DE MES EXPLOITS GLORIEUX INSTRUMENT, MAIS D’UN CORPS TOUT DE GLACE INUTILE ORNEMENT, FER JADIS TANT 0 CRAINDRE, ET QUI, DANS CETTE OFFENSE, M’AS SERVI DE PARADE, ET NON PAS DE DEFENSE, VA, QUITTE DESORMAIS LE DERNIER DES HUMAINS, PASSE, POUR ME VENGER EN DE MEILLEURES MAINS. Don Diègue dans Le Cid de Corneille, scène IV Source:

25 Résultats?

26 Conclusions Vitesse de lecture : plus rapide en minuscules qu’en majuscules Différentes études (Poulton et Brown, 1968 ; Tullis, S. T., 1988 ; ...) montrent que la vitesse de lecture est environ 14% plus rapide pour des textes écrits normalement en majuscules et minuscules que pour des textes écrits uniquement en majuscules.

27 Conséquences pour la conception de vos Designs???

28 « Si j’écris, c’est pour être lu.
Tout ce qui peut rendre plus difficile cette lecture doit être questionné. » Moi

29 Un peu de Technique

30 La lecture sur écran est fatigante et contraignante
Ecran Impression

31 Un peu de vocabulaire…

32 Les familles de caractères
Serif avec empattement sans-serif sans empattements monospace à chasse fixe cursive écriture manuscrite fantasy fantaisie

33 Quelques exemples : Times New Roman (avec serif) Les styles de caractères Georgia (avec serif) Courrier (avec serif) Garamond (avec serif) Arial (sans sérif) Verdana (sans sérif) Tahoma (sans sérif) Remarquez que toutes ces polices ont la même taille (20pt) !!! On constate clairement que certaines polices sont mieux adaptées que d’autres à une diminution de taille ; par exemple, la police tahoma supporte très bien une petite taille tout en restant relativement lisible. Quand vos menus sont très touffus, c’est une police qui peut vous aider.

34 Choix d'une police de caractères.
Sérif ou sans sérif. Les polices de caractères avec sérif ont une ligne de base plus marquée renforcée par les "pieds" des caractères. Ceci aide l'oeil du lecteur à se déplacer horizontalement. Sans sérif et sérif peuvent être combinés sur une même page. Sérif est souvent plus facile à lire dans le corps du texte. Sans sérif peut être utilisé pour créer un contraste. La résolution et la couleur influencent ces choix.

35 Texte en Helvetica 28 Texte en Times 28 Texte en Helvetica 28 Texte en Times 28 Texte en Helvetica 28 Texte en Times 28

36 Variantes Il existe différentes manières de faire varier une police de caractères. alléger (rendre le trait plus fin) engraisser (mettre en gras) condenser (rétrécir la largeur des lettres) étendre (élargir le corps des lettres) mettre en italique (oblique) ombrer (coloriser)* (*) la couleur sera traitée lors d’un prochain cours

37

38 Résumé Les minuscules sont bien différenciées.
Les majuscules donnent moins d’indices pour le repérage des lettres. Il vaut mieux utiliser des minuscules, en augmentant le corps et/ou la graisse. Normalement Majuscules moins lisibles que minuscules Italiques moins lisibles que romain Serifs sur écran moins lisibles que sans-serifs Caractères simples plus lisibles

39 Ambiguïté des majuscules non accentuées
JUPPE CHAHUTE A L'ASSEMBLEE Alain Juppé chahute-t-il ou est-il "chahuté" à l'Assemblée ?

40 HTML Polices et Variantes

41 Unités Absolues mm cm = 10 mm Inch = 25,4 mm Pica = 1/6 inch
Point = 1/72 inch Proportionnelle % Em Ex Liée au support Px = ?

42 Unités employées en typographie :
Pixel (px) Point affiché sur l’écran d’un moniteur Point (pt) 1/72 ème de pouce ; si l’écran a une résolution de 72dpi, points et pixels sont équivalents Pica (pc) 1 pica = 12 points Em (em) Corps de la police ; pour une police de 12 point: 1 em = 12 points (Il existe aussi 1 En = ½ Em)

43

44

45

46

47

48 Utilisation des variations d'une police de caractères.
La norme française (Afnor) précise que : "l'angle de vue doit être situé au minimum entre 0°16’et 0°22’ soit 3 et 4 millimètres à 60 cm de l'écran pour une lettre capitale Si on prend une fonte qui fait 12 pixels de haut et un écran avec une résolution de 80 dpi (32 pixels par cm), une lettre capitale mesure 12/32 cm soit 3,75 mm . Le corps est la taille de la lettre, exprimée en points. Un point équivaut à 1/72 de pouce soit environ 0,35 mm. C'est à dire qu'un corps 3 mesure un millimètre, un corps 9, trois millimètres et un corps 12, quatre millimètres. Pour les textes courants, il est préférable d'utiliser un corps compris entre 9 et 12pt. Un corps 6, par exemple, fatigue vite la vue, tandis qu'un corps 14 (ou supérieur) est souvent disproportionné par rapport à l’espace occupé par le texte.

49 Exemples Corps 12 : Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12pt. Corps 1: Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12px.. Corps 20 : Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12pt. Corps 28: Pour un texte courant, il est préférable d'utiliser un corps compris entre 9 et 12.

50

51 Police de caractères et CSS
En matière de typographie, la norme CSS offre pratiquement les mêmes fonctionnalités qu'un bon logiciel de mise en page. C'est ainsi que l'on peut définir : la police utilisée, soit sous forme générique, soit sous forme spécifique (en indiquant le nom de la police, comme dans le HTML). Le téléchargement, total ou partiel d'une police, est même prévu le style : normal ou italique (déjà dans le HTML), ou oblique ; la casse (ex : transformation de minuscules en majuscules), et les petites majuscules les dimensions des caractères (taille, largeur, graisse), et leur couleur ; la décoration de texte : souligné, barré, clignotant (déjà dans le HTML) et surligné ; le positionnement vertical : indice, exposant (déjà dans le HTML) le crénage (distance entre caractères et la distance entre les mots l'interlignage (distance entre lignes) l'ombre du texte (CSS2)

52 Police de caractères et CSS
<style type="text/css"> p { font-family: Tahoma, Geneva, sans-serif; font-size: 12pt; font-style: italic; line-height: 15px; font-weight: bold; font-variant: normal; text-transform: capitalize; color: #03C; opacity: 0.5; text-shadow: 0px 0px 9px #777; text-decoration: underline; background-color: #FF0; letter-spacing: 5px; text-align: justify; text-indent: 10pt; word-spacing: 2pt; display: table-cell; padding: 15px; width: 300px; margin-top: 25px; margin-right: 20px; margin-bottom: 25px; margin-left: 20px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; list-style-position: inside; list-style-type: square; position: absolute; left: 200px; top: 50px; } .ombrage { text-shadow: 0px 0px 9px #222; color: #fff; font-size: 14pt; font-weight: bold; }

53 Donc : 1. Utiliser des polices sans sérif pour les titres et les libellés. 2. Utiliser éventuellement des polices avec sérif pour les textes bien que la tendance actuelle soit également à l’utilisation même pour les textes de polices sans sérif jugées plus modernes. Les polices avec sérif sont cependant en principe censées améliorer la lisibilité. Vérifiez. 3. Utiliser des fontes de caractères dont la largeur se situe entre 50% et 100% de la hauteur. 4. Utiliser des polices sans sérif et non grasses pour les fontes de petites tailles (inférieure ou égale à 10 points). 5. Utiliser les polices bien formées plutôt que les polices stylisées ou décoratives non standards et parfois difficiles à lire. 6. Parfois le choix de la police peut renforcer ou déforcer le message : essayer de faire un site sur un château médiéval en utilisant une police courrier ou un site à caractère scientifique en gothique…

54 Choix de la couleur de police et de la couleur de fond
HTML5: on a droit à la transparence!

55 BONNES PRATIQUES

56 CONSEILS Attribuer à chaque fonte un seul usage pertinent et cohérent.
Quand on combine plusieurs polices de caractères, il est important de décider à l'avance comment elles vont s'harmoniser ou contraster. En général, il ne faut pas utiliser plus de deux polices de caractères au cœur d’une même page. Une excellente typographie est invisible et elle n'entrave ni la lecture, ni l'information. Un surplus de polices de caractères sur une même page distrait le lecteur, crée une intrusion visuelle qui ralentit le processus de lecture.

57 Une bonne utilisation de la typographie améliore la lisibilité
Une bonne utilisation de la typographie améliore la lisibilité. Celle-ci est globalement déterminée par : la police de caractères choisie la qualité de l'affichage la longueur des lignes l'espace entre les lettres, les mots et les lignes la justification ou l'alignement à gauche la couleur des caractères et le contraste qu’elle offre avec la couleur de fond l’espace libre autour des blocs de texte.

58

59 HTML Zones de texte

60

61

62

63

64

65

66 Cours de Communication
Typographie & Décryptage de textes sur écran

67 Une lettre isolée ne possède que sa valeur plastique..
Dés que la même lettre sert à véhiculer un texte, elle se charge de nombreuses significations

68 Comme pour les personnes, la physionomie d’une typo forge en quelques secondes notre première impression d’un site Typographie Typographie Typographie

69

70 Note : Deux polices différentes avec sérif se marient généralement mal entre elles. Il est plus facile d’harmoniser des polices sans sérif (bâton) ou une police sans sérif et une police avec sérif.

71 EXEMPLES

72 EXEMPLES

73

74

75 Les détails, toujours les détails…
Avant Après Source: &

76 Evitez-là s’il y a un designer dans le jury ou
La police Comic Sans est devenue le symbole de l’amateurisme au sein de la communauté des Designer élitiste et hautins… Evitez-là s’il y a un designer dans le jury ou Envoyez promener les designers prétentieux et utilisez-là quand même mais alors avec talent! Voir: Pour les subversifs:

77 METHODE Commencez par choisir la typographie de base du contenu de la page: Police, taille, couleur, contraste, largeur de colonne, interligne… Rajoutez les typographies pour les titres (h1 à h6) et les menus: Police, taille, graisse, couleur, contraste, marges… Rajoutez les typographies spéciales (liens, citations, légendes d’images…): Taille, variantes, graisse, couleur…

78 VOS OUTILS POUR LES CHOIX TYPOGRAPHIQUES
Vérification du contraste de lecture: Choix de polices: Téléchargement de polices non standards: Google fonts: Si vous voulez approfondir la notion de typographie en général, je vous conseille ce site :

79 Avant l’écriture: on est dans la préhistoire
A partir de l’écriture: l’Histoire commence

80 Exercices pour Votre Portfolio