15 min de lecture
La typographie web est comme une touche de charme pour un site web, pourvu qu’elle soit lisible. En effet, si elle est assez compliquée à déchiffrer, elle risque de tout gâcher.
Le choix de typographie à insérer dans un site web est donc d’une importance capitale. Il y a un large panel que vous pouvez trouver sur la toile. Elles sont payantes, gratuites et peuvent être utilisé sur le web ou dans une application.
Ce guide vous aidera à faire ce choix.
#typographie #police #webdesign #webflow
Et vous, est-ce que vous prenez le temps de bien choisir les typographies de votre site ?
Non, je n’en suis conscient que maintenant
Oui, mais je ne me concentre que sur son design, et rien d’autre
Vous avez un autre avis ? N’hésitez pas à en parler, dans les commentaires !
Il existe plusieurs types de contenus web : des images, des vidéos… Mais les textes occupent toujours une place importante. Ils constituent d’ailleurs la majeure partie des contenus sur un site web professionnel.
Grâce à eux, on peut transmettre des idées, des sentiments, etc. C’est pourquoi nous devons prendre le temps de bien les choisir. Sinon, nous risquons de déformer le résultat voulu.
D’un point de vue technique, le choix de typographie web joue un rôle important dans le SEO du site. En fonction des formats (que nous verrons un peu plus tard), un site peut mettre du temps à charger. Une vitesse de chargement médiocre est très mal vue par les bots de Google. Ils considèreront effectivement le site comme non performant, et ainsi, les visiteurs passeront leur chemin.
Aussi, face à un site qui met longtemps à répondre (à cause des typographies mal choisies ou trop lourde), les internautes iront tout simplement voir ailleurs. Le site en question aura alors un taux de rebond élevé, et une fois de plus, c’est un signal à Google que le site n’est pas de bonne qualité...
Avant d’entrer dans les détails, je pense qu’il serait mieux de vous lister les principales typographies qui existent, et parmi lesquels vous pouvez choisir pour votre futur site Webflow.
En tout, il existe 5 types de polices : Serif, Sans Serif, Monospaced, Cursive et Display.
Il est principalement destiné aux documents imprimés. Il s’agit des polices qui ont des “empattements”. Sur le papier, les sérifs (ou empattements) sont en effet faciles à lire. Vous pouvez avoir un aperçu de ce que c’est réellement en observant ces exemples : Times New Roman, Georgia...
Ici, les polices n’ont pas de sérifs (ou empattements). Ils sont donc plus simples, et ainsi, faciles à lire sur le web. C’est pourquoi la plupart des polices qu’on voit sur le web sont des sans sérifs. En fait, les premiers ordinateurs avaient du mal à rendre les empattements nets. D’où ce choix jusqu’à aujourd’hui. Voici quelques exemples de polices sans sérifs qu’on a l’habitude de lire : Arial, Verdana...
On parle de police monospaced à chaque fois qu’on a affaire aux polices ayant des caractères de même largeur. Ces types de polices ont fait leur apparition il y a bien longtemps, à l’époque de la machine à écrire. De nos jours, ils sont principalement réutilisés dans les éditeurs de textes. Il y en a plusieurs, mais je connais par exemple Incosolata.
Cette typographie web imite les écritures manuscrites (Indie Flowers, Great Vibes…). Elle met donc l’accent sur l’intérêt visuel, mais pas vraiment sur la lisibilité. En général, on la rencontre dans les différents titres.
Enfin, les display tapent à l’oeil (Changa One entre autres). Elles sont imposantes, car elles sont composées de polices grandes et grasses. Pour celles de leur famille qui sont fines, elles ont une forme complexe. On voit bien qu’elles veulent attirer l’attention, c’est pourquoi elles sont sur les gros titres.
Ces 5 polices ne sont pas toutes utilisées sur le web. Pour la quasi-totalité des sites qu’on rencontre, les serif et sans serif sont les plus sollicités. Sont-elles réellement différentes ?
La réponse n’a jamais été aussi simple : le choix de typographie web dépend du design voulu.
Si certains pensent que les sérifs augmentent la visibilité, ils ont tort. Dans le monde numérique, c’est plutôt l’inverse. Les sérifs sont plus lisibles, surtout s’ils sont lus sur des écrans à faible résolution. Or, tout le monde n’a pas forcément l’écran adapté. Je vous conseille donc d’opter pour le sans sérif pour le corps de texte.
Cela voudrait-il dire que les sans sérifs ne servent à rien ?
Non, je n’ai pas dit ça. Au contraire, vous pouvez les utiliser. Leurs empattements font d’eux des typographies professionnelles et formelles. Les grandes marques auront une très belle image si elles choisissent les sans serifs comme typographie principale. Pareillement pour les blogs professionnels, les agences de presse, etc. Toutefois, attention à ne pas en abuser ;)
Quand vous téléchargerez une typographie, vous aurez plusieurs fichiers (ttf, eot, otf, woff et svg). Ce sont les formats de typographie les plus utilisés. Pourtant, il n’y a pas un seul d’entre eux qui convient à la fois à tous les navigateurs. C’est précisément pour cette raison qu’on les combine.
Mais que signifient tous ces formats déjà ?
Il est l’un des formats les plus utilisés sur Mac et Windows. C’est normal ! Non seulement il a été créé depuis très longtemps (en 1980), mais son auteur était Apple. Microsoft a ensuite pris la relève.
Seulement, il n’est pas compressé, et donc, assez lourd. Cela présente un impact non négligeable sur la vitesse d’un site.
Lui non plus n’est pas compressé (encore une fois, le OTF n’est donc pas fait pour le web). En fait, il est plutôt comme une évolution de TTF. Microsoft y a aussi joué un rôle dans sa conception, mais cette fois, en partenariat avec Adobe. Ainsi, les formats OTF sont surtout utilisés sur Mac et Windows (pc, écran et impression). Les graphistes sont ceux qui en ont le plus besoin.
Enfin, un format qui est destiné au web ! Il n’est apparu qu’en 2009, et c’est Mozilla qui l’a créé. Ce n’est pas un tout nouveau format. Il est tiré des OTF et TTF eux-mêmes. Autrement dit, ce sont des OTF et TTF compressés.
En uploadant des polices au format WOFF sur votre site, il s’affiche ainsi rapidement (plus rapide que les 2 précédents formats, en tout cas). Surtout, les typographies WOFF sont compatibles avec tous les navigateurs.
Qu’en est-il de WOFF2 ? Il s’agit d’une évolution de WOFF. La différence est que celle-ci a une meilleure compression.
EOT est également destiné pour le web, obtenu par la compression du format OTF. Mais alors, qui est le plus adapté aux sites web : WOFF2 ou EOT ? Comme EOT a surtout été conçu pour Internet Explorer, il a perdu de l’intérêt.
Comme son nom le montre, le SVG est un format vectoriel, et donc, très léger. On l’utilise, dans la plupart des cas, sur mobile, notamment iOS. Il y a également le SVGZ, qui n’est autre que sa version zippée.
Notez bien que la conversion d’un format à un autre est possible ; au cas où vous auriez envie de transformer un TTF en WOFF. Il suffit de trouver le bon outil.
Il y a quand même d’autres règles à savoir pour le choix de typographie web d’un site webflow.
En choisissant les typographies pour votre site, je vous conseille de vous pencher sur ces 3 principaux critères :
En webdesign, vous êtes amené à travailler avec différentes personnalités. C’est pour vous dire qu’en fonction de vos clients, vous devrez évidemment choisir des polices différentes. En effet, les typographies utilisées pour le site d’un photographe ne seront jamais les mêmes que pour celles, sur un site d’avocat.
La photographie nécessite peut-être des polices qui ressortent les photos mises en avant sur le site, et donc, des classiques, sobres et soft. Par contre, les cabinets d’avocat ont besoin de montrer à travers leur site qu’ils sont fiables et professionnels. Une tout autre police conviendrait donc. Votre choix pourrait alors se porter sur du Sans Sérif.
Comprendre votre client est une chose, mais comprendre les clients de votre client en est une autre. Et c’est plus important encore, car le futur site que vous créerez leur est surtout destiné.
Même 2 sites qui traitent de la même thématique peuvent s’adresser à différentes cibles. Une entreprise de bâtiment peut par exemple cibler les professionnels qui souhaitent faire construire des bâtiments commerciaux ou industriels tandis qu’une autre s’adresse aux particuliers qui projettent de construire des maisons individuelles.
Je n’utilise pas que mon ordinateur pour naviguer sur internet. Mon smartphone est le plus utilisé (comme pour bon nombre d’internautes d’ailleurs). Tout cela, pour vous dire que vous feriez mieux d’essayer les polices que vous utiliserez sur divers appareils pour vous assurer qu’elles conviennent bien au design, avant de publier votre site.
Les résultats sont aussi différents sur différents systèmes d’exploitation (Android, Windows, iOS, Mac…), mais encore, sur plusieurs types de navigateurs (Chrome, Firefox…).
C’est vrai qu’au final, tous ces tests deviendront enlaçants. D’autant plus que vous n’aurez pas forcément tous ces outils à votre disposition. Si vous le faites manuellement, vous risquez de perdre beaucoup de temps. Heureusement pour vous, il y a BrowserStack pour cela. Cet outil permet de simuler un site sur les appareils et navigateurs les plus courants.
Les types de typographie web utilisés impactent sur l’émotion du public cible. Si certains donnent un air ludique, d’autres paraissent plus sérieux, et d’autres encore, informatifs.
L’une des meilleures manières de connaître la tonalité d’une police est de le montrer aux autres (collègues, amis, famille…). De votre côté, quand vous les choisissez, faites preuve d’empathie. Essayez de vous mettre à la place des gens qui liront votre site et de voir comment ils réagiront.
Or, si vous créez un site, c’est avant tout pour envoyer un message à votre audience (de recourir à votre service, d’acheter vos produits, etc.). Ce message ne sera jamais compris à 100 % si la typographie web utilisée n’a pas le bon votre, c’est-à-dire qu’elle ne fait pas ressortir le sentiment ou l’humeur voulus chez le public cible. Pour un public professionnel, ce ton devrait par exemple être formel. Par contre, en vous adressant à des particuliers, vous pouvez choisir une typographie moins formelle.
Un site est composé de plusieurs éléments : menus, paragraphes, titres, CTA... Leurs typographies ne seront pas forcément les mêmes (cependant, faites attention à ne pas trop encombrer le site, en y insérant plus de 3 types de polices).
En fonction de la taille, la police est plus ou moins lisible. Pourtant, une police difficile à déchiffrer ne servira à rien. Comment s’assurer que vous avez donc choisi la bonne taille de polices ? Cette astuce fonctionne très bien : testez la plus petite taille, celle utilisée sur un appareil mobile. Une fois que vous aurez trouvé la petite taille appropriée, il sera plus facile pour vous de choisir le reste (pour la tablette et les ordinateurs).
Cependant, n’oubliez pas de tester la plus grande taille. Il arrive que certains internautes essaient d’agrandir l’écran de leurs terminaux quand ils naviguent sur votre site. Est-ce que cela ne changera pas le design du site en général ? Il faudrait aussi vérifier ce point.
Quand vous vous rendez sur un site, mais que celui-ci est difficile à lire, car vous mettez beaucoup d’efforts à distinguer les différentes lettres utilisées, que faites-vous ? Je suppose que peu vont répondre qu’ils persisteront et poursuivront leur navigation. La plupart d’entre vous me diront qu’ils partiront tout simplement à la recherche d’un autre site. Comprenez-vous donc l’intérêt de la lisibilitée ? L’expérience utilisateur en est impactée.
Voici deux exemples de lettres qui nous rendent souvent confus : i majuscule et l minuscule. Ce ne sont pas les seuls ; les espaces trop élevés ou trop faibles entre les lettres compliquent également la lecture.
Enfin, la lisibilité à proprement parler concerne l’ensemble du contenu. Ce critère dépend essentiellement de la taille de la police, de l’espacement et de sa couleur.
Le fait de combiner plusieurs polices met du contraste sur un site, ce qui accentue encore plus son design. Le hic réside toutefois dans la manière de sélectionner la palette de polices. Certains ne suivent pas les règles. Peut-être ne savent-ils pas quelles sont ces règles ?
De un, n’abuse pas des polices. Deux ou trois suffisent amplement ! Avec plus de polices, vous risquez de semer la confusion et de briser la cohérence qu’il y a sur le site.
De deux, choisir différentes polices de la même famille est une très bonne idée. Pour les titres, vous pouvez utiliser du sérif tandis que pour le corps de textes, du sans sérif reste la meilleure option (pour plus d’explications à ce sujet, je vous invite à lire cet article). Des polices de la même famille s’associent très bien.
Une autre solution est d’utiliser la même typographie web sur tout le site, mais de tailles différentes. Les titres sont évidemment plus grands que les autres. De cette manière, la simplicité est au rendez-vous !
Sachez que vous êtes aussi libre de choisir des polices de différentes familles. Les titres étant courts et attirants, ils conviennent parfaitement aux typographies complexes. Quant au corps du texte, l’important est qu’il soit lisible. Si j’étais vous et que je voulais démarquer le site des autres, j’éviterais les polices trop utilisées.
Je comprends que vous n’ayez aucune idée des meilleures combinaisons de polices. Ça m’est déjà arrivé plusieurs fois, mais j’ai trouvé la solution : utiliser des outils spécialisés. Ne vous inquiétez pas, ils sont gratuits :
Ces polices sont optimisées pour que votre site charge rapidement. C’est pourquoi elles sont destinées au web. Pour un blog par exemple, il est important de choisir une typographie "légère", car si on se retrouve avec une centaine d'articles, il y aura un impact sur le chargement de votre page.
Il s'agit d'un site super pratique, car toutes les typographies sont mises en scène. Cela m'aide à choisir la typographie en fonction du style à créer ou à respecter (celui de la finance sera par exemple plus corporate que celui d’un fabricant de jouets pour enfants).
Bien souvent, trop de choix tue le choix. C'est pourquoi Spoongraphics a sélectionné pour nous 25 typos "classique" qui permettent dans la plupart des cas de choisir une typographie web qui conviendra à tout type de projet, sans passer par les heures interminables de recherches.
Adobe Typekit a changé de nom et est aujourd'hui "Adobe Fonts". Il s'agit de la bibliothèque Pro de typographie web par excellence. Toutes les typographies sont accessibles et intégrées à la Suite Adobe Cloud.
Bibliothèque "Premium" de typographie pour designer, cette plateforme est pour moi la caverne d'Alibaba. Quand un projet demande une typo très particulière au budget plus important, elle est très pratique.
Toutes les typographies ne conviennent pas forcément à un site web. Si elles sont mal choisies, votre site risque de paraître pas professionnel. Après avoir pris des notes sur ce guide de choix de typographie web, vous pourriez encore avoir des doutes. C’est tout à fait normal. Je vous conseille alors de tester vos choix. Demandez-vous si l’ensemble transmet le ton recherché.
Aussi, ce sera pratique de demander l’avis des gens : vos amis, votre famille, vos collègues… Si vous voulez des résultats encore plus fiables, pourquoi ne pas vous adresser à une personne qui peut potentiellement faire partie de votre public cible.
Dans la joie et la bonne humeur
Que vous soyez débutant ou expérimenté, la Happy.webacademy vous donne l’énergie, les stratégies et les outils pour avoir plus de liberté et générer des résultats qui propulseront votre chiffre d’affaires dans les étoiles.
