Interactivités typographiques
entre le sensible et l’ordinateur

Clavier

L’écriture numérique, telle qu’on la connaît aujourd’hui, se fait principalement par le biais d’un clavier. Un clavier physique, comme sur les PC, ou numérique, comme sur les smartphones. Le système de clavier à était créé en 1868 par un imprimeur américain, Christopher Latham Sholes, et équipera les machines à écrire produites par Remington en 1873 .

Naturellement, les premiers systèmes informatiques avec clavier créés en 1960 ont été équipés avec les normes QWERTY et AZERTY déjà mis en place, afin de ne pas brusquer les habitudes des consommateurs, bien que aucune tige mécanique ne vienne ici nécessiter la séparation des lettres. À l’époque, l’interaction se résume à la fatigue musculaire.

Ce qui nous permet aujourd’hui la communication de textes entre ordinateurs, c’est l’Unicode, un standard informatique créé en 1991 et toujours mis à jour, qui encode les lettres et symboles en donnant à tout caractère de n’importe quel système d’écriture un identifiant numérique. Quel que soit la plateforme ou le logiciel utilisé pour lire ou écrire, un 'A' reste un 'A'.

Comme nous l’avons vu dans le lexique sur l’interactivité, John Maeda, fondateur de sa discipline, a publié 5 Reactive Book, dont Tap, type, write en 1998, que je vous laisse découvrir.

L’École Supérieure d’Art & de Communication de Cambrai a travaillé sur les Reactive Book quand j’y étais encore étudiant dans le cadre de l’ARC RAS et voici comment ils introduisent ce livre :

L’auteur a travaillé sur le lien étroit entre le clavier et la lettre qui s’en échappe. C’est un hommage à la machine à écrire dans lequel il valorise chaque caractère de l’alphabet en fonction de la touche enfoncée. À l’écran, l’utilisateur peut réarranger la disposition d’un clavier QWERTY, jouer sur un certain équilibre typographique.

En effet, John Maeda nous montre des interactivités qui correspondent au temps pour lequel une touche reste appuyée, changeant la taille, la rotation ou la position de la lettre. Cette interactivité avec le temps de pression est augmentée par deux choses que sont un important changement visuel à la première frappe, suivi par un changement exponentiel.

Ici nous sommes face aux toutes premières interactivités graphiques avec un clavier. Le registre sonore métallique et les lettres qui sautent et sortent de leur emplacement géométrique, donnent évidemment l’expérience d’une machine à écrire augmentée.

J'apprécie particulièrement à 7:40, ce miroir visuel du clavier où l'emplacement de la touche frappée sur le clavier plutôt à droite ou plutôt à gauche, modifie son poids et donc l'orientation du clavier. Nous avons là une interactivité plus poussée que les autres avec un rapport humain-périphérique-résultat qui conserve l'action passée.

Aujourd'hui obsolète, le projet reste consultable au Museum of Modern Art (MoMA) de New York sur une série d’anciens Power Macintosh, seul environnement capable de lire le programme. Il existe cependant une version repensée de ces œuvres créée par les étudiants de l'ÉSAC, dont voici un extrait.

Je trouve particulièrement intéressantes les deux premières interactivités, pour quelque chose que la troisième ne contient pas : le lien entre le temps appuyé sur une touche et le changement visuel. En effet, la lettre continue de grandir mais dans une action de tremblement ou de rotation de plus en plus rapide. La deuxième expérience a en plus cet atout de conserver le temps appuyé sur chaque touche, rappuyer sur l'une d'elles conserve la vélocité déjà atteinte.

Ces interactivités restent cependant limitées dans une représentation de l'alphabet latin qui ne correspond pas à une activité d'écriture. On ressent l'humain derrière l'action mais il n'inscrit pas toujours un message, puisque parfois le résultat se réinitialise.

D'autres artistes-développeurs se sont ensuite emparés de cette mise en valeur, qui tombe sous le sens, du rythme de frappe. Avec par exemple le programme P_3_1_1_01 du catalogue Generative Gestaltung, un regroupement d'une centaine de sketchs (court code) paru en 2009. Ici, dans cet éditeur de texte, c'est la vitesse entre les frappes qui change la taille de la lettre et non pas le temps appuyé sur la touche.

J'ai moi même réutilsé ce code, que j'ai modifié, pour créer un logiciel de traitement de texte poétique aux diverses typographies

Il y a aussi le programme presque instrument de musique Typatone. Ici chaque lettre a une note assimilée et les espaces sont des silences, aussi nous pouvons réentendre notre texte une fois terminé.

D'après moi, pour que ce programme soit plus intéressant, il aurait dû enregistrer la vitesse de frappe originale, car lorsque l'on rejoue le texte le rythme devient fixe et ne correspond plus à l'action humaine originale.

Le sketch suivant profite du fait que le texte frappé sur le clavier se fait touche par touche pour nous proposer une nébuleuse de lettres à la position et à la taille aléatoire, mais sinon rien de plus.

Sans passer par une interface particulière, certaines typographies possèdent des programmes internes, qui lors de la frappe changent la mise en forme des lettres.

Le dessinateur Nikola Djurek en a publié de nombreuses avec une technologie qui analyse le nombre de caractères dans un mot et change le dessin de chacun d'entre eux en fonction de sa position. Toutes publiées chez la fonderie Typotheque, nous avons Delvard Gradient , Plotter Wave , Francis Gradient et Mississippi .

Mais là nous nous éloignons déjà de l'interactivité avec le périphérique clavier, car en effet n'importe quel texte écrit d'une autre manière comme dictée ou copier/coller prendrait la même forme.

Bien qu'étant la principale manière d'intégrer du texte, le clavier reste cependant pauvre en entrées autres que la vitesse de frappe ou la position de la touche dans l'espace physique. Cela pourrait cependant changer avec un capteur de pression de touche, une technologie encore peu répandue. Nous pourrions alors capter la force de frappe et la rendre dans le texte, comme le propose le concept de la Pressure , une typographie dessinée par Felix Summ.

Souris & Pavé Tactile

La souris est un dispositif de pointage et de sélection dans le prolongement de la main qui permet de se déplacer sur l'axe X (horizontal) et Y (vertical) d'un écran. Elle a été inventée dans les années 60 par Douglas Engelbart du Stanford Research Institute. D'abord à boule et maintenant optique, elle est composée d'un petit boîtier fait pour tenir sous la main, sur lequel se trouvent un ou plusieurs boutons, et une molette dans la plupart des cas.

Le pavé tactile a globalement les mêmes fonctions, il a été inventé par George E. Gerpheide, un docteur en informatique américain, en 1988 . Son objectif était de créer un dispositif de pointage adapté à l'interface graphique d'un Macintosh ne demandant pas d'éloigner conséquemment les mains du clavier.

Souris & Pavé Tactile sont des périphériques très utilisés et aux nombreuses fonctions comme nous allons le voir. Je me concentrerai donc volontairement sur les fonctions de pointage et de sélection et je parlerai du scroll ainsi que du traçage dans les parties suivantes dédiées.

À l'image de la partie précédente, John Maeda a créé en 1995 The Flying Letters comportant 10 interactivités possibles pour la souris, elle aussi centrée sur le texte.

Voici le commentaire de l'ARC RAS de l'ÉSAL :

L’utilisateur peut jouer avec le curseur de la souris pour manipuler le corps d’un texte. John Maeda prend en compte la position du pointeur (suivi, survol, collision, orientation, vitesse, proximité, le clic). Chaque mot est incarné par l'interactivité, comme un haïku visuel, il renforce le caractère poétique de l’œuvre.

En effet, nous avons un aspect poétique bien plus important car la souris permet des interactivités plus flottantes et nombreuses à l'inverse du clavier plus rigide. Ici l'utilisateur est actif dans la manipulation du texte, là où le clavier écrit, la souris vient comme un doigt dans du sable, toucher la matière et activer des mots en modifiant leur disposition ou en les révélant. La forme du texte est en lien avec le mouvement du corps.

Je trouve ces expériences particulièrement intéressantes car elles mettent en place une certaine vélocité. L'utilisateur peut exprimer une force plus ou moins contrôlée qui va permettre au texte d'être proportionnellement lisible. John Maeda a eu l'intelligence de renforcer ce sentiment par des programmes contre lesquels il faut presque lutter car ils vont inexorablement plus vite que l'humain.

Comme pour la partie précédente, basée sur The Flying Letters, voici différentes réinterprétations interactives des étudiants de Cambrai :

La souris étant l'un des périphériques les plus utilisés grâce à ses nombreuses caractéristiques, on retrouve de nombreux développeurs qui s'en emparent pour de multiples utilisations. L'une d'entre elles est l'interactivité au survol qui permet de signifier un élément cliquable. Le plus souvent, l'élément change de couleur et notre curseur devient une main avec un doigt pointé.

