Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

Quelle typographie pour son site web ? 20 exemples

La typographie d’un site web, c’est son identité. Elle doit être réfléchie, comme toute autre typographie que vous utilisez sur vos supports imprimés, affiches ou publicité....

Publié par Melanie De Coster

La typographie d’un site web, c’est son identité. Elle doit être réfléchie, comme toute autre typographie que vous utilisez sur vos supports imprimés, affiches ou publicité. Pourtant, cet aspect est trop souvent négligé, conduisant de nombreuses pages internet à rater leur cible.

À travers cet article, vous allez apprendre comment choisir les polices d’écriture pour votre site et découvrir les 20 meilleures typographies pour site web à utiliser en ligne.

Choisir des polices d’écriture pour son site web

Le choix est souvent compliqué, voire frustrant, certes, mais dites-vous bien que la typographie pour laquelle vous avez opté contribue largement à attirer vos lecteurs ou à les faire fuir. Il s’agit donc de choisir judicieusement vos polices de caractères et les combinaisons gagnantes.

Dans notre précédent article, nous vous donnions toutes les informations essentielles pour bien choisir votre typographie. Dans celui-ci, vous allez retrouver quelques conseils sont de rigueur pour choisir la typographie qui permettra à votre site de gagner sa place au soleil. Mais avant de plonger dans le sujet, il s’avère nécessaire de faire le point sur certains termes que nous rencontrons souvent, mais qui prêtent à confusion.

Ayez en tête que le choix des couleurs et des formes de vos polices de caractères aura un impact direct sur l’image que vos visiteurs vont avoir de votre structure. Dans cet article, nous allons vous donner quelques conseils pour faire les bons choix de typographie pour votre site web.

Si vous avez besoin d’un graphiste professionnel, rendez-vous sur Graphiste.com !

Il existe un grand nombre de polices de caractère. Elles se déclinent en différents styles et sous un grand nombre de formes. Elles connaissent des rebondissements au fil du temps et surtout, elles sont soumises à des tendances. Et oui, elles aussi peuvent avoir leurs « heures de gloire » !

 

Subtilités entre typographie site web, police d’écriture et fonte

La typographie site internet

Le terme proprement dit signifie le type de police ou le type d’écriture. Vous pouvez en déceler une grande multitude, dont voici les 4 principaux groupes :

  • Serif : il s’agit d’une police dont le bout de chaque lettre possède des pattes de petite taille. En effet, c’est la police la plus classique et la plus utilisée.
  • Dépourvu de Serif : la police n’a donc pas d’empattement, c’est-à-dire que les lettres ne disposent pas de petites pattes. C’est une version plus moderne, donc plus adaptée à un décryptage sur internet.
  • Manuscrite ou Script : cette police dite également cursive ressemble à l’écriture à la main.
  • Décorative ou Display : il s’agit de police décorative ou encore exotique. Celle-ci est à utiliser avec prudence, car sa lecture est plutôt ardue.

 

La police d’écriture

C’est tout simplement les fontes d’une même police, sans considération de la taille et de la graisse. La graisse est le calibre de la lettre. La plupart du temps, les graisses sont en anglais. Qu’à cela ne tienne ! Voici leur signification :

  • Thin = Fin
  • Regular = Normal
  • Light = Léger
  • Bold = Lettre Grasse
  • Extra Bold = Lettre Très GrasseBlack = Noir

 

La fonte

Vous l’aurez compris, la fonte correspond aux versions ou éléments caractéristiques d’une graisse et d’une taille. Ainsi, voici deux exemples de fonte : Roboto Bold d’une part et Roboto Thin d’autre part. Ce sont deux fontes différentes.

Pour récapituler, prenons comme exemple une police de caractères : Old Standard TT, qui appartient à la famille Serif qui ne dispose pas d’empattement, et comme exemple de fonte : Old Standard Bold.

Découvrons ensemble quelques critères pour bien choisir la typographie de votre site web.

 

20 exemples de polices à utiliser sur votre site internet

Pour vous aider dans la recherche des polices de votre site web, nous avons compilé ici les 20 meilleures polices à notre avis pour créer un site à votre image.

