La typographie de votre site web est primordiale pour votre image…

Et même pour vos conversions ! En effet, il faut en moyenne 50 millisecondes à vos visiteurs pour se faire une opinion sur votre entreprise. Et le design fait partie des premières choses qu’il voit. Autant vous dire qu’un site web "designé" avec les pieds rebutera tous vos visiteurs ! 

Il est donc très important de travailler la lisibilité d’un site web en proposant une typographie claire et en phase avec la charte graphique de votre marque. 

Mais, comment être sûr que vous avez choisi la bonne typographie de votre site et que vos visiteurs se retrouvent avec des paragraphes à caractères lisibles ? C’est ce qu’on va voir tout de suite avec votre graphiste préféré, Simon, l'assistant communication !

Quelles polices de caractère utiliser pour son site web ? 

Le b.a.-ba pour savoir quelle typographie choisir pour son site, c’est d’assurément bien définir les termes qui englobent la typographie, à savoir la police de caractère et le font. Il n’y a que comme cela que vous pourrez faire votre propre analyse des possibilités de typos pour votre site internet. 

Ensuite, on pourra regarder ensemble une petite liste de polices sympa, ou plutôt de types de polices que vous pourrez éventuellement utiliser pour améliorer la cohérence de votre site web ! 

La différence entre font, police et typographie !

Bon, pour comprendre cette triptyque, prenons l’image d’une famille, une TRÈS GRANDE famille ok ? Vous allez voir, ce sera plus simple !

La police :

La police d’écriture, c’est la famille au complet : le père, la mère, mais aussi l’oncle, la tante et le grand cousin… Vous l’aurez compris, on parle ici du nombre de versions disponibles d’une typologie de caractères. La police ne prend pas en compte ni la taille, ni la graisse des différentes fontes (on verra ce terme plus tard héhé)

Exemple : 

Helvetica est une police de caractère. Mais elle existe sous différentes formes qui se caractérisent par la graisse de la police. Non non, rien à voir avec un manque d’exercices physiques ou d’abus au fast food, on parle seulement ici de la grosseur de la ligne d’écriture de la police ! Que ce soit une police en gras, en italique ou en police 18, on s’en fout ! C’est une famille unie pour le meilleur et pour le pire (ou pas ?)

La font :

Eh bien, c’est l’ensemble des versions existantes d’une police de caractères. Si on reprend l’exemple de la famille, ce serait plus l’ensemble de l’arbre généalogique, mais plutôt une micro-famille par micro-famille : la famille du cousin, ensuite la famille du frère, puis celle de la soeur… Et ainsi de suite. Et ça peut aller très loin !

Je vais donner un exemple plus concret :

Arial italique police 12 est une micro famille, Arial gras police 13 en est une autre. Arial gras police 8 en est une nouvelle !

Vous l’aurez compris, vous avez autant de fonts qu’il existe de différentes tailles de police, de graisse …

Qu’en est-il de la typographie ?

Eh bien, à défaut de langage, la typographie n’a rien à voir directement avec la police ou encore la font. Une typo caractérise davantage qu’elle ne représente une police : il existe plusieurs manières de créer une police , voici les 4 principaux groupes de typographies de police : 

1. Serif : c’est une police avec empattement. C’est à dire qu’elles ont comme une sorte de base en bas de caractère qui ressemble à de petites pattes. C’est une des typos les plus classiques !
2. Sans-Serif : C’est une police sans empattement : idéale pour la bonne lisibilité d’un site web.
3. Cursive : C’est une police qui imite l’écriture manuscrite.
4. Décorative : écriture plutôt originale à utiliser avec précaution. L’écriture décorative est souvent utilisée pour les phrases catchy ou le montage vidéo !

Les types de polices d’écriture pour votre site web ?

Il existe 2 types de police de caractères d’écriture pour votre site web : les polices web et les polices sécurisées.

