Typographisme - Événements

Kikk Festival à Namur

Anne-So — Fri, 02 Dec 2011 09:37:00 +0100

J’ai eu la chance d’être invitée à faire une présentation à l’occasion du Kikk Festival organisé à Namur par l’agence Dogstudio les 24 et 25 novembre 2011. Réunissant des intervenants issus de différents domaines du numérique – beaucoup de designers Web, bien sûr, mais aussi des artistes de l’image et du son, des étudiants, des journalistes, etc. – le festival proposait des conférences, des ateliers, des installations, une grosse soirée ~~beuverie~~ cocktail, et un concours sur le mode du marathon de création, les participants ayant 24h sur les deux jours pour produire un site, une appli ou une œuvre numérique. Le tout servi dans une identité graphique très réussie.

Les deux jours de ce festival impeccablement organisé ont été un vrai plaisir. En tant qu’oratrice j’ai été chouchoutée plus que de raison, et les quatre heures de débat avec les autres membres du jury pour l’attribution des prix du Kontest ont été très enrichissantes (et il y avait du café et des figues sèches, preuve de bon goût). Comme je n’arrive toujours pas à me trouver à deux endroits en même temps, j’ai malheureusement dû renoncer à quelques conférences passionnantes pour m’adonner à une de mes activités préférées – donner mon avis sur des trucs. Ma participation au jury m’a toutefois valu quelques chouettes discussions avec les lauréats – des étudiants tout remplis de motivation – le soir autour d’une bière. Je vous recommande particulièrement le mini-métrage de Graphissim (Grand Prix) qui vous fera visiter Namur, et le projet de I van Pike d’Hoekendijk, étudiants en art numérique récompensés pour leur créativité – qui méritent qu’on attende un peu que le site charge, je rappelle qu’ils n’avaient que 24h pour monter leur projet et réaliser le site.

J’ai tout de même pu assister à plusieurs présentations axées autour de la création et de l’amour du métier dans le domaine du Web, mais je dois avouer que celle qui m’a le plus marquée est sans aucun doute l’intervention de Ben Hammersley, rédacteur chez Wired, dont voici une rapide introduction :

Ben Hammersley, Editor, Wired @ KIKK Festival par awtbe sur Vimeo.

Ses perspectives sont loin d’être optimistes mais il nous exhorte à aller à l’essentiel, à nous informer, à regarder le monde avec lucidité afin de nous préparer aux bouleversements qui s’en viennent et à prendre les choses en main pour construire un nouvel avenir. Voici le condensé que j’ai relevé pendant son intervention :

Prepare yourself for the future, prepare yourself to be in charge when things get nasty – and they will. So clear your mind, shed the useless, unsubscribe. Resubscribe after a few months if you miss it – but you won’t.

[Préparez-vous pour l’avenir, préparez-vous à prendre les choses en main lorsque les choses tourneront mal – et elles vont mal tourner. Alors faites le vide, laissez tomber l’inutile, désabonnez-vous. Vous vous réabonnerez dans quelques mois si ça vous manque – mais je doute que ce soit le cas.]

Mon intervention portait sur le parallèle qu’on peut établir entre la révolution numérique et celle de l’imprimerie. Mon idée était de s’inspirer des pistes explorées par les premiers imprimeurs et graveurs pour trouver des moyens de donner ses lettres de noblesse au support numérique et au support Web comme vecteurs du savoir et des idées. Si vous êtes curieux, j’ai mis les slides de la conférence sur Slideshare. Les présentations du Kikk ont toutes été filmées mais les vidéos ne sont pas encore disponibles. J’avais promis de mettre en ligne quelques ressources en lien avec la présentation, elles sont à la fin de ce billet.

Après le succès de cette année, il semble que Gilles Bazelaire, Gaëtan Libertiaux et toute l’agence Dogstudio, soutenus par de nombreux et dévoués bénévoles, soit très motivés à l’idée de remettre le couvert l’année prochaine. Tant mieux. Et cette fois, j’irai en touriste, on profite quand même mieux sans le stress d’une présentation, personnellement je trouve.

