La police est importante. Comme de l’air qu’on ne remarque pas tant que tout va bien. La plupart des gens n'ont aucune idée du nom des polices ni de leurs différences (et ce n'est pas grave), mais ils peuvent certainement sentir qu'il y a quelque chose qui ne va pas avec votre site si la police que vous utilisez ne convient pas à votre projet.

Quel est le poids de la police

Lisibilité des polices

Quelle que soit la police que vous choisissez, elle doit être facile à lire. Surtout si vous utilisez une photo d'arrière-plan. Si vous mettez une écriture fine sur une photographie avec de petits détails, le texte ne sera pas lisible. Faites toujours attention à cela.

Que peut-on faire ? Tout d’abord, utilisez une photo adaptée au fond : avec des éléments grands et uniformes. Deuxièmement, adoucissez la photo à l'aide d'un filtre, elle deviendra plus fluide et le texte sera mieux lu. Troisièmement, vous pouvez augmenter la saturation d'un bloc spécifique en appliquant le « style en ligne ». Cela signifie que vous ne définissez pas les paramètres pour l'ensemble du site, mais uniquement pour une partie du texte. Vous devez sélectionner le texte et définir les paramètres via l'éditeur.

Le style ainsi appliqué, en plus des paramètres globaux, aura toujours la priorité. Par conséquent, si soudainement vous modifiez les paramètres dans les paramètres du site, mais que les modifications ne sont pas visibles, cela signifie qu'un « style en ligne » a été appliqué à cet endroit. Pour le supprimer, vous devez sélectionner le texte et cliquer sur l'icône « Effacer ».

Exemple 1 : Le texte n'est pas très lisible

Exemple 2 : Le texte se lit bien

Si le sujet du choix d'une police vous intéresse, trouvez de bons sites proches de votre projet et voyez quelles polices ils utilisent. L'extension de navigateur What Font vous aidera à le déterminer.

Vous pouvez également consulter les archives typographiques indépendantes http://fontsinuse.com/ - une ressource où des échantillons de sites Web et de publications imprimées sont collectés et triés par type de police utilisé.

À propos des principes de base du travail avec la typographie.

Signets

L'une des compétences les plus importantes pour un designer est la capacité de choisir la typographie, écrit Jonathan. Après tout, le texte est l’un des principaux moyens par lesquels un concepteur communique avec les utilisateurs. Et la typographie peut faire ou défaire un design.

La typographie est à la fois complexe et belle. Certains y consacrent toute leur carrière. Heureusement, leur travail est bien documenté et nous disposons donc de nombreuses ressources typographiques en ligne.

Ce matériel est conçu pour développer les compétences initiales dans le choix de la typographie pour votre conception, ainsi que pour encourager l'expérimentation avec les polices et leurs combinaisons, y compris celles inconnues.

Définissez votre objectif

Tout d’abord, vous devez comprendre quel est le but de votre conception. Quelles informations souhaitez-vous transmettre ? Avec quoi ? Dans un bon design, la typographie répond à l’objectif. En effet, la typographie est un facteur clé dans la création de l’ambiance, du ton et du style d’un design.

Par exemple, si vous créez un design de carte de bienvenue qui repose fortement sur des images, il est préférable de choisir une police qui correspond au style des illustrations. La police doit être en harmonie avec le reste du design.

Choisissez une police qui correspond au style de vos illustrations

Si vous créez une conception de page de destination dans laquelle les images jouent un rôle important, choisissez une police qui ne détournera pas l'attention des illustrations. Dans ce cas, la police agit comme un moyen de mettre en valeur des informations importantes qui ont une signification clé.

Si les images constituent l’élément principal de votre conception, utilisez des polices simples pour mettre en valeur l’illustration.

Définissez votre audience

Une fois que vous avez compris le but de la conception, décidez du public auquel vous vous adressez. Cette étape est extrêmement importante car le choix des polices dépendra de l’âge, des intérêts et de l’origine culturelle du public.

