Advertisement
  1. Web Design
  2. Typography
Webdesign

Guide du Débutant pour Associer Vos Polices de Caractères

by
Length:LongLanguages:
This post is part of a series called A-Z of Web Typography.
Getting the Hang of Hanging Punctuation
Start Using Quotation Marks the “Correct” Way

French (Français) translation by Benoit Benedetti (you can also view the original English article)

Associer des polices peut relever du défi. Choisir deux polices ou plus qui s'associent est une chose - en choisir deux qui fonctionnent pour atteindre votre but typographique peut vous donner des envies d'aspirine. Voyons si nous pouvons vous éviter des maux de tête. Ce guide vous aidera à démarrer dans l'association de polices pour le web.

Par chance, la typographie est présente depuis trèèès longtemps. Les règles et conventions typographiques ont eu tout le loisir d'être établies et il y a tout un tas de ressources à votre disposition pour vous aider. Le seul problème est que vos recherches sur internet font vous amener à faire face à des millions d'opinions contradictoires. Voyons si nous pouvons clarifier certains points.

Voici un bref aperçu de ce que nous allons aborder dans ce guide:

  • Votre Objectif
  • Combien de Polices Devrais-Je Utiliser?
  • Payer ou Pas?
  • Quelle est la Nature de mon Contenu?
  • Comment Je Peux Obtenir Une Assiociation Réussie?
  • Association 1: Accord
  • Association 2: Contraste
  • Association 3: Conflit

Votre But

Gardez à l'esprit les fondamentaux. Quand vous sélectionnez plusieurs polices pour les associer il est crucial de maintenir l'harmonie comme la variété.

Combien de Polices Utiliser?

Combien de polices utiliser dépend entièrement de vous, mais gardez à l'esprit l'effet global que vous souhaitez atteindre. Les polices, comme des personnes, ont leur personnalité. Et les personnalités des polices, tout comme celles des personnes, peuvent parfois entrer en conflit. Imaginez vos polices comme des invités à une réception de mariage autour d'une table, un boute-en-train est généralement suffisant. Ajouter d'autres personnalités trop fortes peut rendre l'atmosphère désagréable, façon show de télé-réalité.

Assurez-vous néanmoins qu'il y ait un certain charisme au sein du groupe; huit personnes peu bavardes résulteront en une association ennuyeuse..

Il n'est plus disponible, mais le site de l'offre promotionnelle de 2011 de Fusion Ads me vient à l'esprit comme un bon exemple d'une association totale réussie de police.

Il n'y a pas de règle qui dicte l'utilisation ou non d'un nombre précis de polices dans une mise en page. L'utilisation simultanée de plusieurs polices peut être difficile, obtenir l'harmonie est ardue, mais si vous arrivez à la gérer, le résultat sera très bon visuellement et aura beaucoup d'impact. Utilisez moins de polices et votre tâche en sera facilitée. Essayez d'avoir le meilleur des deux mondes en sélectionnant une police qui a de multiples variantes et tailles. De cette façon, vous pourrez profiter d'un vaste éventail de styles, tout en sachant qu'ils vont très bien se complèter mutuellement.

Acheter ou Non?

Il y a un tas de services gratuits avec lesquels tirer profit de @font-face: google fonts, fonts.com, le générateur de kit de polices de fontsquirrel, mais ne rechignez pas tout de suite à payer pour 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 à mettre la main à la poche.

Qualité. Le soin et l'attention apportées à la production de polices commerciales sont généralement évidents dans la qualité. Cela ne veut pas dire que les designers à l'origine de polices libres soient des incapables, loin de là, mais il y a souvent une différence de qualité. Une différence notable dans les plus petits détails, l'épaisseurs des traits, les formes, l'espacement blanc et le crénage (espacement entre les caractères).

Comparez ces deux polices similaires..

Quicksand et Museo Sans Rounded