De Garamont à Hoefler : quelques pistes

À propos de Garamont, du Garamond et de toute cette riche époque plus effervescente qu’un cachet d’aspirine dans une limonade : le site dédié à Garamont du ministère de la Culture.
Bonnes pratiques d’accessibilité des sites Web :
- WCAG, Règles pour l’accessibilité des contenus Web
- Projet Opquast, visant à l’élaboration de normes de qualité Web ouvertes (et donc faites pour être employées)
Des réflexions intelligentes et intéressantes sur le livre numérique et d’autres sujets connexes : Polylogue, le blog de Nicolas Taffin. Également président des Rencontres de Lure, vous pouvez le retrouver sur Twitter, @NT_polylogue
Un autre fervent défenseur de l’ouverture et de la liberté en matière de typographie numérique : Franck Adebiaye, lui aussi présent sur Twitter, @fadebiaye
À paraître : Webgrids, structure et typographie de la page Web, aux éditions Atelier Perrousseaux (oui oui je m’auto-promotionne).

Je manque un peu d’inspiration là maintenant tout de suite, donc si vous avez des idées pour compléter cette liste de ressources, n’hésitez pas à vous manifester dans les commentaires.

Choses glanées lors de l’Ampersand Conference

Anne-So — Fri, 24 Jun 2011 14:29:00 +0200

La semaine dernière, à la faveur de l’Ampersand Conference, j’ai pris un week-end prolongé du côté de la perfide Albion pour m’aérer le neurone, voir la mer, écouter des gens intelligents et boire beaucoup de café et de bière en bonne compagnie – notamment des petits camarades de Paris-Web, Sophie, Aurélien, Raphaëlle [aidez-moi à retrouver son URL s’il-vous-plaît] et Francis. Au programme : une pre-party la veille, une journée de conférence sous caféine avec huit intervenants-de-qualité, une autre youpi-party le soir et pour conclure, le samedi matin, une visite de Brighton guidée par l’excellent Phil Baines à qui je voue un culte en toute simplicité (en matière de graphisme, je suis polythéiste mais sélective).

L’Ampersand Conference, organisée par Clearleft, s’est déroulée à Brighton le vendredi 17 juin 2011.

Je ne vais pas vous faire un rapport détaillé, plutôt vous donner un peu en vrac les choses intéressantes que j’ai relevées pendant cette longue journée.

Jon Tan a encouragé les designers web à créer des lieux plutôt que des pages, en mettant l’accent sur la notion de familiarité et en rappelant la force de la typographie en matière d’identité visuelle. Il nous a également longuement entretenus du lizard brain et des manières de lui bien parler en utilisant une typographie idoine, ce qui est resté totalement abscons pour moi jusqu’à ce qu’à la faveur d’un schéma, je percute qu’il s’agissait du cerveau reptilien. Vieux motard, tout ça.

Jonathan Hoefler nous en a mis plein les mirettes avec ses fontes tellement bien hintées (à la main sous la pleine lune) qu’elles s’affichent mieux que les bonnes vieilles polices websafe. La fonderie Hoefler & Frere-Jones fait un travail de titan pour faire progresser la typo à l’écran. J’ai également trouvé intéressante son idée qu’un design system est ce qui permet de donner une forme à une idée : en matière de dessin de caractère, l’idée du caractère peut être traduite en des formes différentes selon que l’on applique le design system propre aux fontes pour écran ou pour le papier.

En fin de journée, Mark Boulton m’a mis des paillettes dans le cœur en se faisant l’avocat des systèmes graphiques (la grille en étant l’exemple le plus immédiat). Alors que le temps se traduit inexorablement par une progression de l’ordre vers le chaos, le designer lutte au contraire pour mettre de l’ordre dans le chaos. Pour cela, il fait ce que l’être humain fait depuis la nuit des temps pour progresser (et surtout se reposer), il confie son intelligence à un objet ou un système qui lui est extérieur. Il ne lui reste plus qu’à utiliser ce système et son intelligence peut se consacrer à autre chose. Il reste que le temps fait tout de même son œuvre et que le designer doit accepter que sa création, aussi rigoureuse soit-elle, soit à terme condamnée au chaos.