Par exemple, certaines polices conviennent mieux aux enfants. Puisqu’ils apprennent tout juste à lire, les polices faciles à lire avec de grandes lettres lisibles leur conviennent le mieux. Un bon exemple d’une telle police est Sassoon Primary. Il a été créé par Rosemary Sassoon sur la base de ses propres recherches sur les lettres les plus faciles à lire pour les enfants.

Primaire Sassoon

D'autres polices conviennent mieux aux enfants plus âgés. Dans de telles polices, les lettres sont de taille appropriée, les couleurs sont contrastées et il n'y a pas de style manuscrit ni de styles décoratifs.

Lorsque vous choisissez une typographie, tenez compte de votre public et de ses besoins. En termes simples, mettez-vous à la place des utilisateurs.

Cherchez l'inspiration

Faites attention au travail des autres designers. Essayez de comprendre comment ils ont décidé de l’apparence de leur typographie.

Idées de polices

Si vous ne savez pas quelle police choisir, les 100 meilleures polices gratuites de CreativeBloq peuvent rapidement vous mettre dans l'ambiance. L'auteur y explique la motivation derrière la conception de chacune des cent polices présentées.

Une autre source d'idées utile est la collection des 100 plus grandes polices gratuites pour 2015 d'Awwwards. De plus, Invision a récemment publié une énorme liste de ressources typographiques. Il y a là de nombreuses sources d’idées.

Pour voir à quoi ressemblent les idées sur de vrais sites Web, consultez Typ.io. Il contient des exemples de polices provenant de partout sur Internet. De plus, au bas de chaque exemple de police se trouve une description en CSS.

En plus de ces services « d’inspiration », consultez vos sites préférés et voyez quelles polices ils utilisent. WhatTheFont est un bon outil pour cela. WhatTheFont est une extension Chrome qui vous permet d'explorer les polices sur le Web en faisant glisser votre souris dessus.

Idées de combinaisons

En plus des polices, recherchez des idées pour leurs combinaisons. Les bonnes combinaisons ne sont pas moins importantes que les polices elles-mêmes. Grâce à la bonne combinaison de polices, une hiérarchie visuelle des informations est créée et la lisibilité du design est améliorée.

Pour vous inspirer des associations, commencez par Typewolf. Il contient des exemples de combinaisons de polices provenant de différents sites. De plus, le site propose des recommandations et des articles avec une analyse approfondie de la typographie. Un véritable trésor d’informations.

Choisissez vos polices

Inspiré et armé de recherches, vous êtes enfin prêt à choisir votre typographie. À cet égard, gardez à l’esprit les principes suivants : apparence intéressante, lisibilité et signification.

Avant de choisir une police, découvrez pourquoi elle a été créée

Choisissez une police qui correspond à l’objectif visé par les normes conventionnelles et qui est facile à lire. Évitez les polices trop fantaisistes au profit de polices simples et pratiques. Gardez également à l’esprit pourquoi vous avez besoin de la police. Par exemple, certaines polices conviennent mieux aux titres, tandis que d’autres conviennent mieux au corps du texte.

Une combinaison de deux polices qui contrastent

Lorsqu’il s’agit de combinaisons de polices, limitez-vous à trois au maximum. Disposez-les également de manière à ce qu’ils contrastent. De cette manière, il sera possible de contrôler le mouvement du regard du lecteur : d’abord le titre, puis le texte principal. Vous pouvez également créer un contraste visuel en utilisant différentes tailles de police, couleurs et épaisseurs.

Pour les polices Web, Google Fonts, Typekit et Font Squirrel sont de bonnes options. Google Fonts est gratuit et Typekit et Font Squirrel proposent des polices gratuites et payantes.

Déterminer les tailles de police

Une fois que vous avez compris les combinaisons de polices, passez à leurs tailles. Modular Scale de Tim Brown, responsable de la typographie chez Adobe, est idéal pour cela. En fait, Modular Scale est un système permettant d’identifier les ratios de taille de police historiquement idéaux.

