La typographie est simple, aussi simple que de jouer du violon ! - Maximilien Vox

Le choix d'une typographie est cruciale, qu’importe le type de projet. Elle fera toute la différence, que ce soit pour ton identité visuelle, ton site web, mais encore, tes projets prints. Je ne sais pas toi, mais en général, je mets beaucoup de temps pour choisir “la bonne” typographie pour mes différents projets de création de site web.

• Prendre le temps de bien choisir : Pourquoi ?
• Les règles de base en typographie
• La taille de la police
• Les appareils utilisés et les conditions d’utilisation
• La tonalité des typographies
• Astuces pour un bon design : Combinez différentes polices
• Quels outils pour t’aider ?
• Où télécharger tes polices ?
• 1. Google Fonts
• 2. You work for them
• 3. 25 Typos Classique
• 4. Adobe Typekit, appelé aujourd'hui "Adobe Fonts"
• 5. The Designer Foundry

Prendre le temps de bien choisir : Pourquoi ?

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.

Les règles de base en typographie

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

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

2. Les appareils utilisés et les conditions d’utilisation

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.

3. La tonalité des typographies

Tu t’en souviens sûrement, j’ai abordé ce sujet en profondeur dans l’autre article à propos des typographies. Les types de typographies 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.

La seule manière 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.

Astuces pour un bon design : combinez différentes polices

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 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 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 Typos 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 qui conviendra à tout type de projet, sans passer par les heures interminables de recherches.

4. Adobe Typekit, appelé aujourd'hui "Adobe Fonts"

Adobe Typekit à changé de nom et est aujourd'hui "Adobe Fonts". Il s'agit de la bibliothèque Pro de typographie 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

Bref, la typographie est tout un art. En sachant bien choisir, tu auras un site plus raffiné, professionnel et lisible. Dans cet article, je t’ai donc donné quelques astuces pour t’aider à choisir plus rapidement et surtout correctement les polices que tu utiliseras pour ton site web.

Revenez sur cette page chaque fois que vous voudrez. Avez-vous trouvé des conseils que j'aurais peut-être oubliés en écrivant? Si oui, quels sont-ils? Laissez un commentaire ci-dessous ou envoyez un mail à hello@happydesk.be

La plupart des entrepreneurs disposent d'un site web inefficace et sans message clair. J'ai donc créé un processus en 5 étapes qui est de créer un site web sur mesure et connecté pour réaliser votre web succès. Voir Happy Desk

Tu es freelance? Rejoin notre communauté Webflow. On parle de site web, design, business, etc. La communauté est grandissante et pourra t'apporter énormément de conseils pour développer ton business. C'est par ici

Inscrivez-vous et accédez à ma méthode en ligne.