Je ne suis pas en train de dire que les cinq autres interventions étaient sans intérêt, bien au contraire. J’ai particulièrement apprécié celles de Jason Santa Maria et de David Berlow – même si la digestion de la pizza diminuait gravement mes facultés intellectuelles – mais je préfère m’en tenir à l’essentiel.

Autour de la conférence, j’ai eu le plaisir de discuter avec plein de gens intéressants, dont Victor Gaultney, dessinateur de Gentium, un projet que je trouve passionnant. Il m’a suggéré d’aller faire un tour du côté de scriptsource.org, base de connaissance sur les systèmes d’écriture, et je vous encourage à faire de même en attendant que nous nous penchions plus avant sur la question. J’ai également eu quelques conversations rafraîchissantes avec certaines idoles personnelles dont je vous épargnerai l’énumération.

Je n’ai pas rapporté de bonnes photos de la conférence en elle-même, pour les mêmes raisons qui font que je n’ai pas touitté : le multi-tasking c’est le cancer de nos sociétés modernes. Par contre, j’en ai fait quelques unes pendant la visite de Brighton, et elles sont sur Flickr pour les amateurs d’enseignes et d’inscriptions monumentales britanniques.

Traits d'union, traces d'écriture

Anne-So — Wed, 19 Jan 2011 02:19:00 +0100

Ne passant jamais à côté d’une occasion de boire du champagne et manger des chips aux frais de la collectivité tout en devisant avec des gens de talent et en regardant de belles choses, je me suis rendue en courant et en avance au vernissage de l’exposition Traits d’union, traces d’écriture, visible dans le hall de la mairie du Xe arrondissement de Paris jusqu’au 17 février. Preuve de la qualité de l’exposition, Nicola Sirkis y était également, comme en témoigne indubitablement la photo ci-dessous.

L’exposition présente de nombreux travaux de Laurent Pflughaupt, Stéphanie Devaux, Denise Luc, Jean-Marie Dommeizel et David Lozach. À aucun moment ces œuvres puissamment contemporaines n’ignorent l’histoire dont elles sont héritières, comme le rappellent les objets d’écriture et les pages de manuscrits anciens qui complètent l’exposition et la mettent en perspective. Chacun à leur manière, les cinq artistes perpétuent et renouvellent un art du trait, une gestuelle à la fois pulsionnelle et concentrée. La valeur graphique pure de la lettre est révélée dans des compositions fortes et contrastées et un travail précis des textures créées par la fusion de l’encre, de la peinture, des couches de papiers divers, mais aussi du bois, du tissu et du métal. Et au-delà de la forme, la lettre est une trace sensible de l’intelligence, la connaissance et la spiritualité de l’Homme.

Bien. J’ai épuisé ma compétence « rédaction » pour ce soir, je vais plutôt vous présenter quelques photos et laisser parler les calligraphes.

Ce chemin de connaissance croise des disciplines multiples, artistiques, scientifiques, sprituelles… C’est une recherche de fusion avec la nature, le prolongement d’un état mental, un constat, nourri de ce qui fut, et de la perception du moment.
— Stéphanie Devaux

D’autres photos de l’exposition sont visibles sur une galerie Flickr dédiée et vous pouvez télécharger le catalogue de l’expo au format PDF sur le site de la mairie, qui fait très bien les choses. Enfin, si ces travaux vous intéressent et que vous avez envie d’apprendre ou de vous perfectionner auprès d’un formidable pédagogue, Laurent Pflughaupt organise des stages dans son atelier à Paris.

Flavia Cocchi à la Galerie Anatome

Anne-So — Sat, 30 Oct 2010 16:03:00 +0200