L'hyperlien ou URL en anglais, composé de texte, est un parfait exemple. Par défaut, le World Wide Web Consortium a défini qu'il serait bleu et souligné, des codes graphiques simples avec lesquels certains développeurs jouent. Un mouvement graphique et écologique portant le nom de Web Radical Design.

Dans ce dernier exemple, l'auteur utilise une typographie variable pour permettre une animation lisse presque hypnotisante. Cependant cela crée un décalage du contenu autour du lien. Pour pallier à cela nous pouvons utiliser une typographie dite multiplexed, c'est-à-dire que peu importe la graisse utilisée, la lettre prend toujours la même chasse (le même espace horizontal) .

Les précédentes personnalisations des liens sont assez simples graphiquement, mais nous pouvons aller beaucoup plus loin dans leurs personnalisations. Manoela Ilic, développeuse douée et principale rédactrice du site de tutoriels open-source Codrops dont nous citerons à nouveau des exemples dans cet écrit, nous en propose plusieurs :

Ce survol qui active, comme un doigt appuierait sur un bouton dans la vraie vie, peut aussi se retrouver directement au sein du dessin typographique. C'est le cas de ce specimen, dont le site et la typographie ont été réalisés par Felix Summ lors des workshops Axes of Variation menés par Marie Otsuka, dessinatrice de caractères et développeuse notamment pour la fonderie Occupant Fonts. Elle est aussi professeur à Rhode Island School of Design aux États-Unis où elle mène un cours nommé Web Type. Une école qui fut notamment dirigée dans les années 2010 par John Maeda.

Bien que ces appels au clic soient très intéressants visuellement, il ne faut pas oublier que nous parlons d'interactivité et non d'animation. Le web est en effet rempli de réponses graphiques lancées par l'action du survol, ce qui se passe ensuite n'est pas toujours en lien avec le fait d'être au-dessus de l'élément. La mise en valeur du survol pourrait donc se faire encore plus avec une interactivité basée sur le temps resté au-dessus d'un élément :

C'est aussi le cas pour le specimen numérique du Ginto, une variable dessinée par Seb McLauchlan publiée chez Dinamo Typeface, dont le spécimen a été codé par Daniel Wenzel, développeur, dessinateur de caractères et directeur artistique chez le studio de motion design typographique DIA.

Dans cette interactivité, Daniel Wenzel nous propose de faire fondre les lettres comme des bougies, cela lui permet de mettre en avant l'aspect variable de sa typographie et l'importante nuance entre la plus épaisse des graisses et la plus fine dite hairline uniforme et dévêtue.

Parmi les autres outils, le développeur a également créé un système d'halo qui capture la distance entre le curseur et les lettres autour pour proportionnellement les faire s'amincir. Ici les lettres réagissent à notre présence et l'espace de l'écran devient un enclos de mouton où nous serions l'étranger à l'intérieur. Cette approche du survol permet donc également d'agir sur l'apparence d'un long texte et pas seulement sur un élément isolé.

Talia Cotton est designeuse, développeuse, professeur et conférencière à travers le monde. Elle a fondé l'agence Cotton Design qui propose des prestations d'identité de marque en utilisant des données en direct et des technologies interactives. Nous retrouverons dans différentes parties des exemples d'elle, de son studio mais aussi de ses nombreux étudiants. Elle nous propose sur son site de 2023, de nombreuses possibilités graphiques au survol :

Ces nombreuses interactivités font passer notre curseur de doigt magique à boîte à outils magique. Nous contrôlons à présent un disperseur de lettres, un renverseur de lettres sur l'étagère, un caviardeur, une machine à vagues, un monstre sous le tapis, une lampe torche de policier où les lettres se mettent de profil, une lampe torche de curieux sous la couette et un étendeur de mots.

J'ai un particulier plaisir à utiliser cette lampe dans le noir. Elle rajoute une vraie expérience de lecture interactive qui, peut-être une fois retirée de ses couleurs, peut servir à de nombreuses experiences de lecture en soutenant le propos d'un texte qui correspondrait.

Nous pouvons remarquer deux intrus sur cette page d'accueil. L'interactivité du caviardage et celle de l'étendeur, en effet elles agissent toutes les deux directement sur le fond du texte et son sens, ce n'est pas un simple réagencement des mots. Il est en effet assez rare de considérer la souris comme un outil d'écriture de texte typographié.

Le studio suisse de design et de programmation ertdfgcvb propose également sur son site une interactivité avec un halo autour de la souris qui vient temporairement modifier le contenu et le confondre avec l'animation en fond en utilisant les codes graphiques de l'ASCII Art. Un mouvement caractérisé par des compositions de caractères typographiques mono-châssés au dessin plus ou moins dense. Né avec la machine à écrire, il est popularisé avec les débuts de l'informatique pour des raisons pratiques à cause du poids des images matricielles, puis il s'épanouit comme une culture à part au sein des forums et plus précisément des communautés d'hackers.

Katie Bumatay nous suggère également une approche intéressante sur la modification du texte. Elle a créé une typographie variable qui, au survol, se métamorphose et devient un caractère illisible qui se fond dans la masse des autres lettres. L'approche est particulière car nous agissons sur le texte, mais la lettre encodée reste la même. Au survol du 'A', la lettre reste bien un 'A' informatiquement même si elle change de forme.

D'une toute autre manière, la souris au survol permet de modifier la position des mots et de les réarranger. Dans le cadre de l'activité de son studio, Talia Cotton a réalisé le site web de l'entreprise Yellow Technologies qui permet de jouer de manière contrôlée sur la perspective des mots.

L'approche est particulièrement intéressante pour ce site web puisqu'il ne comporte aucunes autres informations que ce grand texte et un email. Le studio de design graphique a ici souhaité, par une simple interactivité, rendre testables les termes caractéristiques de l'entreprise que sont outil et créativité.

L'interactivité avec la position des mots peut aussi se faire de manière beaucoup moins contrôlée. Tiger Dingsun, que nous retrouverons tout au long de cet écrit, est programmeur-typographe et a réalisé de nombreux projets qui questionnent la relation entre la poésie numérique et le lecteur. Nous aborderons particulièrement deux de ses plateformes de publications que sont 13 Poems for the First 13 Days of April et Reading Machines. Il décrit la dernière de la manière suivante :

Une plateforme d'édition pour réimaginer les relations établies entre le lecteur, le texte et l'auteur, et pour utiliser pleinement les possibilités du web dans la présentation des textes.

Les contributeurs sont invités à soumettre des textes susceptibles de se prêter à des lectures non linéaires, qui sont ensuite réinterprétées dans leurs propres sites web.

Ici, nous pouvons lire le poème numéro 7 où les mots deviennent vivants et autonomes une fois survolés.

Nous parlons depuis le début d'effets sur le texte, mais le survol peut aussi avoir pour but de mettre en avant plus de contenu, notamment dans le cadre de lourds corpus de texte. C'est le cas de ce projet de Katie Bumatay sur des textes patriotiques des États-Unis, où un jeu de couleurs, d'images et de typographies augmente et influence la perception de chaque mot qui compose le texte.

Ce système marche particulièrement bien graphiquement pour plusieurs raisons. Le texte sélectionné est mis en valeur car les autres autour sont floutés. Le mot en plus gros qui apparaît dans une autre typographie s'ajoute à celui sélectionné sans le gêner, et avec l'image, ils viennent tous deux donner de l'importance ainsi que de la profondeur sans nous faire perdre le fil de la lecture.

Comme nous avons pu le voir précédemment avec le spécimen du Ginto, il est aussi possible d'utiliser le curseur non pas pour survoler mais pour éloigner. Sur du texte, cela permet de recréer des mouvements de masses ou de fluides, comme ici avec cette interactivité où le texte se comporte tantôt comme de l'eau impactée par une bombe et tantôt comme fuyant un prédateur tel une nuée d'oiseaux.

Il est également possible de faire fuir la lettre dans le texte, comme avec ces exemples du studio allemand Schultzschultz. Ils sont spécialisés en dessins de caractères et leur apposition sur différents supports, notamment numériques, avec de nombreux programmes faits maison. Nous les retrouverons régulièrement tout au long de cet écrit.

Dans le premier exemple, nous retrouvons cet effet de monstre sous le tapis de Tallia Cotton, cette fois-ci à la place du texte, c'est la lettre elle-même qui se fait repousser vers le haut comme si nous venions gonfler par le bas le texte. Le survol est bien mis en avant puisque plus l'on reste sous la lettre plus elle s'éloigne. Par moments elle s'éloigne tellement qu'elle en perd sa forme et sa lisibilité. Une fois le curseur déplacé le tout reprend place dans un mouvement de rebonds proportionnel au gonflage.