Par exemple, vous pouvez utiliser une échelle de ratio basée sur le nombre d’or. Ce seront les cinq premières tailles de police :

Nombre d'or (1:1,618)

1 000 x 1 618 = 1 618

1,618 x 1,618 = 2,618

2,618 x 1,618 = 4,236

4,236 x 1,618 = 6,854

6,854 × 1,618 = 11,089​

Votre ratio est peut-être trop élevé. Par exemple, voici à quoi ressemblent les derniers intervalles sur notre échelle basée sur le nombre d'or :

Nombre d'or (1:1,618)

11,089 × 1,618 = 17,942

17,942 x 1,618 = 29,03

29,030 × 1,618 = 46,971

46,971 × 1,618 = 75,999

75,999 × 1,618 = 122,966

Comme vous pouvez le constater, les intervalles entre les chiffres deviennent trop grands. Pour la plupart des interfaces, de tels intervalles ne conviennent pas - il en faut moins. Heureusement, dans

Sélectionner des polices pour qu’elles s’emboîtent parfaitement n’est pas une tâche facile. Étonnamment, de nombreux concepteurs de sites Web ont une compréhension assez vague de la manière de sélectionner les paires de polices, des polices qu'il est préférable d'utiliser pour les titres et les sous-titres, du moment où utiliser l'italique, etc. Pendant ce temps, le bon choix de police peut donner de la personnalité au site - et il n'est pas nécessaire d'utiliser des polices exotiques pour cela. Même les polices les plus courantes peuvent être très belles lorsqu’elles sont choisies correctement.

COMBIEN DE POLICES DOIVENT ÊTRE UTILISÉES DANS UN DESIGN ?

Il n'y a pas de réponse spécifique à cette question - cependant, dans la plupart des cas, vous pouvez vous en sortir avec une seule police. L'essentiel est que cette police ait plusieurs styles, au moins Regular, Bols et italique. C'est largement suffisant pour créer une hiérarchie de texte. De plus, l’utilisation d’une seule police évite au concepteur la sélection pénible d’une paire de polices. Cependant, une seule police rend le design quelque peu ennuyeux, ce qui est parfois inacceptable.

Il existe une règle non écrite selon laquelle vous ne devez pas utiliser plus de trois polices dans un même modèle. Étant donné qu'un site Web ou un logo d'entreprise est généralement créé à l'aide d'une police inhabituelle, le concepteur ne dispose que de quelques options.

En règle générale, afin de mettre en évidence les titres, on utilise une police personnalisée (personnalité) et donnant de la personnalité au texte. La deuxième police est utilisée pour le texte normal et il est très important que cette police soit lisible. Ces polices doivent bien se combiner entre elles, car la moindre dissonance détériorera la perception du contenu. Les titres doivent être visibles, mais pas tape-à-l'œil - après tout, le but du titre est de préparer le lecteur à visualiser le morceau de texte suivant.

COMMENT CHOISIR UNE POLICE DE BASE

En conception graphique, il arrive souvent que vous n'ayez pas du tout besoin de choisir une police - l'entreprise dispose d'une directive dans laquelle tout est expliqué, y compris les règles d'utilisation des polices. Mais cette option n'est pas adaptée au Web - souvent, la seule chose qui peut être tirée des lignes directrices est la police dans laquelle le logo est tapé.

Lors du choix d'une police pour le texte principal, vous devez d'abord faire attention à sa lisibilité. Il est préférable de ne pas essayer de réinventer la roue et d'utiliser des polices « testées » qui avaient fière allure dans les projets précédents. Chaque concepteur a toujours en stock plusieurs options éprouvées - ce sont les polices qui doivent être utilisées en premier. Si nous parlons de polices Google, le choix optimal serait Droid Sans, Noto Serif et Cabin.

