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 » ;-) 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 😀
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 🙂
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 😀
@marroon: oui, il y a encore beaucoup de travail au niveau de la lisibilité typo sur internet 😎
Le « mozilla » sur ton badge, c’est pour quoi ? Tu étais là en tant que membre de la fondation ?
@Shadow: je bosse chez Mozilla depuis deux semaines maintenant
@Geoffrey Dorne:
En plus des cours à l’ENSAD et des missions freelance en design ? Wow, on sent l’adepte du multitâches ! 😉
@Shadow: héhé voui j’essaye 😈
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 😛
« 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 ❓
@-jil-: « L’empattement c’est bourgeois » était un genre de blague pour (si je me souviens bien), expliquer la typographie post-bauhaus 🙄
« ou le corps de sa typo multiplié par 30 » : pour ça je ne sais plus très bien 😎 (et ça ne peut pas faire 360 caractères/lignes en effet ! :-D)
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é !
@Geoffrey Dorne:
ah bon, mais les linéales signalétiques, c’est pas un peu fasciste ? 😛 (cf Din) (bon d’accords elles sont pas toutes post-bauhaus mais yen a qd mm une suisse bien uniformisante 🙂 )
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.
@-jil-: mdr, en effet pour la DIN 😆
@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: 😉
Tout est magnifique dans cette présentation. Cela vaut aussi pour la présentatrice. 😉
@Sch: et encore, tu n’as pas vu son humour 😳
@Geoffrey Dorne: 😆
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 !
@Philou:
héhé, tu y étais aussi ? La prochaine fois on se prendra un café 😉
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 !
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 !
@tetue: ce sera avec plaisir une prochaine fois j’espère 🙂
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 !
Merci pour ce compte-rendu très intéressant. 🙂
@Anne-So aka Mitt: Un grand merci ! Ça m’a passionné, vraiment 🙂 Et merci aussi pour la petite explication des empattements 😀
@-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…
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
Superbe !
Y en a qui vont avoir du boulot pour remettre leur typo en ordre (’et je ne m’en exclus pas).
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 !