Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

L’une des grandes tendances actuelles – en design comme en webdesign – c’est la mise en exergue de la typographie. Qu’elle permette de mettre en avant un nom ou une marque ; d’habiller un webdesign à l’interface très épurée ; d’offrir une certaine visibilité sur une grande image d’arrière-plan ; de susciter une vive émotion ; d’attirer l’attention sur une information, ou encore de facilité la lecture dite « online », à l’ère du « content is king » (le contenu est roi) ; La typographie se marie à toutes les sauces et permet d’offrir un design et une visibilité jusqu’alors inédite.

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

Qu’est-ce que la typographie ?

« Le terme comporte différentes acceptions : impression typographique pour la technique d’impression, dessin de caractères ou création de caractères pour la création de polices d’écriture, lettrage pour le dessin manuel de caractères. La typographie est l’art et la manière de concevoir et de se servir des caractères : choix de la police, choix de la fonte et de la mise en page, indépendamment de la technique de publication (impression, affichage sur écran, etc.). Actuellement, la typographie en tant que technique est devenue marginale, tandis qu’en tant que pratique, appliquée par chaque utilisateur d’ordinateur, elle est devenue universelle. Le passage d’un métier (voire d’un art) très complexe à un usage généralisé, et d’autant plus complexe qu’un nombre sans cesse croissant de nouvelles polices apparaît chaque jour, n’est pas sans poser de nombreux débats et problèmes ».

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

Deux grandes familles typographiques : Serif vs Sans-Serif

Les typographies sont créées pour être employées dans certaines situations. Les polices d’écriture en Serif (Times New Roman par exemple) sont souvent associées au professionnalisme, à la scolarité, au sérieux. La plupart des sites d’informations font appel à une police d’écriture Serif pour communiquer une image conservatrice, importante et porteuse de connaissances. Ils veulent que leurs lectures éprouvent un sentiment d’autorité.

A contrario, les polices d’écriture Sans-Serif (Helvetica par exemple) donnent plutôt un sentiment de modernité, avec un côté plus informel. Elles sont souvent employées pour communiquer une image plus sophistiquée. Dans le domaine des nouvelles technologies, les polices Sans-Serif sont souvent employées car ces derniers veulent que les internautes les perçoivent comme à la pointe de l’innovation.

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

Pourquoi l’usage de la typographie en webdesign s’est démocratisé

Quand le contenu devient roi, la typographie améliore l’expérience de lecture « online »

Aujourd’hui, avec la démocratisation et l’importance croissante du contenu sur le web, la typographie, associée à un design épuré, permet à l’internaute de rester concentré sur ce qu’il lit. Il suffit de songer à :

  • La dernière mise à jour de l’algorithme Google (Hummingbird) et la mise en avant, au sein des résultats de recherche, des sites au contenu permettant de répondre à une question posée par l’internaute ;
  • Le déclin des journaux papier au profit d’une consultation des informations en ligne ;
  • La multiplication des blogs, qui permet à quiconque de partager un savoir dont il se sent spécialisé ; ou encore aux révolutionnaires du printemps arabes et aux opprimés de sociétés où la censure règne, de faire entendre leurs voix.

“The right font choice along with the absence of sidebars and popups makes everything feel easier and better to read” – medium.com.

Traduction :

La bonne typographie, combiné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émocratisation du web et de ses multiples contenus n’y est pas par hasard (d’où l’émergence de design plus épurés et de typographies plus grandes).

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

Lire un ouvrage papier et consulter un contenu en ligne sont deux expériences bien différentes. Là où une lecture longue et assidue peut-être réalisée sur papier, la lecture en ligne est plus « impatiente » et moins « continue ».

Sachant cela, les spécialistes du contenu en ligne, souvent appelés « Digital Copy Writer » ont su s’adapter, et des règles de création de contenu en ligne – selon le support notamment – ont vu le jour. Il s’agira de :

  • Diminuer la longueur des contenus ;
  • Subdiviser le texte en une multitude de sous-points, chacun d’eux précédés d’un sous-titre qui résume le propos qui y est développé ;
  • Accompagner le contenu d’images illustrant le propos tenu (c’est ainsi que les infographies se sont multipliées).
  • Etc.

Ces règles sont à mettre en relation avec le référencement naturel et le fonctionnement des « bots » des moteurs de recherches qui scannent les contenus de chaque site. En effet, les titres (<Title>, <h1>, <h2>, <h3>, etc.) correctement balisés et les éléments mis en gras (<strong>) seront davantage pris en considération (au moment du « scan ») que les autres termes du site. Un autre aspect du référencement naturel veut que l’insatisfaction des internautes (qui effectueraient une recherche renvoyant vers un résultat non pertinent et donc, insatisfaisant), voie le taux de rebond augmenter et ainsi, le positionnement sur Google reculer. Ainsi, formater et optimiser son contenu textuel aux normes du web ne peut-être que bénéfique.

“Understanding the way we read is important for designing how words look because you can directly impact someone’s connection to your writing with the right font and layout” – medium.com