COMMENT CHOISIR UNE POLICE POUR LES TITRES

Mais c'est là qu'une embuscade attend de nombreux designers, notamment les débutants. Choisir une police de personnalité n'est pas si simple. Si, pour le texte principal, vous pouvez, sans trop forcer, choisir une sorte de takhoma ou de verdana, alors un tel numéro ne fonctionnera pas avec la police des titres. Une police de personnalité doit être spéciale, mais pas trop flashy. Il doit attirer l'attention, mais seulement dans la mesure où cela ne gêne pas la lecture. Chaque police a ses propres caractéristiques - en termes simples, certaines polices sont strictes, d'autres sont lisses, d'autres sont nettes, etc. Et si la police de personnalité est bien choisie et que son apparence se combine harmonieusement avec la police principale, cela signifie que le concepteur a pleinement fait face à la tâche.

Cet exemple utilise une combinaison de polices FiraSans Et Merriweather.

OPTION 1 : CHOIX SÛR

De nombreuses polices sont créées en deux versions : sans empattement et empattement. Par exemple, les polices Scala Sans et Scala Serif, Meta et Meta Serif, Droid Sans et Droid Serif. Ces polices peuvent être utilisées par paires sans aucune crainte, car la forme des lettres en sans et avec empattements est presque identique, mais en même temps elles contrastent assez bien les unes avec les autres. Pour les concepteurs qui ne sont pas entièrement sûrs de leur capacité à sélectionner correctement les polices, il est préférable d'utiliser cette méthode, car c'est la plus sûre.

Combinaison de polices DroidSans Et DroidSerif

OPTION 2 : JOUER AVEC LE CONTRASTE

Si une police calme et facile à lire a été choisie comme police principale, les titres exigent parfois qu'ils contrastent avec le texte normal. L’essentiel ici est de ne pas aller trop loin. Le contraste est bon, mais il ne doit pas être trop perceptible, car des titres trop flashy détourneraient l'attention du lecteur.

Par exemple, la police Noto Serif a des contours de lettres lisses, elle est légère et facile à lire. En même temps, il est très expressif et, si ce mot peut s'appliquer à la police, convivial. Quelle police est la meilleure pour l’associer ? Il est préférable de choisir une police sans empattement présentant des caractéristiques similaires. Autrement dit, la police personnelle doit avoir des proportions similaires et ses contours doivent faire écho à ceux de la police principale. Questa Sans ira très bien avec Noto Serif - il est assez expressif et moderne et contraste bien avec la police serif.

Combinaison de polices Noto Serif Et Questa Sans

OPTION 3 : AUGMENTER LE CONTRASTE

Si dans les deux premières options l'accent était mis sur le contour similaire des polices, alors dans le troisième cas, vous pouvez améliorer le contraste en choisissant une police ayant des proportions différentes. Bien sûr, c'est l'option la plus difficile - pour utiliser cette méthode, le concepteur doit avoir bon goût. Sinon, au lieu d'un design élégant, vous vous retrouverez avec un non-sens total. Il est impossible de donner ici des recommandations, car tout est subjectif et dépend de nombreux facteurs, dont l'orientation du site.

Il est préférable d'utiliser une combinaison de polices différentes dans les pages de destination, les sites Web de cartes de visite, lors de la création de bannières, etc.

La police Cabin est simple, accrocheuse et lisible. On ne peut pas dire que c’est léger, c’est tout « carré » et dynamique, mais en même temps c’est parfait pour taper du texte de base. Il peut être utilisé dans les cas où vous devez renforcer la présentation des informations et attirer l’attention du lecteur. Comme police contrastée, vous pouvez choisir une police serif telle que Buenard. Cette police est plus traditionnelle, conservatrice et quelque peu froide. En même temps, il s'associe parfaitement à la Cabine, soulignant son dynamisme par son calme.

Combinaison de polices Cabine Et Buénard

CONCLUSION