En sortant de l’exposition consacrée aux travaux de Flavia Cocchi, graphiste née à Lausanne en 1962, j’étais vraiment séduite par l’intelligence avec laquelle elle met la rigueur au service de la chaleur. On sent tout à la fois l’influence de l’esthétique suisse et une grande sensualité, qui s’exprime dans une prédilection pour les tons chauds et un grand attachement aux textures, évident dans les livres qu’elle a conçus.

Quelques mots sur Flavia Cocchi

Flavia Cocchi s’est formée à l’École des Arts décoratifs de Genève où elle a assimilé les principes du graphisme suisse formalisés notamment par Josef Müller-Brockmann et Emil Ruder. C’est en travaillant avec Werner Jekel entre 1985 et 1989 qu’elle confirme la puissance de la typographie. Elle rejoint ensuite l’agence Anatome à Paris jusqu’en 1991 puis part pour l’Italie où on la retrouve aux côtés de Massimo Vignelli en 1995. Elle fonde finalement sa propre agence en 1997, l’Atelier Cocchi qu’elle partage avec son frère. Elle travaille aussi bien pour des institutions publiques (théâtres, musées…) que pour des entreprises privées, dans l’édition ou l’hôtellerie par exemple. Le Musée de Design et d’Arts appliqués (MUDAC) de Lausanne lui confie son identité graphique et ses communications graphiques depuis l’année 2000.

Les belles choses vues

L’exposition de la Galerie Anatome aborde des aspects très variés de la production de Flavia Cocchi. On découvre d’abord ses livres, dont plusieurs catalogues d’expositions réalisés pour le Mudac, et on est notamment frappé par le soin apporté aux moindres finitions des ouvrages, de la typographie à la reliure, ainsi qu’aux choix des matières. Les livres présentés sont là pour être manipulés, la photo ne rend qu’un maigre hommage au travail des textures.

Gabriele M. Rossi, Archilab (architecture et urbanisme)

À l’étage nous attendent affiches et communication graphique en divers formats. On peut ainsi se rendre compte de la variété graphique de la production de Flavia et de son amour pour la couleur partout présente, qu’elle en fasse un usage subtil et parcimonieux comme sur certaines affiches du Mudac, ou qu’elle lui donne la plus grande place, dans ses réalisations pour le Festival culturel japonais ou pour l’exposition Packaging : Emballer à dessein (toujours au Mudac).

Packaging : Emballer à dessein (Mudac)

Dans les oeuvres exposées à cet étage, on retrouve un jeu sur la matière, souvent exprimé par l’utilisation de la transparence, voire par le choix du papier et du mode d’impression comme dans cette affiche signalétique pour le Mudac, imprimée sur du papier kraft, où la lettre est sensible au toucher :

Avant de vous laisser sur quelques photos qui tentent d’illustrer la variété et de la finesse du travail de Flavia Cocchi, sachez que sa typo de prédilection est Accidenz Grotesk et que, sur les deux niveaux de l’exposition, le mur du fond est recouvert d’une grille de lettres, comme dans Télé 7 Jeux. D’ailleurs, la liste des mots à retrouver et les craies sont fournies.

Infos sur l’exposition

Si vous avez manqué le billet d’annonce, l’exposition se déroule dans la très ravissante et très agréable Galerie Anatome à Paris (38 rue Sedaine dans le 11e, métro Bastille ou Saint Sabin), jusqu’au 11 décembre 2010. L’entrée est gratuite, et si comme moi vous aimez remplir vos tiroirs de goodies en papier, pour quelques euros vous pourrez repartir avec le Petit Journal de la galerie (le No. 8 est consacré à l’expo), et un jeu de jolis petits dépliants qui présentent quatre aspects du travail de Flavia Cocchi : design, identités, affiches Mudac et catalogues Mudac.

Toutes les photos sont disponibles en grand dans un set Flickr.

Typographie à Paris-Web

Anne-So — Fri, 22 Oct 2010 10:01:00 +0200

