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é icon wink Résumé de la conférence dAnne Sophie Fradier sur la Macrotypographie 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 » icon biggrin Résumé de la conférence dAnne Sophie Fradier sur la Macrotypographie ), 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 icon wink Résumé de la conférence dAnne Sophie Fradier sur la Macrotypographie

Quelques photos avec l’iPhone (c’était chez IBM) :

Quelques slides :

aneSo2 Résumé de la conférence dAnne Sophie Fradier sur la Macrotypographie
(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 » icon wink Résumé de la conférence dAnne Sophie Fradier sur la Macrotypographie Il faut voir les éléments d’une page web comme des « masses visuelles », il faut les agencer en créant des contrastes, de l’équilibre, du déséquilibre, etc. Pour aligner une image dans du texte, il faut la poser sur la ligne de base (en bas), et en haut, sur la hauteur d’œil de la lettre sur la ligne la plus haute. Le gris typographique est très important également.

Les titres en capitales c’est bien, les titres en capitales avec un letter-spacing, c’est mieux icon biggrin Résumé de la conférence dAnne Sophie Fradier sur la Macrotypographie

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 L’objet référent en matière de lisibilité est le papier, cependant, il y a énormément de différences. Par exemple, avoir une « fin de page » n’existe pas sur le web, il faut donc trouver d’autres moyens pour assurer des pauses et assurer le confort de lecture.

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:

32 personnes ont laissé un commentaire... et vous ?

  1. marroon, le 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 :grin:

    RépondreRépondre
  2. Geoffrey Dorne, le 16 octobre 2010 à 12 h 50 min

    @marroon: oui, il y a encore beaucoup de travail au niveau de la lisibilité typo sur internet :cool:

    RépondreRépondre
  3. Shadow, le 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 ?

    RépondreRépondre
  4. Geoffrey Dorne, le 16 octobre 2010 à 13 h 13 min

    @Shadow: je bosse chez Mozilla depuis deux semaines maintenant :mrgreen:

    RépondreRépondre
  5. Shadow, le 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 ! ;-)

    RépondreRépondre
  6. Geoffrey Dorne, le 16 octobre 2010 à 13 h 16 min

    @Shadow: héhé voui j’essaye :twisted:

    RépondreRépondre
  7. -jil-, le 16 octobre 2010 à 13 h 17 min

    deux questions :
    « L’empattement c’est bourgeois »
    ça se justifie comment :?: et c’est dans un contexte particulier (écran) :?:
    Parce que je trouve ça assez amusant, mais je suis pas sûr de comprendre pourquoi :razz:

    « 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 :?:

    RépondreRépondre
  8. Geoffrey Dorne, le 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 :roll:
    « ou le corps de sa typo multiplié par 30 » : pour ça je ne sais plus très bien :cool: (et ça ne peut pas faire 360 caractères/lignes en effet ! :-D)

    RépondreRépondre
  9. MrCorbak, le 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é !

    RépondreRépondre
  10. -jil-, le 16 octobre 2010 à 13 h 32 min

    @Geoffrey Dorne:
    ah bon, mais les linéales signalétiques, c’est pas un peu fasciste ? :razz: (cf Din) (bon d’accords elles sont pas toutes post-bauhaus mais yen a qd mm une suisse bien uniformisante :smile: )
    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.

    RépondreRépondre
  11. Geoffrey Dorne, le 16 octobre 2010 à 13 h 36 min

    @-jil-: mdr, en effet pour la DIN :lol:

    RépondreRépondre
  12. -jil-, le 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: ;-)

    RépondreRépondre
  13. Sch, le 16 octobre 2010 à 14 h 09 min

    Tout est magnifique dans cette présentation. Cela vaut aussi pour la présentatrice. ;)

    RépondreRépondre
  14. Geoffrey Dorne, le 16 octobre 2010 à 14 h 10 min

    @Sch: et encore, tu n’as pas vu son humour :oops:

    RépondreRépondre
  15. Sch, le 16 octobre 2010 à 14 h 55 min

    @Geoffrey Dorne: :lol:

    RépondreRépondre
  16. Philou, le 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 !

    RépondreRépondre
  17. Geoffrey Dorne, le 17 octobre 2010 à 12 h 20 min

    @Philou: :mrgreen: héhé, tu y étais aussi ? La prochaine fois on se prendra un café ;-)

    RépondreRépondre
  18. Jérémy Vey, le 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 !

    RépondreRépondre
  19. tetue, le 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 !

    RépondreRépondre
  20. Geoffrey Dorne, le 17 octobre 2010 à 22 h 15 min

    @tetue: ce sera avec plaisir une prochaine fois j’espère :smile:

    RépondreRépondre
  21. Anne-So aka Mitt, le 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 !

    RépondreRépondre
  22. Green Fish Lab, le 18 octobre 2010 à 11 h 15 min

    Merci pour ce compte-rendu très intéressant. :-)

    RépondreRépondre
  23. Geoffrey Dorne, le 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 :grin:

    RépondreRépondre
  24. YVan Douënel, le 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…

    RépondreRépondre
  25. tetue, le 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

    RépondreRépondre
  26. Philippe @ HTML5 Débloque-notes, le 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).

    RépondreRépondre
  27. tetue, le 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 !

    RépondreRépondre

Écrivez un commentaire