L'homme moyen considère quel goût de Doritos sera bon avec son Heineken. L'homme sophistiqué considère quel fromage se mariera bien avec son choix de vin. Bien entendu, le concepteur tient compte des deux polices qui auront fière allure sur la même page.
Aujourd'hui, nous allons utiliser l'API Google Font comme un terrain de jeu pour mélanger les polices et trouver les combinaisons idéales. Vous pourrez parcourir et saisir instantanément les sélections que vous jugez appropriées pour vos projets. La meilleure partie? Il vous suffit de copier et coller notre code pour implémenter ces polices sur votre site. C'est totalement gratuit et aucun téléchargement n'est requis.
Pourquoi Google Fonts?
Le jeu de polices Web était en l'air il y a quelques années. Tout le monde avait une idée et une solution, mais personne ne savait vraiment ce qui resterait debout une fois la poussière retombée. Dans mon esprit, ce débat est terminé: @ font-face won.
Voici pourquoi @ font-face gagne. Premièrement, une solution CSS pure est une solution que les développeurs peuvent utiliser. Ensuite, le fait que @ font-face prenne pleinement en charge la sélection de texte et les actions telles que copier / coller signifie que les experts en convivialité adorent ce logiciel. Enfin, le fait que vous puissiez facilement créer une recette @ font-face pour presque toutes les polices signifie que les concepteurs l'adorent, car ils disposent d'un large éventail de polices sous licence appropriée. Si vous obtenez des développeurs, des concepteurs et des utilisateurs conviviaux, le jeu est fini pour Flash, JavaScript et des solutions basées sur des images.
Maintenant, dans le monde @ font-face, il y a beaucoup de concurrents. Ma solution préférée personnelle consiste simplement à utiliser les kits @ font-face de FontSquirrel, que je télécharge l'une de leurs options prédéfinies ou qu'un fichier de polices afin que le site puisse me livrer le reste.
Cependant, j'avais déjà utilisé cette solution à plusieurs reprises sur Design Shack et je voulais donc changer de sujet aujourd'hui et utiliser autre chose. Le répertoire de polices de Google étant gratuit et offrant de nombreuses options, il semblait naturel!
Conseils rapides pour la combinaison de polices
Avant de commencer, vous devez garder à l’esprit certaines règles de base lors de la combinaison de polices. Ce ne sont pas des absolus que vous devez suivre à chaque occasion, mais simplement quelques directives à suivre en cas de doute.
Utiliser les familles de polices
Tout d’abord, lorsque cela est possible, vérifiez les différentes polices d’une même famille. Ces polices ont été méticuleusement conçues pour fonctionner ensemble et constituent donc la méthode la plus sûre pour faire varier votre police sans créer de discorde visuelle.
Le contraste est roi
Ensuite, lorsque vous combinez deux polices, optez pour le contraste. Associez une dalle audacieuse à un sans-serif léger. Si vous mélangez deux polices assez similaires, le manque de contraste donne l'impression qu'il y a quelque chose qui cloche avec la typographie plutôt que l'impression voulue de deux polices de caractères différentes. Expliquez aux concepteurs et aux non-concepteurs que deux styles distincts sont présents.
Go Easy
En outre, limitez-vous à quelques polices. Si vous pouvez vous en sortir avec deux, faites-le, sinon arrêtez-vous à trois. Entre toutes les mains, sauf les plus expérimentées, de nombreuses polices différentes nuisent à la cohésion d'un dessin. Il est facile de ressembler à un enfant qui vient de découvrir le menu des polices dans Photoshop pour la première fois.
Pensez aux polices qui conviennent
Enfin, laissez le contenu jouer un grand rôle dans votre choix de police. Si votre contenu est moderne et professionnel, utilisez des polices suggérant ces qualités. Helvetica Neue Ultra Light n'est peut-être pas la meilleure solution si elle doit ressembler à quelque chose des années 1700.
Les polices!
Assez parlé déjà, passons aux choses sérieuses. Naviguez vers le répertoire de polices Google et recherchez les options suivantes.
Si vous n'avez jamais utilisé le répertoire de polices de Google, ne vous inquiétez pas, c'est la solution de polices personnalisées la plus simple à utiliser. Tout ce que vous avez à faire est de déposer un lien dans l'en-tête de votre page, puis de faire référence à la police dans votre famille de polices CSS, comme vous le feriez avec n'importe quoi d'autre. Pour chaque paire de polices ci-dessous, je vous fournirai tous les extraits de code nécessaires pour que tout ce que vous avez à faire soit de copier-coller!
Homard et cabane
Le homard est l'un de mes scripts préférés de tous les temps. C'est audacieux et beau tout en restant assez lisible, attributs que l'on ne trouve pas facilement dans d'autres scripts.
Pour compléter cette affirmation forte, vous ne voulez rien qui puisse attirer l’attention. Au lieu de cela, choisissez quelque chose de simple et simple comme Cabin.
Le HTML
Le CSS
Librairie Raleway & Goudy 1911
Raleway est une police très attrayante, mais elle est si mince qu'elle ne fonctionne pas toujours au mieux avec la copie de corps. Pour cette raison, il est préférable de le garder aussi grand que possible chaque fois que vous le pouvez, ce qui en fait une police idéale pour vos en-têtes.
Je pense que la combinaison de Raleway et du vieux stye assez orné Goudy Bookletter 1911 en fait une paire super chic. Attention cependant, ce Goudy en particulier est un peu trop complexe pour des tonnes de copies corporelles et je ne voudrais certainement pas lire une grande page remplie de copies écrites. Cette combinaison est probablement préférable pour les scénarios avec une copie minimale.
Le HTML
Le CSS
Allerta & Crimson Text
Allerta est un sans serif modérément audacieux doté d'une personnalité.Si vous ne voulez pas quelque chose d’ennuyeux ou de fou, c’est un bon compromis qui a fière allure tant dans le titre que dans la copie du corps.
Crimson Text est une police simple avec des empattements puissants, mais peu ou pas différenciée entre les épaisseurs et les minces. Cela permet de conserver une bonne lisibilité, même petite.
Le HTML
Le CSS
Arvo & PT Sans
Aucune sélection de police ne serait complète sans un bon serif de dalle. Le répertoire de polices de Google n'en contient que quelques-unes et Arvo est actuellement l'une des options les plus audacieuses. J'aime beaucoup la plupart des personnages mais avoue que le "S"? se sent un peu maladroit.
Je l'ai associé à un autre grand sans-serif: PT Sans. Il existe plusieurs variantes de cette version disponible, mais la version standard est la meilleure pour la copie de corps. J'aime vraiment la rondeur des personnages, cela donne une sensation très amicale.
Le HTML
Le CSS
Script de danse et Josefin Sans
Les scripts sont difficiles à mettre en œuvre correctement, surtout lorsqu'ils ne sont pas aussi largement applicables que Homard. Danse Script, montré dans l'exemple ci-dessus, n'est certainement pas mon script préféré, mais c'est l'un des meilleurs disponibles dans le répertoire de polices de Google.
Puisque Dancing Script est beaucoup plus féminin que Lobster, je l’ai associé à Joesfin, un sans-serif vraiment mince pour promouvoir ce style. Cette combinaison est certainement appropriée pour tous les produits ou sites Web présentant une asymétrie féminine.
Le HTML
Le CSS
Allan et Cardo
Je déteste généralement les polices de type bande dessinée, mais Allan est vraiment accrocheur et attrayant. J'aime la hardiesse de la police de caractères et la sensation en italique.
Mon association avec une police de style ancien (Cardo) semble presque un conflit de périodes, mais j'ai vraiment aimé la façon dont elles ont été combinées. N'hésitez pas à opter pour un sans-serif léger.
Le HTML
Le CSS
Molengo & Lekton
Molengo et Lekton ensemble se sentent comme une tentative de vieille école à une sensation technique. En grande partie à cause de la sensation de machine à écrire de ce dernier.
Cette combinaison est quelque chose que je m'attendrais à voir sur un site Web avec un fond de texture en parchemin avec des photos avec un effet polaroid et peut-être même des taches de café.
Le HTML
Le CSS
Droid Serif & Droid Sans
L'un de nos conseils ci-dessus suggérait de rester dans une seule famille. Je mets cela en pratique ici avec la combinaison naturelle de Droid Serif et Droid Sans.
Comme vous pouvez le constater, ces deux types de caractères sont parfaitement compatibles. Ceux-ci pourraient facilement être changés de sorte que Droid Serif soit la police de caractères corps et Droid Sans la police d'en-tête. Vous pouvez repérer Droid à l'état sauvage sur un certain blog de design très populaire.
Le HTML
Le CSS
Corbin & Nobile
Si vous êtes fan de Cooper Black, Corben est une excellente alternative gratuite. Ce serif de graisse et de toony est parfait pour tout ce qui devrait avoir une sensation des années 1920.
Nobile est une police plus moderne avec des formes de lettre qui apparaissent étirées verticalement. Le style minimal ici vous permet de rester concentré sur les gros titres.
Le HTML
Le CSS
Ubuntu & Vollkorn
Ubuntu est un sans-goût particulièrement arrondi qui a une sensation moderne. J'ai utilisé la variante audacieuse ici pour donner un contraste supplémentaire par rapport au corps du texte.
Vollkorn est sans aucun doute une police de caractère très différente, reflétant une époque révolue. Encore une fois, faites toujours attention à ne pas mélanger des polices de différentes périodes. Assurez-vous que c'est intentionnel et avec un but!
Le HTML
Le CSS
Dites-nous vos favoris!
Cet article se veut un outil que vous pouvez mettre en signet et faire référence à chaque fois que vous êtes bloqué et que vous avez besoin d’une bonne combinaison de polices pour le site Web sur lequel vous travaillez. Les polices Web et les navigateurs ont parcouru un long chemin et ces solutions devraient fonctionner très bien dans tous les domaines, mais chacune inclut des polices de sauvegarde appropriées dans le cas où la police Google ne se charge pas.
Laissez un commentaire ci-dessous et dites-nous vos combinaisons de polices gratuites préférées.Le répertoire de Google ne manque pas d'offres hideuses, alors n'hésitez pas à partager vos favoris!
Google Fonts
Google Fonts est une bibliothèque de plus de 800 types de caractères différents, totalement prête à être intégrée dans votre projet Web. Cette série présente les polices Google et présente des exemples intéressants et des combinaisons de polices permettant de faire passer votre projet au niveau supérieur.