Le blog de Sophie

Le pourquoi et le comment de l’usage de la Typo­gra­phie en Design et Web Design

Art in Typography - Atypical By Pawel Nolbert

L’une des grandes tendances actuelles – en design comme en webde­sign – c’est la mise en exergue de la typo­gra­phie. Qu’elle permette de mettre en avant un nom ou une marque ; d’ha­biller un webde­sign à l’in­ter­face très épurée ; d’of­frir une certaine visi­bi­lité sur une grande image d’ar­rière-plan ; de susci­ter une vive émotion ; d’at­ti­rer l’at­ten­tion sur une infor­ma­tion, ou encore de faci­lité la lecture dite « online », à l’ère du « content is king » (le contenu est roi) ; La typo­gra­phie se marie à toutes les sauces et permet d’of­frir un design et une visi­bi­lité jusqu’a­lors inédite.

Bad Typography Is Everywhere, Without Typography The World Would Suck

Qu’est-ce que la typo­gra­phie ?

 

« Le terme comporte diffé­rentes accep­tions : impres­sion typo­gra­phique pour la tech­nique d’im­pres­sion, dessin de carac­tères ou créa­tion de carac­tères pour la créa­tion de polices d’écri­ture, lettrage pour le dessin manuel de carac­tères. La typo­gra­phie est l’art et la manière de conce­voir et de se servir des carac­tères : choix de la police, choix de la fonte et de la mise en page, indé­pen­dam­ment de la tech­nique de publi­ca­tion (impres­sion, affi­chage sur écran, etc.). Actuel­le­ment, la typo­gra­phie en tant que tech­nique est deve­nue margi­nale, tandis qu’en tant que pratique, appliquée par chaque utili­sa­teur d’or­di­na­teur, elle est deve­nue univer­selle. Le passage d’un métier (voire d’un art) très complexe à un usage géné­ra­lisé, et d’au­tant plus complexe qu’un nombre sans cesse crois­sant de nouvelles polices appa­raît chaque jour, n’est pas sans poser de nombreux débats et problèmes ».

Typography Anatomy

Deux grandes familles typo­gra­phiques : Serif vs Sans-Serif

Les typo­gra­phies sont créées pour être employées dans certaines situa­tions.

Serif vs Sans-Serif

Les polices d’écri­ture en Serif (Times New Roman par exemple) sont souvent asso­ciées au profes­sion­na­lisme, à la scola­rité, au sérieux. La plupart des sites d’in­for­ma­tions font appel à une police d’écri­ture Serif pour commu­niquer une image conser­va­trice, impor­tante et porteuse de connais­sances. Ils veulent que leurs lectures éprouvent un senti­ment d’au­to­rité.

The New York Times front page

A contra­rio, les polices d’écri­ture Sans-Serif (Helve­tica par exemple) donnent plutôt un senti­ment de moder­nité, avec un côté plus infor­mel. Elles sont souvent employées pour commu­niquer une image plus sophis­tiquée. Dans le domaine des nouvelles tech­no­lo­gies, les polices Sans-Serif sont souvent employées car ces derniers veulent que les inter­nautes les perçoivent comme à la pointe de l’in­no­va­tion.

http://www.antro.ca/en/

Site de 1md

Site de Département Créatif, agence de communication

Site de The Status Bureau

Pourquoi l’usage de la typo­gra­phie en webde­sign s’est démo­cra­tisé

Quand le contenu devient roi, la typo­gra­phie améliore l’ex­pé­rience de lecture « online »

Aujourd’­hui, avec la démo­cra­ti­sa­tion et l’im­por­tance crois­sante du contenu sur le web, la typo­gra­phie, asso­ciée à un design épuré, permet à l’in­ter­naute de rester concen­tré sur ce qu’il lit. Il suffit de songer à :

  • La dernière mise à jour de l’al­go­rithme Google (Humming­bird) et la mise en avant, au sein des résul­tats de recherche, des sites au contenu permet­tant de répondre à une ques­tion posée par l’in­ter­naute ;
  • Le déclin des jour­naux papier au profit d’une consul­ta­tion des infor­ma­tions en ligne ;
  • La multi­pli­ca­tion des blogs, qui permet à quiconque de parta­ger un savoir dont il se sent spécia­lisé ; ou encore aux révo­lu­tion­naires du prin­temps arabes et aux oppri­més de socié­tés où la censure règne, de faire entendre leurs voix.

“The right font choice along with the absence of side­bars and popups makes every­thing feel easier and better to read” – medium.com.

Traduc­tion :

la bonne typo­gra­phie, combi­née à une absence de menus sur les côtés et de fenêtres « pop up » rend tout plus facile et plus agréable à lire.

