L'une des compétences les plus importantes à acquérir en tant que designer est le choix de la typographie. En effet, le texte est l'un des principaux s de communication des designers avec les utilisateurs. La typographie peut faire la différence entre un design et son échec.
La typographie est à la fois belle et complexe. Certaines personnes y consacrent toute leur carrière. Heureusement, leur travail est bien documenté, ce qui nous permet de disposer de nombreuses ressources en ligne sur la typographie.
Cet article est conçu pour vous aider à choisir la typographie de vos créations. Il vous encouragera à explorer des polices et des combinaisons de polices au-delà de celles que vous connaissez déjà.
Un bon design doit aligner sa typographie sur son objectif. En effet, la typographie est essentielle pour créer l'ambiance, le ton et le style de vos créations.
Par exemple, si vous créez une carte de vœux riche en illustrations, choisissez une police adaptée au style de votre illustration. Harmonisez votre typographie avec le reste de votre design.
Si vous concevez une page de destination axée sur les images, choisissez une police simple qui ne détourne pas l'attention de vos images. Utilisez la typographie pour mettre en valeur les informations et communiquer du sens.
Identifiez votre public
Après avoir déterminé l'objectif de votre design, identifiez votre public. Cette étape est cruciale, car l'âge et les centres d'intérêt influenceront vos choix de polices.
Après avoir clarifié l'objectif de votre design, identifiez votre public. Cette étape est cruciale, car des informations sur vos utilisateurs, telles que leur âge, leurs centres d'intérêt et leur éducation culturelle, peuvent influencer vos choix en fonction de votre type de public.
Par exemple, certaines polices sont plus adaptées aux enfants. Pour apprendre à lire, les enfants ont besoin de polices très lisibles avec des lettres généreuses. Sassoon Primary en est un bon exemple. Développée par Rosemary Sassoon , Sassoon Primary s'appuie sur ses recherches pour identifier les types de lettres faciles à lire pour les enfants.
D'autres polices sont plus adaptées aux seniors. Les polices adaptées aux seniors utilisent des tailles lisibles, des couleurs très contrastées et évitent les scripts et les styles décoratifs.
Lors du choix du type de contenu, tenez compte de votre public et de ses besoins. En bref, faites preuve d'empathie envers vos utilisateurs.
Cherchez l'inspiration
Observez le travail d'autres designers. Essayez de comprendre comment ils ont choisi leur typographie.
Inspiration de police
Pour vous inspirer en matière de polices, consultez l'article « Les 100 meilleures polices gratuites » de CreativeBloq, qui vous aidera à choisir la police idéale. CreativeBloq y explique les motivations derrière chaque police.
Une autre ressource utile est la collection des 100 meilleures polices gratuites de 2015 d'Awwwards. Invision a également compilé un vaste répertoire de ressources typographiques . Vous y trouverez de nombreuses sources d'inspiration.
Pour vous inspirer de sites web réels, consultez Typ.io. Le site sélectionne des polices inspirées du web. De plus, il fournit des définitions de polices CSS au bas de chaque exemple d'inspiration.
Outre les sites web dédiés à l'inspiration en matière de polices, visitez vos sites préférés et découvrez les polices qu'ils utilisent. WhatTheFont est un excellent outil pour cela. WhatTheFont est une extension Chrome qui vous permet d'inspecter les polices web en les survolant.
Inspiration d'appariement
Au-delà des polices, inspirez-vous également de l'association des polices. L'association des polices est tout aussi importante que les polices elles-mêmes. Une bonne association de polices permet d'établir une hiérarchie visuelle et d'améliorer la lisibilité de vos créations.
Pour trouver l'inspiration, commencez par Typewolf . Typewolf sélectionne des idées d'association de polices sur différents sites. Ils proposent également des recommandations de polices et des guides typographiques détaillés. C'est une mine d'or pour les typographes.
FontPair propose également des idées d'association de polices, notamment pour Google Fonts . Vous pouvez trier par combinaisons de styles de polices, comme sans-serif et serif, ou serif et serif. Pangram a également écrit trois volumes de Typewolf sur l'association de polices.
Enfin, il existe de nombreuses collections d'associations de polices créées par des designers en ligne. Par exemple , Pangram Pangram Free Font Pairing Guide — Vol. 1 , Typography:Google Fonts Combinations et Typography: Google Fonts Combinations Volume 2. Il suffit de rechercher « association de polices » sur des sites comme Behance et Dribbble .
Choisissez vos polices
Fort de vos recherches et de votre inspiration, vous êtes prêt à choisir votre police. Pour ce faire, gardez à l'esprit les principes suivants : lisibilité, lisibilité et finalité.
Choisissez des polices classiques et faciles à lire. Évitez les polices trop décoratives et privilégiez des polices simples et pratiques. Soyez également attentif à l'usage que vous en ferez. Par exemple, certaines polices sont plus adaptées aux en-têtes qu'au corps du texte.
Pour cette raison, avant de choisir une police, recherchez son objectif.
En matière d'association de polices, privilégiez la simplicité avec un maximum de trois polices différentes. Associez également des polices contrastées. Cela permettra de guider le regard des lecteurs, d'abord vers les titres, puis vers le corps du texte. Vous pouvez également créer un contraste visuel en utilisant différentes tailles, couleurs et graisses de police.
Pour les polices web, vous pouvez utiliser Pangram , Google Fonts , Typekit et Font Squirrel . Les polices Pangram Pangram® sont gratuites pour un usage personnel, Google Fonts est gratuit, et Typekit et Font Squirrel proposent des polices gratuites et payantes.
Déterminer les tailles de police
Après avoir choisi une combinaison de polices, l'étape suivante consiste à déterminer la taille. Modular Scale, de Tim Brown , responsable typographie chez Adobe, est un excellent outil pour cela. Modular Scale est un système permettant d'identifier des ratios historiquement satisfaisants afin de créer des échelles permettant de déterminer la taille des caractères.
Par exemple, vous pourriez utiliser une échelle basée sur le nombre d'or. Voici vos cinq premières options de taille de police calculée :
Par exemple, vous pourriez utiliser une échelle basée sur le nombre d'or. Voici vos cinq premières options de taille de police calculée :
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 x 1,618 = 11,089
Un problème que vous pourriez rencontrer est que votre rapport est trop grand. Observez ce qui arrive aux derniers intervalles de notre échelle en fonction du nombre d'or.
Nombre d'or (1:1,618) ... 11,089 x 1,618 = 17,942 17,942 x 1,618 = 29,03 29,030 x 1,618 = 46,971 46,971 x 1,618 = 75,999 75,999 x 1,618 = 122,966
Comme vous pouvez le constater, les intervalles entre les nombres deviennent trop grands. La plupart des interfaces nécessitent des intervalles plus petits. Heureusement, Modular Scale propose une variété de ratios basés sur la géométrie, la nature et la musique.
Seconde mineure 15:16 Seconde majeure 8:9 Tierce mineure 5:6 Tierce majeure 4:5 ...
Ainsi, au lieu d'utiliser le nombre d'or, vous pouvez utiliser des rapports qui produisent des intervalles plus petits comme la quarte parfaite.
Quarte parfaite (3:4) ... 9,969 x 1,333 = 13,288 13,288 x 1,333 = 17,713 17,713 x 1,333 = 23,612 23,612 x 1,333 = 31,475 31,475 x 1,333 = 41,956 41,956 x 1,333 = 55,927
Une fois que vous avez choisi une échelle, vous pouvez sélectionner les tailles de police dans votre liste et les arrondir à la décimale la plus proche.
Tailles de police En-tête 1 : 55 px En-tête 2 : 42 px En-tête 3 : 31 px En-tête 4 : 24 px En-tête 5 : 14 px Corps : 17 px Légende : 14 px
La méthode d'échelle modulaire utilise une précision mathématique pour générer les tailles de police. Cependant, il ne s'agit que d'une indication. Utilisez cette méthode comme point de départ, puis ajustez les tailles à l'œil nu.
Créer un guide de style typographique
La dernière étape du processus consiste à créer un guide de style pour votre typographie afin de vous aider à standardiser le type dans vos conceptions.
Dans des programmes comme Sketch , vous pouvez créer des styles de texte partagés pour insérer rapidement du texte avec des styles déjà appliqués à partir de votre guide.
C'est au cours de cette étape du processus que vous pouvez peaufiner et finaliser les attributs de votre texte tels que la couleur, le poids et la taille.
Un mot sur la couleur : lorsque vous choisissez une couleur, tenez compte de votre palette de couleurs. Choisissez des couleurs qui correspondent à votre type et qui s'harmonisent avec votre palette.
Utilisez des guides de style pour standardiser le type dans vos conceptions
Dans votre guide de style, assurez-vous d'inclure au moins les éléments suivants : définitions de police, tailles de police, couleurs de police et exemples d'utilisation.
Les directives typographiques Material Design de Google sont un bon exemple de ce qu'il faut inclure dans un guide de style. Parmi les autres exemples, on peut citer les guides typographiques de Mailchimp . , et Focus Labs .
La typographie est une question d'expérimentation. C'est à la fois une science et un art.
Je vous mets au défi de sortir de votre zone de confort et d’explorer le type dans votre conception.
