Mini tutoriel - Un guide des combinaisons de polices

"La typographie est une architecture bidimensionnelle, basée sur l'expérience et l'imagination, et guidée par des règles et la lisibilité." —Herman Zapf

Il y a quelques années à peine, les concepteurs étaient sévèrement limités dans leur choix de polices Web. Les options étaient généralement limitées aux polices système et espéraient que les visiteurs du site avaient installé ces polices.

Alors que les polices Web étaient techniquement possibles à la fin des années 90, elles ne sont devenues largement utilisées qu'en 2009, lorsque le format WOFF est devenu disponible et fait partie des normes ouvertes du W3C. Cela a ouvert un tout nouveau monde d'options typographiques pour les concepteurs.

Et c'est là que réside le dilemme : maintenant qu'il existe littéralement des milliers de polices de caractères disponibles pour les concepteurs de sites Web, comment créer des combinaisons de polices qui fonctionnent bien ensemble et prennent en charge le contenu présenté ?

Une bonne typographie et l'utilisation des meilleures combinaisons de polices élèvent un design par rapport à ses pairs et créent une expérience utilisateur plus agréable. Des combinaisons de types efficaces ajoutent un intérêt visuel à une conception qui peut garder un visiteur sur la page plus longtemps.

Un mauvais type, en revanche, peut rendre le contenu plus difficile à lire et moins agréable pour la personne qui le lit.

Apprendre à combiner efficacement les polices est un tremplin important dans la formation d'un designer, et doit être continuellement affiné et amélioré. Les concepteurs qui maîtrisent la typographie peuvent rendre même la conception la plus simple plus efficace. Suivre les directives typographiques de base pour combiner les polices est le meilleur point de départ. Une fois ces « règles » maîtrisées, les concepteurs peuvent se diversifier et expérimenter pour créer des combinaisons typographiques qui contournent ou enfreignent ces règles.

Type Caractéristiques

Avec les centaines de milliers de polices de caractères disponibles, essayer de savoir par où commencer peut être écrasant, même pour les concepteurs avancés. Comprendre les caractéristiques des différentes polices de caractères est la première étape pour apprendre à les combiner efficacement.

Apprendre comment ces caractéristiques sont liées les unes aux autres permet aux concepteurs de combiner des polices en toute confiance et d'expérimenter des combinaisons inattendues. L'expérimentation et la pratique sont les endroits où les concepteurs peuvent vraiment perfectionner leurs compétences en matière de combinaison de polices et créer des conceptions qui les distinguent des autres experts. Parfois, écouter leur intuition est le meilleur moyen de créer une paire de caractères qui brille vraiment.

Classification

La classification des polices de caractères est l'un des concepts les plus fondamentaux à comprendre. Il existe quatre classifications principales à apprendre : avec empattement, sans empattement, script et décoratif.