Pour les deux derniers exemples, c'est dans un premier temps la lettre qui s'étire pour s'éloigner le plus possible du curseur sur l'axe de la largeur ou de la hauteur, puis la lettre se déplace à l'opposé de l'écran. Ce travail est magnifiquement maîtrisé pour de nombreuses raisons, je ne pense pas qu'une typographie variable soit utilisée et cela ressemble plus à de l'étirement de pixel, pourtant cela ne déforme pas la lettre aux mauvais endroits , elle reste parfaitement lisible et dessinée. Cela permet donc d'importer n'importe quelle typographie et le travail restera lisible. Le déplacement des lettres font également toute la ligne ce qui permet de garder un écart de lecture pour le reste du texte.

Le tout semble encore plus agité que d'autres exemples, il s'installe ici une vraie peur du curseur, une fuite toujours maximale et calculée qui se fait par mouvement foudroyant.

Une autre approche pour faire fuir la lettre est de la scinder en de nombreuses particules. C'est le cas de la page d'accueil du studio spacetype (trop lourde pour être affichée ici), composé de Kevin Yeh et Lynne Yun. Ils sont programmeurs, dessinateurs de caractères et professeurs pour de nombreuses écoles. Ils ont notamment créé les cours en ligne de création typographique Foundations of Type Design. Ils sont les développeurs derrière l'interactivité du site Existential Co.

Notre curseur vient ici à une échelle très petite repousser tous les éléments autour de lui, ce qui donne cette impression de sable ou de jeu avec des bulles. On remarquera que sur le site de S&P, les particules bougées ne reviennent pas à leur état initial, ce qui permet d'altérer graphiquement le texte soit pour le déranger, soit pour le rendre complètement illisible.

Le texte déjà écrit peut également suivre la souris avec plus ou moins de rigueur.

Dans ces programmes, je trouve particulièrement intéressants les effets gravitationnels dirigés par la souris qui à la fois attirent et repoussent les lettres. Il s'installe ainsi une réciprocité entre le programme et l'utilisateur. Dans le second exemple du studio ertdfgcvb, créateur de la librairie ASCII play, il nous est proposé une interactivité utilisant la typographie pour matière, mais nous pourrions tout à fait imaginer un texte inscrit, ou un mot répété en boucle.

La structure de la lettre peut également suivre en elle-même la souris.

Dans le premier programme de Codrops, ce sont les particules qui composent la lettre qui suivent de manière évidente le curseur, l'utilisation des yeux est elle optionnelle. Dans le deuxième programme du studio Schultzschultz c'est cette fois-ci la structure de la lettre, sa jonction centrale dans le cas du 'X', mais qui pourrait également marcher avec un 'K' ou un 'P', qui s'étire vers le curseur. Cela fonctionne mieux pour le second cas puisqu'il y a un lien avec une réelle modification de la lisibilité et de l'anatomie de la lettre.

Le texte peut donc suivre la souris, mais la souris peut aussi écrire en même temps, ou du moins placer le texte.

Ce programme est un parfait exemple d'interactivité réussie, il répond à sa fonction première qui est de placer le texte là où le curseur se déplace. Il ne place pas le texte si le curseur ne bouge pas, ce qui évite un rendu illisible. Pour finir, il prend en compte la vitesse de déplacement de la souris pour proposer un texte plus gros si l'utilisateur met plus d'engouement dans le mouvement, un rendu qui pourrait renvoyer à un coup de pinceau plus ample.

Nous pouvons également faire réagir les lettres entre elles au moment du placement avec la souris.

Le premier exemple considérant la surface de l'écran comme de l'eau en tension. Les lettres se repoussent entre elles à partir de l'endroit où elles sont relâchées pour ne pas se superposer. Une poésie sensible se dégage de ce placement non linéaire où le texte devient un nuage de lettres. Cela fonctionne encore mieux lorsque c'est un mot reconnaissable de peu de lettres qui se répète et donc les mêmes lettres dispersées.

Dans les deux autres exemples, le placement du texte se fait à présent en considérant l'écran non plus comme une surface 2D vue à plat mais comme une vue à la verticale. Les lettres tombent et s'empilent. Le programme du studio ertdfgcvb est très agréable à utiliser. Le texte devient la matière qui se disperse comme du sable et notre curseur peut en ajouter et même en supprimer en repassant au-dessus des lettres déjà disposées.

Dans les deux exemples l'emplacement du texte diverge de celui de la souris, puisque la lettre a sa propre physique. Cela implique l'enjeu de la gravité et que la lettre puisse tomber ou flotter. Un sujet dont je parlerais plus en détails dans le chapitre 6 L’écriture numérique affaire d’environnement.

Si l'on a considéré la souris comme un doigt magique, on peut aussi la considérer comme une main magique qui prend et qui relâche au clic, en anglais drag and drop. C'est une des interactivités les plus utilisées par les graphistes pour composer des logos sur les logiciels d'éditions

Dans le cas du specimen du Bebon, dont le code et le dessin typographique ont été réalisés par Valia Liu dans le cadre du workshop Axes of Variation de Marie Otsuka, nous pouvons déplacer des blocs de mahjong. Nous avons la capacité, lettre par lettre, de créer des mots en déplaçant des petits blocs de taille correspondant à une largeur aléatoire de la typographie variable.

Talia Cotton propose également une interactivité où le curseur devient une main, ici pour étirer la lettre. Cette dernière ayant une certaine matérialité, elle reprend ensuite sa place dans un rebond proportionnel à la distance sur laquelle l'utilisateur a tiré.

Nous avons aussi la faculté de venir tirer sur les courbes qui composent la lettre avec ce programme de Beth Fileti. La programmeuse a développé un outil de modification de points, qui une fois déplacés sur une lettre, s'applique à toutes les autres lettres du paragraphe juxtaposé.

Dans une action succincte de sélection puis de drag and drop, nous pouvons à la souris étirer des lettres. Ce programme de Schultzschultz fonctionne avec des pixels et ne sélectionne malheureusement pas que la lettre mais l'espace noir autour aussi, ce qui fait des superpositions maladroites. Cela ouvre cependant des possibilités plus larges, puisque nous avons accès à un pinceau.

Le curseur de la souris se déplaçant sur l'axe horizontal et vertical de l'écran , nous pouvons utiliser ces deux axes comme des curseurs d'interface , que l'on peut notamment retrouver lors des réglages de volumes sonores sur notre ordinateur.

Ce programme de Generative Design nous montre comment l'on pourrait s'en servir sur un long texte, avec un système d'interrupteur on/off sur l'axe horizontal. La transition correspondant à notre déplacement permet à l'utilisateur de faire un lien visuel entre tous les mots triés et leurs emplacements d'origine.

Il est aussi possible d'agir sur une typographie, en faisant correspondre les axes de l'écran à ceux d'une typographie variable. Le specimen de la Scope, une typographie conçue par Jonas Pelzer, dessinateur de caractères, développeur et théoricien, nous permet d'agir sur la chasse du caractère sur l'axe horizontal et sur la graisse sur l'axe vertical.

C'est aussi le cas du spécimen numérique de la Spectral, première typographie multi-axiale de Google Font, conçue par Jean-Baptiste Levée, dessinateur de caractères français le plus influent de ces 10 dernières années. Le site web est quant à lui développé par Yannick Mathey dans le cadre du projet Prototypo qui permettait de créer des typographies basées sur le squelette d'une typographie multi-axiale existante. Ici, la souris se déplaçant sur l'axe horizontal et vertical agit sur de nombreux paramètres comme la graisse, la chasse, mais aussi l'orientation et l'angulation et l'épaisseur des terminaisons et empattements, le contraste de la lettre, et pour finir la courbure.

Je trouve qu'il y a un plaisir certain à venir modifier l'apparence d'un texte soit dans sa disposition soit dans sa typographie sans utiliser un seul clic. Je ne pense pas que ce soit ça le futur, mais cette sensation de ne rien avoir à sélectionner et que des grands gestes dans le vide permettent des modifications précises est assez attrayante. Le clic restera cependant nécessaire pour plusieurs raisons, puisque si chaque mouvement modifie la disposition du texte et son apparence, il deviendrait vite impossible de sélectionner un élément précis dans le texte puisqu'il bougerait en même temps.

Nous rentrerons plus en détails sur l'espace de l'écran, dans le chapitre 2 L’écriture numérique affaire d’espace visuel.

Pour finir cette partie sur la souris, étant assez lourd, voici le site de lancement du studio Cotton Design sur lequel est proposée diverse interactivités qui reprennent certaines déjà abordées et avancent d'autres points de chapitres futurs.

Scroll

Le scrolling, ou défilement en français, est une action qui a envahi notre quotidien sous plusieurs formes. À la molette sur souris et à deux doigts sur pavé tactile, mais surtout au pouce ou à l'index sur l'écran de tous nos ordinateurs tactiles, il est la première manière de consommer du contenu sur les réseaux sociaux.

Le premier exemple de scrolling remonte aux années 1960 avec le système informatique TX-2 du MIT , où les chercheurs ont développé des techniques pour faire défiler du texte à l'écran. Cependant, c'est véritablement avec l'avènement des interfaces graphiques pour les utilisateurs dans les années 1980 sur Macintosh et Windows, que le scrolling est devenu omniprésent.