Le crénage de Museo est meilleur. Sans un peu de bricolage, le crénage de Quicksand n'est pas parfait (concentrez-vous sur le 'o' et le 'i' par exemple), et retoucher le crénage sur le web n'est pas très intuitif. Il existe des outils, kern.js par exemple, qui permettent de donner un crénage au caractère près. Mais appliquée à de larges corps de texte, cette technique est peu pratique.

"La bonne affaire, la différence est à peine perceptible!" vous pourriez dire, mais le diable est dans les détails. Commme le dit si bien ma mamie.

Originalité. Un autre avantage est l'opportunité de se démarquer par une réalisation originale. Ayant payé pour vos polices, il y a de grande chance pour que votre design se démarque de la masse.

Communauté. Mettre la main à la poche est aussi un moyen d'encourager le développement de l'industrie. Les fonderies de polices en ont besoin pour pouvoir continuer leur travail. En définitive, on parle d'un coût qui peut être pris en compte dans un projet et répercuté sur client.

Quelle est la nature du contenu?

Quand vous sélectionnez des polices, il est important de considérer la nature de la mise en page à laquelle vous avez affaire. Est-ce que l'on parle surtout d'un corps de texte? Est-ce qu'il y a plusieurs entêtes, sous-entêtes? Peut-être que c'est une mise en page de magazine avec des titres, des citations? Quand vous utilisez plusieurs polices, assurez-vous que les roles sont clairement établis; si une police est utilisée pour un sous-entête, n'en changez pas dans un autre entête. Gardez la finalité d'une police cohérente.

Pour le moment, nous allons simplifier les choses et sélectionner quelques paires de polices. Nous allons considérer les circonstances dans lesquelles elles fonctionnent bien ensemble, et nous demander pourquoi.

Est-ce que j'ai obtenu une association réussie?

Vous avez peut-être entendu ça; une association réussie réside dans l'harmonie, ou le contraste, mais pas le conflit. Ce qui signifie que les polices sélectionnées par vos soins peuvent fonctionner ensemble car elles partagent certaines qualités, ou parce-qu'elles sont complétement différentes. Cependant, certaines polices peuvent s'opposer de différentes manières - être trop similaire en étant une parmi tant d'autres.

Examinons chacune des possibilités à succès.

Association 1: Accord

Décrire deux polices comme accordées suggère qu'elle présente des traits similaires. Peut-être est-ce leur crénage qui est similaire, leurs proportions, leur hauteur de capitale. Jetez un œil à ces exemples de Kerry Scott Jenkins et vous noterez clairement de nettes similarités.

Une façon d'obtenir une concordance des polices et d'en associer deux de la même famille. Si c'est sont de la même famille, elles devraient s'entendre, non?! Dans tous les cas, la famille Droid, conçue par Steve Matteson pour utilisation sur les appareils mobiles Android de Google, comprend de multiples tailles et styles, avec des versions serif et sans-serif. Ce n'est peut-être pas très original, mais ces deux là fonctionnent bien ensemble. Une autre servira aux entêtes, l'autre au corps du texte.

Droid Serif et Droid Sans

Quel que soit le choix cela résultera en une très bonne combinaison.

Droid Sans et Droid Serif

Elles sont claires et modernes, en plus (comme vous vous en doutiez) elles sont adaptées au web et aux appareils mobiles grâce à leur large hauteur d'x.

La hauteur d'x d'une police correspond à la hauteur d'un caractère base-de-casse, comme un x. Une hauteur d'x proportionnellement large facilite la lisibilité. Et ces deux-là partagent cette particularité.

De la même manière, les polices conçues par le même designer partagent souvent les mêmes spécificités et permettent d'arriver à l'harmonie. Regardez les proportions étonnament similaires affichées par ces deux polices (concentrez-vous sur le 'o')..

Cowboyslang et Supria Sans Condensed par Hannes von Döhren

Faites attention à la qualité d'exécution des lignes de deux polices de caractères. Elles peuvent au premier abord sembler n'avoir rien en commun, mais deux polices parfaitement exécutées peuvent mieux s'accorder que ce que vous ne pouvez le penser:

