Trouvez la typographie idéale pour votre site web ! Voici 5 outils pour vous aider à identifier la famille de police qu'il vous faut pour votre projet : prévisualisation, associations de fonts, mise en situation des polices, plugin Figma, etc.
La typographie est un élément essentiel d'un site et de votre communication.
Par sa forme, sa taille, sa couleur, la police transmet des émotions aux lecteurs, tout comme le ferait une image ou illustration. Chaque police est interprétée de manière unique et renvoie un message précis, notamment lié aux codes sociaux. Par exemple, nous associerons facilement un site noir et blanc avec une police sobre, épurée, droite à quelque chose de haut de gamme, de luxe, de mode. De la même manière, une police plus épaisse, en majuscule et en italique s'intégrera parfaitement dans un site sportif.
Les codes sociaux et habitudes web nous permettent donc aujourd'hui de facilement associer une police à un secteur, un produit, un service, un positionnement, ce qui rend d'autant plus important le choix de votre typographie.
Comment choisir sa police ?
Lorsque vous choisissez une police, vous vous intéresserez en réalité à une famille de polices. Une famille de typographie est un ensemble de polices ayant le même design, mais dont le style varie (gras, semi-gras, italique, romaine, etc.).
La première chose à faire est de s'interroger sur le nombre de police(s) dont vous aurez besoin pour votre site web. Allez-vous utiliser une "superpolice" pour l'ensemble de votre projet ou allez-vous choisir plusieurs polices pour dissocier les titres, sous-titres, corps ?
Vous devrez ensuite prendre en compte plusieurs critère pour le choix de votre ou vos typographie(s) :
- Textes en majuscule et minuscule
- Ponctuations
- Caractères spéciaux et glyphes
- Richesse de la famille (plus ou moins de styles)
- Lisibilité et accessibilité
- Compatibilité avec d'autres polices
- Cohérence avec votre image de marque
Autant de critères qui peuvent complexifier le choix d'une typographie adaptée. Voici 5 outils qui vous aideront à trouver une police optimale pour votre projet.
1. Adobe Fonts
Adobe Fonts est une véritable base de données qui regroupe des centaines de familles de polices différentes. Un système de filtrage très pertinent vous permettra de trouver une police selon des critères précis :
- La langue,
- le style,
- la classification (Serif, Sans Serif, Égyptienne, Cursive, Mono, Main),
- la largeur,
- l'épaisseur,
- l'œil,
- le contraste,
- etc.
2. Fontjoy
Un outil simple et efficace pour faire correspondre plusieurs familles de polices entre elles. Fontjoy vous permet d'associer, soit aléatoirement soit de manière précise, plusieurs familles de polices. Les polices sont mises en évidence à trois niveaux : titre, sous-titre, corps de texte.
Si votre choix est déjà porté sur une typographie en particulier vous pourrez également la sectionner pour que l'outil vous propose des polices complémentaires de manière aléatoire.
3. Fontpair
Un outil très utile pour vous projeter ! L'outil Fontpair vous permet de trouver une police parmi des dizaines de polices gratuites, la plupart des Google Font. L'avantage de Fontpair, est qu'il vous permet également de trouver des associations de polices. Très utile si vous souhaitez utiliser des fonts différentes pour les titres et le corps de texte par exemple.
L'outil vous offre également des prévisualisations de polices, sur des sections de site web. Vous pourrez ainsi plus facilement vous projeter en associant des polices à des styles, à des couleurs, à des univers graphiques.
EN BONUS
Fontpair dispose d'une extension Google et d'une intégration Figma !
4. Google Fonts
Google Fonts regroupe l'ensemble des polices proposées et recommandées par Google. Ce sont toutes des polices gratuites, que vous pourrez directement télécharger depuis la plateforme.
Google Fonts propose plus de 1430 familles de typographies, dans des dizaines de langues différentes. Vous pourrez choisir vos polices selon des catégories et propriétés très simplifiées.
En savoir plus sur Google Font
5. Typespiration
Associez des couleurs à vos polices ! Typespiration est un outil gratuit qui, en plus de vous aider à trouver la typographie idéale, associe des couleurs aux fonts. Typespiration vous permet également de chercher des associations de polices de caractères pour marier titres et corps de texte. Directement inspirées de sites web, les mises en situations vous permettent de vous projeter par exemple pour mettre en forme les liens sur les textes, les couleurs de textes sur un bouton ou CTA, les couleurs de sublines, etc.
Cet outil vous aidera à faire de votre typographie un véritable élément de design pour votre site.
En savoir plus sur Typespiration
6. Bonus : Dafont
Dafont est une base de données de typographies très connue, notamment car l'outil propose des centaines de polices téléchargeables gratuitement. Entre thématiques, langues et styles, Dafont vous permet ainsi de filtrer, prévisualiser et télécharger de nombreuses polices pour votre site web.
Apprenez à intégrer votre police dans Webflow