Admara :

typographie-site-web

La police Admara apporte un côté intimiste, mais n’est pas forcément très accessible puisque son utilisation est autorisée seulement à titre personnel.

Argesta :

typographie-site-web

En ce qui concerne Argesta, il s’agit d’une belle police de titre, qui s’harmonise bien avec l’esthétique minimaliste et des produits de haute qualité. Cette police de caractères pourrait être utilisée pour présenter des recettes dans votre nouveau livre de recettes, sur le site d’un salon haut de gamme ou dans le cadre de son portfolio de documents de présentation en ligne.

Arial :

typographie-site-web

Arial est une police web-safe et sans serif qui est facile à lire. Elle peut être utilisée pour n’importe quel secteur d’activité avec sa polyvalence en impression numérique ou en médias traditionnels, même si elle a été conçue principalement comme une police de caractères numérique.

Baskerville :

typographie-site-web

La police de Baskerville est idéale pour ceux qui cherchent à ajouter du style et du caractère. John Baskerville a créé cette police en 1750, qui présente des versets robustes avec de grands espaces entre les lettres ; elle est très populaire auprès de ses utilisateurs en raison de sa clarté lors de la lecture de texte sur papier ou à l’écran !

Bogart :

typographie-site-web

Bogart est une police de titre élégante, nostalgique et innovante qui a été conçue en 2020. Sa personnalité le rend capable de toucher le public sur l’emballage des produits ou des couvertures de livre ; les faisant sentir comme s’ils faisaient partie d’un vieux monde plus grand qu’eux-mêmes.

Calibri :

typographie-site-web

Informel, simple et agréable – Calibri police apporte un sentiment familier. C’est un choix idéal si vous voulez établir un rapport amical avec votre lecture.

Cambria :

typographie-site-web

Cambria est une police de caractères qui présente des terminaisons en pente douce, ce qui rend les lettres plus modernes et plus faciles à lire sur les écrans.

Century Gothic :

typographie-site-web

Century Gothic est une police sans empattement géométrique conçue dans le but de rivaliser avec Futura. Elle est incluse dans la plupart des systèmes d’exploitation Microsoft et Apple maintenant.

Courier New :

typographie-site-web

Courier New est une police à espacement fixe avec un texte normal en ligne qui est beaucoup plus mince que la plupart des autres polices et sans contours. Elle est lisible par les ordinateurs Microsoft ou Apple, à la fois sur les appareils de bureau et mobiles.

Danielle Signature :

typographie-site-web

La police Danielle Signature est élégante, personnelle et pleine de peps. Il s’agit d’une excellente option pour le design du logo d’une marque commerciale indépendante traditionnellement engagée dans la vente au détail.

Didot :

typographie-site-web

Avec les polices Didot, vous pouvez magnifiquement représenter le charme et l’élégance du vieux monde qui est si typique des journaux français. Cette typographie a été créée à l’origine pour une utilisation dans les presses d’imprimerie Didot au 19ème siècle.

Garamond :

typographie-site-web

Dans la famille des polices web Safe, la font Garamond est très appréciée des designers. Cette police de caractères fonctionne mieux lorsqu’elle est imprimée – elle est idéale pour les textes à forte densité et elle a des proportions agréables qui la rendent facile à lire.

Geneva :

typographie-site-web

La police Geneva est connue pour son style unique inspiré du grotesque. Elle est légèrement étroite et préférée par les grandes marques telles que Facebook ou Apple (l’entreprise qui l’a créée).

Georgia :

typographie-site-web

Georgia, une proche parente de Garamond, est une autre police aux coins arrondis et une sensation de nervosité. Elle a été développée pour Microsoft en 1996, mais toujours l’une de leurs polices MS les plus courantes de loin ; elle fonctionne avec presque toutes les versions de Windows ou macOS.

Helvetica :

typographie-site-web

L’Helvetica est une police de caractères sans empattement moderne qui a été inspirée par d’autres polices suisses/allemandes des années 1900 – 1930. Plutôt que d’être doux et rond comme d’autres conceptions à cette période de l’histoire de la typographie, Helvetica possède des lignes épurées et équilibrées.