On peut différencier deux types de défilement, vertical et horizontal. Le vertical renvoie au défilement d'un papyrus, il est le plus connu pour lire du texte car il permet des lignes qui prennent une certaine largeur dans l'écran sans fatiguer l'œil. L'horizontal sera plus fréquemment utilisé pour des galeries d'images sur ordinateur avec grand écran, comme sur les plateformes de streaming. Pour les petits écrans on préférera l'affichage d'image dans la verticalité pour le flux et horizontal pour le précis, comme notre galeries de photos personnelles. L'horizontalité reste cependant très peu exploitée dans le cadre d'affichage du texte.

John Meada n'a pas fait de Reactive book spécialement sur l'action de scroller. Il la considère cependant dans la neuvième interactivité de The Flying Letter, que nous avons vue dans la dernière partie sur la souris . Dans celle-ci, le curseur qui écrit sans fin pousse l'écran vers le bas ou le haut.

Dans notre cas, nous examinerons plutôt le défilement comme un geste dédié à un périphérique. Nous serons dans une approche musculaire choisie par l'utilisateur et non dictée par l'ordinateur.

L'ARC RAS de l'ÉSAL a produit une interactivité avec le scroll que voici.

Ici le scroll avant ou arrière permet de zoomer le texte ou de l'inverser, c'est intéressant, puisque au lieu de l'interactivité classique du scroll qui fait défiler la page, comme nous le faisons depuis le début de cet écrit, ici c'est le contenu de la page qui change. Dans notre cas cela permet un controle assez fin de la taille lorsque l'on utilise un pavé tactile ou un écran tactile.

De manière plus classique comme pour les hyperliens, il est possible de créer des animations contrôlées au scroll par l'utilisateur qui viennent animer l'expérience de lecture dans la page. C'est ce que nous propose avec de nombreux exemples Manoela Ilic dans deux articles pour Codrops.

Dans ces nombreuses interactivités, on retrouve beaucoup de choses intéressantes, des textes qui viennent de tous les côtés, qui apparaissent en se pliant ou qui se jettent à nous depuis le fond ou le bord de l'écran. J'apprécie particulièrement les premières et dernières interactivités du deuxième lot d'animation qui, sur un long texte, apportent une force visuelle qui peut influencer le sens, comme nous allons le voir dans les exemples suivants.

Si plus d'exemples vous intéressent, je vous invite à lire les nombreux articles sur le scroll écrits par Manoela Ilic.

Ici le texte prend la forme de vapeur, d'étoile filante, ou encore de demi-lune. Cela permet une expérience interactive et cohérente de lecture pour cet article sur l'espace.

Sur ce site pour une entreprise de B2B, j'apprécie particulièrement deux des interactivités. Pour commencer, la toute première sur le paragraphe qui présente l'agence, ici le scroll vient comme une réglette accompagner lettre à lettre la lecture. C'est une approche qui me plaît particulièrement dans le fait que là où d'habitude seuls les yeux travaillent dans le déplacement musculaire pour lire un texte, cette fois-ci, ils sont accompagnés des mains dans l'expérience de lecture.

La deuxième, c'est l'interactivité proposée juste avant la fin, avec le texte en perspective qui monte les marches et s'élève. L'utilisateur vient ici être l'activateur de l'image de la marque qui permet aux sociétés faisant appel à ses services de grandir.

Ce site pour une équipe de basket, fait également varier la manière habituelle de lire le texte. Au lieu que l'utilisateur aille au texte en défilant vers le bas, c'est le texte qui vient par paragraphe à lui et qui se cale en permanence en partie haute de l'écran, permettant une expérience de lecture plus rythmée mais confortable.

Le texte peut aussi venir à l'utilisateur par l'arrière comme avec ce spécimen de la Niko dessinée par l'allemand Ludwig Übele.

Cette utilisation d'un scroll linéaire pour agir sur la profondeur est plutôt évidente, la molette ou le pavé tactile sont tous les deux le plus souvent à l'horizontal. Rentrer dans le texte est un effet de mise en abîme intéressant graphiquement, mais nous pourrions également utiliser des fenêtres qui se superposeraient les unes aux autres. Comme pour l'interactivité de l'ÉSAC en début de partie, ce qui m'intéresse le plus ici, c'est le fait de pouvoir agrandir la taille de la typographie avec un geste qui permet de la précision, plutôt que les habituels clics multiples sur des petits boutons pour zoomer plus ou moins.

Il est aussi possible de ne pas faire bouger l'emplacement du texte lors du scroll, mais qu'à la place ce soit le contenu, donc les lettres elles-mêmes, qui s'intervertissent en fonction de la position de l'utilisateur sur la page.

On retrouve, comme dans des exemples précédents, cette utilisation du caractère monospacé, en plus de cette esthétique hackeur, qui permet des transitions sans que la position de chaque lettre ne bouge dans le mot.

Comme nous l'avons abordé plus tôt, le scroll est le résultat d'un lancer musculaire qui va ensuite influencer la vélocité à laquelle la page défile.

Ce défilement de Suzon Hauchard, motion designeuse, est trompeur, en effet on pourrait croire qu'il y a un lien entre son scroll et l'apparence du texte, mais en réalité elle ne scroll que une longue page préconfigurée et son action n'a pas d'autre impact que d'afficher le texte en dessous. Elle utilise en fait le scroll comme un moyen d'animer un mot qui tournerait.

Nous pouvons cependant utiliser cette vidéo pour imaginer une autre utilisation qui serait que la force donnée au mouvement pour scroller pourrait venir changer l'apparence du texte, en l'étirant plus ou moins, avant qu'il ne reprenne son aspect initial une fois que la vélocité retombe à zéro. On serait dans un cas similiaire de lancer de balle rebondissante qui serait impactée par la force mise dedans avant de revenir en forme .

Pour finir sur le mouvement du texte, le scroll peut être utilisé comme pour cette œuvre du studio GROZNOV en tant que tapis de course où notre force musculaire sert à faire défiler des scènes. Ici, nous nous promenons dans la ville de New York, entre les voitures et les étages.

Le scroll peut aussi influencer la typographie directement, comme avec la font variable Chee réalisée par James Edmondson, co-créateur de la plateforme de publication typographique Future Fonts, et Alexis Boscariol, tous deux dessinateurs de caractères chez Ohnotype.

Dans cette interactivité, c'est la typographie qui descend et qui va venir s'aplatir au fond de l'eau. Cette typographie possède également une version avec des coulures et nous pourrions imaginer que le scroll amène la lettre à s'étaler progressivement au fur et à mesure que l'on tire sur elle en défilant vers le bas. D'autres typographies possèdent des aspects dégoulinants plus marqués, comme la Truth dessinée par Vivienne Didier .

Auriez-vous remarqué que ce site sur lequel vous lisé cet écrit propose également une interactivité au scroll en haut à gauche ? La typographie s'étire linéairement en fonction de votre progression de lecture.

Stylet & Écran tactile

Toucher l'écran, établir un contact physique direct avec lui, que ce soit avec le bout du doigt ou avec un stylet numérique, semble être l'apogée de l'écriture numérique. En réalité, cette technologie a été inventée au début de l'informatique moderne et ne fait pas l'unanimité. Les prémices de cette interactivité, nous les devons au Lightpen inventé par Ivan Sutherland et Tom Dimond dans les années 60 au MIT. C'était un stylo optique qui permettait aux utilisateurs de manipuler et d'interagir avec les éléments affichés à l'écran de manière intuitive. Cela fonctionnait grâce à l'émission d'un faisceau de lumière détecté par des capteurs sur le moniteur . Accompagné du Sketchpad, l'utilisateur pouvait ainsi créer et manipuler des figures graphiques au moyen d’un crayon.

De 1970 jusqu'en 2000, c'est l'explosion de l'utilisation du stylet avec les assistants personnels numériques ou PDA , des agendas augmentés où le stylet ne servait que de dispositif de sélection. C'est à partir des années 2000 que les écrans capacitifs permettent une plus grande précision et sensibilité du stylet. Cela va rendre possible la captation de la vitesse, de l'inclinaison et de la force, ce qui va en faire un outil précieux pour les illustrateurs numériques et la prise de notes.

Le tactile quant à lui, a été inventé au début des années 1970, par E.A. Johnson en Angleterre et Sam Hurst aux États-Unis. Cependant, ce n'est également qu'au début des années 2000 que les écrans tactiles ont commencé à devenir populaires et largement utilisés, notamment grâce à des appareils comme l'iPhone d'Apple en 2007 , qui a introduit une interface révolutionnant le smartphone. Depuis lors, les écrans tactiles sont devenus omniprésents dans notre quotidien pour leur interactivité intuitive.

Il existe aujourd'hui de nombreuses façons d'utiliser un ordinateur tactile pour écrire, la plus répandue étant la prise de notes .