En substance, il n’existe pas de règles strictes régissant le choix de la police. En gros, toutes les recommandations se résument au fait qu'il est préférable d'utiliser des polices harmonieuses et lisibles dans les projets. Il vaut mieux ne pas se livrer à des aventures et faire preuve de retenue - dans ce cas, cela ne fera qu'améliorer le design.

Mais en fait, peu importe les polices utilisées - l'essentiel est le résultat final. Parfois, c'est encore mieux lorsqu'un concepteur prend des risques et expérimente une combinaison de différentes polices - parfois de telles expériences conduisent à des découvertes surprenantes.

Police du site Web- c'est l'un des principaux enjeux de la conception de votre site internet. La bonne taille, la bonne couleur et le type de police peuvent résoudre les problèmes de lisibilité, de beauté et d’efficacité de la ressource dans son ensemble.

TOP 10 des polices les meilleures et les plus utilisées

Toutes les polices ci-dessous sont considérées comme basiques, elles peuvent donc être utilisées sur le site même sans télécharger le fichier de police (*.ttf) dans le répertoire du site.

1. Tahoma

2. Verdane

3. Arial/Arial Noir/Arial Étroit

4. Times New Roman

5. Palatino Linotype / Palatino

6. Impact

7. Siècle gothique

8. Helvétique

9. Géorgie

10. Gill Sans MT

En plus:

11. Courrier Nouveau

12. Calibres

13. Trébuchet MS

14. Lucida Sans Unicode

Plusieurs règles d'utilisation des polices sur le site

1. La base du texte lisible est constituée de titres. Ils agissent comme des sortes de balises qui permettent au lecteur de se concentrer sur la partie ou le passage souhaité sans l'irriter par le flux d'informations générales. Essayez également de mettre en avant des mots-clés !

Titre

Premier paragraphe paragraphe

Deuxième paragraphe paragraphe

2. Le site doit avoir un concept général, alors essayez de ne pas utiliser plus de 2 à 3 polices par site. Ci-dessous le code CSS

Corps (police : 14px/100 % Tahoma, Verdana, sans empattement)
14px la taille de la police, 100% espace entre les lignes, Tahoma police utilisée
3. Le texte après le design doit être lisible - conserver le contraste (texte noir sur fond blanc, blanc sur bleu, etc.). Essayez de ne pas utiliser de couleurs vives non plus. Il existe des exceptions, mais cela ne relève pas des pratiques standards.

4. Lors de la conception du texte, essayez de ne pas utiliser plus de 2 à 3 couleurs. Veuillez noter que les meilleurs designs s’en tiennent à 2-3 couleurs, pas plus. Suivez cette règle et vous

5. Le texte doit être lisible ! Essayez d'utiliser des paragraphes et de mettre en retrait des sous-paragraphes ou des informations de référence.

Le texte du premier paragraphe. Long et intéressant.

Mais le texte du deuxième paragraphe ne fusionnera pas avec le second, puisqu'il y aura un retrait entre eux.

Merci de votre attention ! Et bonne chance dans le développement des conceptions de projets !)

Créer de superbes compositions typographiques est plus un art qu’une science. En effet, la beauté des polices n’a pas de frontières. Même s’il n’existe pas de règles absolues pour les combiner entre elles, il est tout de même bon de suivre les bonnes pratiques de la typographie web. Cet article présente les meilleures techniques pour combiner des polices, ainsi que les pièges courants.

1. Combinez les polices serif avec les polices sans serif (sans serif et serif)

La technique typographique la plus populaire consiste à définir le titre dans une police sans empattement et le texte dans une police avec empattement. Il s’agit d’une combinaison classique avec laquelle il est presque impossible de se tromper.
L'exemple ci-dessous montre une mise en page d'article typique, utilisant Commerce gothique gras n°2, et dans le texte - Cloche gothique. Les deux polices sont sans empattement, mais elles ont des personnalités très différentes. Une bonne règle lors de la création d’une mise en page est de ne pas trop attirer l’attention du lecteur sur la police de caractères. Commerce gothique implique du sérieux, et Cloche gothique, au contraire – dynamique et expressivité.