Nous n’avons jamais autant lu qu’à notre siècle, et la démo­cra­ti­sa­tion du web et de ses multiples conte­nus n’y est pas par hasard (d’où l’émer­gence de design plus épurés et de typo­gra­phies plus grandes).

Site de Medium.com

Lire un ouvrage papier et consul­ter un contenu en ligne sont deux expé­riences bien diffé­rentes. Là où une lecture longue et assi­due peut-être réali­sée sur papier, la lecture en ligne est plus « impa­tiente » et moins « conti­nue ».

Mise en page papier - Nya Upplagan

Sachant cela, les spécia­listes du contenu en ligne, souvent appe­lés « Digi­tal Copy Writer » ont su s’adap­ter, et des règles de créa­tion de contenu en ligne – selon le support notam­ment – ont vu le jour. Il s’agira de :

  • Dimi­nuer la longueur des conte­nus ;
  • Subdi­vi­ser le texte en une multi­tude de sous-points, chacun d’eux précé­dés d’un sous-titre qui résume le propos qui y est déve­loppé ;
  • Accom­pa­gner le contenu d’images illus­trant le propos tenu (c’est ainsi que les info­gra­phies se sont multi­pliées).
  • Etc.

Ces règles sont à mettre en rela­tion avec le réfé­ren­ce­ment natu­rel et le fonc­tion­ne­ment des « bots » des moteurs de recherches qui scannent les conte­nus de chaque site. En effet, les titres (<Title>, <h1>, <h2>, <h3>, etc.) correc­te­ment bali­sés et les éléments mis en gras (<strong>) seront davan­tage pris en consi­dé­ra­tion (au moment du « scan ») que les autres termes du site. Un autre aspect du réfé­ren­ce­ment natu­rel veut que l’in­sa­tis­fac­tion des inter­nautes (qui effec­tue­raient une recherche renvoyant vers un résul­tat non perti­nent et donc, insa­tis­fai­sant), voie le taux de rebond augmen­ter et ainsi, le posi­tion­ne­ment sur Google recu­ler. Ainsi, forma­ter et opti­mi­ser son contenu textuel aux normes du web ne peut-être que béné­fique.

“Unders­tan­ding the way we read is impor­tant for desi­gning how words look because you can directly impact someo­ne’s connec­tion to your writing with the right font and layout” – medium.com

Traduc­tion :

comprendre comment nous lisons est impor­tant au moment de la mise en page du contenu car vous pouvez influen­cer de manière directe la manière avec laquelle l’in­ter­naute va inter­agir avec ce que vous avez écrit, en faisant appel à la bonne police / typo­gra­phie et à la bonne mise en page / struc­ture.

 

Quand la tendance est aux inter­faces épurées, la typo­gra­phie offre une nouvelle créa­ti­vité

Je l’ai abordé dans l’in­tro­duc­tion : la tendance web design actuelle fait de plus en plus usage de grandes images d’ar­rière-plan et/ou de site web à l’in­ter­face très épurée (que l’ar­rière-plan soit complè­te­ment blanc ou coloré). Utili­ser de grandes typo­gra­phies person­na­li­sées permet à la fois d’harmo­ni­ser « ce vide », mais égale­ment de mettre en avant un nom ou une marque.

Portfolio de Mikel Porras Hoogland

Site de Talk PR, global communication agency

Site de Blinb Barber

Site de Ringvemedia (Go to China)

Thème WordPress The Rosa

Comment la typo­gra­phie est-elle employée aujourd’­hui ?

L’usage d’une typo­gra­phie de grande taille pour atti­rer l’at­ten­tion

Depuis toujours, la taille du texte a eu pour fonc­tion première d’at­ti­rer l’at­ten­tion. En effet, l’œil est toujours attiré vers les grandes lignes en premier lieu.

Typography Scale : The World Is Flat

“Desi­gners create hierar­chy and contrast by playing with the scale of letter­forms. Changes in scale help create visual contrast, move­ment, and depth as well as express hierar­chies of impor­tance. Scale is physi­cal. People intui­ti­vely judge the size of objects in rela­tion to their own bodies and envi­ron­ments” – thin­king­wi­th­type.com.

Traduc­tion :

les desi­gners créent une hiérar­chie et un contraste en jouant avec la taille des lettres. Les chan­ge­ments de taille aident à créer un contraste visuel, du mouve­ment et de la profon­deur, tout en hiérar­chi­sant l’im­por­tance du contenu. Les indi­vi­dus jugent intui­ti­ve­ment la taille des objets en rela­tion avec leur propre corps et envi­ron­ne­ment.

L’usage d’une typo­gra­phie pour susci­ter l’émo­tion