Comme nous pouvons le voir, l'écriture manuscrite numérique sur ordinateur tactile offre une expérience familière avec l'écriture manuscrite sur papier, avec une tenue du stylet similaire à celle du crayon. Elle permet également une connexion directe avec le contenu grâce aux nombreuses personnalisations, et une sensation de contrôle dans l'ajout d'annotations et de croquis.

Cet écrit se concentrant majoritairement sur la typographie, j'éviterais volontairement de parler plus que ça du tracé de la lettre sur ordinateur tactile, puisque cela pourrait être un mémoire à part entière. Pensons notamment aux nombreux outils que les illustrateurs numériques ont à leur disposition, si l'on en faisait une analyse caligraphique .

L'écran tactile a cependant bien d'autres utilisations que la prise de notes, comme le contrôle à plusieurs doigts. Le studio Schultzschultz propose à ce jour l'outil le plus performant de composition typographique tactile.

Ce projet est absolument formidable, avec un doigt, on place une lettre sur l'écran ; avec deux doigts, on peut l'agrandir ou la réduire en la pinçant ; avec trois doigts, on peut parcourir tout l'alphabet sur une roue ; avec quatre doigts, on peut modifier le squelette de la lettre sur plusieurs axes ; et avec cinq, on peut modifier la graisse.

En plus d'une immense capacité de personnalisation, ce logiciel est libre d'accès sur navigateur, ce qui le rend disponible sur de nombreux ordinateurs tactiles. Comme de nombreux autres outils du studio Schultzschultz, TouchType a été créé pour répondre à un projet client . Il a ensuite été mis en ligne gratuitement, un système financier intéressant, qui existe également en création typographique. Ce fonctionnement permet de contribuer à un mouvement auquel on adhère pour le faire grandir, sans faire perdre d'argent à sa société en travaillant bénévolement.

Le studio Schultzschultz est également créateur d'autres outils utilisant un ordinateur tactile, en mettant toujours en valeur l'appui simultané à plusieurs doigts.

Dans les deux premiers exemples, nos deux doigts reliés par le programme forme un fil à beurre permettent d'étirer les lettres et ainsi de modifier l'aspect ou de rendre illisible le message.

Les deux derniers programmes sont quant à eux bien différents, ils utilisent la possibilité de capturer plusieurs doigts sur un écran pour tracer. L'un considère la typographie faite de ronds et de droites. Nous pouvons y placer un message puis venir avec un doigt le perturber. Cela donne une sensation de toucher plus forte qu'avec le curseur de la souris, mais c'est le même principe. L'autre programme considère la lettre faite de nombreux points. Avec un doigt, nous traçons le délié et avec deux doigts le plein. Ces deux programmes permettent bien sûr beaucoup plus que le traçage de lettres.

Avec le temps, les ordinateurs tactiles possèdent également de nouvelles fonctions pour augmenter les sensations de toucher, comme le retour haptique qui fait sentir une vibration à l'action, ce qui permet de créer une texture physique et de rendre plus réelle l'utilisation d'objets lisses. L’une de ses premières applications a été l’aviation. Les commandes d’un avion vibraient en même temps que les turbulences, ce qui permettait d'informer et d'alerter.

Cette technologie a notamment influencé Nick Mills pour réaliser l'identité d'une agence sud-africaine de marketing mobile.

Nick Mills fait un lien entre les gestes de navigation courants sur ordinateur tactile : tapotement, double tapotement, balayages droits et courbés, pincement, dézoom, et le dessin typographique. Cette identité a été conçue grâce à une application, où chaque employé de l'entreprise est venu réaliser des lettres sur un écran dans une grille. Les informations ont ensuite été récupérées pour proposer tout un kit graphique. Chaque lettres est ainsi dessiné comme un mouvement gestuel avec un toucher puis un relâchement de l'écran. Par exemple, le 'S' s'anime à partir d'un double tapotement avec un balayage courbé reliant les points, tandis que le 'E' se forme à partir de trois gestes droits distincts.

L'idée est ici de proposer à cette entreprise une relation à leur identité qui n'est pas basée sur la vision mais sur le toucher. Bien que l'haptique soit une entrée pour la création de l'identité, je ne sais pas si le résultat est également haptique, si le logo animé vibre à l'endroit où les gestes commencent. Cela permettrait d'ouvrir cette technologie, si elle pouvait être aussi précise, à une utilisation pour les non-voyants et notamment un système de braille .

Le stylet a lui le désavantage de ne pouvoir être capté par l'écran qu'en un point. Cela lui permet cependant d'augmenter le nombre d'informations captées en ce point : la pression, la vitesse et l'inclinaison.

Le placement des lettres sur une flaque d'eau est une habitude du studio Schultzschultz ; ici, le stylet permet une plus grande précision pour manipuler et déplacer les lettres sur l'écran.

Le deuxième programme, sur le 'J', quant à lui, semble n'enregistrer que l'inclinaison et modifier le dessin en fonction. S'il pouvait enregistrer la pression en plus, on pourrait imaginer des variations de graisse. Cela reste cependant très limité et bien qu'il existe, comme on l'a vu, de nombreux outils, l'écriture manuscrite au doigt ou au stylet sur ordinateur tactile semble rester la meilleure option pour permettre à chacun d'exprimer sa singularité.

Glide-typing

Le glide typing, également connu sous le nom de swipe typing, a été créé par Cliff Kushler et Randy Marsden, et a été popularisé par leur société Swype. Ils ont développé le concept dans les années 2000 et ont lancé la première application de saisie gestuelle pour clavier virtuel en 2010. Depuis lors, cette méthode de saisie est devenue courante sur de nombreux smartphones et tablettes, intégrée directement aux ordinateurs tactiles de toutes marques.

Le glide-typing fonctionne sur un clavier virtuel où, plutôt que de taper sur chaque lettre individuellement, l'utilisateur fait glisser son doigt sur les lettres pour former des mots. Le système de reconnaissance de texte interprète les mouvements du doigt et prédit les mots possibles en fonction des lettres traversées . Ce système est rendu possible par le logiciel T9 créé également par Cliff Kushler, qui permet de prédire le reste du mot en se basant sur la récurrence de ces derniers sur une base de données de mots courants.

Cette nouvelle manière de taper, plutôt ingénieuse, ne change en rien l'aspect des lettres, mais elle capte de nombreux paramètres que les étudiants de l'INRIA, du CNRS et de LRI Paris-Saclay se sont appropriés.

Les étudiants-chercheurs Jessalyn Alvina, Joseph Malloch et Wendy Mackay ont travaillé sur un projet nommé Expressive Keyboard en se basant sur la technologie du glide-typing. Ils ont proposé de relier les mouvements pour écrire un mot avec l'aspect typographique. Cet aspect est influencé par la fluidité ou la rigueur du geste ainsi que l'insistance sur une lettre. Si j'écris de manière élancée, je peux m'attendre à l'utilisation d'une écriture script, à l'inverse si je suis rectiligne, je serais dans une typographie plus droite. À 1:28, j'apprécie particulièrement la possibilité de noircir le mot en plusieurs graisses en faisant des ronds serrés au-dessus de la dernière lettre. Ce geste intuitif rappelle l'utilisation d'un feutre lorsque l'on veut faire un gros point noir.

L'Expressive Keyboard propose également d'utiliser d'autres entrées captées par le téléphone comme la vibration, pour afficher des mots qui seraient explosés en morceaux si nous étions dans un lieu tremblant comme le bus, ou à l'opposé, des mots qui seraient visuellement très stables et lisibles si nous étions au calme dans un fauteuil.

Il faut rappeler que ces chercheurs ne sont en rien graphistes et leur approche permet des résultats très visuels permettant de travailler mais qui ne sont pas complètement cohérents. L'utilisation de la couleur, par exemple, pour représenter diverses informations, n'est pas claire dans leur vidéo et n'a pas non plus été comprise par les utilisateurs comme l'écrivent les chercheurs dans leur étude.

Le projet a cependant été accompagné par des professionnels comme Nicolas Taffin, qui est professeur et théoricien de la typographie, notamment du soins visuel, qu'il développe dans son livre Typothérapie. La typographie utilisée quant à elle, a été dessinée par Olivier Nineuil, dessinateur de caractères de marque très important du paysage publicitaire.

Je trouve personnellement l'approche autour d'une seule typographie avec de nombreuses variables et aux nombreuses déclinaisons dans la même ligne graphique bien plus intéressante que l'utilisation de diverses typographies au dessin très distinct. L'Inria font est en effet bien trop composite pour permettre de créer des variations personnalisées pour chaque micro-variation. La typographie a tendance à trop sauter d'un style à l'autre, ces styles étant en plus très clichés. Le projet reste cependant très intéressant mais ne semble pas avoir été repris par des industriels ayant les moyens.

Joystick