Traduction :

Comprendre comment nous lisons est important au moment de la mise en page du contenu car vous pouvez influencer de manière directe la manière avec laquelle l’internaute va interagir avec ce que vous avez écrit, en faisant appel à la bonne police / typographie et à la bonne mise en page / structure.

Quand la tendance est aux interfaces épurées, la typographie offre une nouvelle créativité

Je l’ai abordé dans l’introduction : la tendance web design actuelle fait de plus en plus usage de grandes images d’arrière-plan et/ou de site web à l’interface très épurée (que l’arrière-plan soit complètement blanc ou coloré). Utiliser de grandes typographies personnalisées permet à la fois d’harmoniser « ce vide », mais également de mettre en avant un nom ou une marque.

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

Comment la typographie est-elle employée aujourd’hui ?

L’usage d’une typographie de grande taille pour attirer l’attention

Depuis toujours, la taille du texte a eu pour fonction première d’attirer l’attention. En effet, l’œil est toujours attiré vers les grandes lignes en premier lieu.

“Designers create hierarchy and contrast by playing with the scale of letterforms. Changes in scale help create visual contrast, movement, and depth as well as express hierarchies of importance. Scale is physical. People intuitively judge the size of objects in relation to their own bodies and environments” – thinkingwithtype.com.

Traduction :

Les designers créent une hiérarchie et un contraste en jouant avec la taille des lettres. Les changements de taille aident à créer un contraste visuel, du mouvement et de la profondeur, tout en hiérarchisant l’importance du contenu. Les individus jugent intuitivement la taille des objets en relation avec leur propre corps et environnement.

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

L’usage d’une typographie pour susciter l’émotion

Une typographie personnalisée et de grande taille est porteuse d’émotion et permet d’instaurer une connexion avec l’internaute. Le texte parle de lui-même, il raconte une histoire qui lui est propre et peut tout à fait donner une explication que l’internaute percevra intuitivement. Plusieurs exemples en attestent.

Installation typographique de Grand Central Station, New York (1995)

L’installation typographique qui fut mise en place en 1995 à New York (Grand Central Station) est un exemple flagrant de ce qu’une typographie peut être porteuse d’émotions fortes.

« The right of citizens of the united states to vote shall not be denied or abridged by the United States or by any State on account of sex ».

Traduction :

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 considération du sexe.

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

Les grandes scènes de films cultes en typographie cinétique

Les extraits vidéos sont ici remplacés par de la typographie dite « cinétique » (art qui se compose d’œuvres avec des parties en mouvement). Il n’y a plus que du texte et pourtant, toutes les émotions propres à ces grandes scènes de cinéma se retrouvent dans ces compositions typographiques.

[youtube id= »hBuxR4hAPKs » mode= »normal »]

[youtube id= »fbMa4MGFCOg » mode= »normal »]

Des images de films remplies de grandes citations typographiques

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 religions and ancient weapons are no match for a good blaster at your side kid ».

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

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

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

L’usage de la typographie pour mettre en avant un nom ou une marque

De nombreuses marques et/ou individus – notamment dans le domaine du web et de la création graphique – n’hésitent plus à mettre leur identité en première ligne. Pourquoi ? Pour que les internautes se souviennent d’eux, qu’autant que possible soit gravé leur nom dans leurs esprits.

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio
Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

En conclusion

La typographie est souvent plus parlante que les mots eux-mêmes et un choix subtil de police d’écriture peut faire toute la différence. Que ce soit pour susciter l’émotion, pour mettre en avant un nom ou une marque ou encore pour donner un sentiment de sophistication ou, a contrario, de sérieux. La typographie est désormais partout, sur internet avec le web design, dans les publications papier et même dans l’animation vidéo. La démultiplication des choix typographiques (il existe désormais des centaines de polices d’écriture disponibles gratuitement ou à l’achat, en ligne), ainsi que les avancées technologiques (le CSS3 permet à présent d’intégrer les typographies à même le code), l’émergence des blogs et des sites d’informations, ainsi que l’utilisation massive, en webdesign, d’interface épurée ou de grandes images d’arrière-plan ; ont contribué à mettre sur le devant de la scène l’emploi de la typographie. Aujourd’hui, quiconque peut créer sa propre police d’écriture, avant de la mettre au service du plus grand nombre. Un récent exemple de designers ayant transformés la topographie en typographie peut faire sourire.

 

Le pourquoi et le comment de l’usage de la Typographie en Web Design - EXIT Studio

Si par le passé, en webdesign, la typographie n’était « que du texte », aujourd’hui, elle fait davantage partie intégrante du design et de la mise en page. De par sa diversité, elle offre sans cesse de nouvelles perspectives créatives. Désormais, en typographie, la seule limite est laissée à l’imagination.

Plus d'articles pouvant vous intéresser

Voir tous les articles

Envie de faire partie de l’aventure EXIT Studio ?

Envie d’un site attractif et performant, tant optimisé pour le référencement qu’accessible sur tablettes et smartphones ?

Demander un devis