Les polices avec et sans empattement conviennent à la fois aux titres et au corps du texte. Cependant, les polices de caractères manuscrites (parfois aussi appelées polices d'écriture manuscrite) et décoratives ne sont généralement acceptables que pour les titres et les titres, ou d'autres petits morceaux de texte.

Les polices Serif sont considérées comme plus lisibles pour les longs morceaux de texte (tels que le corps du texte), en particulier dans les conceptions imprimées, où la fonction serif peut aider à guider l'œil du lecteur le long de chaque ligne. Mais les polices de caractères sans empattement peuvent également être très lisibles et exceller dans des tailles plus petites (telles que celles utilisées pour les légendes ou les méta-informations).

Les polices sans empattements sont également plus populaires sur le Web et sont largement considérées comme plus lisibles que les polices avec empattements. Cela provient en partie des débuts de l'informatique, lorsque les écrans à faible résolution rendaient les polices serif quelque peu floues, selon la taille. Avec les écrans HD et Retina modernes, cela pose moins de problème et les polices de caractères serif et sans serif peuvent toutes deux être utilisées efficacement.

Combiner des polices de caractères de différentes classifications est souvent plus simple que de combiner au sein des classifications, car il existe un niveau de contraste entre les polices déjà intégrées. Cela dit, il est également possible de combiner efficacement des polices de caractères dans la même classe, tant que d'autres caractéristiques sont prises en compte.

Poids

Le poids fait référence à l'épaisseur d'une police dans une police de caractères. Mince, régulier, semi-gras, gras et noir sont des exemples de poids.

Le contraste entre les poids est essentiel lors de la combinaison de polices de caractères. Combiner une police très épaisse avec une police très claire semble souvent déséquilibré. Mais combiner des polices de même poids peut également être un défi.

Au lieu de cela, en particulier lorsque vous débutez avec des combinaisons de polices, il est plus facile de trouver des polices de caractères qui présentent des différences de poids notables mais pas extrêmes. Les concepteurs peuvent se diversifier à partir de là dans des distinctions plus importantes.

Style

Bien que le style soit parfois utilisé de manière interchangeable avec la classification, dans ce cas, il fait référence à une police normale , italique ou oblique .

Lorsque vous combinez des polices où différents styles sont utilisés, il est important de vous assurer que les styles italique ou oblique fonctionnent aussi bien ensemble que le style normal. Parfois, les styles italiques sont très différents du style normal de la même police, ce qui peut créer un conflit soudain entre des polices qui fonctionneraient autrement bien ensemble.

Contraste

Le contraste dans la combinaison de polices de caractères peut être délicat. Trop peu de contraste peut provoquer des conflits de polices, tandis que trop de contraste peut faire la même chose.

Le contraste lors de la combinaison de polices fait référence à toute différence entre les polices, y compris la classification, le poids, le style et la structure.

Au début, il est préférable de se concentrer sur le contraste entre seulement une ou deux de ces choses, tout en s'assurant que les autres sont très similaires. Le poids est l'un des moyens les plus simples de créer un contraste entre les polices. Comme déjà mentionné, trop de contraste de poids peut être tout aussi choquant que trop peu.

Un autre moyen simple de créer un contraste consiste à combiner différentes classifications de polices, telles que sans serif et serif ou script et serif, etc. Dans ces cas, il est essentiel de s'assurer que l' ambiance des deux polices correspond.

Par exemple, combiner une police plus décontractée comme Amatic SC avec une police très formelle comme Baskerville sera en conflit plutôt qu'en contraste. Mais combiner quelque chose comme Amatic SC avec une autre police décontractée comme Josefin Slab fonctionne à merveille.

X-hauteur

La hauteur X fait référence à la hauteur des caractères individuels dans une police de caractères, en particulier le x minuscule. Les polices avec des hauteurs d'x similaires fonctionneront mieux ensemble que celles avec des hauteurs d'x différentes.

Structure

La structure sous-jacente d'une police de caractères comprend toutes ses caractéristiques, ainsi que des éléments tels que la forme de base des caractères et leur espacement. Créer un contraste avec la structure des polices est une méthode établie de combinaison de polices. Mais c'est une bonne idée de choisir des polices qui ont au moins quelques éléments structurels en commun (comme la hauteur x ou le poids du style "normal") plutôt que celles qui sont très différentes.

Humeur

L'humeur est l'un des domaines les plus subjectifs de la typographie. Il fait référence au caractère formel ou informel d'une police de caractères, ainsi qu'à son caractère ludique, féminin, masculin, décontracté, sérieux, etc.

Par exemple, Comic Sans est une police extrêmement informelle qui ne convient pas à la plupart des situations. Bickham Script, en revanche, est très formel mais donne une mauvaise impression pour des choses comme la correspondance commerciale.

Lorsque vous combinez des polices, il est important de trouver des polices avec des ambiances similaires. Combiner une police ludique avec une police très sérieuse va être choquant pour les yeux.

Décoration, couleur et texture

Ces choses ne sont pas des caractéristiques inhérentes aux polices de caractères, mais elles sont utiles lors de la combinaison de polices. Unifier (ou créer plus de contraste) par la couleur, la décoration (comme le soulignement) et la texture peut être une technique très efficace.

Combinaisons de polices efficaces

Il existe une offre apparemment infinie de sites avec une belle typographie, ainsi qu'une offre tout aussi infinie de sites avec un type mauvais ou simplement terne. Étudier les sites qui réussissent est un excellent moyen d'apprendre à combiner les polices lorsque les concepteurs débutent ou essaient de faire passer leurs compétences au niveau supérieur.

Work Notes combine la police avec empattement Adobe Caslon Pro avec la police sans empattement Interstate pour créer une combinaison de caractères qui fait un clin d'œil à la tradition sans se sentir obsolète ou démodée. La combinaison de différents poids et styles ajoute un intérêt visuel supplémentaire et rend la typographie plus complexe qu'elle ne l'est en réalité.

Adjuvant Capital utilise la police de caractères à empattement moderne et légèrement fantaisiste Orpheus Pro combinée à la police de caractères sans empattement GT America moderne. Pour une société de services financiers, il s'agit d'un choix très moderne, mais qui cadre bien avec sa mission d'investissement mondial socialement responsable.

Bloomscape utilise la police Morion décontractée avec empattement et Raisonne sans empattement pour créer un design typographique saisissant et moderne. Morion ne serait pas nécessairement un choix évident pour le type de corps en raison de ses formes de lettres plus décoratives, mais lorsqu'il est utilisé à une taille appropriée (comme c'est le cas ici), il est idéal pour les morceaux de corps de texte plus courts. Raisonne a des formes de lettres décoratives similaires, ce qui permet aux deux polices Web de fonctionner parfaitement ensemble.