Le joystick, ou manche à balais en français, permet de se diriger sur l'axe droite-gauche et avant-arrière. Il a été inventé pour l'aviation par le britannique Alliott Verdon-Roe, qui a déposé en 1906 un brevet décrivant un dispositif de commande par un volant également mobile dans le plan vertical . On attribue l'invention du manche aux Français Louis Blériot et Robert Esnault-Pelterie.

Pour le jeu vidéo, le joystick est utilisé pour contrôler le mouvement d'un personnage ou d'un véhicule. Certains de ces joysticks sont également équipés de boutons ou de gâchettes supplémentaires pour effectuer des actions spécifiques, comme sauter ou tirer. Un deuxième modèle de joystick, dit analogique miniature, fait son apparition sur les manettes de jeux vidéo, d'abord mono-stick puis double à partir de 1997 pour la manette de la Playstation qui deviendra par la suite une norme.

La manette moderne est accompagnée d'autres boutons pour augmenter les actions possibles à deux mains, que nous ne traiterons pas car ils sont de simples pressoirs.

Comme dans les dernières parties, le studio Schultzschultz a créé de nombreux programmes.

Dans ces expériences publiées sur leur Instagram, le studio nous propose des interactivités à la manette où les joysticks permettent de déplacer ou d'ajuster certains paramètres minutieusement. La position d'abord, puis la taille, l'anatomie de la lettre et la graisse. Cela est rendu possible grâce à l'utilisation de la même typographie que celle du logiciel TouchType où chaque lettre comporte différents axes de variation.

Ce qui est particulièrement intéressant, c'est encore une fois un logiciel très avancé qui permet des compositions complexes qui semblent faciles à réaliser à la manette. Le changement de l'anatomie de la lettre est cependant beaucoup plus complexe à gérer qu'il ne semble puisque les axes ne sont pas similaires sur chaque lettre et donc tous les boutons de la manette sont utilisés pour pallier à cela.

Il est aussi envisagé une approche du jeu, où la lettre saute et passe de plateforme en plateforme pour composer un mot. C'est un rapport intéressant à la ligne de base qui permet l'alignement des caractères.

Schultzschultz propose également des interactivités avec la lettre.

On comprend vraiment l'intérêt du double joystick pour permettre aux deux pouces d'agir dans 8 directions au total. Le premier exemple est captivant, le joystick de gauche modifie l'axe sur la largeur de la lettre à l'horizontale et sur sa hauteur à la verticale, avec ce changement spectaculaire du 'D' en 'P'. Celui de droite lui ne modifie que la graisse sur l'horizontalité.

Dans l'exemple suivant, le joystick de droite modifie la graisse dans la largeur et l'emplacement de la traverse dans la hauteur, mais cette fois-ci celui de gauche gère le sommet de la lettre et vient le tordre dans tous les sens. Ici je trouve que l'utilisation du joystick est réussie, la multiaxialité est mise en valeur par le déplacement horizontal et vertical, contrairement aux exemples précédents où l'horizontal et le vertical influençaient deux paramètres différents.

Dans le dernier exemple, un des joysticks est également utilisé pour un axe de variable et l'autre contrôle cette fois-ci une bulle externe qui modifie la lecture. Également multiaxiale, il est pertinent de penser à différents joysticks comme à différents paramètres à partager plutôt que de relier plusieurs fonctions au sein d'un seul. La bulle devient loupe et permet d'activer en son centre un effet de manière doux, car contrairement à la souris, le joystick se penche progressivement et nous nous déplaçons de manière moins saccadée.

Potentiomètre

Les potentiomètres sont des curseurs qui permettent de contrôler la résistance électrique dans un circuit . En les ajustant, on peut changer la quantité de courant qui passe à travers, ce qui permet de régler minutieusement des paramètres comme le volume d'une auto-radio, la luminosité d'un spot lumineux ou la puissance d'un moteur électrique.

Cette technologie a été inventée par Johann Christian Poggendorff en 1841, afin de réaliser une mesure précise des potentiels de piles, d'où son nom composé de potentiel et mètre. Nous les trouvons aujourd'hui majoritairement sous deux formes, rotative et à glissière, deux utilisations qui ne sont pas du même registre de geste, précis ou ample.

Comme pour les dernières parties, nous analyserons encore des expérimentations du studio Schultzschultz.

Dans ce premier exemple, le programme utilise deux potentiomètres rotatifs. Le premier contrôle un cercle chromatique pour la couleur du fond et du texte en opposition complémentaire, et en partie haute, il gère l'inclinaison du texte. L'utilisation des potentiomètres rotatifs est justifiée dans les deux cas. Le choix de la couleur sur ordinateur est le plus souvent associé à un carré où nous venons chercher en fonction de la luminosité la couleur. Ici, la couleur a une luminosité fixe mais nous agissons sur l'espace chromatique pour en faire le tour. Une fois seulement, puisque le potentiomètre ne fait communément pas plus de 360°, mais nous pourrions faire appel à une roue pour être illimité dans la rotation.

L'autre potentiomètre qui contrôle le texte fonctionne différemment, avec une position neutre au milieu où le texte est à plat et une rotation vers la droite ou la gauche qui permet de pencher le texte. On remarque également que la typographie utilisée est particulière dans les deux cas. Dans le premier, seules les horizontales s'inclinent et les verticales restent droites, ce qui est plus lisible et correspond mieux à l'usage d'un potentiomètre qui se bloque et ne permettrait pas de faire des rotations complètes. Dans le deuxième cas, ce sont les verticales de la typographie qui bougent mais les horizontales restent fixées pour assurer là aussi lisibilité et stabilité.

Il est possible de complexifier la console de technicien et d'agir sur plus de paramètres, comme nous le propose Heike Neff, développeur chez Schultzschultz.

Pour ce programme, on retrouve l'utilisation d'un joystick qui sert à se déplacer sur une carte infinie et de nombreux potentiomètres à la fois rotatifs et à glissière, différents pour chaque utilisation. Les potentiomètres rotatifs métalliques permettent de contrôler le zoom et la rotation ; ils semblent tourner de manière infinie. Les glissières rouge, verte et bleue contrôlent les courbes de couleur des lettres, tandis que les potentiomètres rotatifs de couleurs contrôlent le fond. Il existe cependant un switch qui les intervertit.

Nous sommes là face à un outil performant que le studio voit comme une sorte d'attraction, mais l'on pourrait tout à fait analyser le scan d'un vieux livre avec et avoir la possibilité d'interagir de manière précise en gérant les contrastes et l'agrandissement du document.

Heike Neef a également fabriqué la TypeMachine, une méga-console qui agit sur la lettre de plein des manières.

Ce projet immense, avec ses multiples potentiomètres annotés, permet d'agir sur tous les paramètres classiques d'un logiciel de typographie . Sur la ligne du haut : à gauche, sélection de la lettre à l'aide de la grande roue, effacement et retour ; au milieu, hauteur, inclinaison, largeur, taille, interligne et contour ou plein ; à droite, alignement à gauche, au centre et à droite ainsi qu'en haut, au milieu et en bas. Sur la ligne du milieu : à gauche, sélection de nombreux styles et de leur intensité ; au centre, choix des couleurs et de la luminosité du texte et du fond ; à droite, activation d'effets de rotation et de flottement ainsi que gestion de l'intensité. Sur la ligne du bas, il existe d'autres potentiomètres un peu particuliers dont je ne comprends pas le sens mais qui pourraient être des options interactives en fonction de la lettre sélectionnée.

Ce projet sans pareil expose toutes les possibilités des potentiomètres qui peuvent être utilisés sur tous les réglages typographique classique. Nous sommes face à une régie de spectacle où la lettre sous toutes ses formes nous éblouit. Nous sommes à la fois spectateurs et utilisateurs, tout l'intérêt de l'interactivité.

Accéléromètre & gyroscope

L'accéléromètre et le gyroscope sont deux capteurs complexes utilisés dans de nombreux dispositifs électroniques pour mesurer la vitesse du mouvement et l'orientation de l'ordinateur. L'accéléromètre a été développé pour la première fois au début du 20^e siècle pour la navigation aérienne et maritime. Le gyroscope, quant à lui, a une histoire plus longue remontant à l'Antiquité avec les premières versions mécaniques . Ils sont devenus tout les deux plus largement utilisés dans les technologies de navigation pendant la Première Guerre mondiale.

Les deux sont aujourd'hui présent sous la forme d'une seul micropuce semi-conducteur, permettant à n'importe quel objet équipé, de connaître son orientation sur les axes XYZ, sa stabilité et sa vitesse ; cela du téléphone à la fusée, en passant par le moniteur d'activité physique au casque de réalité virtuelle.

Cette interactivité dans la poche permet de créer et diffuser plus facilement des posters interactifs.

Ce poster pour un festival de cinéma est conçu par Erich Brechbühl et codé par Josh Schaub, développeur, motion designeur pour Dynamo et professeur. L'inclinaison du téléphone contrôle la source de lumière et donc l'ombre portée des lettres, rendant le tout plus ou moins visible.