Une typo­gra­phie person­na­li­sée et de grande taille est porteuse d’émo­tion et permet d’ins­tau­rer une connexion avec l’in­ter­naute. Le texte parle de lui-même, il raconte une histoire qui lui est propre et peut tout à fait donner une expli­ca­tion que l’in­ter­naute perce­vra intui­ti­ve­ment. Plusieurs exemples en attestent.

Installation Typographique : New York Grand Central Station 1995

Instal­la­tion typo­gra­phique de Grand Central Station, New York (1995)

L’ins­tal­la­tion typo­gra­phique qui fut mise en place en 1995 à New York (Grand Central Station) est un exemple flagrant de ce qu’une typo­gra­phie peut être porteuse d’émo­tions fortes.

« The right of citi­zens of the united states to vote shall not be denied or abrid­ged by the United States or by any State on account of sex ».

Traduc­tion :

le droit de vote des citoyens des Etats-Unis ne (doit) ou ne peut être nié ou abrogé par les Etats-Unis ou par aucun Etat sur le compte ou la consi­dé­ra­tion du sexe.

Les grandes scènes de films cultes en typo­gra­phie ciné­tique

Les extraits vidéos sont ici rempla­cés par de la typo­gra­phie dite « ciné­tique » (art qui se compose d’œuvres avec des parties en mouve­ment). Il n’y a plus que du texte et pour­tant, toutes les émotions propres à ces grandes scènes de cinéma se retrouvent dans ces compo­si­tions typo­gra­phiques.

Des images de films remplies de grandes cita­tions typo­gra­phiques

Qu’il s’agisse de Star Wars avec Dark Vador : « You don’t know the power of the dark side », Yoda : « Do or do not, there is no try », Han Solo : « Hokey reli­gions and ancient weapons are no match for a good blas­ter at your side kid ».

Typographie Star Wars : Dark Vador, Yoda, Han Solo

Ou encore des super­hé­ros de DC Comics avec Batman : « You either die a hero or live long enough to see your­self become the villain » et Super­man : « They will race behind you, they will stumble, they will fall, but in time, they will join you in the sun ».

Typographie DC Comics : Batman, Superman

L’usage de la typo­gra­phie pour mettre en avant un nom ou une marque

De nombreuses marques et/ou indi­vi­dus – notam­ment dans le domaine du web et de la créa­tion graphique – n’hé­sitent plus à mettre leur iden­tité en première ligne. Pourquoi ? Pour que les inter­nautes se souviennent d’eux, qu’au­tant que possible soit gravé leur nom dans leurs esprits.

Portfolio d'Adam Hartwig

Site de The Old Barber Shop

En conclu­sion :

La typo­gra­phie est souvent plus parlante que les mots eux-mêmes et un choix subtil de police d’écri­ture peut faire toute la diffé­rence. Que ce soit pour susci­ter l’émo­tion, pour mettre en avant un nom ou une marque ou encore pour donner un senti­ment de sophis­ti­ca­tion ou, a contra­rio, de sérieux. La typo­gra­phie est désor­mais partout, sur inter­net avec le web design, dans les publi­ca­tions papier et même dans l’ani­ma­tion vidéo. La démul­ti­pli­ca­tion des choix typo­gra­phiques (il existe désor­mais des centaines de polices d’écri­ture dispo­nibles gratui­te­ment ou à l’achat, en ligne), ainsi que les avan­cées tech­no­lo­giques (le CSS3 permet à présent d’in­té­grer les typo­gra­phies à même le code), l’émer­gence des blogs et des sites d’in­for­ma­tions, ainsi que l’uti­li­sa­tion massive, en webde­sign, d’in­ter­face épurée ou de grandes images d’ar­rière-plan ; ont contri­bué à mettre sur le devant de la scène l’em­ploi de la typo­gra­phie.

Aujourd’­hui, quiconque peut créer sa propre police d’écri­ture, avant de la mettre au service du plus grand nombre. Un récent exemple de desi­gners ayant trans­for­més la topo­gra­phie en typo­gra­phie peut faire sourire.

Portfolio de Denise Chandler

Portfolio de Jun Duffy

Si par le passé, en webde­sign, la typo­gra­phie n’était « que du texte », aujourd’­hui, elle fait davan­tage partie inté­grante du design et de la mise en page. De par sa diver­sité, elle offre sans cesse de nouvelles pers­pec­tives créa­tives. Désor­mais, en typo­gra­phie, la seule limite est lais­sée à l’ima­gi­na­tion.

Quelques exemples supplé­men­taires

Site de RSQ

Site de The Design Files Open House

Site de l'app Moon Camp

Site de Knuckles Industries

Site Au Petit Panisse

Site du magazine Rolex Award - Francesco Sauro

Site du restaurant la Risotteria Melotti à New York

Site de Maemo

Info­gra­phie : Serif versus Sans-Serif

 

Serif vs Sans-Serif : Infography Infographie