Italico :

typographie-site-web

La police Italico est emblématique des produits modernes, minimalistes et écologiques. Elle est charismatique avec une touche originale qui renforce la confiance des consommateurs.

Juana :

typographie-site-web

La police Juana a une structure épaisse et pointue, qui contraste avec les lignes fines sur ses bords doux. Elle est aussi naturellement hypnotique en raison de son élégance. Elle donne un avantage à toute publication contenant de l’information sur les produits/services.

Warton :

typographie-site-web

Warton est l’une des polices les plus romantiques qui existent actuellement. Avec ses longues courbes et son trait délicat est une excellente option pour les mariages, les logos ou des titres de romans.

Wonder Night :

typographie-site-web

La police Wonder Night est distinctive, non conventionnelle et amusante. Elle serait parfaite pour les marques ciblant les jeunes consommateurs ou lorsque la longueur du texte lui permet de briller dans une campagne éducative avec sa nature engageante.

Times New roman :

La police Times New Roman est un excellent choix si vous voulez maintenir le professionnalisme avec vos mots. Son style sérieux, direct est approprié pour le contenu factuel ou formel tel que les documents académiques. Cette police dégage un look poli tout en maintenant la lisibilité sans être trop fantaisiste.

 

La typographie doit exprimer ce que vous êtes

En effet, selon votre activité, le tempérament et l’univers de votre entreprise ou de votre marque, vous aurez à choisir une typographie spécifique.

Je vais être plus précise encore : la typographie doit parler pour votre entreprise. Pas pour vous.

Si vous aimez les chats et les westerns, ce n’est pas une raison pour opter pour des polices de caractère qui le mettent en avant (et si, ça existe, vous pouvez en trouver). Bien sûr, si votre entreprise vend des bottes de cowboys pour chats, vous pouvez oublier ce que je viens de dire…

Ça y est, vous avez bien cette image en tête ? Parce que c’est ce que feront vos textes écrits : donner une image de vous. Donc si vous voulez vous présenter comme une entreprise sérieuse, avec un historique fiable, ancrée dans la réalité, vous vous tournerez plutôt vers des polices comme Georgia ou Times New Roman, qui laissent exactement cette impression.

À l’inverse, si vous voulez paraître comme créatif, moderne, dynamique, vous regarderez plutôt vers des polices comme Trashand et Notera. Et vous pourrez aussi chercher des polices qui se situent pile entre les deux, si c’est là votre branding.

 

La typographie de votre site web doit apporter cohérence et unité à votre site

Les polices d’écriture se déclinent à l’infini. Mais ne tombez pas dans la tentation d’en utiliser plusieurs pour « faire joli ». Vous tomberez dans l’effet inverse.

Deux, au maximum trois différentes polices d’écriture sont largement suffisantes sur l’intégralité de votre plateforme. Vous pouvez, par exemple, en choisir une pour le titre et les sous-titres, puis une nouvelle pour le contenu du texte. Cela conférera de la cohérence et une unité appréciable à l’ensemble de votre site.

Je vous conseille plutôt de miser sur la largeur et la hauteur d’une police en changeant la taille et la graisse.

Un grand nombre de sites proposent des polices parmi lesquelles vous trouverez certainement celle-là mieux adaptée à votre site internet. Certains sont gratuits, d’autres sont payants. Veillez à vérifier les droits d’auteur avant de télécharger quoi que ce soit.

Sites de typographies où vous ne payez pas :

Google Fonts dont l’approche est open source, ce qui signifie avec des polices qu’on peut utiliser gratuitement. Il en est de même pour les sites suivants :

  • Dafont
  • Fontsquirrel
  • Creative market (sur abonnement newsletter)
  • Envato Elements

 

Sites de typographies où vous devez payer :

  • Creative Market (vous devez insérer un lien affilié)
  • Graphics River Fonts
  • Adobe Typekit

 

La typographie de votre site web doit lui apporter du dynamisme

