✚ Typo & Web

Posted by on Jan 20, 2013 in Formation, Intuit/lab, Lab4, Supports de cours

Typographie pour le web

Ce support de cours n’est qu’un survol du livre Typo & Web de Aurélien Foutoyet [All for Design] que je vous engage vivement à acheter.

Rappels

 

La lisibilité

Définition

lisible (adj.) 1.dont les caractères écrits sont faciles à lire. 2.digne d’être lu. 3.(figuré) dont on comprend le sens à la lecture.

1800 : expérience d’Anisson

« Dans les années 1790 il fit composer puis lire deux pavés de textes dans le même corps, l’un en Didot, l’autre en Garamond. Il demanda aux volontaires-testés de s’éloigner progressivement du papier. Ceux-là déclarèrent le Garamond «bien plus lisible que le Didot». Celui-ci perdant toute qualité de lecture distincte alors que le Garamond continuait malgré l’éloignement progressif à servir le texte par une lisibilité précise. » [source : Lisibilité et typographie]

1843 : expérience de Leclerc

  • Le lecteur devine plus qu’il ne lit.
  • La moitié d’un mot suffit pour en comprendre le sens.
  • Même effacé, un mot peut être deviné en fonction de ceux qui le suivent et le précèdent.
  • La partie supérieure des mots est suffisante pour pouvoir comprendre le sens d’un texte.

 1886 : world shape model de James Catell

  • L’unité de lecture serait le mot et non la lettre.
  • La silhouette des mots semble jouer un rôle dans la reconnaissance de ces derniers.

texte tiré de Mallarmé — Intervalles et espaces vides

1905 : expérience de Javal

  • La lecture est un processus alternant périodes de mouvement et fixations.
  • Un lecteur lent fixera un secteur de 5 lettres (un mot) en moyenne,
  • Un lecteur moyen fixera un secteur de 10 lettres (deux mots) en moyenne.
  • Un lecteur rapide fixera un secteur de plus de 10 lettres (3 mots) en moyenne.
  • La lisibilité dépend de la taille des lettres.
  • Le lecteur reconnaît un mot grâce à sa silhouette.
  • Les mots sont reconnaissables grâce à la partie supérieure des lettres

1962 : expérience de Richaudeau

« Sleon une édtue de l’Uvinertisé de Cmabrigde, l’odrre des ltteers dnas un mtos n’a pas d’ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soit à l bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlblème. En efeft le creaveau hmauin ne lit pas chuaqe ltetre elle-mmée, mais le mot cmome un tuot. »

+++++++
FINISHED FILES ARE THE RE-
SULT OF YEARS OF SCIENTIF-
IC STUDY COMBINED WITH THE
EXPERIENCE OF YEARS
+++++++

 

 

Le processus de lecture : comment lit-on ?

Une lecture saccadée / L’importance des formes / Les lettres / Les mots

Les caractéristiques de la lecture sur écran

Contraintes / Definition / Une lecture spécifique

Lisibilité sur le web

Le lecteur et son environnement

Anticiper les besoins / Le contraste des couleurs / La taille du texte / On lit le mieux ce qu’on lit le plus

Le choix des caractères

Titrage et labeur / Dessin des caractères / Caractères pour l’écran

Le rendu des caractères sur le web

Système d’exploitation / Selon le navigateur / Comment tester l’affichage ?

Les CSS

Le choix de caractères appropriés

Des caractères optimisés pour le web
Une liste de caractères cohérente

Optimiser le confort de lecture

La taille du texte
Les échelles typographiques

@font-face

Les formats de caractères

Bitmap / PostScript / TrueType / OpenType / Embedded OpenType / Woff / SVG

Les différents services de webfonts

Services gratuits / Services payants

Liste d’outils typographiques pour le web

Ressources

Articles

Design & Typo, le blog

Lecture et lisibilité, partie 1

Lecture et lisibilité, partie 2

La typographie pour le web

Sites

MyFonts

Type together

Typekit

Fontfont

Fontsquirrel

What font

Bonus

Kern Type

%d blogueurs aiment cette page :