D'autre specimens typographiques en ligne proposent aussi des interactivités sur l'orientation pour mettre en avant certains axes typographiques en lien.

Nous sommes en présence de deux types d'inclinaison, une horizontale et l'autre verticale. La GT Planar est une typographie dessinée par Dominik Huber pour la fonderie Grilli Type et dont le site-specimen a été développé par Jack Wild. Spécialement dessinée pour être penchée, la GT Planar comporte des terminaisons verticales, bien que les fûts soient eux penchés , la même chose s'applique aux terminaisons horizontal . Cela permet à la typographie de rester lisbile même pencher à l'extrême, même dans une graisse importante, comme nous le prouve le specimen interactif où les verticales sont à 45°.

La Knickerbocker, ou pantalon bouffant en français, est elle une typographie dessinée par Daniel Wenzel pour sa fonderie 26A1®, il est aussi évidemment le développeur. Comme son nom l'indique, cette typographie aux allures évasées distribue le noir de la lettre dans la verticalité pour lui donner un aspect qui balance entre frayeur et sculpture.

Ces spécimens ne sont bien sûr pas les seuls à utiliser le gyroscope du téléphone pour mettre en avant l'aspect incliné de leurs typographies . Dans un cas pratique, cette gyroscope pourrait permettre de compenser en temps réel certains angles de vue comme le fait de manière fixe la signalisation sur la chaussée .

La typographie dans l'espace du quotidien étant un sujet riche, je m'y pencherai plus en détails dans le chapitre 2 L’écriture numérique affaire d’espace visuel.

La vitesse d'un élément en mouvement peut également inspirer des dessinateurs comme Hyun-jeong Cho, qui a confectionné Bitracing. Les formes de la police sont inspirées du flou de mouvement sur les photos d'objets à haute vitesse . Il s'agit d'une police de caractères variable avec comme axe une vitesse allant de 0 à 900 km/h. À mesure que la vitesse augmente, la police devient de plus en plus inclinée et texturée.

De manière plus complexe, la WHOA, dessinée par Travis Kochel et Lizy Gershenzon, co-fondateurs de Future Fonts, de la fonderie Vectro sur laquelle est publiée la typographie, ainsi que l'exceptionnelle fonderie Scribble Tone.

La WHOA est à l'image de tous leurs projets, complexe et complet. Faite d'une répétition du contour de la lettre, elle dispose de 4 axes de variations qui sont le déplacement horizontal et vertical, ainsi que la rotation de la lettre jusqu'à 45° et l'agrandissement ou le rétrécissement. Cette typographie m'a tout de suite fait penser au ressort magique ou slinky en anglais , de la même manière nous serions en train de tenir la base fixe de la lettre dans la main et l'autre partie serait en train de bondir et tomber dans toutes les sens et positions possibles.

Schultzschultz dispose aussi dans son catalogue d'expérimentations des interactivités qui utilisent la giroscopie d'un ordinateur.

Là où dans le premier exemple le programme s'emporte vite et fait voler le texte au moindre mouvement, le deuxième, plus maîtrisé, joue avec la matérialité et les limites de l'ordinateur. La lettre glisse sur la surface pour venir s'écraser contre les bords avant de reprendre sa forme initiale une fois à plat. Nous faisons l'expérience d'un fluide, d'une goutte d'eau sur du verre.

Kinect

La Kinect a été développée par Microsoft et lancé en novembre 2010 pour la console de jeux Xbox 360. Son développement remonte à une technologie appelée Project Natal de 2009. La Kinect utilise une combinaison de capteurs de mouvement, de caméras et de logiciels pour permettre aux utilisateurs d'interagir avec leur console de jeux sans utiliser de manette traditionnelle pour une expérience immersive.

Ayant pour but de supprimer tout périphérique physique d'entrée, c'est le corps des utilisateurs qui permet d'interagir. Cela a ouvert la voie à de nouveaux types d'applications autres que les jeux de danse, comme la médecine, la recherche et l'éducation.

La Kinect permet également la reconnaissance vocale ainsi que le tracking facial, dont je parlerai dans des parties dédiées, en me concentrant ici plus largement sur le tracking du corps en mouvement.

Cette technologie a bien évidemment intéressé les programmeurs pour sa capacité à couper tout contact avec l'ordinateur. Cela permet de créer des œuvres de plus grande échelle où l'entièreté du corps est pris en compte.

Ces projets réalisés respectivement par le Rakuten Design Lab et le studio Nota Bene Visual se basent sur la même approche, mais l'un réussit mieux que l'autre.

Les deux utilisent la silhouette du corps comme entrée. Pour Unlimited Space, ce corps est représenté sur un écran en face de nous avec à droite et à gauche des miroirs pour rendre l'installation encore plus immersive. Tandis que pour In Order to Control, c'est l'utilisation de deux vidéoprojecteurs et un jeu surréaliste pour l'esprit où notre corps qui devrait normalement couper la lumière et cacher le texte, génère enfaite une ombre interactive.

Le sujet est également bien différent : le premier propose de relier le tracking de l'humain et les mots-clés extraits des tendances de recherche sur les services de Rakuten, afin de relier le monde réel et les achats sur internet. Une approche très terre à terre sans critique. La deuxième œuvre est elle, comme son nom l'indique, beaucoup plus politique : le texte défilant au sol propose une discussion sur l'éthique et la moralité.

Ces projets comportent cependant des caractéristiques graphiques singulières. Le projet de Rakuten est fait d'un nuage de mots, ce qui permet une plus grande personnalisation et plus de complexité. Celui du studio d'Istanbul propose une interactivité où le corps agit comme un masque pour une lecture moins linéaire mais peut-être plus amusante.

Comme vont nous le montrer les deux agences japonaises Anyhow et Shiftbrain, il est possible d'aller beaucoup plus loin dans l'utilisation de cette technologie.

Ce projet interactif invite les spectateurs à toucher un écran flexible pour perturber différents éléments reprenant l'identité du festival. Cet écran n'est en fait qu'un leurre pour ajouter une sensation de toucher ; le mouvement est capté par une Kinect et le résultat est projeté par l'arrière.

Trois types d'interactivités sont utilisés : nous pouvons repousser les particules qui forment la lettre, placer des lettres, et pour finir, de manière plus étrange, nous pouvons tondre des lettres. Nous avons déjà abordé certains de ces concepts dans les parties précédentes, mais la capacité de tondre et de réduire la matérialité de la lettre est nouvelle. Cela permet en effet, de manière ingénieuse, de proposer une interactivité qui modifie l'aspect du texte sans le rendre illisible. Nous venons simplement le réduire puis il repousse, il s'installe ainsi une lutte active contre le programme.

Repousser et tondre se retrouvent dans d'autres projets d'artistes comme Danie’Lopes et le studio Schultzschultz.

Le premier projet reprend les aspects précédents de la tonte, cette fois-ci appliquée à l'identité d'un coiffeur, avec la possibilité également de seulement coiffer, en perturbant sans enlever. Ces petites interactivités légères invitent le passant dans la rue à prêter attention à l'enseigne.

Les deux projets suivants ont eux la capacité de repousser, soit le texte, soit la typographie. Le premier suit le corps en mouvement et perturbe complètement le texte, ce qui pousse le lecteur à s'arrêter et à prendre le temps pour lire. C'est une approche ingénieuse dans un monde où tout va de plus en plus vite, d'utiliser une technologie de mouvement pour inciter à la stabilité. Le deuxième programme suit lui le mouvement de n'importe quelle action devant lui pour cette fois pousser la typographie vers l'avant au lieu des côtés. Cela pourrait être encore plus intéressant si la distance du capteur était calculée pour plus ou moins déformer le message.

Dans le premier exemple, on remarque également que la captation peut se faire autrement que par tout le corps et suivre à la place un membre précis, comme la main, et nous allons voir que nous pouvons aller encore plus en détails.

Le premier projet, réalisé en 2012 par Tom Smurthwaite, frénétique de la programmation et du lien avec le langage, permet de dessiner du bout du doigt des lettres flottantes, qui par la suite s'envolent.

La main devient un pinceau dans l'espace tridimensionnel, un sujet dont nous parlerons dans la prochaine et dernière partie de ce chapitre sur le geste.

Les deux autres projets sont eux plus particuliers, ce n'est plus la main que l'on suit mais les doigts. Rajshree Saraf, génie de la typographie en réalité augmentée que nous retrouverons plusieurs fois dans cet écrit, assigne aux doigts des lettres qui suivent le mouvement de l'extrémité de ces derniers. Ici ce ne sont que des '?', mais chaque lettre pourrait être différente, et changer si la paume est ouverte ou fermée pour augmenter l'interactivité. Cela permettrait d'afficher différents messages ; on pourrait tout à fait imaginer une personne faisant la circulation dirigeant le trafic ainsi.