On a vu précédemment qu’il convient de faire usage de deux, au maximum trois différentes polices d’écriture pour le plus grand nombre de sites. Mais il faut donner du contraste via une bonne combinaison. Tout d’abord, évitez de choisir des caractères qui se ressemblent.

Une combinaison bien réfléchie va offrir des variétés recherchées et rendre ainsi votre site internet beaucoup plus dynamique. Pour trouver la police de vos rêves, essayez en premier lieu quelques combinaisons. À titre d’exemple : associez d’abord une police Serif (avec empattement) et un caractère qui n’a pas de Serif où il n’y a pas d’empattement. Cette association évitera toute confusion visuelle.

Il est également recommandé de tester différentes associations de polices. L’essentiel est d’être créatif, original, mais toujours élégant.

Il est aussi possible de n’utiliser qu’une seule police. Dans ce cas, vous pouvez apporter de la variété en jouant sur :

  • La taille
  • La graisse
  • L’espace que vous choisissez qui se trouve entre deux lettres
  • Les différentes couleurs

Cette démarche permettra d’afficher une impression de diversité pour votre site internet et de le rendre plus dynamique.

 

La typographie de votre site web doit parler à votre cible

Dans un échange, il y a ce que vous dites, la manière dont vous le dites, et la personne à qui vous le dites. Nous ne parlerons pas aujourd’hui du contenu des textes présentés sur votre site, ce sera à vous de le définir. Mais, pour savoir quoi dire, vous aurez sans doute au préalable réfléchi à la personne à qui vous voulez le dire.

Parce qu’on ne parle pas de la même manière à un courtier en assurance qu’à un skateur, vous devrez adapter votre discours à votre client type. Et la même réflexion concernera aussi la police de caractères de votre page.

En effet, les polices classiques, déjà citées plus haut, rassureront une clientèle qui l’est tout autant. Mais pourraient sembler ennuyeuses ou dépourvues d’intérêt à des adolescents, par exemple. Or votre site internet doit être tourné vers votre cible.

Prenez le temps de regarder ce que font les concurrents dans ce domaine. Mieux encore : regardez ce que font les marques qui s’adressent spécifiquement à votre client type, même s’ils vendent des produits qui n’ont rien à voir avec les vôtres. Et inspirez-vous-en pour sélectionner votre typo.

 

La typographie d’un site internet doit être lisible (voire responsive)

Vous avez trouvé une police de caractères originale, qui correspond pile aux deux critères précédents. Et vous êtes très fier de vous. A priori, vous avez toutes les raisons de l’être, cette quête n’était pas si facile. Mais avez-vous vérifié que cette police reste lisible, quelle que soit la taille de l’écran (et donc du texte) ?

De même que vous devez penser à construire votre site pour qu’il soit responsive, il est crucial d’intégrer la typographie dans cette réflexion. Si elle devient indéchiffrable une fois réduite, tous vos efforts ne vous mèneront nulle part.

C’est l’une des raisons pour laquelle la plupart des sites web privilégient les typographies les plus classiques : elles ont fait leurs preuves en toutes circonstances. Ce qui ne veut pas dire que vous devez vous en contenter. Juste que vous devez également y penser.

 

La typographie d’un site internet doit posséder toutes les lettres à utiliser

Ce critère est crucial, notamment pour nous qui écrivons nos textes en français. Le français utilise des lettres qui requièrent des éléments comme les accents aigus, les accents graves, les accents circonflexes, les cédilles, et bien d’autres encore.

Il ne serait pas convenable de choisir une police d’écriture qui ne possède pas ces éléments. Toutefois, il faut reconnaître que la quasi-totalité des polices qui sont disponibles sur internet propose toutes ces caractéristiques.

 

Qu’est-ce qu’une police de caractères web safe ?

Les polices de caractères web sont des polices qui peuvent être utilisées sur les sites web sans risque de problèmes de compatibilité. Ce sont généralement des polices qui ont été installées sur les ordinateurs depuis longtemps et qui sont donc plus compatibles avec les navigateurs web.

Il existe une poignée de polices web safe que les concepteurs utilisent fréquemment, notamment Arial, Verdana, Times New Roman et Georgia. Bien qu’il existe d’autres polices moins connues qui sont également web safe, elles ne sont pas aussi couramment utilisées.

