Projet TNT

L’évolution de la typographie sur Medium

Medium France
Une Histoire
5 min readOct 29, 2015

--

Il se fait tard ce jeudi soir dans les bureaux de Medium, une semaine avant le lancement de la version 2.0. Marcin, un ami designer et graphiste, est installé à quelques mètres de là. Nous avons tous connu ce moment, lorsque nous travaillons sur un projet et que nous sommes fatigués - vraiment, vraiment fatigué - et que nous remettons en question tout ce que nous avons accompli jusque là.

Nous nous arrêtons pour réfléchir, devons-nous simplement garder le police que nous utilisons actuellement ? Après tout, ce qui compte c’était sans doute le voyage et pas la destination.

Un mois plus tôt, nous commencions à revisiter entièrement toute la typographie utilisée sur Medium.

Chez Medium, la typographie est une composante majeure du design. Nous sommes une plate-forme d’histoires, et c’est avec la typographie que nous mettons en valeur nos histoires. Nous prenons soin de la typographie rien que pour vous. Nous avons transformé vos citations basiques en citations élégantes, ajusté le poids des passages surlignés, fait en sorte que l’impression des histoires sur papier soit de bonne qualité, etc.

Nos contraintes sont en train de changer. Nous avons rendu l’écriture sur Medium plus décontractée et prolongé la même expérience d'écriture sur iOS. Peu de temps après, nous avons réalisé la même chose sur Android - le tout dans les six derniers mois. Nous avons créé de nouvelles toiles et nous devons par conséquent réfléchir à l’impact que cela peut avoir sur notre design.

Aujourd’hui, ce rafraîchissement de la typographie de Medium est une évolution. Nous avons décidé de soutenir une plus grande variété d'histoires, d’apporter une typographie plus riche sur Medium, en perdant peut-être en route un peu de notre sommeil.

Le premier jour du projet a été consacré à l'espace physique. Nous avons mise en place une zone dans le bureau, déménagé les meubles qui se trouvaient autour et avons imprimé le logo de notre projet sur le traceur... ou plutôt, non pas notre logo, mais le logo rigolo d'une station de télévision (une petite plaisanterie entre nous, inspiré du mouvement “Nouvelle Typographie”).

Nous avons fait cela pour que nos collaborateurs se sentent réellement impliqués dans le processus. Nous avons partagé nos idées et nos avancées, construit un mur de polices présentant certains des caractères que nous envisagions, fixé nos échéances sur un énorme calendrier et créé un channel sur Slack afin de maintenir les discussions.

Ensuite, nous avons construit des outils personnalisés pour nous aider à tester et à comparer les polices au sein de notre interface utilisateur. Pour nous amuser, nous les avons appelé “le terminal Bloomberg de la typographie” ou “le Typograficator” (soit deux noms tout à fait horribles on vous l’accorde). Il vous était alors possible de choisir parmi les nombreuses histoires postées sur Medium, de glisser des polices dans le navigateur et de procéder à tous les ajustements possibles afin d’en faire la police la mieux adaptée et dont le rendu serait parfait. Nous ne nous sommes pas uniquement attelés à la version bureau, mais nous avons construit ces outils en direct et de manière synchronisée avec nos appareils iOS et Android.

Tester les polices dans des situations réelles était la clé. Nous avons rapidement testé plusieurs variantes sur le web et sur nos applications mobiles afin de pouvoir commencer à lire et à écrire avec ces nouvelles polices. Nous avons fait plusieurs essais en interne et avec une équipe de testeurs en lesquels nous avions confiance. Nous avons également eu le luxe de faire appel à certains chercheurs et autres grands spécialistes de la typographie (ils se reconnaîtront). Chaque jour nous produisions une nouvelle police, partagions notre travail avec tous les testeurs et sollicitions leurs retours. Ce fut un voyage rempli d’émotions, un voyage au cours duquel nous étions capable à la fois d’adorer puis détester les idées que l’on avait eu la veille (désolé Riona).

Après d'innombrables nuits qui n’en finissaient plus, des centaines de polices testées, de multiples interventions de Marcin s’esclaffant "la typographie est en train de me rendre fou !", et plus de 2000 messages sur Slack, nous sommes parvenus à établir deux nouvelles familles :

Kievit deviendra la nouvelle locomotive de nos histoires en incarnant notre nouvelle police de titre. Kievit est un savant mélange de caractère et de structure (notre police précédente sans-serif, Bernino, servait à la fois pour la police de titre et l'interface utilisateur, un rôle que n’occupe plus aujourd’hui Kievit). En prime, Kievit Slab fait également son apparition et si vous n'avez pas encore vu l'esperluette Kievit Slab, nous vous conseillons vivement d’aller jeter un œil à cette galerie de caractères.

Pour l'interface environnante, nous avons pris la décision d'utiliser les polices système. Pour iOS, il s’agit de la nouvelle famille de polices d'Apple (San Francisco), et pour Android la police de Google Roboto. Nous pensons que l'interface utilisateur devrait venir au second plan par rapport aux histoires écrites sur Medium, et nous poussons l’idée encore plus plus loin en utilisant les polices déjà familières à chaque système d'exploitation.

Nous sommes très heureux de partager cela avec tous ceux qui lisent et écrivent sur Medium. Ce voyage a été éprouvant (mais également très amusant !) et chaque instant de ce périple était source de valeur. Je suis sûr que tout cela provoque chez vous de nombreuses réactions. Nous serions ravis de les entendre ! Ça tombe bien, nous construisons un produit qui vous permet exactement de faire cela.

Ah oui, nous avons aussi une toute nouvelle palette de couleurs. Peut-être réussirons-nous bientôt à obtenir quelques mots de Brad Simpson pour qu’il vous en dise un peu plus son processus mystique qui lui a permis d’aboutir à ces couleurs ?

--

--