En Webdesign, on préfère les polices sécurisées car elles améliorent la vitesse de chargement du site, un indicateur pertinent en SEO. En effet, elles mettent moins de temps à charger sur votre site web ! En plus, la plupart du temps, elles sont très lisibles !

L’inconvénient des polices sécurisées, par contre, c’est qu’elles sont trop généralistes. Elles ne sont pas originales et tout le monde les choisit…

Si vous recherchez un jeu typographique original (et vous le voulez, vous avez atterri chez Simon, tout de même !), ces polices gratuites ne vous conviendront pas.

Une bonne alternative à cela sont les polices web. Elles sont beaucoup plus diverses et de nouvelles polices de caractères voient le jour. C’est ce que nous vous conseillons de prendre. Elles sont lisibles et surtout originales. Ainsi, vous pouvez adapter le type de police en fonction de vos besoins graphiques (et nous sommes là pour vous aider !)

Maintenant que vous connaissez nos choix des typographies que nous privilégions, explorons quels éléments prendre en compte pour choisir la typographie pour votre site web.

Comment choisir la police de caractère de son site ?

Pour le choix de la police idéale pour votre site, il faut prendre en compte plusieurs éléments et combinaisons entre tous les termes qu’on a préalablement définis.

Tout dépend de la marque que vous souhaitez représenter !  Une marque a ses propres codes et une police de caractère va mieux correspondre plutôt qu’une autre dépendant du message que vous souhaitez faire passer.  

Vous êtes un e-commerçant et vous vendez des canapés ? On est plutôt du style marque sérieuse, artisanale qui va privilégier les polices de caractères Serif avec empattements pour améliorer la visibilité du site.

Vous êtes plutôt une blogueuse créa et vous avez une marque créative avec des couleurs vives et une atmosphère sympa ? Optez peut-être pour des polices de caractères plus créatives !

Pour être plus clair, tant que votre contenu est clair et lisible, il suffit juste de trouver la police qui corresponde à votre univers graphique ;)

Ensuite, le reste en découle ! Une marque forte qui été travaillée en amont en fonction de votre cible et de la valeur que vous délivrez va forcément plaire à votre client potentiel. Si votre site démontre une image proche de l’univers que votre prospect cible identifie, bingo ! Vous avez réussi à choisir l’élément typographique qui fait la différence. Sympa non ?

Vos objectifs marketing peuvent aussi beaucoup jouer sur l’agencement de la police de vos pages web : si vous souhaitez convertir un visiteur sur votre site, vous allez peut-être opter pour un corps de texte allant droit à l’essentiel avec des phrases courtes avec une police de grande taille pour vraiment susciter l’attention de votre lecteur sur les bénéfices de votre produit ou service.

Dans ce cas, on partirait sur des polices plus grandes avec  une écriture plus épurée, sans artifices et qui est facilement détectable : une font plus grasse par exemple fera l’affaire !

Ceci étant dit, voyons comment utiliser la meilleure typographie sur votre site web.

Comment choisir la bonne typographie pour son site web ? 

La police du texte dépend de la hiérarchisation de votre contenu. Vous aurez dans votre site web plusieurs éléments textuels avec des tailles et fonctions différentes : titres, sous-titres, catégories, corpus de texte explicatif… Ces éléments sont à prendre en compte pour la future police choisie ! 

Quelques conseils avant de choisir la typographie pour votre site !

Bon, maintenant que les bases ont été passés au crible fin, vous saurez exactement sur quelle variantes, style de police et style de caractère jouer pour rendre la mise en page de votre site !

C’est pas toujours évident de faire le choix d’une police de caractère ainsi que la taille des lettres de sa typo, je vous l’accorde. C’est pour ça que tonton Simon va vous aider !

Pensez lisibilité dès qu’il s’agit de choisir une typographie pour votre site. Des polices difficiles à lire peuvent rebuter la plupart de vos lecteurs ! Surtout ceux atteints de réels problèmes de vue. 

Le choix des caractères typographiques n’est pas anodin, elles transmettent ce que véhicule votre marque : un feeling, des émotions, des méthodes et concepts pour vos produits et services qui apportent du sens à ce que vous proposez sur votre site !

