Résumé de la conférence d’Anne-Sophie Fradier sur la Macrotypographie
Hello 
Voici un petit résumé de la conférence d’Anne-Sophie Fradier à laquelle j’ai pu assister lors de Paris Web 2010. Le thème était la macrotypographie dans la page web, un sujet qui, vous n’en doutez pas, m’a beaucoup intéressé 
Avec une conférence assez pointue par moment (mais accessible pour les non-experts), sincère et vraiment très drôle, Anne-Sophie a su résumer en peu de temps les grands principes de la typographie : lisibilité, intelligibilité et esthétique. Après un grand résumé de la typographie, notamment avec la présentation du Volumen, puis du Codex, (dont la révolution fût, je cite avec humour: « le Codex offre la possibilité de ne plus se cogner tout le déroulage du Volumen pour trouver le passage qui nous intéresse car grâce au Codex, on arrive directement à la bonne page » 
), Anne-Sophie a posé les grands principes de la macrotypographie en commençant par le fait qu’elle a été inventé par les moines… oui, les pauvres ils devaient s’ennuyer
Quelques photos avec l’iPhone (c’était chez IBM) :
Quelques slides :
(merci MrCorbak pour les slides)
Je vous propose quelques bribes de notes que j’ai trouvé importantes à retranscrire sur Graphism.fr :
Différences entre web & papier :
La page web est un Volumen, pas un livre, on la déroule. Le papier a des dimensions fixes et un contenu immuable. La page web n’a pas de dimension réellement prévisible, le web mobile, tout ce que l’on sait c’est qu’il offre un écran au format portrait.
De la page à la grille, de l’écrit à l’écran :
Avec une double page, on peut jouer graphiquement de la relation entre les deux pages, avoir une harmonie avec les marges, une symétrie, etc. Sur le web, les marges sont latérales, elles sont là pour faire oublier le navigateur, laisser du confort sur les côtés, de la respiration.
« La grille, je dors avec, c’est formidable ».
La grille est un ensemble de guides (colonnes, gouttières, marges) sur lequel on place ses blocs. La grille rationnalise l’organisation du contenu et facilite la lecture. La grille basée sur le nombre d’or est souvent pratique. La grille modulaire est basée sur des modules, carrés ou rectangulaires. La grille rationnalise l’organisation du contenu et facilite la lecture. La grille la plus pratique est celle à 12 colonnes (qui se coupe en 2, en 3, en 4 et en 6). Les lignes de bases sont essentielles pour que l’oeil ne se perde pas. Les repères verticaux sont primordiaux pour la lecture, plus il y en a, plus la lecture est facilitée car notre cerveau fonctionne par anticipation, si le signal qui lui parvient est conforme à ses attente attentes, alors la lecture se fait de façon confortable.
Quelques ressources :
- 960 grid system
- variables grid systems
- gridr buildrrr
- grid system (Muller Brockman)
Au sujet de la typographie :
« L’empattement c’est bourgeois »
Les titres en capitales c’est bien, les titres en capitales avec un letter-spacing, c’est mieux
Le texte sur le web :
Sur le web, il faut arriver à composer du texte courant qui donne envie de scroller, de scroller et de scroller
Les paragraphes idéaux sont de 55 à 65 caractères par lignes. On peut utiliser beaucoup la couleur sur le web et également en typographie, cela ressort mieux et s’avère souvent plus facile qu’avec l’imprimé. Les exergues & les citations sont également une occasion intéressante et agréable de sortir de la grille pour créer un effet de surprise.
Le meilleur jugement typographique reste l’œil
Ces articles peuvent aussi vous intéresser:
- Grille typographique et responsive design = « Responsive Grid » ?
- TOUT savoir (ou presque) sur la macrotypographie de la page web !
- Parce qu’il faut rêver l’expérience de la lecture numérique de demain !
- Une solution pour mettre de la typographie sur votre site
- Codex, ou le retour du livre dont les pages se tournent toutes seules !
- Une étude sur le changement graphique du journal Libération
16 octobre 2010 à 12 h 33 min
Ca devait être vraiment intéressant, merci beaucoup pour ce résumé.
Ca serait vraiment bien que certains sites d’infos prennent en compte ce qu’elle dit parce que pour l’instant, lire de l’info sur un écran (et sur certains sites, vous les retrouverez très facilement) relève du parcours du combattant pour mes pauvres yeux fatigués
16 octobre 2010 à 12 h 50 min
@marroon: oui, il y a encore beaucoup de travail au niveau de la lisibilité typo sur internet
16 octobre 2010 à 13 h 10 min
Le « mozilla » sur ton badge, c’est pour quoi ? Tu étais là en tant que membre de la fondation ?
16 octobre 2010 à 13 h 13 min
@Shadow: je bosse chez Mozilla depuis deux semaines maintenant
16 octobre 2010 à 13 h 14 min
@Geoffrey Dorne:
En plus des cours à l’ENSAD et des missions freelance en design ? Wow, on sent l’adepte du multitâches !
16 octobre 2010 à 13 h 16 min
@Shadow: héhé voui j’essaye
16 octobre 2010 à 13 h 17 min
deux questions :
et c’est dans un contexte particulier (écran) 
« L’empattement c’est bourgeois »
ça se justifie comment
Parce que je trouve ça assez amusant, mais je suis pas sûr de comprendre pourquoi
« ou le corps de sa typo multiplié par 30 »
donc si je suis en 12pt ça donne 360 caractère !? c’est moi où ça fait des lignes super longues
16 octobre 2010 à 13 h 20 min
@-jil-: « L’empattement c’est bourgeois » était un genre de blague pour (si je me souviens bien), expliquer la typographie post-bauhaus
(et ça ne peut pas faire 360 caractères/lignes en effet ! 
)
« ou le corps de sa typo multiplié par 30 » : pour ça je ne sais plus très bien
16 octobre 2010 à 13 h 29 min
Une superbe conférence !
Pour la formule corps x 30 c’est une manière de calculer la taille en pixel pas le nombre de caractères
.
Merci pour le résumé !
16 octobre 2010 à 13 h 32 min
@Geoffrey Dorne:
(cf Din) (bon d’accords elles sont pas toutes post-bauhaus mais yen a qd mm une suisse bien uniformisante 
)
ah bon, mais les linéales signalétiques, c’est pas un peu fasciste ?
Et la relation corps/nombre de caractère ça serai pas plus le nombre de caractère par paragraphe ? ça me paraît bizarre mais bon pourquoi pas.
16 octobre 2010 à 13 h 36 min
@-jil-: mdr, en effet pour la DIN
16 octobre 2010 à 14 h 02 min
@MrCorbak:
Merci pour la précision, je n’ai pas vu cotre réponse avant de reposter, d’où la proposition un peu étrange
@Geoffrey:
16 octobre 2010 à 14 h 09 min
Tout est magnifique dans cette présentation. Cela vaut aussi pour la présentatrice.
16 octobre 2010 à 14 h 10 min
@Sch: et encore, tu n’as pas vu son humour
16 octobre 2010 à 14 h 55 min
@Geoffrey Dorne:
17 octobre 2010 à 12 h 10 min
Ah ben ça… C’est marrant de rentrer de Paris Web 2010 et en faisant le tour de ses blogs habituels, de se rendre compte que les auteurs étaient présent dans la salle.
Je plussoie l’article, cette conf était vraiment très bien !
17 octobre 2010 à 12 h 20 min
@Philou:
héhé, tu y étais aussi ? La prochaine fois on se prendra un café 
HTML5, réseaux sociaux, typo et le futur du web
17 octobre 2010 à 15 h 15 min
[...] Fradier sur la Macrotypographie | Graphisme & interactivité blog par Geoffrey Dorne http://graphism.fr/rsum-de-la-confrence-dannesophie-fradier-sur-la-macrotypographie Différences entre web & [...]
17 octobre 2010 à 16 h 42 min
C’est vrai qu’elle connait ses classiques en humour, à voir une des diapos où elle a utilisé une chanson des Inconnus
(cf Alignement des textes)… Bien à vous tous !
17 octobre 2010 à 22 h 14 min
Excellent ! Merci pour ce compte-rendu rapide et éclairé. Je découvre en même temps que tu étais présent à cette conf et regrette n’avoir pas fait ta connaissance dans la vie réelle. À une prochaine !
17 octobre 2010 à 22 h 15 min
@tetue: ce sera avec plaisir une prochaine fois j’espère
18 octobre 2010 à 8 h 33 min
Je suis vraiment ravie qu’un sujet sur la typographie ait intéressé autant de gens, ce fut vraiment une surprise.
Petit éclaircissement sur le « L’empattement, c’est bourgeois »: c’était une manière de résumer le point de vue des pionniers de la Nouvelle typographie (années 20 en Allemagne notamment). Ils se sont un peu calmés après, mais au début il y avait beaucoup de ça
Et merci pour ton résumé très complet de ma conf, tu es bien courageux !
18 octobre 2010 à 11 h 15 min
Merci pour ce compte-rendu très intéressant.
Le petit journal du web — Edition spéciale TypOgrApHiE !
18 octobre 2010 à 13 h 53 min
[...] Macrotypographie – Résumé richement illustré de la conférence d’Anne-Sophie Fradier sur la Macrotypographie. Bonne feuille : Avec une double page, on peut jouer graphiquement de la relation entre les deux pages, avoir une harmonie avec les marges, une symétrie, etc. Sur le web, les marges sont latérales, elles sont là pour faire oublier le navigateur, laisser du confort sur les côtés, de la respiration. [...]
18 octobre 2010 à 20 h 19 min
@Anne-So aka Mitt: Un grand merci ! Ça m’a passionné, vraiment
Et merci aussi pour la petite explication des empattements 
18 octobre 2010 à 22 h 33 min
@-jil-: @Geoffrey Dorne:
Oui, la remarque sur l’empattement qui serait « bourgeois » était une des nombreuses boutades pour expliquer l’état d’esprit de certains graphistes qui ont renouvelé le genre. Cependant, cela n’engageait en rien Anne-Sophie Fradier puisqu’un peu plus tard dans la conférence, elle a donné plusieurs exemples de typo qu’elle appréciait et qui étaient empattées…
21 octobre 2010 à 16 h 17 min
Le support de conférence d’Anne-Sophie Fradier est consultable en ligne : http://www.slideshare.net/Mitternacht/la-macrotypographie-de-la-page-web-5499736
23 octobre 2010 à 11 h 46 min
Superbe !
Y en a qui vont avoir du boulot pour remettre leur typo en ordre (’et je ne m’en exclus pas).
23 octobre 2010 à 11 h 48 min
Wééé
Après avoir assisté cette conf, on ne voit plus le Web avec les mêmes yeux et on a envie de faire des efforts pour que ce soit typographiquement mieux, c’est clair !
La macrotypographie de la page Web | Fred Reillier
3 novembre 2010 à 20 h 30 min
[...] savoir plus sur la présentation, et la télécharger au format PDF. Et sur graphism.fr, le blog de Geoffrey Dorne qui a eu la chance d’assister à la présentation, on trouve un résumé plus [...]
La typographie pour le web « Le Blog de LunaWeb
27 janvier 2011 à 15 h 32 min
[...] très bien résumé, comme Anne-Sophie Fradier lors de son intervention à Paris Web 2010 (vu chez Graphisme & interactivité) : La page web est un Volumen, pas un livre, on la déroule. Le papier a des dimensions fixes et un [...]
Le petit journal permanent de la TypOgrApHiE !
1 mars 2012 à 1 h 21 min
[...] Macrotypographie – Résumé richement illustré de la conférence d’Anne-Sophie Fradier sur la Macrotypographie. Bonne feuille : Avec une double page, on peut jouer graphiquement de la relation entre les deux pages, avoir une harmonie avec les marges, une symétrie, etc. Sur le web, les marges sont latérales, elles sont là pour faire oublier le navigateur, laisser du confort sur les côtés, de la respiration. [...]