Paris Web 2010, par Thanh

On pourrait difficilement se passer d’un petit retour sur Paris Web 2010, alors que la typographie était représentée par deux conférences, que la majeure partie de l’équipe y était réunie, et que l’événement a été le coup de pied au derrière qui nous manquait pour lancer Typographisme.

Pour toux ceux qui n’étaient pas dans le grand amphi de Paris Web, qui n’ont pas pu suivre les conférences en streaming ou qui ne savaient même pas qu’il était en train de se passer des choses incroyables près de Bécon-les-Bruyères, tentons de résumer un peu tout ce qui s’est dit.

La Typographie comme outil de design

David Rault est un typographe chevronné. Membre de l’Atypi, il est directeur de collection aux éditions Atelier Perrousseaux.

David Rault présente La Typographie comme outil de design. Photo de Sabine Dufaux.

Après avoir démontré la puissance de connotation du caractère par quelques exemple d’emplois et de contre-emplois, sa conférence a longuement abordé la capacité des caractères à communiquer un message précis, à dégager un ensemble de tonalités que nous ressentons à chaque fois que nous faisons face à de l’écrit même si nous n’en sommes pas toujours conscient.

Chaque caractère d’imprimerie possède son propre passé, véhicule un bagage culturel, historique et social, et crée par sa seule présence sur une page, au-delà du sens des mots écrits, une véritable ambiance.

Il a donc passé en revue les grandes familles de caractères en s’appuyant sur la classification Vox-Atypi, détaillant ce qu’évoque chacune d’elles. Je résume rapidement (j’ai une formidable antisèche à côté de moi) :

Manuaires : historiquement et culturellement très connotées, Moyen Âge, tradition celtique
Humanes : tradition, sagesse, savoir, aspect rustique
Garaldes : noblesse, élégance, tradition, raffinement, univers littéraire et artistique
Réales : précision et lisibilité, connaissance, administration, sérieux, fiabilité, austérité
Didones : Italie, France, austérité, romantisme, administration, littérature, autorité, luxe, aristocratie
Mécanes : industrie, travail, machine, jazz, Amérique du Nord, XIXe siècle, années 50
Linéales : objectivité, neutralité, simplicité, scences et techniques, publicité, art moderne
Incises : rigueur, classe, harmonie, élégance ; souvent associées aux cosmétiques
Scriptes : écriture manuscrite naturelle, porteuses de fortes connotations (faire-part, enseignes)
Fractures : caractères dits « gothiques », ancrage historique et géographique fort, mode gothique, métal

Évidemment, la famille des linéales est très vaste. À l’époque où la classification a été mise au point, les polices sans empattements n’étaient pas très nombreuses. Manque de bol, ce sont celles-là qui se sont le plus développées au cours du XXe siècle.

Concernant l’utilisation des familles sur le Web et sur écran en général, David Rault préconise l’emploi de sans serif pour le titrage et les textes courts, et celui des serif comme typo de labeur (pour les textes longs, donc). En effet, les empattements ont pour vertu de lier optiquement les lettres les unes aux autres, ce qui facilite le parcours de l’oeil et donc la lecture. Les linéales, qui en sont dépourvues, gênent imperceptiblement la lecture, ce qui constituait d’ailleurs, à leurs débuts, un argument en leur faveur : le léger ralentissement qu’elles provoquent inciterait à une lecture plus approfondi, une plus grande attention accordée au texte (cela reste à prouver bien sûr). Les serif à gros oeil telles que Georgia – police websafe d’autant plus recommandable qu’elle a été dessinée pour l’écran – restent, selon lui, les championnes de la lisibilité.

