La typographie… un art de l’écriture que nous devons choisir avec soin pour que notre travail nous ressemble et que ce soit à notre image de marque de le mettre en avant.
En tant que graphiste ou web designer, beaucoup ont énormément de mal à trouver leurs typographies et y passent des heures et des heures à ne plus en dormir, c’est pour dire. La typographie parfaite n’existe sûrement pas, mais on veut toujours s’en rapprocher un maximum. C’est pareil pour les couleurs.
L’identité de votre site en dépend. Le but est de se démarquer et d’être original, tout en restant dans le contrôle. Ne pas s’étaler partout. Votre site ne doit pas ressembler à celui de Monsieur et Madame tout le monde mais doit respecter certains codes. Plus votre site web sera sérieux et important, moins vous pourrez vous permettre de faire n’importe quoi. Alors comment remédier à tout ça ? C’est ce que nous allons aborder dans cet article. C’est parti !
La typographie a été inventée vers l’année 1440 par Gutenberg. Sa technique consiste à assembler des caractères pour en faire des mots et des phrases afin de les imprimer. Gutenberg a révolutionné l’imprimerie en Occident grâce à la mise au point de la presse typographique, avec ses caractères mobiles en plomb et autres métaux et son encre grasse à base d’huile de lin et de suie de résineux, à la différence de l’Asie où l’on utilisait des caractères en argile et de l’encre à base d’eau. Il a mis au goût du jour la presse à bras alors que les Asiatiques utilisaient, eux, un outil appelé frotton.
La typographie a quasiment été la seule forme d’impression jusqu’au XXe siècle. L’impression la plus complexe et célèbre de Gutenberg à ce jour est celle de la Bible. Conservé en 48 exemplaires entre 1452 et 1455, l’un d’entre eux (parmi les 3 en parfait vélin dans le monde) est aujourd’hui stocké à la bibliothèque du Congrès de Washington D.C. Le Vélin est une variété de parchemin, plus lisse, plus blanc et plus fin, fait à partir de peau de jeunes veaux. Gutenberg n’a jamais revendiqué le fait d’avoir inventé la typographie : pas de dates ni signatures sur ses livres.
En 1504, un professeur dédicace un livre à Gutenberg en le qualifiant d’inventeur de la typographie. C’est au XIXe siècle qu’un de ses partisans a retrouvé des lettres datées de 31 ans après sa mort pour la plus ancienne, où il est attesté que Jean Gutenberg est le « père officiel » de la typographie.
Dans la création graphique, la typographie est essentielle dans l’aspect le visuel d’un site web. Son but principal ? Faciliter la lecture et la rendre plus fluide, plus agréable. Le tout est d’équilibrer la balance entre le côté esthétique et pratique de la chose. Pour donner du peps et du caractère à un texte, rien de tel qu’une bonne typographie, une bonne police d’écriture, et une bonne fonte. Oui, mais qu’est-ce qui différencie ces 3 thermes ?
Une typographie est un type de police. Elles sont regroupées en 4 groupes principaux. Il y a les Serif (avec empattement), où l’on observe de petites pattes à la fin des lettres. C’est la plus classique et la plus utilisée. Il y a également les sans Serif (sans empattement), plus adapté pour la lecture web. Il y a aussi les cursives ou Script, qui reproduisent l’écriture manuscrite et calligraphique. Enfin il y a les Display ou Décoratives, plus fun et exotique, à ne pas utiliser de manière trop excessive car cela rend vite un texte illisible.
Une police d’écriture est l’ensemble des versions d’une même famille (sans tenir compte de la taille ou la graisse). Par exemple : Monserrat. La graisse est l’épaisseur de la ligne d’une lettre. Par exemple: Thin, Light, Regular, Bold, Extra bold, Black. Pour vous aider dans vos recherches, vous pouvez aller sur Google Font ou encore Dafont. Vous pouvez également utiliser des polices d’écritures sécurisées pour le web (web-safe), dont nous parlerons plus bas.
Une fonte est l’ensemble des versions d’une même police, d’une taille et d’une graisse. Par exemple : Monserrat Black 12 pt / Montserrat Light 14 pt/ Montserrat Bold 10 pt
La typographie permet d’exprimer des choses. Selon ce qu’on veut transmettre, il est donc important de bien choisir sa typographie et ses polices d’écriture. Une police Serif est considérée comme traditionnelle. Alors qu’une police sans Serif est plutôt moderne. Une police Cursive est féminine et une police display est amusante.
S’il y a bien une police d’écriture à bannir aux yeux de beaucoup de graphiste ou web designer, c’est la police Comic Sans MS. Cette police fait l’objet de pas mal de débats. Elle suscite même le dégout chez certains.
Néanmoins, son point positif est qu’elle est plutôt accessible pour les personnes atteintes de dyslexie. 5% des élèves scolarisés en France sont dyslexiques. La forme distinctive des lettres rendrait cette police beaucoup plus lisible pour eux.
Pour utiliser la typographie à bon escient, il vaut mieux ne pas utiliser plus de 3 polices d’écriture. Ne pas hésiter à jouer sur les graisses et la taille d’une même police.
Une bonne combinaison donne plus de dynamisme à un site. Le bon combo est souvent d’associer deux polices avec et sans serif, pour apporter une variation et rendre le tout plus harmonieux. Par exemple : un mix entre Alice et Raleway ou Montserrat et Vollkorn. N’utiliser qu’une seule police, c’est possible mais il faut à tout prix jouer sur la taille, l’espacement entre les lettres, la graisse ou encore les couleurs.
Une typographie web-safe est une typographie qui améliore l’ergonomie et la vitesse de chargement d’un site, ces dernières étant essentielles pour une bonne expérience utilisateur sur les pages. Elle doit être propre et avoir un aspect professionnel. Elle convient parfaitement pour un site web d’entreprise.
Elle doit être visible par tous ceux qui visitent le site web en question et sur tout appareil (ordinateur, mobile, tablette…). Une typographie web-safe est prise en charge par la majorité des systèmes d’exploitation et navigateur web. Les fichiers de police sont inclus automatiquement dans les systèmes d’exploitation pour que les utilisateurs n’aient pas besoin de les télécharger. Si on utilise une police d’écriture qui n’est prise en charge que par la dernière version de Windows 10 par exemple, les utilisateurs ne possédant pas cette version verront tout autre chose. Comme dit plus haut, la vitesse de chargement des pages est optimisée avec une typographie web-safe car elle n’est pas locale ou hébergée par un tiers.
Quelques exemples de typographie et police d’écriture web-safe :
Pour créer un site web, les typographies et polices web-safe sont un bon point de départ. Rien de mieux pour que le design soit cohérent avec l’identité visuelle du site. L’affichage est garanti sans variabilité ce qui est un point positif car le texte sera bien lu « comme prévu ».
Si on utilise toutefois des typographies qui ne sont pas web-safe, il faut savoir que la compatibilité des polices dépend de plusieurs choses dont on n’a pas le contrôle comme la bande passante internet, de l’emplacement ou encore du système d’exploitation.
En conclusion, il faut bien évidemment se rappeler, que la typographie parfaite n’existe pas. Donc pas la peine de se mettre une pression monstre à cause de ça. Bien qu’il faille quand même y passer du temps pour trouver quelque chose de cohérent avec ses idées qui fassent sensation. La typographie ne permet pas seulement d’avoir une page web sympa, elle permet de s’exprimer et montrer sa créativité à travers des textes en l’habillant de façon à ce que le tout corresponde parfaitement au message que l’on veut faire passer. Si le message est clair et bien rédigé et qu’en plus la typographie est bien choisie, que demande le peuple ?
+200 ressources en ligne pour tes projets de design !
Photos / illustrations / icônes / vidéos / musique / mockups / jeux / etc..
Reçois les mises à jour de Webby Booster, des tutoriels et des conseils directement dans ta boîte mail.
Reçois les mises à jour de Webby Booster, des tutoriels et des conseils directement dans ta boîte mail.
Reçois les mises à jour de Webby Booster, des tutoriels et des conseils directement dans ta boîte mail.