Lorsque vous choisissez une police pour votre site web, il est important de vous assurer qu’elle est compatible avec tous les navigateurs afin que vos visiteurs ne rencontrent pas de problèmes d’affichage.

 

Comment ajouter des polices à votre site WordPress ?

1. télécharger la police que vous voulez utiliser :

La première chose à faire est de télécharger les polices que vous souhaitez utiliser. Vous pouvez les télécharger sur le site de votre choix, mais assurez-vous d’utiliser des polices de qualité supérieure afin que votre site soit bien visible sur tous les écrans. Vous en trouverez de très intéressantes sur Google Fonts.

Une fois que vous avez téléchargé les polices, vous devrez les enregistrer sur votre ordinateur. Pour ce faire, ouvrez le dossier « Polices » situé dans le répertoire « C : Windows » et copiez-y les polices que vous avez téléchargées.

La prochaine étape consiste à ouvrir le gestionnaire de polices situé dans le panneau de configuration de Windows. Pour ce faire, double-cliquez sur l’icône « Polices » située dans le panneau de configuration, puis sélectionnez l’option « Installer une nouvelle police ».

Dans la fenêtre qui s’affiche, cliquez sur le bouton « Parcourir » afin d’accéder au dossier contenant les polices que vous avez précédemment enregistrées sur votre ordinateur. Sélectionnez ensuite les polices que vous souhaitez installer et cliquez sur le bouton « Installer ». Les polices sont alors installées sur votre ordinateur et prêtent à être utilisées sur votre site WordPress.

2. Ajouter manuellement des polices sur WordPress :

Pour que la police de votre site fonctionne, vous devez l’ajouter à la feuille de style de votre site web. Pour ce faire, ajoutez du code qui applique des styles sur les éléments body ou head à votre fichier style.css. Vous pouvez également sélectionner plusieurs éléments avant de finaliser les modifications en les enregistrant avec une version mise à jour dans leurs propres fichiers. Par ailleurs, il existe différents tutoriels YouTube pour vous apprendre comment ajouter une police en image.

 

Notre astuce pour choisir la typographie de votre site

Si choisir la typographie de votre site web vous a paru jusqu’ici compliqué et même frustrant, la démarche ne sera plus qu’un jeu d’enfant en tenant compte des conseils suivants :

  • Vous devez dans un premier temps définir votre identité, puis votre cible.
  • Vous procédez ensuite à la définition du nombre de polices que vous allez choisir.
  • Vous sélectionnez le type de police en fonction des éléments précités.
  • Vous faites le choix de la police d’écriture de vos rêves sur l’une des plateformes que je vous ai présentées.
  • Vous essayez les polices que vous avez choisies pour évaluer le rendu.

 

Pour conclure, il vous faut également :

  • Choisir des polices lisibles et adaptées à tout support.
  • Tester la lecture sur différents supports et dans différentes tailles.
  • Vérifier que les polices choisies possèdent tous les styles nécessaires et les accents.
  • Ne pas excéder 3 polices par site et penser à les harmoniser.

 

Pour la réalisation de votre site internet à votre image, avec une typographie efficace et cohérente, vous pouvez faire appel à un freelance sur Graphiste.com. Il sera en mesure de vous aider à choisir les typographies de votre site et pourra réaliser l’identité visuelle de votre marque. Pour aller plus loin, vous pouvez également trouver un graphiste pour créer votre propre police d’écriture !

L’article Quelle typographie pour son site web ? 20 exemples est apparu en premier sur Graphiste.com.

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

10 designs d’applications de musique

Envie de développer une application musicale pour smartphone ? Trouvez l’inspiration avec ces 10 designs d’apps de musique sans fausses notes. Par Svitlana...

Publié le par Leo Chatillon
Graphisme

6 magazines de graphisme auxquels vous abonner

S’abonner à un magazine de graphisme, c’est aussi une occasion de se former sur des nouvelles techniques, d’apprendre ce qu’il se passe partout dans...

Publié le par Melanie De Coster