Bevan et Arapey Italic

Des lignes plus douces peuvent être tout autant efficaces:

Anodyne et Populaire

Association 2: Contraste

Le contraste entre polices offre parfois une combinaison gagnante, mais dans quelles circonstances des polices sont-elles en contraste? Voici juste certaines spécifités à rechercher:

  • Style: Jetez un œil à tout site de ressources sur les polices et vous les trouverez classées comme Blackletter, Monospace, Script, Slab Serif etc. Des polices de styles différents offrent souvent du contraste.
  • Taille: Grosse police, petite police. rien de plus à dire.
  • Épaisseur: Varier l'épaisseur des polices est un moyen courant d'établir une hiérarchie visuelle. Hiérarchie obtenue par le contraste.
  • Forme: Considérez les proportions d'une police de caractères. la longueur relative des jambages, la courbure des épaules, la direction du mouvement.
  • Couleur: Nous ne nous y attarderons pas ici, mais la couleur peut facilement déterminer si deux polices fonctionnent.

Dans sa forme la plus simple, utilisez le contraste entre les polices serif et sans-serif.

Un cas classique d'association: prenez une police serif décorative pour l'entête et une police sans-serif à l'empattement nette pour le corps. Ou prenez une police sans-serif sans fioriture, avec une police serif à l'empattement agréable à lire, pour le corps. Une équipe qui gagne à tous les coups. Voyons-en quelques-unes, en commençant avec des polices systèmes. Oui, vous avez bien entendu, elles peuvent même très bien s'associer.

Georgia et Arial

Où pouvez-vous voir ces deux-là à l'œuvre? Jetez un œil à skeleton. Dénué de tous styles superflus, Georgia et Arial fonctionnent à la perfection dans cet environnement.

Pour un petit peu plus de raffinement..

PT Serif et PT Sans

N'oubliez pas le rôle joué par tout texte pour lequel vous choisissez des polices. Dans les cas précédents, nous avons obtenu une hiérarchie via la taille de police; Les entêtes sont plus gros que le corps du texte. Il y a d'autres moyens d'obtenir cette hiérarchie, la largeur des caractères en étant une évidente.

Lora Bold et Istok Web

Disons que nous n'avons pas affaire à une mise une page complètement composée de texte. Peut-être avons-nous à faire à deux entêtes et rien de plus (un message En Cours De Construction, par exemple). Nous pouvons nous permettre d'être un peu plus aventurier car on n'a pas affaire à une grande longueur de ligne ou de larges corps de texte. Pourquoi pas un h1 imposant, couplé avec un h2 appuyé?

Les polices compressées marchent toujours bien pour attirer l'attention, car elles occupent toujours beaucoup d'espace vertical.

Bebas Neue et Alex Brush

Voici un exemple de combinaison similaire fonctionnant très bien:

Le travail distinctif de Gerren Lamson et Simon Walker

Et pour ceux d'entre vous qui seraient intéressés, voici un aperçu des polices de caractères concernées:

Et à nouveau, des particularités très contrastées, tout en obtenant une hiérarchie claire par les couleurs qui évite d'empiéter les unes sur les autres...

Ou pourquoi pas deux polices sans-serif utilisées côte à côte? L'entête principal suivant (Conqueror) est une police en ligne créée spécialement pour le titrage. Étant une police majuscule, vous aurez peut-être à augmenter un peu l'espacement des lettres, comme cela a été fait dans l'exemple suivant.

En ligne décrit une police avec des lignes blanches apparaissant à l'intérieur des traits des caractères. - fonts.com

Malheureusement, elle n'est pas disponible comme police web (pas encore) vous aurez donc à faire avec dans vos créations pixelisées à l'heure actuelle.. C'est clairement une de mes polices préférées du moment.

AW Conqueror Inline et Gudea

Prenez cette police serif de famille mécane; effort minimum, impact maximum.

