10 outils pour trouver les combinaisons de font parfaites
Créer un site internet au look professionnel repose sur un design de qualité et la typographie joue un rôle important pour cela.
Les polices (font) d’un site donnent un réel caractère au webdesign d’un site web. Les tendances webdesign des dernières années orientent vers des sites avec de grosses webfonts et des messages forts.
Il n’est pas toujours simple de trouver la font que vous souhaitez et encore moins la meilleure combinaison de font entre les titres et les paragraphes.
Nous allons vous dévoiler nos 10 meilleurs outils de font pairing, logiciels en ligne et 100% gratuits, pour créer ou trouver des combinaisons de typographie et plus jamais utiliser d’Arial ou de Comic Sans MS (Font Pairing) sur vos templates de sites.
FontJoy
Fontjoy est un générateur d’associations de typologies. L’interface est claire et intuitive avec un fort contraste entre la couleur du fond du site et la couleur des typographies.
Vous allez pouvoir modifier l’une des polices proposées à partir d’un moteur de recherche basé sur l’ensemble des fonts de Google Font. Vous allez pouvoir également changer le contraste du site vers du blanc, ce qui est beaucoup plus lisible.
On regrette la fonctionnalité “Recherche” où seul le A est présenté en résultat. Il n’est pas simple de trouver la bonne typographie avec une prévisualisation aussi limitée.
Canva Font Combinaisons
https://www.canva.com/font-combinations/
Le top du top, tout simplement. Canva est un outil qui permet de créer des montages, des illustrations directement dans le navigateur ce, sans logiciel à télécharger.
Le site internet est très élégant et agréable à utiliser. Une seule barre de recherche vous permet de choisir une font sélectionnée par les soins des designers chez Canva. Ce sont les mêmes typographies qui sont utilisées dans l’outil en ligne de design.
Après avoir sélectionné votre 1ère police, l’outil va vous présenter automatiquement une font complémentaire avec un système de carrousel qui va vous permettre de changer en un clic les différentes combinaisons.
Avantage indéniable, vous allez pouvoir modifier le texte directement pour avoir une réelle prévisualisation de vos textes avec les typographies que vous aurez choisis. Pratique et efficace!
Google Type
http://femmebot.github.io/google-type/
L’objectif de ce site internet est de vous donner de l’inspiration à partir des polices proposées gratuitement par Google Font. Comment trouver des bonnes combinaisons de font parmi les 800 font à disposition.
C’est un site web collaboratif où chaque designer peut mettre en forme 2 polices pour les titres et les textes avec une image de fond pour mettre en valeur les typographies.
Chaque image de fond provient directement de la banque d’images gratuites et libres de droit Unsplash. Les mises en page sont également travaillées pour réellement mettre en valeur les polices.
Les exemples d’inspirations sont très différentes et donnent un réel style graphique à votre site internet.
Fontpair
Font pair est un site clair et simple. Avec un fond blanc et les textes en noir, les exemples de textes sont visuels et lisibles et vous permettent de vous projeter rapidement avec une proposition de police pour les titres et pour les paragraphes.
Il est possible de classer les typographies par catégorie Serif ou Sans Serif et un moteur de recherche est intégré si vous connaissez le nom d’une police en particulier.
Toute les polices sont gratuites et viennent de Google Font.
Le site internet est un peu au stade de side project puisqu’il y’a très peu de mises à jour avec de nouvelles combinaisons. La base est tout de même solide.
TypeWolf
TypeWolf est un site internet de référence sur la typographie. Tenu par Jeremiah Shoaf, Freelance en typographie de renom, ce site propose tous les jours de mettre en avant une font avec un exemple de site internet qui l’utilise. La sélection est précise et de qualité.
Vous allez pouvoir y retrouver des webfonts gratuites mais également payantes de fonderie de renom.
La recherche par tag est également intuitive pour trouver les différents site internet qui utilisent cette typographie.
Typewolf a d’ailleurs sorti un guide complet sur le TOP 40 des fonts gratuites de Google Font. Une sélection aux petits oignons parmi les 500 polices proposées par le géant américain.
Typ.io
Typ.io est un site internet d’inspiration de polices où vous allez retrouver des exemples concrets de site web professionnels qui utilisent les typographies présentées.
Les prévisualisations sont claires et vous donnent un aperçu rapide et efficace du rendu graphique. C’est beaucoup plus simple de se projeter. Un lien vers le site internet est même disponible.
Vous avez des filtres par thématique qui vous facilite la recherche. Les typographies présentées sont parfois payantes (Fontspring ou MyFonts) ou gratuites (Google Font).
Pour tous les développeurs ou designers aguerris, le style CSS des typographies pour les titres et les textes est présenté dans chaque page.
WebFont Blender
https://herrweis.github.iowebfontblender/
Web Font Blender est plus un site internet qui va vous permettre de tester des typographies pour le design de votre site internet que de trouver de l’inspiration.
A gauche, vous avez une liste de toutes les typographies disponibles avec les différentes graisses. A droite, vous sélectionnez le titre ou le paragraphe puis la font associée. Vous pouvez personnaliser la taille ainsi que la hauteur de la font.
Le petit couac est qu’il n’y a pas forcément de proposition de combinaison de font. Web Font Blender est plus un outils pour tester les webfonts qu’on a trouvé ou qu’on aime.
Dans le menu dans “Grab Code”, vous allez pouvoir directement télécharger le code CSS à ajouter sur votre site internet pour avoir les typographies bien paramétrées.
Typespiration
http://typespiration.com/#home-loop
Typespiration est un site internet qui propose des exemples d’inspirations qui mêlent des typographies avec une palette de couleurs associées. Très pratique lorsqu’on commence à créer son site internet à partir de zéro sans logo ou charte graphique.
Une mosaïque d’exemples s’offre à vous sur la page d’accueil du site internet. La comparaison est simple à faire. Pour chaque exemple, les typographies et les couleurs de la palette sont présentées avec la possibilité de copier/coller le code hexa de chaque couleur en un clic.
Cerise sur le gâteau, vous allez pouvoir télécharger le HTML/ CSS à copier, coller directement sur votre site internet.
Un guide spécialisé est disponible sur comment trouver des bonnes combinaisons de typographies.
Petit bémol: les exemples de fonts ne sont pas mis à jour régulièrement.
Fonts in use
Fonts in use, en Français “Police en utilisation” est un site internet qui référence des polices dans des cas d’utilisation autre que le web. C’est une réelle source d’inspiration avec des mises en scène réelles dans des :
- Magazines,
- Produits,
- Cartes de visites.
8 700 exemples d’inspirations sont à votre disposition, avec une sélection faite par leur équipe dans “Staff picks”.
Ce site internet est unique en son genre pour trouver des fonts qui sortent de l’ordinaire. Si vous souhaitez faire un site internet design ou atypique, Fonts in use est le site internet qu’il vous faut.
Google Font
Google Font est le site de référence pour les typographies gratuits depuis 2010. Le site web propose près de 821 webfonts Serif et Sans Serif dans 135 langues différentes.
Le site internet est clair et intuitif pour trouver la police qui vous correspond. Les fonts sont classées par popularité mais vous avez d’autres critères de tri tels que:
- Tendance,
- Populaire,
- Nouveautés ( Date d’ajout),
- Ordre alphabétique.
Vous allez pouvoir également les classer par épaisseur de la police, serif San serif. Il y en a pour tous les goûts.
Pour mieux vous projeter, vous pouvez taper un texte qui va ensuite se propager avec toutes les fonts. Très pratique.
Cerise sur le gâteau, pour la combinaison de police, lors du choix de votre première font, Google Font va directement vous proposer des typographies complémentaires avec une prévisualisation sous forme de titre et de paragraphe.
En un clic, le titre et la description s’intervertissent. La proposition de police se fait à partir des données statistiques que récupère Google Font lors de chaque utilisation sur un site web de leur font.
Les propositions sont souvent élégantes et peuvent être prises les yeux fermés.
Bien choisir les polices de votre site internet
2 fonts maximum
Restez sobre lorsqu’il s’agit de webdesign.
L’expression less is more est d’actualité également en webdesign. Moins vous mettez de couleurs, de choix de polices, plus votre site internet sera élégant et moderne.
2 fonts : une pour les titres et une pour les paragraphes de votre site web est l’idéal. Vous allez voir que les outils que nous vous présentons mettent une Prévisualisation des titres et des paragraphes pour créer une combinaison.
Lisibilité de la police
Le choix de la typographie de votre site web va jouer un grand rôle dans le style de votre site. On a tous tendance à vouloir choisir une typographie qui a du caractère mais faites bien attention à la lisibilité de votre font. Puisqu’avant tout, le critère numéro 1 pour le choix d’une typographie reste la lisibilité que ce soit pour les titres ou pour les textes.
Couleurs des polices
La sobriété est de mise également sur le choix des couleurs pour vos polices. Depuis la création du livre, les textes et les titres sont noirs sur fond blanc. Ce n’est pas le fruit du hasard, c’est la meilleure des combinaisons.
Privilégiez les nuances de noir et gris pour les paragraphes et si vous souhaitez vraiment vous lâcher, prenez une couleur pour vos titres.
Comparer les polices Serif et et sans Serif
Plus vos typographies sont contrastés, mieux c’est. C’est une règle générique qui fonctionne dans la plupart des cas. Elles s’équilibrent bien.
Les webfonts dites “faites main” qui donne un effet écrit à la main sont dans la majorité des cas peu lisibles. Elles sont souvent appréciées pour leur style mais nous vous les déconseillons pour les mettre sur un site internet en entier.
Créer des colonnes plus petite
Les paragraphes courts sont plus simples à lire puisque notre oeil à plus de facilité pour faire un retour à la ligne. Les journaux, en sont la parfaite démonstration, la taille des colonnes reste petite.
Vous avez tous les outils pour trouver la combinaison parfaite pour les fonts de vos titres et paragraphes!
A vous de jouer!