Abordant le sujet de @font-face dans la dernière partie de son intervention, David Rault a exprimé des réserves pour plusieurs raisons. Tout d’abord, l’absence d’usage commun en terme de format, chaque navigateur supportant tel ou tel format de police. Il a également évoqué le fait que les polices optimisées pour l’écran sont rares. Enfin, il a rappelé les inquiétudes de nombre de dessinateurs de caractères concernant le piratage des polices mises à disposition aux formats open-type ou true-type ; selon lui, les solutions telles que Typekit ne sont pas encore au point. Nous aurons l’occasion de débattre de ces points en détail dans un prochain billet.

Si vous êtes fan, vous pouvez retrouver David sur Twitter, @davidrault, et vous procurer son excellent Guide du choix typographique, disponible en version papier et en version électronique.
Les slides de la présentation sont téléchargeables sur le blog de MC Casal : Paris Web 2010 les présentations

La Macrotypographie de la page Web

David ayant traité le caractère, j’ai orienté ma présentation vers l’autre grand pan de la typographie, celui de la mise en page. Il me semblait nécessaire de replacer la macrotypographie dans un contexte historique dans la mesure où celui-ci dicte l’essentiel de nos usages actuels. J’ai choisi de remonter jusqu’à l’ancêtre du livre, le volumen ou rouleau, car il me semble évident qu’il y a un parallèle à faire entre cette longue bande de papyrus qu’on déroule et qu’on enroule, et la page Web.

Votre serviteuse présente La Macrotypographie de la page Web. Photo de Sabine Dufaux.

Je tenais également à mettre en évidence que la macrotypographie est l’héritière directe des manuscrits calligraphiés du Moyen-Âge qui présentaient déjà tous les éléments qui font la macrotypo actuellement : tracés régulateurs, ornements, illustrations, etc. Cet ancrage historique est, selon moi, responsable d’une déformation lorsqu’on aborde le design sur le Web : on tend à vouloir plaquer sur un support qui n’a pas de dimensions fixes et qui nous échappe en grande partie, les principes de design utilisés sur le papier, objet tangible aux contours finis, sur lequel l’utilisateur n’a pour ainsi dire pas de prise.

Passant ensuite au design proprement dit, j’ai présenté différents types de grilles (à colonnes, basées sur le nombre d’or, modulaires) avec quelques exemples d’utilisation. J’ai insisté sur l’emploi de la ligne de base qui renforce le repère vertical et facilite autant la lecture que l’intelligibilité de la page. Sans aller dans le détail, j’ai fait le point sur les quelques principes qui régissent l’agencement des blocs dans la page : symétrie/asymétrie, contraste, masse visuelle, proximité. Le gris typographique, la graisse, l’emploi de la couleur, les blancs, etc. nous permettent de jouer avec ces paramètres.

En matière de texte courant, je voulais mettre en évidence qu’il serait une erreur de chercher à reproduire le livre sur l’écran. Si la largeur de justification recommandée est sensiblement la même (pas plus de 55 à 65 caractères par ligne), l’interlignage sur le Web (140-150% du corps) doit être plus important que celui du print, et on peut rarement se permettre de justifier le texte (on le laisse sagement aligné à gauche). De plus, comme la page Web est dépourvue des pauses de fin de page, il est essentiel de fragmenter et ponctuer les textes longs assez généreusement, comme le font plutôt les magazines. On n’hésite donc pas à employer titres, sous-titres, blocs de citation, exergues, etc. qui, en plus de rompre la monotonie graphique du texte, contribuent à maintenir l’attention du lecteur, ou à l’orienter facilement s’il cherche une information. Le respect de la ligne de base permet d’apporter de la cohérence à l’ensemble.

Et parce que tout ça est bien sérieux et dogmatique, j’ai conclu en présentant quelques exemples de traitements originaux, beaucoup plus proches du magazine : les articles Features de Boing Boing. Maîtriser les principes de lisibilité et de mise en page donne ensuite la liberté de sortir du cadre et de le détourner pour produire des designs inattendus qui restent utilisables.

Les slides de la présentation sont disponibles sur Slideshare. (Et oui, je sais, ce compte-rendu est bien moins drôle que la conf, mais que voulez-vous, j’essaie de résumer, c’est déjà pas facile.)