Vogue utilise la police à empattement Savoy moderne et élégante associée à la police grotesque sans empattement Franklin Gothic, conçue à l'origine en 1902. La combinaison des deux crée une conception de caractères haut de gamme qui plaît au public cultivé ciblé par le magazine.

Le magazine de style de vie du Sud Garden & Gun a une typographie plus complexe sur son site que les autres inclus ici, ce qui le distingue vraiment. Le site utilise quatre polices de caractères principales : Les principaux titres d'articles sont l'empattement Domaine Display ; le corps du texte et certains titres de la page d'accueil sont en police serif Domaine Text ; les méta-informations, la navigation et les en-têtes de section utilisent le sans serif Avenir Next ; et les en-têtes de section supplémentaires sur la page d'accueil se trouvent dans Domaine Sans Display.

L'utilisation de plusieurs polices à partir d'une famille de caractères plus large est un moyen éprouvé de créer une conception de typographie complexe qui se coordonne parfaitement. L'ajout d'Avenir Next casse les choses et ajoute un intérêt visuel supplémentaire.

Votre choix de police de caractères est aussi important que ce que vous en faites.

—Bonnie Siegler

Conclusion

Des combinaisons de polices efficaces sont la marque d'un bon design. Les designers doivent maîtriser cette compétence s'ils veulent créer des designs exceptionnels qui les distinguent de leurs contemporains.

Considérez les directives incluses ici comme des points de départ pour explorer comment combiner efficacement le type. Une base solide permet une expérimentation plus efficace, sans passer des heures sur des combinaisons totalement inadaptées. À partir de là, les concepteurs peuvent s'entraîner à créer leur propre style et leurs propres méthodes pour combiner efficacement les polices, en s'écartant des directives si nécessaire avec plus de confiance que leur produit final plaira aux utilisateurs.

Pour en savoir plus sur le blog Toptal Design :

• Concevoir pour la lisibilité - Un guide de la typographie Web (avec infographie)
• Comprendre les nuances de la classification des caractères
• Disséquer les subtilités de l'anatomie de la typographie (avec infographie)
• Comment structurer une hiérarchie typographique efficace
• Styles de caractères pour la conception Web et imprimée