10 outils pour trouver les combinaisons de font parfaites

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

http://fontjoy.com/

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 combinations

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

http://fontpair.co/

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.

Créez votre site responsive

TypeWolf

https://www.typewolf.com/

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

https://typ.io/samples

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.

Webfontblender

WebFont Blender

http://andreasweis.com/webfontblender/

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

https://fontsinuse.com/

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 fonts

Google Font

https://fonts.google.com/

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!

Nouveau guide gratuit. Votre site est-il efficace ?

Tsi-Fei Chan

Tsi-Fei Chan

Tsi-fei is the Co-Founder of Orson.io and has a passion for digital marketing, GrowthHacking and SEO. You can find him at @tsifeichan

Plus de conseils pour créer un site efficace

Site vitrine : les 8 meilleurs sites d'inspiration

Faire un site vitrine unique n’est pas chose aisée. Comme disait Picasso, les bons artistes copient, les grands artistes volent. C’est pourquoi, nous avons demandé à nos designers quel était leurs sites internet d’inspiration favoris, ceux qu’ils...

Lire la suite

Top 12 des banques d'images gratuites et libres de droits

Cette année, on vous dit tout ! Voici l’un de nos petits secrets. La liste des banques d’image libre de droit que nous utilisons régulièrement chez Orson (et dans bien d’autres Startups) pour réaliser nos créations et illustrations.

Lire la suite

Comment créer son portfolio et valoriser ses créations ?

Lorsqu’il s’agit de mettre en valeur un travail visuel, le contenu est souvent aussi important que le contenant.

Lire la suite