Alpha Slab One et Mako

Les polices serif de type mécane attirent énormément l'attention, mais peuvent être très risquées si vous n'y faites pas attention. Comme un éléphant dans un magasin de porcelaine si vous voulez. L'exemple ci-dessus fonctionne très bien avec son associé plus fin, parce-qu'il contraste avec, tout en partageant certains traits de caractère. Elles paraissent être des polices très différentes, mais si vous examinez les courbes, vous observez quelles ne sont pas si différentes qu'elles le laissent penser au premier abord.

Certaines polices sont si plaisantes que vous ne pouvez presque jamais vous tromper. Prenez Buttermilk par exemple; somptueuse, élaboratée et décorative. Elle sera très bien quelque soit l'association que vous en ferez. Ici nous l'avons associée à Georgia:

Buttermilk et Georgia

Et avec Aller, une tout aussi subtile police sans-serif:

Buttermilk et Aller

Ci-après, ce qui devait être mon exemple d'association avec une police à la personnalité trop contrastée, trop forte pour être associées. Mais vous savez quoi? Cela me convient, le rendu est vraiment très agréable! Je pense qu'ont ne peut pas toujours savoir...

Buttermilk et Eccentric

Association 3: Conflit

nous ne nous attarderons pas sur ce qui ne fonctionne pas bien, nous ne voudrions pas ternir les combinaisons joyeuses précédentes, dans le reste de ce guide? Ceci dit, nous allons illustrer à quel point deux polices, qui sont clairement très similaires, peuvent paraître bizarres utilisées ensemble.

Almendra et Stoke

Mais pourquoi ne fonctionnent-elles pas bien ensemble? Je pensais que l'idée était d'obtenir l'harmonie tout en cherchant le contraste?

Elles sont de différents styles; Une est de type Blackletter, l'autre de type Roman serif, vérifiez-le.

Elles ont des proportions différentes; une est compressée avec une hauteur d'x relativement grande, une autre plus étendue avec des ascendants plus grands, vérifiez par vous même.

Bien qu'elles partagent la même épaisseur et taille, et que toutes les deux ont ces éperons particuliers à la fin de chaque caractère.

C'est de là que vient le problème. Le fait de partager ces trois derniers détails(épaisseur, taille et décoration) elles en deviennent trop similaires. Elles jouent des rôles très similaires, mais les petites différences sont en conflit ce qui aboutit à un effet global gênant.

Les courbures des éperons, par exemple, sont en totale contradiction l'une avec l'autre:

Leurs axes sont divergents:

Et la manière dont est formée une Blackletter lui donne une légére direction, s'opposant à la nature verticale de la Romane:

Ces différences peuvent ne pas représenter un problème dans d'autres exemples, mais ici nous avons deux polices qui (à première vue) paraissent semblables. C'est un peu comme si vous voyez une célébrité se tenir à côté de son pendant en cireau musée Grévin. On éprouve toujours une sensation bizarre à les regarder.

C'est difficile dire 'ça fonctionne' ou 'ça ne fonctionne pas' à quelque chose d'abstrait, vous obtiendrez naturellement cette sensation avec le temps. Quand vous arrivez à la conclusion qu'une association de polices ne fonctionne pas, essayez de comprendre pourquoi et cela vous permettra de prendre des décisions plus rapides à l'avenir.

Une dernière astuce

De nos jours, si vous allez sur Google's Web Font, vous trouverez des suggestions d'association pour chaque police. Nickel.

Conclusion

J'espère que votre approche dans l'association des polices vous a été simplifiée par ce guide du débutant. S'il y a une règle importante à retenir de tout ça c'est "Vous ne saurez rien tant que vous n'aurez pas essayé!"

Soyez aventureux. En tant que designers web, nous avons une liste sans cesse croissante de polices à disposition pour utilisation dans nos designs. Considérez les fundamentaux, puis expérimentez par vous-même. Vous serez sans nul doute surpris par vos trouvailles.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.