C’est pour cela que je vous conseille d’utiliser pas plus de 3 polices sur votre site web. Généralement, les 2 différentes polices vont être utilisées pour apporter de la nuance et hiérarchiser les titres de vos contenus.  La troisième sera destinée à l’écriture de vos corps de texte, vos descriptions etc…

Mais ça ne s’arrête pas là ! Les graisses et le style de caractères (italique, souligné etc…) devront être utilisés pour apporter du contraste dans vos propos : conseils, phrases chocs, questionnements etc… 

Pour enrichir la personnalisation de vos messages sur votre site web, nous vous conseillons de travailler également la taille de la police et l’alignement (justification, centré, à gauche ou à droite). Ainsi, le jeu typographique servira vos argumentaires de vente, les messages que vous souhaitez adresser à vos clients ou votre communauté. Il convient de penser bien plus à la lisibilité optimale, qui n’est ici qu’une évidence. Le style graphique pour votre société vient en second pour servir vos propos. 

Ressources pour trouver la bonne typographie pour votre site :

Comment vous quitter sans vous laisser de bons coins pour trouver vos typos ? Vous avez tous nos conseils sur cet article, nous nous devons de vous laisser des sources inspirantes pour vous aider à trouver l’écriture parfaite avec la typographie utilisée pour votre site !

Google Fonts :

La base de la base. C’est une banque de police offerte par Google pour celles et ceux qui n’ont qu’un petit budget. Au lancement d’un projet web, c’est vraiment une bonne alternative de départ qu’il conviendra de modifier en cours de route !

Dans cette banque, vous trouverez des polices très visibles pour votre site. En plus, vous pouvez définir les critères que vous exigez pour votre police avec des réglages de la taille, le type de font et également écrire en temps réel un texte pour voir à quoi il ressemble. Un bon début pour être sûr de ne pas se rater donc ! 

DaFont :

Encore une valeur sûre reconnue dans le l’univers des fontes. Rien que la version gratuite vous apportera tout ce dont vous aurez besoin pour trouver le choix de typographie parfait pour votre site ! Vous avez à votre disposition une multitude de styles et des milliers d’auteurs proposent des nouvelles typographies chaque année !

Cependant, attention ! C’est un "freemium". Cela veut dire que certaines typos seront accessibles qu’en les achetant. C’est aussi un bon moyen de commencer à investir sur une police payante qui vous rendra plus singulier et créatif ;)

FontSquirrel 

C’est clairement un très bon site pour sourcer ses fonts pour tous types de contenus : que ce soit pour votre site web, vos plaquettes commerciales ou autres éléments business, ces polices et typographies sont faites pour vous ! Pourquoi ? Car elles sont nombreuses, elles sont gratuites et elles sont surtout libres de droit pour une utilisation commerciale (en plus d’être vraiment lisibles). Alors pourquoi s’en priver ?

Fontfabric :

Un de nos sites préférés, tout simplement parce que ces fonts sont conçues pour les artistes et graphistes (comme tonton Simon) ! Ces spécialistes du domaine ont accompagné les plus grands en matière de branding grâce à leurs typos personnalisables : Transavia, Lipton, Haze Magazine… Et j’en passe et des meilleurs ! En plus de leur vaste choix complètement inédit (vous ne les trouverez dans aucun site de polices gratuites), vous pouvez également customiser une de leurs fontes pour la personnaliser à votre marque. Ainsi, vous êtes sûr d’en être l’unique détenteur ;)

Après, si vous trouvez tout cela compliqué, n’ayez crainte ! Vous pouvez compter sur nous pour travailler votre typographie et la décliner selon vos besoins ! Simon est l’assistant communication qu’il vous faut pour tous vos projets créations (ça rime).

Le mieux, c'est de vous laisser guider et accompagner par Simon et pour cela, que direz-vous de prendre un petit rendez-vous avec nous ?