Le très gros projet Typannot, mené par une équipe interdisciplinaire réunissant linguistes, dessinateurs de caractères, designeurs graphiques et développeurs, pousse bien plus loin la possibilité de tracker les doigts, en proposant un logiciel de reconnaissance de langue des signes.

L'outil, qui prendrait la forme d'un clavier augmenté, offrirait un ensemble d'outils innovants pour faciliter l'analyse et la transcription des langues des signes, en prenant en compte à la fois les aspects linguistiques et corporels de ces langues. Pour cela, il utiliserait une typographie spécialement conçue, qui traduirait gestes et expressions faciales du locuteur.

Il existe aussi un panel de typographies qui prennent en compte le mouvement dans leur dessin mais qui ne proposent pas de dispositif connecté. La plus connue étant la Movement dessinée par María Ramos et Noel Pretorius pour leur fonderie NW type.

Créé en collaboration avec le danseur Andile Vellem, les dessinateurs de caractères ont suivi le mouvement de son corps lorsqu'il récitait l'alphabet par la danse. Cela leur a permis ensuite de transcrire ses gestes en deux typographies reliées par un axe de variation. Ces deux versions, directe et indirecte, font ressortir les inflexions du corps comme un coup de poing ou une lente flexion du bras.

Bien que la typographie soit un dessin assez rectiligne, on peut sentir une réciprocité sincère avec la danse. Certains gestes similaires mais plus lourds vont par exemple inspirer le gras. Il est également amusant de voir le danseur trouver des moyens de contourner les restrictions de l'écriture latine, comme sa solution du bassin pour le chiffre '5'.

D'autres approches du mouvement en typographie existent, comme avec CHOREO, dessiné par Dan Luo dans le cadre du workshop Axes of Variation de Marie Otsuka. La typographie reprend les codes de la danse dans la notation des figures ainsi que dans la posture du chorégraphe en mouvement qui se balance. Je préfère ce rapprochement avec la danse à celui de la fonderie NW type ; ici, la lettre a également un poids visuel qui la rend vivante.

L'Instant de Jérôme Knebusch, dessinateur de caractères historique et professeur à l'ANRT, interroge également le mouvement en faisant le lien entre écriture manuscrite rapide et fine, avec l'écriture typographique noire et stable.

Contrôleur de réalité virtuelle

Le terme réalité virtuelle renvoie à une technologie informatique qui simule la présence physique d'un utilisateur dans un environnement artificiellement généré. Accompagné d'un dispositif immersif, le plus souvent un casque , l'utilisateur peut explorer et parfois interagir avec cet environnement.

Le principe de réalité alternative et simulée est ancien. Il a inspiré des ouvrages philosophiques comme le Discours de la méthode de René Descartes en 1637, sur le doute que nos sens seraient manipulés par un malin génie. Ainsi que de nombreux films et est devenu un pan à part entière de la science-fiction.

D'un point de vue technique, l'apparition de dispositifs de réalité virtuelle remonte aux années 1950 avec le prototype de Morton Heilig appelé Sensorama, un dispositif mécanique immersif permettant aux utilisateurs de visionner des films augmentés de l'ouïe, de l'odorat et du toucher . Il dessinera par la suite le premier casque de réalité virtuelle comme on le connais aujourd'hui . Avec les avancées de la micro-informatique, en 1966, Thomas A. Furness III introduit la technologie de la réalité virtuelle au sein de l'Armée de l'air, qui se voit désormais dotée d'un simulateur de vol. À partir des années 1970, plusieurs centres de recherche développent la technologie pour la rendre interactive et sa popularisation se fait dans un premier temps dans les jeux vidéo pour devenir ensuite un dispositif grand public dans plusieurs domaines comme la médecine, l'éducation, l'art, la modélisation et le divertissement.

Ce dispositif a amené la création d'un nouveau système de manettes . Composé de joysticks, elles permettent de se déplacer et agissent également comme un dispositif de pointage et de sélection. Ces manettes rendent aussi possible la saisie d'objets, avec des boutons aux pouces et aux 4 autres doigts. Ce sont des périphériques qui captent l'intégralité des mouvements de la main et qui agissent comme une réelle extension numérique .

Une des premières applications dans le domaine des arts plastiques fut la peinture numérique en trois dimensions qui permet d'utiliser des pinceaux et crayons artificiels pour peindre et calligraphier sans surface. Prenant place dans des environnements virtuels, les artistes peuvent créer des peintures sur les plans XYZ et les impacter par des effets de lumière et de matière. La peinture 3D ouvre également de nouvelles possibilités en termes d'exploration de l'œuvre d'art. Les spectateurs peuvent souvent traverser les peintures sous différents angles, créant une expérience artistique immersive.

Dans la partie Stylet et Écran tactile, j'ai expliqué pourquoi nous ne traitions pas l'aspect calligraphique numérique. Je fais ici une exception pour la calligraphie 3D étant une pratique relativement récente. Cela me permet par ailleurs de clôturer ce chapitre sur les gestes et d'introduire le prochain sur l'espace.

Pour traiter de la calligraphie numérique, j'ai sélectionné deux œuvres : l'ouverture de la convention Paris-2023 de l'Association Typographique Internationale et une œuvre sans nom de Tomomi Adachi.

Sur une musique composée en direct, les calligraphes Brody Neuenschwander et Monika Marek-Łucka ont créé une œuvre commune faite d'un nuage de mots ou de pseudographie avec différents pinceaux.

L'interactivité est ici évidente de bien des manières, la première c'est le déplacement dans un espace de réalité virtuelle que nous traiterons plus tard, la deuxième par le biais d'une manette, ils sont en capacité de dessiner dans un espace de vide réel mais de plein de numérique avec des pleins et des déliés correspondant à la vitesse et l'inclinaison, et la troisième c'est l'interactivité commune entre utilisateur. En effet, nous n'en avons jusqu'ici pas parlé, mais les outils numériques permettent un partage plus rapide des données et rendent possible le travail collaboratif.

Le travail du calligraphe japonais, quant à lui, présente d'autres types d'interactivité avec le logiciel. Il est en effet capable de peindre puis de récupérer l'élément peint pour le dupliquer à une autre position. Il va même, à la fin du travail, réarranger l'ensemble comme un bouquet de fleurs pour s'arranger de son esthétique de plusieurs points de vue.

La calligraphie semble être l'approche la plus évidente, mais nous pouvons également avoir un regard de dessinateur de typographie sur ces logiciels de dessin comme nous le démontre Félix Farjas, dessinateur de caractère, motion designeur et membre des Rencontres de Lure.

Dans le cadre de la création de l’identité de la 13^e édition du Printemps de la Typographie, Félix Farjas produit dans une approche bien différente, lettre par lettre du mot. Il travaille les contrastes de la lettre en venant repasser plusieurs fois, pour donner l'épaisseur voulue à sa forme. Une action commune aux dessinateurs de caractère qui s'attardent sur la lettre, à l'inverse de la calligraphie où le trait est rarement réarrangé. Ce concept de famille de lettres est encore plus visible dans ses essais .

On remarque que cette approche du tracé de la lettre tridimensionnelle est assez loin de l'écriture sur papier et ressemble bien plus au lightpainting , un rapprochement que développe Félix Farjas dans son mémoire Écrire sans surface.

Le modélage en réalité virtuelle permettrait également de créer des caractères typographiques cette fois-ci non pas dessinés par le pinceau numérique, mais par le contour comme sculpté . Je n'ai cependant pas trouvé d'exemple de personne le faisant, mais nous aurions une expérience similaire à celle de la création d'autres objets de design.

En voyant cette vidéo, je m'imagine déjà en train de dessiner des empattements typographiques dans un monde immergé, en soignant chaque angle comme le fait Nicholas Baker avec les surpiqûres de son fauteuil.

Les contrôleurs de manette VR agissant comme l'extension des mains, nous pouvons aussi, comme avec la souris, venir troubler le texte et modifier sa disposition . C'est ce que propose l'expérience Bernie créée par Rajshree Saraf

Les utilisateurs sont amenés à venir pousser le texte et taper dedans pour créer des sons. Cela provoque différents mouvements typographiques : le bloc de texte tombe sur son dos ou s'envole dans les airs, la lettre tourne sur elle-même en fonction de la force mise dans le geste, la phrase est presque immobile car trop lourde à pousser.

Dans cet exemple, le texte est déjà placé, nous pouvons seulement le déranger. Il existe cependant des manières beaucoup plus complexes de composer et positionner du texte dans l'espace virtuel. Cela est encore plus impressionnant si c'est en réalité mixte et si les contrôleurs disparaissent au profit de la détection de nos mains.

C'est ce que propose depuis 2015 Dong Yoon Park, designeur et programmeur, avec le projet Type In Space for HoloLens, que nous traiterons dans le chapitre suivant L’écriture numérique affaire d’espace visuel.