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 tu peux trouver sur la toile. Elles sont payantes, gratuites et peuvent être utilisé sur le web ou dans une application.

Ce guide t’aidera à faire ce choix.

#typographie #police #webdesign #webflow

🌈 Sondage

Et toi, est-ce que tu prends le temps de bien choisir les typographies de ton site ?

Non, je n’en suis conscient que maintenant

Oui, mais je ne me concentre que sur son design, et rien d’autre

Tu as un autre avis ? N’hésite pas à en parler, dans les commentaires !

Vidéo

Sommaire

Importance de bien choisir sa typographie web

Différents types de typographies

• 1. Serif
• 2. Sans sérif
• 3. Monospaced
• 4. Cursive
• 5. Display
• Serif vs sans sérif

Formats de typographie web

• 1. TTF
• 2. OTF
• 3. WOFF
• 4. EOT
• 5. SVG

Les règles pour choisir la bonne typographie web

• 1. A qui est destiné le site
• 2. Définis ton public cible
• 3. Quel est le comportement de la cible
• 4. Considère le message à envoyer
• 5. Quel est l’objectif du contenu
• 6. Vérifie la taille de la police
• 7. Qu’en est-il de la facilité de lecture

Comment combiner les typographies web

Quels outils pour t’aider

Où télécharger les polices

• 1. Google Fonts
• 2. You work for them
• 3. 25 types classique
• 4. Adobe fonts
• 5. The designer foundru

Conclusion

Importance de bien choisir une typographie web

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 te lister les principales typographies qui existent, et parmi lesquels tu peux choisir pour ton futur site Webflow.

Différents types de typographies

En tout, il existe 5 types de polices : Serif, Sans Serif, Monospaced, Cursive et Display.

1. Typographie Web : Serif

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. Tu peux avoir un aperçu de ce que c’est réellement en observant ces exemples : Times New Roman, Georgia...

2. Typographie Web : Sans sérif

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...

3. Typographie Web : Monospaced

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.

4. Typographie Web : Cursive

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.

5. Typographie Web : Display

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 ?

Serif vs Sans Serif

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 te 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, tu peux 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 ;)

Typographie web : Les formats

Quand tu téléchargeras une typographie, tu auras 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à ?

1. TTF (TrueType Fonts)

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.

2. OTF (OpenType Fonts)

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.

3. WOFF / WOFF2 (Web Open Font Format)

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 ton 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.

4. EOT (Embedded OpenType Fonts)

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.

5. SVG (Scalable Vector Graphics Fonts)

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.

Note bien que la conversion d’un format à un autre est possible ; au cas où tu aurais 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.

Typographie Web : Les règles pour choisir

En choisissant les typographies pour ton site, je te conseille de te pencher sur ces 3 principaux critères :

1. À qui est destiné le site ?

En webdesign, tu es amené à travailler avec différentes personnalités. C’est pour te dire qu’en fonction de tes clients, tu devras é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. Ton choix pourrais alors se porter sur du Sans Sérif.

2. Définis ton public cible

Comprendre ton client est une chose, mais comprendre les clients de ton client en est une autre. Et c’est plus important encore, car le futur site que tu créeras 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.

3. Quel est le comportement de la cible

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 te dire que tu ferais mieux d’essayer les polices que tu utiliseras sur divers appareils pour t’assurer qu’elles conviennent bien au design, avant de publier ton 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 tu n’auras pas forcément tous ces outils à ta disposition. Si tu le fais manuellement, tu risques de perdre beaucoup de temps. Heureusement pour toi, il y a BrowserStack pour cela. Cet outil permet de simuler un site sur les appareils et navigateurs les plus courants.

4. Considère le message à envoyer

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 ton côté, quand tu les choisis, fais preuve d’empathie. Essaie de te mettre à la place des gens qui liront ton site et de voir comment ils réagiront.

Or, si tu crées un site, c’est avant tout pour envoyer un message à ton audience (de recourir à ton service, d’acheter tes produits, etc.). Ce message ne sera jamais compris à 100 % si la typographie web utilisée n’a pas le bon ton, 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 t’adressant à des particuliers, tu peux choisir une typographie moins formelle.

5. Quel est l’objectif du contenu

Un site est composé de plusieurs éléments : menus, paragraphes, titres, CTA... Leurs typographies ne seront pas forcément les mêmes (cependant, fais attention à ne pas trop encombrer le site, en y insérant plus de 3 types de polices).

6. Vérifie la taille de la police

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 tu as donc choisi la bonne taille de polices ? Cette astuce fonctionne très bien : teste la plus petite taille, celle utilisée sur un appareil mobile. Une fois que tu auras trouvé la petite taille appropriée, il sera plus facile pour toi de choisir le reste (pour la tablette et les ordinateurs).

Cependant, n’oublie pas de tester la plus grande taille. Il arrive que certains internautes essaient d’agrandir l’écran de leurs terminaux quand ils naviguent sur ton site. Est-ce que cela ne changera pas le design du site en général ? Il faudrait aussi vérifier ce point.

7. Qu’en est-il de la facilité de lecture

Quand tu te rends sur un site, mais que celui-ci est difficile à lire, car tu mets beaucoup d’efforts à distinguer les différentes lettres utilisées, que fais-tu ? 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. Comprends-tu 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.

Comment combiner les typographies web ?

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, tu risques 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, tu peux 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 t’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 !

Sache que tu es 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 toi et que je voulais démarquer le site des autres, j’éviterais les polices trop utilisées.

Quels outils pour t’aider ?

Je comprends que tu n’aies 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 t’inquiète pas, ils sont gratuits :

• FontPair te suggère une bonne variété de combinaisons de polices. Pour mieux visualiser le résultat, tu peux même insérer un texte personnalisé.
• typeconnection est une sorte de jeu typographique. Avant de te proposer les meilleures combinaisons de polices possible, la plateforme te demande de répondre à une série de questions.
• Just My Type, comme FontPair, propose une série de combinaisons de polices.
• Font Combinaison quant à lui ne propose que des typographies de Google, lesquelles sont faciles à obtenir et gratuites !

Où télécharger les polices ?

1. Google Fonts

Ces polices sont optimisées pour que ton 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 ta page.

2. You work for them

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).

3. 25 Types Classique

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.

4. Adobe Fonts

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.

5. The Designer Foundry

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.

Conclusion

Toutes les typographies ne conviennent pas forcément à un site web. Si elles sont mal choisies, ton site risque de paraître pas professionnel. Après avoir pris des notes sur ce guide de choix de typographie web, tu pourrais encore avoir des doutes. C’est tout à fait normal. Je te conseille alors de tester tes choix. Demande-toi si l’ensemble transmet le ton recherché.

Aussi, ce sera pratique de demander l’avis des gens : tes amis, ta famille, tes collègues… Si tu veux des résultats encore plus fiables, pourquoi ne pas t’adresser à une personne qui peut potentiellement faire partie de ton public cible.

Commentaires