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...
Le catalogue fait partie des outils de communication incontournables, à but commercial et marketing. Il permet notamment de promouvoir votre offre dans son...
Si vous voulez faire des mises en page à fort impact sur vos lecteurs, vous aurez sans doute besoin d’utiliser un logiciel PAO (Publication Assistée par...
Halloween approche à pas de loup, et l’heure est venue pour vous de susciter l’horreur dans votre typographie. Évidemment, on ne vous parle pas ici de faire...
Bien qu’une photo puisse paraître bonne sur le petit écran d’un appareil photo ou d’un téléphone, il est rare qu’elle soit parfaite. Dans la sphère...
Vous comptez faire concevoir ou réaliser vous-même une nouvelle affiche ? Sachez que choisir la bonne typographie est essentiel pour bien transmettre...
Il existe aujourd’hui un nombre impressionnant de polices d’écriture à télécharger, de tous styles et pour toutes les utilisations, gratuites ou payantes, et...
Si vous êtes un créatif, vous utilisez très certainement Adobe Photoshop et vous savez mieux que quiconque qu’il faut parfois beaucoup de temps et de travail...
Vous avez opté pour le format RAW pour vos photographies et vous souhaitez les rendre exploitables ? Vous voulez donner un peu de pep’s à votre...
Pour annoncer votre futur mariage, vous devez nécessairement transmettre un faire-part d’invitation à vos convives. Non content de préciser clairement la date...
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é....
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.
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 » !
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 :
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 :
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.
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.
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.
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 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.
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 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.
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 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 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 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.
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.
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.
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.
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, 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.
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.
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.
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 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.
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.
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.
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.
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.
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 :
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 :
Cette démarche permettra d’afficher une impression de diversité pour votre site internet et de le rendre plus dynamique.
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.
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.
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.
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.
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.
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.
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 :
Pour conclure, il vous faut également :
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.
Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.
Nous ne partagerons pas votre adresse e-mail.