La combinaison de ces polices provoque un conflit de conception indésirable. Commerce gothique veut aller droit au but, et Cloche gothique veut s'amuser. Ce type de tension entre les polices n’est pas notre objectif et doit être évité.
Regardons maintenant l'exemple de droite. Cloche gothique remplacé par une police Sabon. Sabon, comme une police serif, fonctionne très bien avec Commerce gothique. Ils visent tous deux la clarté et la lisibilité avec une bonne hauteur d'x (en gros, la hauteur d'un x minuscule dans une police, elle détermine la distance entre la ligne de base et la ligne supérieure). Les deux polices ont donc le même objectif, ce qui en fait une excellente combinaison.

2. Évitez les polices de la même classe

Les polices de la même classe, mais de familles différentes, peuvent facilement provoquer des désaccords lorsqu'elles sont combinées. Leurs personnalités prononcées tireront chacune la couverture sur eux-mêmes, le résultat deviendra « sale ».
Dans l'exemple ci-dessous, à gauche, la police est utilisée dans le titre Clarendon gras, qui appartient à la classe Empattement de dalle. Utilisé dans le corps de l'article Officine Serif qui s'applique également à Empattement de dalle. Polices de classe Empattement de dalle Ils ont une forte personnalité et aiment dominer la page. Utiliser deux polices de classe Empattement de dalle au même endroit peut causer un stress inutile.

Regardez maintenant le côté droit de l'exemple. Clarendon gras placé à côté d'un autre plus neutre dans le titre Nouveau Baskerville. Nouveau Baskerville appartient à la classe universelle Empattement transitionnel avec des caractères larges qui se marient bien avec le gras Clarendon. Choisir différentes classes de polices dès le début vous évitera des maux de tête lors de la création de votre mise en page.

3. Donnez différents rôles aux polices

Un moyen simple de combiner des polices consiste à créer un schéma de conception basé sur les rôles pour chaque police. Dans l'exemple ci-dessous, nous avons utilisé Akzidenz Grotesk Bold en majuscules pour le nom de l'auteur de l'article. Pour le titre - Rockwell gras. Paragraphe d'introduction et texte principal de l'article dans une seule police - Bembo, mais de tailles différentes. Et enfin, le sous-titre - Akzidenz Grotesk Medium.

Distinct Rockwell gras nous l'avons laissé pour attirer l'attention sur le titre. En général, nous avons utilisé le schéma que nous avions déjà découvert pour combiner les polices sans empattement et avec empattement. Et même avec ce choix, nous disposons d’un grand nombre de variations en termes de taille de police, d’épaisseur et de fonction. Au total, 4 polices de 3 polices de caractères ont été utilisées, le tout aboutissant à une conception cohérente et cohérente, car chaque police a son propre rôle, clairement défini dans la hiérarchie typographique. Alors en cas de doute, attribuez les rôles !

4. Poids de police contrasté

La meilleure façon de ruiner une mise en page est de ne pas séparer les éléments de texte les uns des autres selon leur hiérarchie. En plus d'utiliser des tailles différentes, assurez-vous que vos polices ont des poids (gras) différents pour donner au lecteur un « guide » de votre conception.
Dans l’exemple de gauche, nous avons des tailles de police différentes, mais pas assez de contraste en épaisseur. Myriade de lumière près de Minion audacieux« disparaît » et perd son autorité visuelle. Quoi qu’il en soit, l’œil du lecteur doit avant tout mettre en évidence le titre, et non l’aperçu.

À droite, nous avons utilisé Myriade noire sur Serviteurépaisseur normale. Le titre est peut-être lourd, mais au moins le lecteur n'a aucun doute sur ce qu'il doit lire en premier.

5. Créez différentes tonalités de texte sur la page

En typographie, la tonalité est obtenue de différentes manières : épaisseur, taille, largeur de trait, crénage, etc. Le moyen le plus simple de « voir » la tonalité est de regarder la mise en page non pas directement, mais avec une vision périphérique. Regardez l’exemple ci-dessous en regardant légèrement à droite ou à gauche de l’image, afin de ne plus pouvoir lire le texte, mais de voir son ton général. Lorsque vous le regardez de cette façon, vous remarquerez que l'exemple de gauche se fond dans un bloc de texte gris, légèrement plus foncé en bas. Mais l’exemple de droite conserve clairement sa hiérarchie visuelle. Peu importe à quelle distance vous vous trouvez du texte, vous n’avez aucun doute sur l’endroit où se trouve le titre et sur la direction que prendra ensuite votre regard.

L'utilisation intelligente du ton du texte renforce la hiérarchie visuelle sur la page, qui est directement liée à la transmission du sens du message.

6. Ne mélangez pas les ambiances des polices

L’une des erreurs courantes consiste à ignorer l’ambiance inhérente à la police. Les polices ont leur propre personnalité. Parfois, l’ambiance d’une police peut changer en fonction du contexte, mais pas de manière significative. Un problème est de choisir la mauvaise police pour un travail spécifique. Mais un problème encore plus important est de créer deux polices avec des ambiances différentes !
Dans l'exemple de gauche, nous avons connecté Franklin gothique gras Et Souvenir. Impression générale de Franklin gothique– du courage, de la force, de la résilience, mais avec une touche d'élégance. Ce n'est pas agréable à l'oeil, mais très fonctionnel. UN Souvenir– ludique, frivole, un peu indifférent, mais très mignon. La combinaison de ces deux polices est comme une rencontre entre un garde gardant le palais de Buckingham et une jeune fille. Le garde ignore docilement la jeune fille enjouée à ses pieds, essayant de le faire sourire. Ce genre de mixage ne fonctionne pas bien. Les différentes ambiances des polices attirent l’attention sur les polices elles-mêmes plutôt que sur le contenu, ce qui indique une conception faible.

A droite en paire Souvenir nous avons installé un voisin plus convenable. U Futura audacieux beaucoup de visages, mais ça va très bien avec Souvenir pour de nombreuses raisons. Premièrement, les deux polices ont des hauteurs x élevées. Les deux polices ont des formes arrondies et une légère courbure, mais néanmoins perceptible, aux extrémités. Ni l’un ni l’autre ne domine l’autre. Les deux travaillent pour créer une ambiance joyeuse et optimiste. Il n'y a aucune tension entre eux.

7. Combinez les couleurs vives avec les neutres

Une conception typographique propre et lisible nécessite une attention particulière aux tensions intentionnelles et non intentionnelles entre les polices de caractères. Le choc des différentes personnalités des polices de caractères n’est qu’une des causes de tensions inutiles. Si l’une des polices a une forte personnalité, alors la seconde doit être neutre.
Dans l'exemple de gauche Dax gras debout à côté de Bernhard Moderne. C'est un mauvais choix pour au moins deux raisons. Premièrement, Dax a des signes étroits et une grande hauteur d'x, tandis que Bernhard Moderne, au contraire, avec une grande largeur de glyphe, elle possède l'une des hauteurs x les plus basses parmi les polices classiques populaires. Deuxièmement, Dax informel, moderne et lumineux. Idéal pour présenter du texte aux techniciens, aux informaticiens et à la jeunesse moderne en général. Bernhard Moderne, au contraire, est classique, calme, raffiné et même un peu personnel. Combinez les caractéristiques physiques inappropriées d’une police avec les caractéristiques personnelles et vous obtenez une typographie qui fonctionne très mal.

Jetons un coup d'œil à un meilleur choix. Dans la colonne de droite Dax gras placé à côté Caslon, qui appartient à la classe Style ancien, mais a été modernisé et adouci pour mieux s'adapter aux autres polices. Dans ce contexte, cela semble satisfaisant à côté Dax. Remarquez comment nous voyons la personnalité en premier Dax dans le titre, et comment Caslon prend du recul et nous invite à lire. Dans cet exemple Caslon est un choix neutre pour prendre en charge des Dax.

8. Évitez les combinaisons incommensurables

Lorsqu’il y a trop de contraste entre les polices choisies, cela crée un déséquilibre visuel qui se reflète mal sur l’ensemble du design. A gauche on met Olive Antique Nord– police extrêmement grasse, - à côté Garamond étroit. Le contraste est évident. Dans la plupart des cas, ce contraste va au-delà du simple fait d’attirer l’attention et crée un sentiment de gêne. Par conséquent, il ne transmet pas au lecteur le sens du texte.

Droite Olive Antique Nord a été remplacé par un autre plus doux et plus sobre Olive Antique Audacieuse. Garamond étroit pourrait être remplacé par le même Garamond dans l’option poids du livre, mais nous pensons que c’est un meilleur choix Chaparral. U Chaparral hauteur x plus élevée que Garamond, et dans l'ensemble, il a un look plus moderne et neutre à côté de la caractéristique Olive Antique Audacieuse.

9. Restez simple : n’utilisez pas plus de deux polices

Au lieu de parcourir les bibliothèques de polices à la recherche de « cette » combinaison, il est parfois préférable de revenir à l'option classique et beaucoup plus simple : une combinaison de polices avec et sans empattement. À l’aide de l’exemple ci-dessous, nous avons créé une hiérarchie typographique claire, atteint la diversité, obtenu une répartition intéressante du ton du texte et une lisibilité accrue. Tout cela a été réalisé en utilisant seulement deux polices. Même si, à proprement parler, nous avons ici cinq polices : trois Helvetica Nouvelle et deux Garamond.

Comment réaliser tout cela sans effort supplémentaire ? Premièrement, si vous prenez des polices de la même police, vous obtiendrez probablement une excellente compatibilité visuelle sans même y penser. Deuxièmement, nous avons choisi une combinaison éprouvée - une combinaison d'une police de titre neutre et, encore une fois, d'une police neutre pour le texte. ET Helvetica Nouvelle, Et Garamond ont une personnalité forte mais neutre, et ils peuvent s'agencer dans des configurations complexes car nous avons une hiérarchie stricte en place dès le départ. Suivre les règles lors de l'utilisation des bonnes polices vous aide à obtenir d'excellents résultats sans gaspiller votre énergie.

10. Utilisez différentes tailles de police

Nous avons gardé le principe le plus simple pour la fin : utiliser différentes tailles de police pour obtenir un contraste entre elles. Dans l’exemple de gauche, le titre et le texte fusionnent en une seule brique grise. Utilisez votre vision périphérique, la technique décrite ci-dessus, pour examiner les deux exemples. Alors que le texte de gauche fusionne, l'exemple de droite montre une énorme différence entre le titre et le contenu.

À droite, les deux mêmes polices ont été utilisées, mais dans une taille différente. LeMix Italique a été considérablement augmenté, tandis que Manuel scolaire du nouveau siècle réduit à une taille plus normale, bien que toujours lisible. L’utilisation de polices de différentes tailles permet de définir clairement la hiérarchie et d’augmenter la variété tonale de la typographie.

En conclusion

Il n’existe pas de règles strictes pour combiner les polices, donc le processus de sélection des bonnes polices prend du temps et peut-être même un peu fastidieux. Cependant, il est bon de disposer d'un ensemble pratique de principes et de règles pour sélectionner les polices, ainsi que de comprendre les résultats de certaines situations typographiques, afin d'éviter les erreurs et de guider le processus vers l'obtention du résultat souhaité.

(Traduction par Victoria Shidlovskaya d'un article de Smashing Magazine (édité par l'auteur)