Share
L'association de polices peut être un défi. Choisir deux polices ou plus qui fonctionnent bien est une chose - en choisir deux qui fonctionnent ensemble atteindre vos objectifs typographiques peut vous amener à atteindre l’aspirine. Voyons si nous pouvons soulager les maux de tête. Ce guide vous aidera à démarrer avec le couplage de polices pour le Web..
Heureusement, la typographie existe depuis longtemps. Les règles et conventions typographiques ont eu l’occasion de s’établir et il existe de nombreuses ressources pour vous aider. Le seul problème est qu’en effectuant une recherche sur Internet, vous ne pourrez que vous retrouver confronté à des millions d’opinions contradictoires! Voyons si nous pouvons clarifier quelques points.
Voici un résumé de ce que nous allons couvrir dans ce guide:
Gardez l'essentiel à l'esprit. Lorsque vous sélectionnez plusieurs polices pour travailler ensemble, il est essentiel de conserver les deux unité et variété.
Le nombre de polices que vous intégrez à cette composition dépend de vous, mais gardez à l'esprit l'effet global que vous essayez d'obtenir. Les polices, comme les gens, ont des personnalités. Et les personnalités des polices, tout comme celles des personnes, peuvent parfois entrer en conflit. Pensez à vos polices en tant qu’invités de table lors d’une réception de mariage; un artiste suffit généralement, car trop de personnalités fortes peuvent rendre l'atmosphère délicate, comme un épisode de Big Brother.
Assurez-vous qu'il y a certains charisme dans le groupe cependant; huit personnes ayant peu à dire ne font qu'attendre les discours…
Ce site n’est plus disponible, mais le site de bundles Fusion Ads 2011 m’entend comme un excellent exemple de réussite. pile-em-haut utilisation des polices.
Il n'y a pas de règles pour dire que vous devez ou non utiliser un nombre spécifique de polices sur une mise en page. Il peut être difficile d’utiliser plusieurs polices à la fois. Il est difficile d’atteindre l’harmonie, mais si vous le gérez, le résultat peut être décoratif et saisissant. Utilisez moins de polices et votre tâche est plus simple. Essayez de tirer le meilleur parti des deux mondes en sélectionnant des polices avec plusieurs variantes et poids. De cette façon, vous pouvez tirer parti d'un éventail de styles, tout en sachant qu'ils se complètent parfaitement..
Il existe une multitude de services gratuits grâce auxquels vous pouvez tirer parti de @ font-face: polices Google, fonts.com, le générateur de polices de Fontsquirrel, mais n'effectuez pas une réduction immédiate du coût des polices si le projet le justifie. Le coût d'une licence pour un seul domaine peut varier, mais il y a plusieurs avantages à ce que le coût soit réduit.
Qualité. Le soin apporté à la production de polices commerciales est généralement évident dans la qualité. Cela ne veut pas dire que les concepteurs des polices gratuites sont des singes en cage, loin de là, mais il existe souvent une différence qualitative. C'est une différence perceptible dans les détails les plus fins. les épaisseurs de lignes, les formes, l'espace blanc et le crénage (espacement entre les caractères).
Comparez ces deux polices similaires…
Sables mouvants et Museo Sans arrondis Le crénage exécuté avec Museo est supérieur. Sans bricolage, le crénage dans Quicksand est imparfait (concentrez-vous sur le 'o' et le 'i' par exemple), et bricoler avec le crénage sur le Web n'est pas extrêmement intuitif. Là sont Des outils, kern.js par exemple, qui vous permettent de spécifier le crénage par caractère, mais de grands corps de texte rendent cette opération peu pratique..
"Big deal, la différence est à peine perceptible!" vous pouvez dire, mais le diable est dans les détails. Alors ma Nan me dit.
Originalité. Un autre avantage est la possibilité de se démarquer avec un travail original. Une fois vos polices payées, il y a plus de chance que votre conception conserve un élément d'unicité..
Communauté. Mettre la main à la poche est aussi un moyen d’encourager la croissance du secteur. Les fonderies comptent sur le commerce sain pour continuer leur métier. Dans tous les cas, nous avons un coût qui peut être pris en compte dans le projet et transmis au client..
Envato Market propose plus de 1 500 polices premium à utiliser dans vos projets, alors n'hésitez pas à jeter un coup d'œil et à voir ce qui est disponible.
Polices sur le marché Envato Lors de la sélection des polices, il est important de prendre en compte la nature de la mise en page que vous utilisez. Parlons-nous principalement de body copy? Y a-t-il plusieurs titres, sous-titres? Peut-être que c'est une mise en page de magazine avec des ponts, des devis? Lorsque vous utilisez plusieurs polices, assurez-vous que les rôles sont clairement définis. si une police est utilisée comme sous-titre, ne changez pas de police pour un sous-titre ailleurs. Garder le but d'une police claire.
Pour le moment, nous allons garder les choses simples et sélectionner quelques paires de polices. Nous examinerons les circonstances dans lesquelles ils travailleront bien ensemble et nous nous demanderons pourquoi..
Vous avez peut-être déjà entendu cela. appariement réussi repose sur concorde, ou contraste, mais non conflit. C'est-à-dire que les polices sélectionnées peuvent fonctionner ensemble en partageant certaines qualités ou en étant complètement différentes les unes des autres. Cependant, les paires de polices peuvent entrer en conflit de différentes manières - être trop similaire, ce n’est qu’un.
Examinons chacune des possibilités réussies.
Décrire deux polices comme ayant concordance suggère la présence du même trait dans les deux. Peut-être leur crénage est-il similaire, leurs proportions, leur hauteur de bonnet. Jetez un coup d'œil à ces exemples de Kerry Scott Jenkins et vous remarquerez de nettes similitudes proportionnelles.
Un moyen de parvenir à une concordance entre les polices consiste à en appairer deux de la même famille. S'ils sont de la famille, ils vont forcément bien s'entendre, non?! Quoi qu'il en soit, la famille Droid, conçue par Steve Matteson pour être utilisée sur les appareils Android de Google, comprend différents poids et styles, avec des visages serif et sans empattement. Peut-être un peu imaginatif, mais ces deux fonctionnent très bien ensemble. L'un ou l'autre prend en charge les en-têtes, l'autre le corps du texte.
Droid Serif et Droid Sans De toute façon, c'est une excellente combinaison.
Droid Sans et Droid Serif Ils sont propres et modernes, et (comme on peut s'y attendre), ils sont bien adaptés au Web et aux petits appareils en raison de leur grande hauteur x..
La hauteur x d'une police décrit la hauteur entre la ligne de base et les lettres minuscules, comme le x. Une hauteur x proportionnellement importante facilite la lisibilité. Et ces deux partagent la même qualité.
De même, les polices d'un même concepteur partagent souvent des qualités qui les aident à atteindre l'harmonie. Observez les proportions étonnamment similaires que ces deux polices affichent (consultez le «o»)…
Cowboyslang et Supria Sans condensés par Hannes von Döhren Faites attention à la qualité de trait de deux polices de caractères. Au début, elles peuvent sembler n'avoir rien en commun, mais deux polices parfaitement exécutées peuvent mieux fonctionner ensemble que vous ne le pensez:
Bevan et Arapey italiques Des lignes plus douces ensemble peuvent être tout aussi efficaces:
Anodyne et Poulaire 
Le contraste entre les polices donne souvent une combinaison gagnante, mais de quelle manière les polices peuvent-elles s’opposer? Voici quelques qualités à rechercher:
Dans sa forme la plus simple, considérons le contraste entre les polices serif et sans-serif.
C'est un moyen classique de jumelage; prendre un serif décoratif pour le titre et un sans-serif sûr pour le corps. Ou prenez un sans-serif simple pour les titres, avec un serif agréablement lisible pour le corps. Un gagnant dans de nombreux cas. Regardons quelques-uns, démarrant avec deux polices système. C'est vrai, même ils peuvent bien travailler ensemble.
Géorgie et Arial Où pouvez-vous voir ces deux en action? Jetez un coup d'œil au passe-partout squelette. Dépourvues de tout style superflu, Georgia et Arial fonctionnent parfaitement dans cet environnement..
Pour un peu plus de raffinement…
PT Serif et PT Sans N'oubliez pas le rôle du texte pour lequel vous choisissez les polices. Dans les cas ci-dessus, nous avons montré la hiérarchie à travers la taille de la police; les en-têtes sont plus grands que le corps du texte. Il existe d'autres moyens d'établir qui est le patron, le poids étant une évidence..
Lora Bold et Istok Web Disons que nous ne sommes pas concernés par une mise en page entièrement textuelle. Peut-être avons-nous affaire à deux en-têtes et rien de plus (un message Under Construction, par exemple). Nous pouvons nous permettre d’être un peu plus aventureux, car nous n’avons pas à prendre en compte de longues mesures ni de gros corps de texte. Que diriez-vous d’une frappe h1, couplée à un renforcement h2??
Les polices condensées fonctionnent toujours bien pour attirer votre attention, car elles occupent beaucoup d’immobilier vertical..
Bebas Neue et Alex Brush Voici un exemple de combinaison similaire qui fonctionne très bien:
Le travail distinctif de Gerren Lamson et Simon Walker Et pour ceux qui sont intéressés, voici un aperçu de ces caractères:
Et encore une fois, des qualités tout à fait contrastées, mais une hiérarchie claire à travers la couleur qui empêche soit de marcher sur les pieds de l'autre…
Ou que diriez-vous de deux copains sans empattement qui jouent sans arrêt? Le titre principal suivant (Conqueror) est une police en ligne spécialement conçue pour les titres. Comme il s'agit d'une police en majuscule, vous devrez peut-être étendre un peu l'espacement des lettres, comme dans l'exemple ci-dessous..
En ligne décrit une police de caractères avec des lignes blanches apparaissant à l’intérieur des traits de caractères. - fonts.com
Malheureusement, elle n'est pas (encore) disponible en tant que police Web, vous devez donc vous en contenter pour la conception de pixels pour le moment… C'est certainement l'une de mes polices préférées pour le moment..
AW Conqueror Inline et Gudea Prenez cette police serif slab; effort minimal, impact maximal.
Alpha Slab One et Mako Les empattements de dalle attirent très efficacement l'attention, mais peuvent être un peu trop pressants si vous ne faites pas attention. Bull dans un magasin de porcelaine. L'exemple ci-dessus fonctionne très bien avec son partenaire plus délicat, car il contraste tout en partageant certains traits de personnalité. Ils semblent être des polices très différentes, mais si vous examinez les courbes, vous verrez qu'elles ne sont pas aussi différentes que vous le pensiez.
Certaines polices sont si délicieuses que vous ne pouvez presque pas échouer. Prenez Buttermilk par exemple; somptueux, élaboré et décoratif. Il aura fière allure avec ce que vous l'associez (tant que vous n'essayez pas de voler son tonnerre!). Ici, nous avons un agencement avec Georgia:
Babeurre et la géorgie Et avec Aller, un sans-serif tout aussi subtil:
Babeurre et aller Ensuite, cela allait être mon exemple d’association avec une personnalité conflictuelle - trop forte en soi. Mais tu sais quoi? Je peux vivre avec ça, c'est plutôt sympa! Je suppose que parfois tu ne peux jamais dire…
Babeurre et excentrique Ne nous concentrons pas trop sur ce qui ne fonctionne pas bien, nous ne voulons pas dénigrer les joyeuses combinaisons du reste de ce guide, n'est-ce pas? Cela dit, expliquons simplement comment deux polices, qui sont trop similaires, peuvent paraître gênantes.
Almendra et Stoke Mais pourquoi ne travaillent-ils pas bien ensemble? Je pensais que l'idée était de contraster tout en assurant un élément d'unité?
Ce sont des styles différents; l'un est une Blackletter, l'autre serif romain, vérifiez.
Ils ont des proportions différentes; l'un est condensé avec une hauteur x relativement grande, l'autre plus étendu avec des ascendeurs plus grands, vérifiez.
Pourtant, ils partagent le même poids et la même taille, et partagent les mêmes éperons à la fin de chaque personnage..
C'est là que réside le problème. En partageant ces trois derniers détails (poids, taille et décoration), ils sont devenus aussi ressemblent. Ils jouent des rôles très similaires, mais les petites différences sont contradictoires, ce qui crée un effet général délicat..
Les courbures des éperons, par exemple, sont complètement opposées:
Leurs axes sont juste "off":
Et la façon dont un Blackletter est formé lui donne une légère direction, par opposition à la nature verticale du Romain:.
Ces différences ne sont peut-être pas un problème dans d'autres exemples, mais nous avons ici deux polices qui (à première vue) semblent identiques. C'est un peu comme quand on voit une célébrité à côté de son modèle en cire chez Madame Toussauds. Ce n'est jamais confortable de regarder.
Il est difficile d’attribuer le «travail» ou le «non-travail» à des faits et des chiffres, normalement ce sera un sentiment que vous aurez, vous saurez tout simplement. Une fois que vous avez conclu que vous n'aimiez pas les paires de polices, essayez de comprendre pourquoi et cela vous aidera à prendre des décisions plus rapidement à l'avenir..
De nos jours, si vous vous rendez dans le répertoire des polices Web de Google, vous trouverez des suggestions de couplage pour chaque police. Rangé.
J'espère que votre approche du couplage des polices a été simplifiée par ce guide du débutant. S'il y a une règle importante à retenir, c'est "Vous ne saurez pas avant d'essayer!"
Être aventureuse. En tant que concepteurs Web, nous disposons d’un référentiel de polices de plus en plus important, disponible pour nos conceptions. Considérons les principes fondamentaux, puis expérimentez. Vous serez sans doute surpris par ce que vous trouverez.
Si vous souhaitez quelque chose de vraiment unique pour la typographie de votre site Web, essayez de faire appel à l'un des experts d'Envato Studio pour créer une police de caractères personnalisée..
Accentsconagua