Il peut être difficile de sélectionner des caractères pour vos conceptions en ligne. Et il est trop facile de couler beaucoup de temps dans un design web en cours de développement, en remplaçant type après type sans jamais y arriver. Voyons tout ce que vous devez savoir sur le jumelage des polices.
Combinaison des polices dans votre conception Web
Comme tant d'autres parties de la conception, la typographie a des lignes directrices pour simplifier la découverte des paires de caractères idéales. Nous allons vous montrer comment mélanger les polices, et nous vous fournirons d'excellentes combinaisons pour votre entreprise.
1. Utilisez des polices qui ont des tonalités différentes
L'écriture peut transmettre des émotions. Les polices de caractères que nous utilisons pour exprimer les mots ont également un impact sur nos pensées. De nombreuses polices sont sérieuses et professionnelles, tandis que d'autres sont agréables et informelles. Les personnalités des polices de caractères révèlent le sens du texte qu'elles affichent. Lorsque vous choisissez les polices de caractères d'un site Web, la combinaison de divers tons avec la typographie crée des contrastes visuellement étonnants.
Considérez le ton de qui ou de ce qu'un site Web représentera lorsque vous choisissez une combinaison de polices. Une police de caractères joyeuse conviendrait à une entreprise de jouets, mais elle pourrait paraître étrange sur le site Web d'une société juridique. D'un autre côté, des serifs trop sérieux pourraient être beaucoup pour quelque chose de léger.
L'un des facteurs les plus importants à considérer est la police de caractères que vous utiliserez pour les en-têtes et le corps du texte. Les niveaux d'en-tête offrent une plus grande marge de manœuvre dans les polices de style, car ils ont une plus grande échelle. Une police agréable à regarder est nécessaire pour le corps du texte dans des tailles de texte plus petites.
N'ayez pas peur d'utiliser des polices de caractères de tonalité opposée dans vos mises en page de site Web ; à l'occasion, le contraste peut piquer l'intérêt.
2. Utilisez des paires de polices de caractères qui diffèrent, mais pas trop
Évitez de mélanger des polices de caractères dans les en-têtes pratiquement identiques à celles utilisées dans le corps du texte. Utilisez plusieurs polices de caractères qui sont visuellement distinctes tout en se complétant.
Que se passe-t-il si nous combinons une police de caractères avec des fioritures calligraphiques comme Great Vibes, par exemple, et un type Serif comme Merriweather ? En conséquence, le design manque d'équilibre et présente un sens désagréable du contraste.
Les fioritures et les boucles de Great Vibes ont une sensation apaisante et un soupçon de raffinement. Le Northwood est un caractère informel avec des empattements et des queues, tandis que le Merriweather est un caractère sans fioritures avec une formalité véhiculée par ses formes de lettres à empattement. Ici, le contraste est trop fort pour que la combinaison fonctionne.
Tentons une combinaison de polices plus agréable. Dans l'en-tête, utilisez Vollkorn, une police quelque peu amusante. Utilisez Open Sans, une police sans empattement plus neutre et plus unie. Cette combinaison fonctionne bien car, malgré la différence entre les polices, la subtilité des deux les rend visuellement compatibles.
3. Utilisez trois polices distinctes ou moins
Dans la plupart des conceptions, vous appliquerez une police web pour le titre et une autre pour le corps. Des lettres manuscrites et des caractères plus stylisés peuvent également être utilisés dans la mise en page à des fins créatives. Indépendamment de la façon dont vous êtes tenté par tous les caractères gratuits disponibles, vous n'avez besoin que de trois caractères pour un seul site Web.
De nombreux concepteurs utilisent une superfamille de caractères pour leurs conceptions. Une superfamille est une famille de caractères apparentée à une ou plusieurs autres familles. Elle peut inclure des différences stylistiques telles que des italiques, des poids légers à lourds, des versions avec et sans empattement, entre autres choses. La chose la plus agréable à propos des superfamilles est qu'elles éliminent le jeu de devinettes concernant l'appariement des caractères car elles sont faites pour fonctionner ensemble.
Les caractères uniques peuvent être utilisés de diverses manières lorsqu'ils sont employés par des superfamilles. Jetez un coup d'œil à ces options de superfamille Roboto. La distinction entre Thin 100 Italic et Regular 400 n'est pas subtile.
La plupart des polices de caractères sont classées dans des superfamilles, ce qui signifie que vous avez de nombreuses alternatives de polices de caractères à expérimenter tout en utilisant le même style.
4. Communiquer la hiérarchie visuelle par l'appariement des polices
Visualisez la structure de votre сommuniquez la hiérarchie en utilisant différents designs, tailles et couleurs de polices de caractères. Vous pouvez utiliser la typographie pour communiquer des informations visuelles sur l'importance relative d'autres parties de votre contenu. Les titres doivent être les plus visibles, suivis des sous-titres et du corps du texte. Utilisez vos combinaisons de polices pour ajouter un sens clair de la structure à vos écrits.
5. Utilisez la taille de la police pour impliquer l'ordre
La police géante représente ce qui est le plus important, tandis que les tailles de police décroissantes représentent la hiérarchie de l'information. Les lettres tout en majuscules sont un excellent moyen de faire ressortir les éléments critiques comme les appels à l'action. Il est acceptable d'utiliser toutes les majuscules avec modération ; cependant, il faut éviter de donner au texte un aspect colérique ou hostile.
La plupart des concepteurs débutants intègrent différentes tailles de police pour établir une hiérarchie visuelle, mais il existe d'autres méthodes pour présenter une échelle visuelle.
6. Expérimentez différentes pondérations
L'importance relative est indiquée par des pondérations plus importantes, tandis que des pondérations plus légères suggèrent un échelon inférieur dans la hiérarchie. Comme nous l'avons vu avec la superfamille Roboto, vous pouvez accomplir beaucoup de choses avec une seule police de caractères en modifiant son poids.
7. Variez les couleurs des polices
Si vous ne voulez pas utiliser un kaléidoscope de couleurs contrastées dans votre conception, varier les nuances de votre texte pourrait aider des termes spécifiques à se démarquer. Les couleurs plus intenses, comme le rouge et le violet, sont utilisées pour les titres. La variété plus claire contraste avec les versions plus sombres, représentant un texte qui doit être lu en premier. Veillez à ce que les couleurs de police que vous expérimentez ne soient pas perdues dans l'arrière-plan.
8. Serifs
Les caractères avec empattement, lisibles à l'impression, remontent à la fin des années 1700 et sont initialement destinés à la lisibilité.
Un empattement est une ligne fine ou un trait qui a été ajouté à une lettre. Les caractères sans empattement possèdent de nombreux repères visuels qui aident les yeux des lecteurs à suivre. Les caractères avec empattement améliorent l'efficacité de la numérisation, en particulier dans les longs blocs de texte, comme dans les livres.
Au début de l'informatique, les résolutions d'écran trop faibles pour que les caractères avec empattement puissent être rendus efficacement posaient problème. Les graphistes, en revanche, peuvent désormais utiliser une pléthore d'empattements grâce aux écrans haute résolution actuels.
Toujours combiner un caractère à empattement avec une police sans empattement lorsqu'on en utilise un. Les caractères à empattement sont souvent trop similaires, ce qui entraîne une correspondance de police désagréable.
Les caractères à empattement sont très adaptables. Voici quelques-unes des sortes de polices les plus fréquentes et les plus utiles vues dans le texte écrit. Elles sont simples à lire dans différentes tailles, ce qui les rend idéales pour le corps du texte et les en-têtes.
Une idée de jumelage de polices : EB Garamond et Montserrat
Combiner l'empattement EB Garamond avec Montserrat pour le titre et réduire sa taille pour le corps du texte. Lorsque les polices à empattement sont utilisées pour de longs blocs de texte, elles sont plus performantes lorsqu'elles sont plus petites.
Une idée de combinaison de polices : Libre Baskerville et Raleway
Les empattements plus distincts et l'angularité de Libre Baskerville se juxtaposent aux lignes fines de Raleway.
9. Sans serifs
L'absence de lignes supplémentaires distingue les san serifs des serifs. Les sans serifs peuvent être utilisés pour le paragraphe ou le corps du texte à une taille plus petite, ou ils peuvent être combinés avec un serif dans les en-têtes.
Il y a une poignée de polices de caractères auxquelles il faut penser lorsqu'il s'agit de combinaisons de polices.
Regardons les sortes de polices les plus fréquentes et quelques possibilités créatives que vous pouvez utiliser aujourd'hui.
Une idée de combinaison de polices : Open Sans et Lato
Certains designers peuvent considérer que des polices comme Open Sans et Helvetica sont démodées, mais elles sont célèbres. Open Sans est une police de caractères primaire mais bienvenue qui fonctionne bien avec diverses polices. Considérez sa crème glacée à la vanille : c'est la base sur laquelle vous pouvez construire de nombreuses autres choses délicieuses.
Par exemple, utilisez Open Sans dans l'en-tête et Lato dans le corps du texte. Utilisez une autre police sans empattement dans le reste de la page.
10. Polices d'affichage
Si vous devez attirer l'attention des gens, les polices d'affichage sont idéales. Elles sont généralement écrites dans des formes de lettres belles et compliquées, telles que grandes et en gras ou clairsemées et fines. Utilisez des polices de caractères explicitement conçues pour l'affichage si vous voulez que votre design se démarque et laisse une impression.
Une idée d'association de polices : Bubblegum Sans et Open Sans
Bubblegum Sanc a des formes de lettres vives qui se marient bien avec la neutralité de l'Open Sans.
Idée de jumelage de polices : Poiret One et Lato
Poiret One est une excellente police moderne si vous recherchez une touche de raffinement. Son lettrage subtil d'inspiration art déco et ses traits fins en font une excellente police contemporaine. Cette police de caractères est fantastique avec une police de caractères plus modeste, telle que Lato. Un contraste de ce type fonctionne bien ensemble avec un caractère plus subtil comme Lato.
11. Les caractères monospace
Dans un caractère monospace, tous les caractères sont de largeur égale. Pour les caractères qui ont des largeurs différentes, la mesure horizontale standard les distingue des caractères de largeur variable, ce qui leur donne un sentiment de cohésion. Les polices monospaced sont depuis longtemps populaires dans l'informatique en raison de leur simplicité et de leur adaptabilité aux premiers écrans à faible résolution.
Idée d'association de polices : IBM Plex Mono et PT Sans
IBM Plex Mono est une police de caractères contemporaine avec une identité visuelle idéale pour les startups et autres organisations liées à la technologie. Il a été créé en hommage à IBM. Les polices de caractères sans empattement, comme celle-ci, sont plus faciles pour les yeux et donnent un meilleur sens du contraste lorsqu'elles sont utilisées avec PT Sans.
Une idée d'association de polices de caractères : Roboto Mono et Roboto
De nombreux designers préfèrent Roboto pour son excellente lisibilité. Cette combinaison de polices, qui associe Roboto Mono à la version régulière, est confortable à regarder.
La typographie est essentielle pour la conception web
Créer une présence en ligne solide n'est pas facile. Il y a plusieurs facteurs à prendre en compte pour y parvenir. Apportez la même attention à vos paires de polices qu'à une palette de couleurs. Les polices de caractères que vous choisissez, la manière dont vous les styliser et leur lisibilité contribuent tous à l'expérience de l'utilisateur sur votre site Web. Trouvez les polices de caractères les plus cool qui reflètent la personnalité de votre projet et offrent aux visiteurs la manière la plus agréable de le vivre.
