Sélection de polices (Bootcamp de conception d'UI, semaine 3)

1. Introduction: Cette semaine, nous allons sélectionner des caractères pour une conception d'interface utilisateur. Nous allons commencer par parler de ce qui constitue une bonne combinaison de typographie. Qu'est-ce qui fait un bon corps de texte et ce qui fait un bon texte d'affichage et qui doit les associer. Et ensuite, le projet sur lequel vous travaillerez cette semaine sera de choisir un artiste qui vous plaira. Réfléchissez aux caractéristiques de l'artiste, puis trouvez un affichage et un corps de textes qui correspondent au style artistique s'associent bien les uns aux autres. typographie représente presque tout ce que nous voyons sur Internet et les compétences que nous avons acquises cette semaine nous aideront à choisir les meilleures polices de caractères pour nos conceptions d'interface utilisateur. Commençons. 2. Inspiration: Maintenant, avant de pouvoir commencer à sélectionner des polices de caractères, nous devons remplir notre cerveau d'inspiration. Nous devons examiner les conceptions de tous les secteurs d'activité et avoir une idée de ce qui existe. Quelles sont les différentes polices de caractères qui nous font ressentir. Vraiment, nous devrions passer beaucoup de temps et probablement assez régulièrement à regarder d'autres travaux de conception et envisager ce qu' il communique, ce qu'il nous dit et ce que nous ressentons à ce sujet. Il nous donne également des idées sur la façon dont nous pouvons utiliser la police de caractères. Comme l'a dit Pablo Picasso, bons artistes copient, de grands artistes volent. Maintenant, nous ne voulons pas nécessairement voler directement le travail des gens, mais nous voulons être inspirés par les bonnes choses que nous avons vues dans l'industrie du design. Maintenant, je préconise toujours de regarder les types de design d'avert, pas de conception Web, pas de conception d'applications, mais de regarder le design dans son ensemble afin que nous ayons une plus large gamme d' inspiration et que nous créions éventuellement quelque chose de un peu plus unique ou savait que les autres designers de l'industrie ne le sont pas. Nous pourrions venir sur un site comme l'inspiration du design. Il existe évidemment de nombreux sites Web d'inspiration design, mais nous pourrions en venir à l'inspiration du design et à la recherche de typographie. Et nous verrons beaucoup de lettres manuscrites, si je suis honnête ou plutôt funky petites illustrations utilisant des lettres. Mais toutes ces lettres vont nous donner un sentiment. Ils vont nous donner l'impression qu' ils appartiennent à quelque chose. Cette lettre ici ou ce numéro. Il a l'air très royal, ça a l'air vraiment important. Il a l'air précieux. Et il a l'air légèrement délicat. Et je pense que c'est à cause de l'énorme contraste entre les grandes surfaces épaisses et les lignes très fines. Et peut-être parce qu'il n'y a que quelques zones légèrement droites, il semble que si nous cherchions quelque chose qui communiquait ces caractéristiques, peut-être que nous travaillions pour une marque ou une marque de bijoux de grande valeur, par exemple, nous pouvons rechercher une police de caractères qui présente ces caractéristiques, mais qui est beaucoup plus simple, plus claire et plus facile à lire lorsque nous choisissons une police de caractères. Maintenant, vous pouvez dire que c'est bien et bien. Je crée une application pour une banque. Alors pourquoi voudrais-je quelque chose avec ce genre de caractéristiques ? En fait, moi, la banque a encore beaucoup de caractéristiques très spécifiques. Et j'ai choisi ces lettres ici d'un match de football en fonction de son apparence. Il a l'air très sécurisé, très sûr, très confiant et fonctionnerait certainement sur un site Web bancaire. Et alors, ma question est la suivante : pourquoi ? Est-ce parce qu'il s'agit de lettres très épaisses ou est-ce parce que les lettres n'ont aucun contraste ? Est-ce à voir avec le suivi de ces assez d' espace entre chaque lettre. Est-ce même lié à l' alignement, à la façon dont il est centré et que le texte est aligné de manière centralisée. Il y a beaucoup de décisions typographiques qui sont entrées dans cette affiche très simple qui le rendent à moitié plat digne de confiance qui fonctionnerait pour une application bancaire. Essayons de réfléchir à ce qu'ils sont maintenant pour que lorsque nous choisissons nos polices de caractères, nous avons quelques idées de ce que nous recherchons. Maintenant, je pourrais toujours utiliser l'inspiration du design et ensuite, et simplement chercher la typographie Web. J'ai donc des choses un peu plus spécifiques et vous commencerez à voir apparaître des idées d' applications Web réelles. Mais peut-être qu'à ce stade, nous voudrions passer à une galerie d'inspiration différente comme celle-ci, polices utilisées car à mesure que nous deviendrons plus précis, nous allons nous demander quelles sont ces polices ? Puis-je y accéder ? Une chose qui est vraiment agréable avec les polices et les utilisations, nous voyons beaucoup de motifs différents, mais nous découvrons également les polices de caractères qu'ils utilisent. De même que la façon dont nous venons d'essayer inspirer de différents supports. Nous pourrions regarder ici et à moins de voir beaucoup de pochettes d' albums et d'affiches et toutes sortes de choses. Ou peut-être qu'à ce stade, nous voulons commencer à filtrer en fonction de choses assez similaires à nous. Nous pourrions regarder des sites Web, peut-être nous pencher sur les emballages. Je veux dire, il y a peut-être une inspiration intéressante que nous pouvons tirer de l'emballage. Au fur et à mesure que nous cherchions ici, nous pouvons récupérer les polices de caractères. Et parfois, cette police de caractères peut ne pas être disponible pour diverses raisons, mais le fait de savoir ce qu' elle est va nous aider à trouver quelque chose de similaire. Quelques autres galeries d' inspiration utiles, nous avons un loup de type. Maintenant, il y a encore de très beaux designs, mais cela vous indique aussi quelles sont les polices de caractères. C'est donc absolument génial et ceux-ci sont un peu plus simples et clairs et un peu plus similaires à ce que vous allez réellement utiliser sur votre site Web. Très bien pour quelques inspirations ultérieures. Ce qui est assez sympa avec le site de type wolf c'est comme s'ils écrivaient beaucoup de messages aussi si vous voulez vraiment vous familiariser avec la typographie, c'est un autre bon endroit à venir. Enfin, je veux vous montrer l'exploration de type où ces petites maquettes de ce à quoi cela pourrait ressembler sur notre site Web. Éléments interactifs de l'interface utilisateur dans les en-têtes et les liens. Vous pouvez donc voir exactement à quoi cela ressemblera s'il s'agissait d' une application Web. C'est donc beaucoup plus utile une fois que vous aurez terminé votre inspiration et que vous allez choisir des polices de caractères, surtout parce que encore une fois, elle utilise Google Fonts. Donc, si vous avez un budget, la plupart des choses qu'ils ont moquées ici, nos polices de caractères gratuites. Maintenant similaire à cette galerie d'inspiration, il y en a une ici appelée Paire de polices, où vous pouvez littéralement trouver des polices Google qui s' associent bien ensemble afin de pouvoir les filtrer. Je veux un en-tête sans serif avec un corps de texte Serif. Et cela va vous donner toutes les différentes polices Google qui peuvent s' associer assez bien ensemble. Et vous pouvez simplement regarder en bas et voir lequel a ce genre de sentiment que vous vouliez avoir comme moyen de choisir très rapidement et facilement, moyen de choisir très rapidement et facilement, mais aussi pour vous inspirer et voir comment ils ont l'air ensemble. Enfin, je voulais juste vous montrer ce plugin Chrome appelé type sample, qui, si vous installez dans Chrome, va vous aider à identifier quel type a été utilisé dans différents sites Web. Si vous n'êtes pas trop averti en technologie, cela peut être très utile. Il existe également un site Web appelé quelle police, où vous pouvez télécharger des images et il vous indiquera quelles polices il pense que vous utilisez. Juste un à emporter de cette vidéo, c' est-à-dire s'assurer que vous remplissez votre cerveau d'une grande inspiration. Lorsque vous parcourez ces galeries d'inspiration, essayez de réfléchir à ce que chaque police de caractères et à la façon dont elle est utilisée vous communique réellement ce que vous ressentez et quel est le message. que possède la police de caractères. 3. Définir la marque: Avant tout projet de conception visuelle, vous allez travailler avec votre client pour déterminer ce que signifie la marque, ce qu'elle représente, ce qu'elle doit communiquer. Différentes agences de design utilisent des techniques très différentes pour en parler. Vous avez peut-être rencontré des chercheurs de marché avant cela comme des questions folles comme quel type de voiture votre marque conduit-elle ? Ils essaient de créer une compréhension commune de la personnalité de la marque. technique la plus couramment utilisée consiste probablement à essayer de créer cinq adjectifs qui expliquent la marque. Comme ce cours ne concerne pas l'image de marque en soi. Utilisons cette technique. Si vous travaillez avec une équipe ou un client, vous pouvez mettre quelques heures de côté et essayer cela. Il suffit de rassembler et réfléchir à tous les adjectifs que vous ressentez, communiquer la marque et de les rassembler tous sur un tableau blanc ou sur un gros morceau de papier. Ensuite, discutez des mots qui signifient la même chose. Croyez-en quelques-uns, décidez lequel de ces mots est le meilleur. Ensuite, à partir des mots qui restent entre vous, vous avez une discussion pour décider lequel des cinq adjectifs qui sont uniques et qui décrivent le mieux la personnalité de la marque. Une fois que vous avez ces jeux de cinq adjectifs, switch résumez ce qu'est la marque. Cela aide à répondre aux critiques de conception plus tard. Cela nous empêche d'avoir une conversation si nous aimons l'esthétique, et nous avons plutôt une conversation sur la question de savoir si le style esthétique communique la personnalité de la marque. Lorsque votre équipe se retrouvera pour examiner les designs, vous pouvez leur rappeler les cinq adjectifs qui résument la personnalité de la marque et dire : est-ce que cette palette de couleurs, cette typographie, toute cette composition communique la personnalité. Et personne n'a besoin de dire s'il l'aime ou non. d'amener une équipe de designers et le client impossible d'amener une équipe de designers et le client à aimer un design. Faire en sorte qu'une équipe de designers et le client reconnaissent qu'un design communique personnalité d'une marque est un peu plus utile et peut-être un peu plus réaliste. Vous pouvez parfois voir des gens créer des slips design avec échelles coulissantes entre jeunes et expérimentés, forts et délicats. Si vous souhaitez des suggestions pour suivre les exercices de ce cours pour chaque module où nous avons des activités pratiques. Ensuite, je vais créer cinq adjectifs de marque que vous pourrez utiliser. Je vais créer des styles différents pour chaque section afin que vous puissiez créer des styles différents pour chacun de ces modules. Votre exercice pour cette vidéo consiste à réunir vos clients, votre équipe de conception ou les deux, et à identifier cinq adjectifs qui résument votre marque. Sinon, si vous travaillez seul, vous pourriez trouver cinq adjectifs que vous pensez plutôt cool. Ou je vais en joindre cinq aux ressources de cette vidéo. Et lorsque vous choisissez vos polices de caractères dans le reste de ce module, essayez de garder ces cinq adjectifs à l'esprit. Il suffit de faire les polices de caractères que vous choisissez pour communiquer ces adjectifs de marque. Le but de cette vidéo est de s'assurer, vous le savez, travailler sur des travaux de conception esthétique uniquement lorsque vous savez ce que la marque essaie de communiquer. Si vous n'avez pas établi quelle est la personnalité de la marque, vous ne pouvez pas choisir une police de caractères qui communique cela ou effectuer toute autre activité de conception. Si vous travaillez sur un projet réel, asseyez-vous avec vos clients, sinon choisissez un autre concepteur ou vous pourriez le faire seul pour vous entraîner la première fois. Et entre vous remue-méninges et déterminez quels sont vos adjectifs de marque. Cinq adjectifs qui communiquent la personnalité de votre marque. La plupart d'entre vous travaillent avec une vraie marque. Donc, pour vous entraîner, choisissez peut-être une marque existante ou un site Web existant avec lequel vous travaillez occasionnellement. Et pensez aux cinq adjectifs qui décrivent sa personnalité. 4. Boutiques de polices: De toute évidence, à un moment donné, vous devrez trouver des polices. Bien sûr, trouver des polices de caractères à utiliser. Vous avez votre inspiration. Vous savez quelles sont les exigences, où allez-vous les chercher ? Et la plupart du temps, ce sera Google Fonts. C'est parce qu'ils sont gratuits, faciles à mettre en œuvre, et il y a beaucoup de polices potentiellement très bonnes ici. Tout d'abord, jetons un coup d'œil à Google Fonts. Nous pouvons rechercher si nous connaissons le nom de celui-ci ou si nous pouvons taper du texte ici si nous voulons qu'il y ait quelques textes différents ici dans les petits exemples et tout, nous pouvons le filtrer par catégories. Maintenant, ces catégories ne seront pas légèrement différentes des différentes catégories que vous avez rencontrées sur différents sites. Ils les classent tous légèrement différemment, mais nous savons ce qu'est un empattement. Nous savons ce qu'est un sans serif. C'est si les petits pieds ne le sont pas. Display signifie simplement une police de caractères spécialement conçue pour les titres. écriture manuscrite signifie qu'elle a une impression manuscrite humaniste ? Et le monospace, bien sûr, signifie que les largeurs de chaque caractère ou de la même valeur normalement utilisées pour le codage. Une chose dont nous n'avons pas trop parlé est que si vous deviez sélectionner une autre langue comme disons par exemple , nous avons sélectionné le japonais. japonais a tendance à avoir ses propres classifications, mais Google Fonts, Il va juste les classer de la même façon tout de suite. Si vous recherchez une police de caractères japonaise, par exemple, il sera un peu plus difficile d'en trouver une qui correspond exactement à vos exigences sur les polices Google car elles ne les classent pas d' une manière ou d'une autre. que les gens peuvent s'attendre polices de caractères japonaises soient classées. Mais nous pouvons également constater qu'il y a huit à choisir. Il vous suffit donc de choisir celui que vous voulez. Maintenant, une chose particulièrement intéressante avec les polices Google est que nous pouvons sélectionner certaines propriétés de police. Par exemple, peut-être voulons-nous qu'il soit assez étroit parce que nous concevons principalement des tableaux de bord pour un site Web d'interface utilisateur très lourd, qui ne contient peut-être pas beaucoup de billets de blog et de choses où en se concentrant uniquement sur ce qui convient bien aux menus et aux boutons. Nous allons vouloir qu'il s' agisse d'une police de caractères assez étroite pouvoir filtrer ces cheveux raides et cela réduira le nombre d'options disponibles. Idéalement, le choix d'une police de caractères est simplement d'exclure toutes celles qui ne correspondent pas. Et puis il vous reste encore une poignée de choix. Enfin, une fonctionnalité assez intéressante de Google Fonts, qui est une fonctionnalité tout à fait nouvelle. Nous allons parler plus tard des polices variables. Mais si je clique sur cette case à cocher, affichez uniquement les polices variables. Il existe actuellement 34 polices variables sur Google et il existe une variable. Je vais vous montrer avec Roboto Slab. Si vous regardez ici, il y en a si vous importiez cela et nous en parlerons beaucoup plus au stade de la mise en œuvre. Mais si vous importiez cela, vous pourriez être tenté d'importer ces neuf fichiers de polices différents, sorte que vous avez tous les poids différents. En fait, vous pouvez simplement importer ce fichier de police. Et il a 900 poids différents, que vous pourrez contrôler avec une variable dans votre CSS ultérieurement. C'est particulièrement agréable pour obtenir les blancs exacts, surtout lorsque nous avons affaire à un design réactif, où il peut y avoir plusieurs tailles différentes pour la police de caractères. Nous allons également vouloir qu'il y ait plusieurs poids différents. Et nous pouvons maintenant contrôler qu' à un niveau beaucoup plus granulaire, plus en plus avec la typographie Web, nous allons chercher des polices variables. Et comme nous venons de le voir, Google Fonts possède déjà 34 polices variables. Différentes polices de variables comportent d' autres variables que les blancs. Mais Google Fonts n'en a actuellement qu'avec les variables blanches. C'est vraiment sympa. Le prochain emplacement à mentionner concerne uniquement les personnes disposant d'un compte Adobe Creative Cloud. Parce que si vous possédez Adobe Creative Cloud, vous seriez fou d' aller ailleurs que fonts.adobe.com pour essayer de trouver vos polices de caractères. Tout d'abord, et c'est parce qu'Adobe possède une collection vraiment impressionnante qui est disponible pour les utilisateurs de Creative Cloud. Mais vous voulez savoir si la personne qui publie le site Web dispose également d' une licence pour utiliser la police de caractères. Ce que je veux dire par là, c'est que si vous faites travail client et que vous possédez personnellement le compte Creative Cloud, ont-ils besoin d'une licence différente pour qu'ils utilisent la même police de caractères sur le site Web du client. Maintenant, avec Adobe Fonts, vous remarquerez tout de suite que les classifications sont plus grandes ici. En fait, l'écriture manuscrite et le script sont séparés en deux classifications différentes. Nous avons reçu une lettre noire dont nous avons parlé plus tôt, qui serait assez étrange de l'utiliser sur un site Web, mais peut-être que vous le ferez. Et Slab Serif. Nous avons donc déjà un choix de classification plus riche parmi lesquels choisir. Et nous pouvons sélectionner ces propriétés pas tout à fait sur une échelle glissante comme sur Google, mais nous pourrions en choisir une plus étroite ou plus lourde , ou même sélectionner une avec un niveau assez élevé ou faible hauteur X. Et nous savons déjà que cela pourrait potentiellement être très utile. Encore une fois, une autre chose qui est vraiment agréable avec Adobe Fonts, c'est si je sélectionner le japonais et qu'ils ont un peu choisi le japonais ici. Vous remarquerez que les classifications changent réellement. Si vous avez affaire à des polices de caractères japonaises, il peut être plus facile d'en trouver une qui correspond exactement à votre classification sur Adobe Fonts. Mais encore une fois, il convient de noter qu'il n'y a que sept polices japonaises. Il est donc utile de pouvoir filtrer sur les différentes classifications. Je n'en suis pas trop sûr. Adobe Fonts est absolument incroyable si vous possédez une licence Adobe Creative Cloud. Maintenant, le prochain couple, je vais juste vous montrer rapidement notre boutique de polices et ne mentir aucun type. Et ce sont des sites Web qui collectent des polices de toutes les fonderies de différents types. Et ils les positionnent sur leur site Web afin que vous puissiez facilement rechercher un grand nombre de polices achetables achetées auprès de différents designers. avoir volé ce cours, j'utilise l'image de marque avec type pour les polices de caractères y sont utilisées. Relativement abordable et j'aime beaucoup leur style. Lorsque vous achetez des concepteurs individuels, vous devez faire attention à ce que vous compreniez ce qu'est la licence. Par exemple, si je regarde marque avec des licences de type, nous pouvons voir qu'il existe en fait une licence complètement différente pour laquelle nous devons l'utiliser sur les applications mobiles si nous utilisons sur un site Web. Nous devons donc savoir où nous pouvons l' utiliser sur la licence dont nous disposons , car il peut être très facile de se tromper de licence. Je vais juste vous en montrer quelques uns un peu plus chers. C'est un type de jeu. offrent en fait une conception de type basée sur la commission où vous pouvez vous adresser avec vos besoins et ils créeront la police de caractères pour vous si vous travaillez sur un projet avec Un très gros budget, ici Hoefler and Co, et il y a de très belles polices de caractères ici. Une chose que vous remarquerez, c' est que cela semble vraiment bon rapport qualité-prix parce qu'il indique quatre-vingt-dix-neuf dollars pour la police de caractères. Mais en fait, si vous voulez l'utiliser sur le Web, ce que vous faites bien sûr que la licence. Et ça va augmenter beaucoup en fonction nombre d'impressions qui se trouvent sur le site Web et de la durée vie pour tout ce genre de choses. Ne vous laissez donc pas trop duper par ce qui ressemble à un prix assez bas de première, c'est un projet intéressant que j'ai récemment rencontré appelé prototype, où vous pouvez concevoir votre propre police de caractères. Vous pouvez choisir les hauteurs de serif, et cela fonctionne probablement avec des polices variables, vous pouvez choisir la largeur du Serif et le contraste. Et il existe toutes sortes de balances coulissantes différentes où vous pouvez contrôler exactement apparence de la police de caractères et éventuellement concevoir la vôtre avec un minimum d'effort. Dans cette vidéo, on me parle surtout de l' endroit où allez-vous trouver vos polices de caractères, vos fichiers de police ? Et de façon réaliste, si vous avez un compte Adobe, vous souhaitez accéder directement aux polices Adobe dès maintenant et utiliser cela pour trouver vos polices. Sinon, en fonction de votre budget, nous allons principalement utiliser les polices Google. Donc, si vous avez un peu d'argent supplémentaire, vous pouvez commencer à consulter certains de ces sites où vous pouvez acheter une police de caractères spécifiquement. Sinon, je vais passer le reste de ce cours utiliser Google Fonts uniquement parce que je crois que c'est là qu' environ 90 % d'entre vous vont passer environ 90 % de votre temps. 5. Texte du corps: Si 95 % de notre application est topographique, il se peut que 85 à 90 % soit la topographie corporelle. Le corps du texte, le texte des paragraphes des billets de blog, les textes dans les descriptions autour des infographies, les zones de texte expliquant comment vous utilisez l'application. Tout ce texte de style corporel correspond à la majorité de n'importe quel site Web. Par conséquent, la plupart des typographes ou plupart des concepteurs choisissent d'abord la topographie corporelle. Je vais le suggérer maintenant et je vais le suggérer à nouveau plus tard, mais pour des raisons très différentes. Maintenant, quelques éléments à prendre en compte lors du choix de la topographie de votre corps. Nous ne voulons pas choisir quelque chose de trop fou. Par exemple, nous n'allons pas choisir notre police manuscrite pour constituer la topographie corporelle de notre application Web. Il pourrait s'agir de longs paragraphes de texte, les termes et conditions. Peut-être voulons-nous qu'il soit individuel et unique. Nous voulions communiquer qui est la marque et la personnalité de la marque. Mais nous voulions le faire de la manière la plus minimale et la plus subtile possible. Nous apprendrons plus tard, lorsque nous examinerons la lisibilité, que nous voulons notre police de caractères corporelle ait idéalement une hauteur X légèrement supérieure à la moyenne. Ce qui signifie que si nous regardons Roboto ici, il a une hauteur X raisonnablement grande et une très belle taille. Nous examinons la taille des lettres minuscules. Ils sont assez grands par rapport à la taille globale. C'est donc vraiment bon pour lire une petite taille. Mais nous ne voulons pas non plus trop de contraste. Quelque chose comme Baskerville n'est probablement pas idéal pour les textes corporels, surtout s'il était un peu petit car il y a beaucoup de contraste entre certains traits fins et plus épais. Ici, nous avons l' affichage Playfair et il y a des lignes très fines de ce côté du A et une ligne très épaisse de ce côté du A. Si c'était trop petit, cela va commencer à nous poser quelques problèmes. pour différencier les choses et s' assurer que nous pouvons le voir correctement. Maintenant, Playfair display, nous allons parler un peu d'affichage dans son nom même, ce qui suggère que nous l'utilisions comme textes de titre et non comme corps de texte. Mais une chose à surveiller, c'est quelque chose qui a trop de contraste. Ici, nous avons PT serif et cela a un certain contraste, mais beaucoup moins que les sables d'affichage. Nous pourrions probablement nous en sortir en utilisant cela comme corps de textes. Nous voudrions peut-être le rendre un peu plus grand que notre topographie corporelle moyenne. La prochaine chose à laquelle il faut penser, c'est que nous allons vouloir plusieurs fois utiliser différents poids de texte en gras et éventuellement de texte italique pour attirer l'attention sur les choses en fonction de l'objet de nos textes corporels. . Mais si nous devions utiliser beaucoup de textes sur notre site Web, nous allons vouloir plusieurs styles où nous avons des propriétés de police. Nous pouvons en fait dire que nous recherchons plus qu'un certain nombre de styles pour nous assurer que nous n'en voyons que ceux où nous aurons également des options en italique et en gras. Nous avons maintenant nos spécifications tirées de notre mémoire. Si nous commençons à exclure toutes les polices de caractères que nous ne pouvons pas utiliser, il ne nous restera qu' avec autant de choix. Si, par exemple, nous choisissons une police de caractères pour une banque et que certains de nos mots-clés de marque disaient des choses comme la sécurité, la sécurité et la fiabilité. Nous allons probablement éviter quelque chose comme Poppins, qui présente des formes uniques très intéressantes autour du G ici, ou le chemin de fer, qui a ce croisement assez extravagant avec la WWE. Et nous allons choisir quelque chose qui semble un peu plus fiable que bateaux à rames créatifs QUI pourraient être un bon choix pour une banque. Mais si nous voulons toujours qu'il ait une certaine personnalité, peut-être pas, Morley serait peut-être une option plus intéressante. Indépendamment de notre marque et de nos mots-clés, nous ne voulons pas que la police de caractères ait trop de personnalité. Lorsque le lecteur arrive au corps des textes, il a déjà décidé qu'il intéressé par la lecture de l'article. Ils ont déjà décidé qu' ils allaient utiliser l'application. Nous avons déjà fait part de la personnalité de la marque et de ce que nous voulons faire. Nous voulons maintenant que la lecture soit aussi facile que possible. Je me suis fixé le mandat d'en trouver un pour une banque sûre et sécurisée. Il n'y aura que Sans Serif. Nous ne voulons pas de textes splay là-dedans. Et nous avons instantanément réduit cela à 139. Peut-être que je veux qu'il soit un peu étroit parce que je vais l'utiliser également pour mes éléments d'interface utilisateur. Et puis je reste avec Sarah Burn. Donc, simplement en me fixant des règles spécifiques basées sur mon dossier de conception, j'ai tout de suite trouvé une police de caractères parfaite. Je veux maintenant que vous preniez le mémoire que vous avez créé, vous l' ayez créé vous-même ou votre travail, le client, pour le créer. Je veux que vous passiez encore un peu de temps à regarder les galeries d'inspiration. Mais maintenant, vous avez une idée de ce que vous recherchez. Cela va donc forcer vos yeux à voir des choses que vous ne regardiez pas auparavant. Ensuite, je veux que vous veniez sur Google Fonts ou si vous avez un compte Adobe, n'hésitez pas à utiliser Adobe Typekit et à essayer réduire et de trouver une police de caractères qui n'a pas trop de contraste. Il n'a pas trop de personnalité, mais il possède la personnalité que vous recherchez subtilement là-dedans et qui, selon vous fonctionnera bien pour votre projet. 6. Les caractères simples: Avant de commencer à parler de la correspondance des polices de caractères pour utiliser plusieurs polices de caractères dans nos conceptions et comment trouver ces polices qui fonctionnent bien ensemble. Il vaut la peine de réfléchir une minute, puis-je m'en sortir avec une seule police de caractères ? Il est tout à fait possible de créer un très beau design avec beaucoup de caractère à l'aide d'une seule police de caractères. Il peut être vraiment beau, il peut paraître minimaliste, et il sera plus rapide et plus facile à créer pour vous. Le principal inconvénient de l'utilisation d' une seule police de caractères est que les en-têtes, le type d'affichage peuvent vraiment aider à communiquer le caractère, marque, la personnalité et peuvent vraiment attirer les gens. Mais il aide également à créer cette hiérarchie visuelle en faisant une distinction très claire entre les en-têtes et le corps du texte. Et comme nous l'avons déjà parlé, raison de la façon dont nous obtenons une sorte de distorsion visuelle, le texte ne ressemblera pas à la même police de caractères, une grande taille qu' à une petite taille, il pourrait On dirait un peu une erreur. Il existe en fait des solutions si vous n'alliez pas choisir une seule police de caractères et l' utiliser pour tout sur votre site. Il y a certaines polices de caractères sur l'écran en ce moment, nous avons une dalle. Et vous avez peut-être remarqué qu'il existe deux versions, une appelée dalle 013 pixels et autre appelée dalle 027 pixels, qui vous indiquent les tailles exactes pour lesquelles elles sont conçues pour ces polices de caractères. Nous pouvons voir que celui à utiliser plus grand est un peu plus étroit car si vous avez de longs titres, cela prendra beaucoup de place sur l'écran. Et ils ont probablement ajusté le visuel en attendant les deux tailles différentes. Maintenant, lorsque vous regardez autour de vous, il existe plusieurs polices de caractères dans lesquelles une police distincte ou une police distincte a été créée pour afficher le corps des textes et parfois même une police distincte pour le texte de légende. Je vais juste vous en montrer un autre. Celui-ci est appelé texte DM serif et DM Serif Display. Maintenant, c'est un vrai particulier, je pense, parce que dM Serif Display est évidemment conçu avec un peu plus de contraste dans les lettres, vous pouvez donc l'utiliser beaucoup plus grande, mais le texte dm serif ne fonctionnera probablement pas particulièrement bien s' il s'agissait d'environ 14 pixels, peut-être 16, voire 18. Idéalement, il s'agirait d'un texte distinct pour sous-titres deux titres principaux. En fait, même lorsque je clique dessus dans polices Google et que je cherche les appariements, il recommande presque systématiquement d' utiliser le texte DM serif comme police de caractères jusqu' à ce que je reçoive directement en bas où il est dit que je pourrais peut-être utiliser l'affichage Playfair et le texte DM serif. Je ne pense même pas que ce soit une combinaison particulièrement bonne dont nous parlerons plus tard. Mais pour être clair, il existe de nombreuses possibilités lorsqu' une police de caractères a été conçue avec une police distincte pour le texte affiché et le corps du texte. Si vous souhaitez utiliser une seule police de caractères, c'est une option assez élégante. Une autre chose à prendre en compte, si vous utilisez une seule police, assurez-vous qu'elle a beaucoup de pondération différente. Assurez-vous qu'il dispose d'options en italique. possible que de petits camps comme ceux qui pourraient être utilisés pour des sous-titres ou des sous-titres. Mais assurez-vous qu'il y a beaucoup de variations. Parce que lorsque vous construirez l'ensemble de votre système de conception, vous aurez besoin de tous ces éléments supplémentaires. Nous examinerons cela plus en détail dans la section « style ». Mais sachez maintenant que si vous utilisez une seule police de caractères pour tout, vous voudrez qu'elle ait beaucoup plus d'options. Ok, maintenant, nous allons regarder jumelage avec notre texte d'affichage. 7. Afficher le texte: Avant de trouver une police de caractères à associer à notre corps de texte, afin de trouver un bon texte de titre correspondant à ces balises de corps, nous devons comprendre le but de la topographie des en-têtes. Nous appelons parfois le texte d'affichage. Lorsque nous traitons des textes corporels, nous sommes beaucoup plus préoccupés par les détails techniques concernant la façon dont vous pouvez le lire, la lisibilité que vous lirez dans de grandes zones à la fois. Nous allons bientôt examiner la lisibilité. Mais les textes de la rubrique ont un objectif très différent. Il faut qu'il attire les gens. Il doit leur donner envie de le lire, même si c'est quelque chose que quelqu'un doit lire pour le travail ou pour une autre raison, il faut quand même le lire pour s'assurer qu'il s'engage pleinement avec le texte et tirez le meilleur parti de celui-ci. Les textes du titre donnent le ton. Il nous dit que si nous parlons d'un ton ludique ou d'un ton très sérieux, il nous indique qui est la personne avec qui nous avons une conversation. Quelle est la personnalité qui nous parle en ce moment ? En plus de cela, il suscite un certain intérêt visuel. Si notre typographie, si notre police de caractères communique suffisamment d'émotion et communique la rétrogradation du crack, nous n'avons peut-être même pas besoin d'utiliser une image ou d'autres éléments graphiques pour donner le ton de la page, nous peut créer un design beaucoup plus minimaliste si nous choisissons mieux une bonne police d'affichage. Parce que plus la personnalité de la marque communique par le biais de la police de caractères, moins nous devons compter sur des illustrations, des images ou des textures. Lorsque nous avons parlé de la façon dont certaines communications sont non verbales, c'est l'endroit où vous pouvez placer la majeure partie de votre communication non verbale dans le texte affiché là où cela n' interférera pas avec la lisibilité. Et ça va donner le ton dès le début. Maintenant, le revers de tout cela, si nous ne mettons pas de pensées dans notre écran, typographie pourrait être quelque chose comme vous le verriez avec Bootstrap avant d'avoir modifié le code, nous avons un liste de personnalités très fade et terne qui se dirige ici. Et cela ne crée aucun engagement, aucun intérêt. Et votre cerveau est déjà en train de supposer que ce sera un texte terne, inintéressant et franchement sans importance. Et cela semble sans doute être une erreur. C'est comme si vous trouvez une icône très simple conçue pour ne mesurer que 20 pixels de hauteur et que vous l'explosez pour être énorme. Il a l'air mal car il n'a pas assez de détails pour être aussi volumineux. La topographie et le titre ici sont clairement une topographie corporelle. Il n'a pas assez de détails et d'intérêt pour être explosé à cette taille. On dirait une erreur. En fait, j'ai légèrement modifié le CSS créer ce titre assez moche pour ce site Web, il nous est impossible d' ignorer tous les avantages du choix d'un texte d' affichage efficace pour nos en-têtes. Parce que si nous n'avons pas par inadvertance tous les effets négatifs de la rubrique qui est actuellement à l'écran. L'objectif du texte affiché est beaucoup plus axé sur image de marque et la définition du ton que sur la lisibilité. C'est l'endroit où nous pouvons vraiment communiquer en dessous de ce niveau conscient. Et il agit comme une sorte d'imagerie, elle attire vraiment les gens et ça leur donne envie de lire, même si quelqu'un doit lire le texte sur la page, il faut d'abord le lire pour s' assurer qu'il est pleinement. s'engager avec elle. Et leur cerveau s' intéresse au matériel, qu'il s'agisse de créer un journal, un blog, tout le tableau de bord d'une application bancaire, ce texte d'affichage de titres doit intéresser les gens ainsi que communiquez la personnalité. 8. Information sur la méta: Nous allons parler de jumelage de deux polices de caractères. Mais bien sûr, il existe de nombreuses situations où vous pouvez choisir plus de deux polices de caractères. Une activité courante concerne les méta-informations pour les sous-titres, par exemple, si vous avez affaire à une application Web très riche en contenu ou à des sites Web comme potentiellement un site Web d'actualités. J'ai le gardien à l'écran en ce moment, alors vous aurez naturellement besoin d'une hiérarchie visuelle beaucoup plus sophistiquée. Il existe de nombreux autres types et significations différents pour le texte à l'écran. Par conséquent, il est beaucoup plus difficile pour nous différencier des choses comme la date ou la légende d'une image qui n'ont pas vraiment d'importance pour autant de lecteurs, 99 % des personnes qui lisent cet article n'a pas besoin de lire la légende sur la photo. Je n'ai pas vraiment besoin de savoir à quelle heure il a été publié, et nous ne voulons pas interférer avec ces quatre-vingt-dix-neuf pour cent des lecteurs. Nous voulons également rendre visuellement évident que la légende est autre chose, que la date est autre chose. Nous pouvons choisir une autre police de caractères pour faciliter cette différenciation. Mais aussi parce que nous savons très peu de gens ont besoin de lire cela, nous pouvons en fait le rendre légèrement plus petit que ce qui est inconfortable à lire, nous pouvons le rendre inconfortable à lire. The Guardian a rendu la légende cette image beaucoup plus petite que la police de caractères corporelle. Ils en ont fait une police de caractères sans empattement, et ils en ont également fait une couleur plus claire, ce a moins de contraste avec l'arrière-plan, tout en ajoutant un symbole ou un petit indicateur visuel que c'est une légende et la forme d'un triangle. Cela ressemble un peu à une flèche pointant vers l'image. Toutes ces choses combinées nous montrent clairement que ce n'est pas important et que cela ne fait pas partie de l'article et nous pouvons simplement passer en revue. les très rares cas où quelqu'un a besoin de savoir qui était le photographe ou l' heure exacte de la publication de l'article . Et il se trouve qu'ils ont une mauvaise vue. Ils peuvent demander de l'aide à quelqu'un. Ils peuvent utiliser un lecteur d'écran, ils peuvent zoomer avant. Nous n'avons pas trop à nous soucier la lisibilité dans ces cas incroyablement rares. Parce que si c'est le cas, cela va nuire à la lisibilité des quatre-vingt-dix-neuf pour cent qui sont ici pour essayer de lire l'article. Si nous sommes dans une situation où nous avons une application lourde en contenu que nous concevons et que nous décidons d'avoir besoin d'une nouvelle police de caractères pour les lignes de l'acheteur , les dates, les légendes ou toute autre information Meta. Le plus important, c'est que si nous le rendions incroyablement petit, pouvons-nous encore le lire ? Et à part ces points uniques, les autres règles dont nous sommes sur le point de parler concernant appariement de votre police de caractères corporelle avec votre police de caractères de tête. Tous ces éléments s'appliquent toujours lorsque vous concevez une troisième police de caractères pour vos informations Meta. Si nous travaillons sur un site Web très riche en contenu, comme par exemple, un site Web d'actualités ou une application avec un tableau de bord avec de nombreuses visualisations de données. Ensuite, le besoin d'une troisième police de caractères augmente mesure que la complexité du système typographique augmente. Si nous choisissons une troisième police de caractères pour nos méta-informations, nos légendes sont nos dates par exemple, alors le plus important est que si nous la rendions vraiment petite, est-ce toujours lisible ? Et à part cela, toutes les règles relatives à l' appariement de la topographie s'appliquent toujours et nous allons les examiner ensuite. 9. Associer des polices: Dans cette vidéo, nous allons parler de la façon de jumeler des polices de caractères. 99 % du temps, lorsque nous concevons une application ou un site Web, nous allons choisir plus d'une police de caractères. Nous allons en avoir un pour les titres et un autre pour le corps des textes, et potentiellement une troisième police de caractères pour des choses comme les légendes. Nous avons maintenant des règles fixées. Il existe des règles pour nous aider à décider si une police de caractères fonctionne bien avec une autre. Malheureusement, il y a beaucoup trop de variables pour que ces règles soient invoquées. Vous allez toujours devoir apprendre à entraîner vos yeux. Mais une fois que vous avez formé vos yeux à associer des polices de caractères qui fonctionnent bien ensemble, vous pouvez faire une carrière entière si vous le souhaitez, en étant capable de jumeler des polices de caractères dans des combinaisons efficaces, mais aussi des combinaisons uniques sont une pierre angulaire vraiment vitale de vos créations. Maintenant, supposons que j'ai choisi EB Garamond pour être ma police de caractères corporelle. Et j'ai choisi cela en partie parce que nous allons beaucoup utiliser Garamond dans la prochaine section. Mais tout d'abord, quelques choses que nous savons sur cette police de caractères. Nous savons donc qu'il s'agit d'une police de caractères à empattement traditionnelle. Nous savons que c'est un classique absolu. C'est l'un des premiers autres que Jensen, qui est encore utilisé aujourd'hui. Mais Jensen a certaines caractéristiques qui le retiennent un peu trop. Alors que Garamond peut encore ressembler à une police de caractères moderne. Et pour ces raisons, beaucoup d'avocats, d' avocats et de comptables aiment utiliser Garamond. Cela rend les choses assez officielles et classiques. Je travaillais récemment avec un avocat et chaque document Word que je lui ai envoyé, il a changé la police de caractères, la Garamond. Si nous supposons une seconde que j'ai un mémoire pour créer une demande pour des avocats ou quelqu' un d'autre ayant une formation juridique très professionnelle , Garamond pourrait être un bon choix. pour les textes corporels. Ou si je conçois une application avec une police de caractères aberrante un peu folle, je pourrais utiliser Garamond uniquement pour la page Conditions générales, par exemple, où je veux que les choses apparaissent un peu. plus officiel. Alors, comment pourrions-nous associer cela à un titre ? Eh bien, nous pouvons regarder certaines de ces galeries d' inspiration dont nous avons parlé, comme le type Wolf. Et un autre endroit à regarder est évidemment au bas de la page Google Fonts. Il va suggérer certaines choses qui sont assez communément associées. Maintenant, je viens de suggérer que mon mémoire consiste à faire une demande ou un site Web pour les avocats ou autres professionnels similaires. Donc, quelque chose comme le homard ne va certainement pas marcher. Nous pourrions tout de suite passer ça. De même, une police de caractères comme le jeu, qui s'appelle le jeu, je suppose parce qu' elle rappelle les jeux informatiques à l'ancienne. En fait, il semble que presque monospace attire peut-être un genre très spécifique. Par conséquent, nous pouvons également ignorer les lots qui nous quittent. Et évidemment, il nous reste des centaines d'autres polices de caractères, mais nous laissant trois possibilités qui, selon Google, sont assez courantes, Roboto, Montserrat et Oswald. Maintenant, roboto est incroyablement surutilisé. Certains concepteurs d'applications utiliseront simplement Roboto. Donc, sans même y penser, ils vont juste coller Roboto sur tout. Je suis toujours réticent à utiliser quelque chose comme celui-ci car la possibilité que notre utilisateur soit endormi tout en utilisant notre application est incroyablement élevée avec quelque chose comme Roboto. Maintenant, je n'ai pas vraiment l' impression que Montserrat est si bon apparaître quelque chose à voir avec l'utilisation de Montserrat Regular, peut-être si je l'ai rendu moyen ou audacieux, mais quelque chose pour le faire une sorte de traits très étroits, ce qui fait que je me sens un peu en conflit avec Garamond et nous en parlerons un peu plus tard. Mais je suis très attiré par l'idée d'utiliser Oswald avec Garamond. Et un énorme avantage tout de suite est qu'il s'agit d'un cap très percutant. Vous y êtes attiré si rapidement, il est si grand et dense et qu'il attire votre attention presque comme l' un de ces feuillets de dalles. Mais sans connotations d'affiches de l'Angleterre victorienne. J'ai l'impression qu'il y a un très bon niveau de contraste entre ces deux polices de caractères. Je vais les emmener dans Figma maintenant, Oswald et Garamond. Et je vais expliquer quelques-unes des raisons pour lesquelles ces polices fonctionnent ensemble. Ici, Oswald et Garamond sont un bloc de texte façon dont ils peuvent apparaître sur un site Web ou une application Web. Et vous pouvez voir qu'ils sont plutôt jolis ensemble. Je pense qu'une chose que je trouve vraiment utile à propos d'Oswald en tant que texte de titre sur une note de côté, c'est parce qu'elle se distingue tellement et a un tel impact, qu' on peut le rendre un peu plus petit en tant que titre. Par conséquent, nous sommes peut-être déjà un peu plus professionnels pour notre site Web d'avocats ou application Web que nous fabriquons potentiellement. Maintenant, lorsque nous associons des polices de caractères, ce que nous ne voulons pas , ce sont des polices trop similaires, elles vont se heurter. Cela va ressembler à une erreur. Et nous en parlerons plus tard. Mais vous avez une distorsion optique lorsque vous agrandissez une police de caractères. Et cela pourrait potentiellement donner l'impression d'une police de caractères différente et de se heurter à elle-même. Donc, même si nous utilisons exactement la même police de caractères pour les en-têtes, cela pourrait sembler un peu comme s'il s'y heurte. Nous voulons qu'il soit manifestement différent. Nous voulons que cela ressemble à une décision intentionnelle. Et cela va également nous aider dans notre hiérarchie visuelle. Cela va rendre la chose plus distinguable que c'est une rubrique. Nous ne voulons donc jamais avoir un titre qui ressemble trop au corps du texte. Maintenant, pour autant que nous puissions le voir maintenant, ils sont très différents. Je suis dans des vêtements assez larges, c'est assez ouvert et Oswald est très condensé. En fait, cela serait très bon pour les éléments de l'interface utilisateur. Il existe également une version condensée d'Oswald, mais elles présentent en fait quelques similitudes. Nous ne voulons pas non plus qu'ils aient l'air complètement opposés. S'ils ressemblent à des opposés complets, ils ressemblent à deux choses de mondes différents que nous avons rassemblées. Ils ont besoin de quelques similitudes. Nous voulons des mesures égales de la personnalité. Si notre texte d'affichage, si je dirige des textes a beaucoup trop de personnalité, nous voulons un corps de texte assez conservateur et vice versa. Examinons maintenant quelques-unes des choses qu'ils ont similaires parce qu'elles sont très différentes en ce moment. Une chose que nous voulons toujours, toujours, qu'ils aient au moins relativement semblables entre le texte affiché et le corps du texte est la hauteur x. J'ai donc ici un L majuscule et quelques majuscules x à Oswald et à Garamond. Et nous pouvons voir qu'Oswald a une hauteur X légèrement supérieure à celle du vêtement, mais elle n'est pas drastiquement plus élevée. Il représente environ 57 % des hauteurs d'Oswald et environ 50 % à EB Garamond. C'est un peu plus petit dans le Garamond normal, il y a un peu d'espace ici, mais ils sont relativement similaires. C'est vraiment important et nous en parlerons plus tard. Mais nous voulons toujours que nos textes d'affichage et nos textes corporels aient une hauteur X similaire. Nous n'en voulons jamais un avec une très haute hauteur X et une très faible hauteur X. Maintenant, la prochaine chose que je veux examiner est si vous regardez ce E à partir des deux, vous pouvez voir à quel point la pondération est assez similaire. Il n'y a pas beaucoup de contraste dans un empattement traditionnel comme Garamond. Lorsque vous regardez la petite barre transversale de l'E, puis le côté de l'E., vous pouvez voir que le contraste en attente est peu près le même que le contraste qu' ils attendent d'Oswald. Ils sont similaires à cet égard. Si nous devions choisir une police de caractères comme le serif moderne , elle sera radicalement différente de quelque chose comme Oswald. Et nous allons vouloir essayer de trouver d' autres moyens de le rendre similaire. Peut-être pourrions-nous trouver un texte de titre de largeur similaire. Le contraste des traits est assez similaire entre ces deux polices de caractères. Et enfin, la forme réelle. Le Garamond a évidemment des ouvertures beaucoup plus grandes. Nous pouvons voir à quel point il est beaucoup plus large et cet espace dans l'E est beaucoup plus grand et Garamond à Oswald. Mais la forme générale réelle des lettres, par exemple, la forme a est la forme traditionnelle des deux lettres. Et j'ai regardé la police de caractères. La plupart des réseaux ont des formes similaires. Et je l'ai mentionné parce que si j'ai changé cet Oswald à plus de deux, peut-être un Futura a ou quelque chose comme ça, vous verrez qu'il a une forme complètement différente. Et même si cela est lié et toutes les autres façons, cela va créer un contraste avec cela. Il existe des similitudes entre ces polices de caractères qui leur donnent l'impression d'appartenir ensemble tout en ayant suffisamment de contraste pour créer un intérêt visuel. Bien sûr, combiner un empattement avec un sans empattement va toujours créer instantanément cette tension qui contraste entre les deux. Mais nous pourrions aussi faire beaucoup de choses à voir avec la mise en forme de ce dernier, le contraste du coup, son aspect humaniste. Parfois, quelque chose comme Futura a l'air géométrique, alors que certains Garamond semblent presque légèrement manuscrits. Il y a un trait fluide. Nous pourrions appeler cela humaniste et nous qualifierions de rationnel futur. Et lorsque nous choisissons des polices de caractères qui vont bien ensemble, nous voulons des contrastes et des similitudes. Il s'agit d'équilibrer ces deux choses. Mais la seule chose que nous ne voulons pas faire de compromis sur les x hauteurs. Il doit toujours avoir une hauteur X relativement similaire. Il s'agit d'un jumelage de polices avec Oswald et Garamond. Allez voir si vous pouvez trouver un texte qui correspond votre mémoire et qui correspond parfaitement à votre corps de texte. N'oubliez pas que vous voulez qu'il ait un contraste significatif , mais que vous semblez toujours appartenir ensemble. L'Idéalement, il devrait y avoir quelques similitudes et un certain contraste. 10. Pratique de l'appariement de polices: Avant de commencer à pratiquer notre jumelage de types, je voulais vous montrer ce jeu vraiment cool que j'ai trouvé qu'il s'appelle connexion de type. Et la connexion de type se décrit en plaisantant comme un jeu de rencontres typographique. Pour vous entraîner à associer des polices de caractères. Il va nous en donner cinq ici pour commencer. Et je choisis Garamond parce que nous avons déjà regardé Garamond. Et ensuite, il nous donne sorte de règles complètes sur la façon dont nous pourrions choisir un bon partenaire Garamond suggère que nous pourrions compter sur la famille, auquel cas choisir un une autre police de caractères de la même famille, une autre police traditionnelle à serif. Ou de chercher quelque chose qui ressemble assez un peu, de regarder quelque chose avec un contraste assez frappant, ou de trouver quelque chose avec une sorte de lien historique. Disons maintenant que je voulais trouver quelque chose qui ressemble beaucoup. Je vais cliquer ici et ça me donne trois options. Et l'un d'entre eux est la bonne combinaison selon ce site Web. Et deux d'entre eux sont des Dodds, qui n'auront pas l'air bien avec Garamond tout de suite. Nous savons que c'est un empattement moderne ici, ce Premier ministre, et je n' ai pas à le prononcer. Je dirais donc que ce n'est probablement pas le danseur du crack. Et celle-ci semble assez transitoire, mais aussi très résistante ici. Et si je regarde vers le bas la description du script, cela dit qu'il a une hauteur X haute, me laisse en quelque sorte cette option, c' est-à-dire que cette police de caractères est peut-être la meilleure correspondance pour Garamond. Et ce qui est vraiment cool ici, c'est que je peux voir certaines des caractéristiques de la barre transversale. Il est dit qu'il y a un petit empattement de tête avec pavillon SCOTUS. Et si je passe à l'autre police de caractères existe aussi une tête en forme de coin et un petit compteur. Il y a donc beaucoup de similitudes. Et la chose que nous recherchions était une police de caractères similaire, disons. Et il est dit : Bien joué, j'ai trouvé une police qui fonctionne bien ensemble. Venez jouer avec ce jeu parce que parfois ça va vous dire que vous avez tort et cela va expliquer pourquoi. Et vous pouvez voir certains détails sur la police de caractères et cela va vraiment vous aider avec certains de ces mots d'anatomie nous avons déjà parlé et des choses comme ça. Il peut s'agir d'un jeu assez amusant pour passer dix minutes à jouer. Maintenant, je veux aussi très vite vous rappeler quelques sites que nous avons regardés plus tôt lorsque nous avons parlé de regardés plus tôt lorsque nous avons parlé loup de type inspiration, où il va juste vous montrer des polices de caractères, combinaisons et paires de polices où il affiche uniquement des combinaisons de Google Fonts. Maintenant, si vous avez déjà choisi votre police de caractères corporelle, il pourrait être pratique de voir ce que ces sites Web recommandent bien les paires, avec cette police de caractères déjà. Et ensuite, à partir des options qui fonctionnent bien, vous pouvez en voir une qui correspond à votre mémoire. moment pourrait être le bon moment pour revisiter votre inspiration après avoir déjà choisi une police de caractères corporelle. Ensuite, j'ai un défi pour vous que je vous répète idéalement autant de fois possible, nous apprenons en faisant, après tout, je veux que vous preniez un célèbre designer artiste ou un musicien. ou n'importe qui, vraiment, et essayez de créer une maquette très simple l'apparence d'une page à leur sujet. Nous voulons qu'il ait un texte différent du corps des textes, puis qu'il soit éventuellement calqué avec une image. Vraiment, vraiment simple. Avant de créer un système typographique complet, nous voulons avoir une sorte de jeu pour voir à quoi il pourrait ressembler et fonctionner sur une page. Je viens très vite de le faire trois fois pour Dieter Rams, Jackson ******* et Frank Gehry, où j'ai choisi de faire des polices de caractères pour chacun. Ensuite, je les pose sur une page pour voir à quoi ils ressemblent. Maintenant, Dieter Rams pour ceux d'entre vous qui ne le savent pas, c' était un designer très célèbre qui travaillait chez Braun. Et j'ai choisi deux polices de caractères, les cheveux, Ubuntu et la cabine. Et je les ai choisis parce qu'ils sont très minimalistes et très modernes ou modernes en termes de Dieter Rams comme temps. Mais ils ont tous deux un aspect ludique très subtil pour eux. Quand on regarde le travail des deux Rams, on voit qu'il utilise une utilisation très, très subtile, très simple de la couleur et motif pour les rendre un peu ludiques et avoir certains personnages. Et je pense que ces deux textes ouverts, le B est absolument parfait comme il a cette petite courbe vers le haut et vers le bas juste au-dessus de la ligne de base et au-dessus de la ligne supérieure. Et ça le fait gonfler et ressemble peu à la façon dont je vois Dieter Rams vaut la peine d'être regardée. J'ai trouvé ce que je pense un jumelage assez raisonnable entre les deux. Et encore une fois, si je zoome sur le corps du texte, vous pouvez voir qu'il a un certain niveau de contraste, mais encore une fois, un certain niveau de similitudes. Encore une fois, il y a une petite quantité d'espièglerie. Une chose que je trouve particulièrement agréable, c'est que Dieter Rams dit, nouvelle entreprise est. Donc, et il a en fait le glyphe avec le O et le E ensemble, ce qui est absolument vital si j'y allais pour écrire une page sur Dieter Rams. Et donc, après avoir choisi ce célèbre designer et ensuite choisi ces deux polices de caractères, et plus tard sur une page, je peux voir cela communiquer vraiment le message exact que je veux. C'est plus un sentiment que tout. Mais ces deux polices de caractères fonctionnent ensemble. Ils sont très modernistes, mais ils ont le même genre d' espiègle que je pense Dieter Rams aurait avec son travail. Le deuxième que j'ai choisi était Jackson *******, ce qui aurait été très différent. Approche de cela. Il a fait beaucoup de choses avec des éclaboussures de peinture sur toile. Et quand je zoome, le texte du titre est cuando et que le corps du texte est Judson. Et lorsque je zoome avant, le texte du titre ressemble presque à de la peinture éclaboussée sur la page. Nous pouvons voir que c'est très ludique. Cependant, PII ne s'associe pas tout à fait. Il a l'air assez humaniste. Certaines formes, la façon dont la partie la plus étroite du E est légèrement inclinée. On dirait qu'il a été peint à la main. Il y a un certain mouvement dans les séries du haut du W et du H. Je peux presque imaginer que cela soit dessiné par quelqu'un qui dégoutte de la peinture vers le bas, peut-être tapoter. Mais à tout le moins, c'est ce que expressionnistes le ressentent. Et de même, le corps du texte a une sensation similaire, je pense, mais il est beaucoup plus subtil. Il n' éloigne rien de la lisibilité. Si y était en train de créer une page sur Jackson *******, je pense que ces textes, c'est absolument fantastique. On peut voir que la forme du T est très similaire, mais celle-ci est beaucoup plus propre et plus facile à lire. Une petite taille. Bien sûr, je suis parti pour Serif avec Jackson *******. Je voulais autant d'extravagance et de détails que possible. Et quand je me pose sur une page à côté de cette photo, je ne pouvais pas dire que je suis plutôt content de ce choix. J'ai l'impression que cela communique un message similaire . Puis finalement, j'ai créé une page simple et rapide pour Frank Gehry et j'ai mis un de ses bâtiments architecturaux ici. C'est un architecte similaire à Dieter Rams est très moderniste. Je suis parti pour des sans serifs, mais il a un style d'espiègle différent. C'est postmoderne, c'est un jeu absurde. Les polices que j'ai choisies ici sont six casquettes et Joseph dans le sable. Et vous pouvez voir que les sixième majuscules veulent les lettres minuscules soient en fait de petites majuscules, ce qui est plutôt loufoque et cela n'a pas vraiment de sens. C'est simplement là pour être différent, je pense que c'est comme ça que Frank Gehry aimerait vraiment, pour être honnête. Au début, regardez Joseph et on dirait peut-être qu'il n'a pas l' air d'avoir ce bord postmoderniste loufoque, mais je vais zoomer et vous pouvez voir ce E, c'est coupé un angle vraiment étrange. Il est pivoté. Ce Z ou Z. Si vous êtes aux États-Unis, il a une lèvre bizarre où il clignote à la fin et le W traverse. Particulièrement étrange. Mais dans l'ensemble, il a toujours un look moderniste. Il y a juste ces petites rebondissements vraiment loufoques ici et là qui me sauvent Frank Gehry. Donc, mon défi pour vous, et vraiment je pense que vous devriez le faire autant fois que vous avez le temps de le faire est de choisir un artiste, choisir un designer, de choisir un musicien si vous le souhaitez, et d'essayer de trouver une taxe corporelle et un texte d'affichage qui fonctionne bien ensemble. Mais vous avez l'impression de communiquer le même message que l'artiste qui vous donne le même sentiment. Si vous ne pouvez penser à personne ou si vous souhaitez relever un défi supplémentaire. Ce qui pourrait être vraiment amusant, c'est d'utiliser un site Web comme un wiki roulette.co. Je viens de venir à la roulette Wiki et ça me donne au hasard le nom d' un politicien ukrainien qui est aussi constructeur et électricien. Et je pense qu'il pourrait être amusant de simplement prendre une page Wikipédia aléatoire et de voir comment la redessiner. Quelles polices de caractères choisiriez-vous s'il ne s'agissait que de cette seule page ? Vous pourriez avoir de la chance et obtenir une personne comme des cheveux, mais parfois vous obtenez une théorie ou un endroit et voyez si vous pouvez avoir une idée des émotions invoquées de Marketplace ou de cette théorie, ou quel que soit le contenu de cette page Wikipédia. Et voyez si vous pouvez créer une composition vraiment simple comme celle-ci à partir de cette page Wikipédia aléatoire pourrait être le prochain niveau de ce défi. Je veux vraiment que tu partes et que tu fasses ça, et je veux que tu partes et que tu le fasses au moins trois fois. Parce que plus vous le faites, plus vous aurez une idée de la personnalité et des sentiments que les polices de caractères ont, et bien sûr, à quel point elles s'associent d'autres marques ou à d'autres idées. vous essayez de créer des designs pour. 11. Résumé: Nous avons besoin de deux choses avant de pouvoir commencer à choisir une police de caractères, nous avons besoin d'inspiration. Nous avons besoin de beaucoup d'inspiration. Où ces polices sont-elles couramment utilisées ? Quelles sont les options de polices de caractères disponibles et comment sont-elles utilisées ? Ensuite, nous devons nous assurer de connaître nos exigences dès le départ. Les exigences peuvent changer à mesure que nous obtenons des idées et si nous travaillons avec un client ou une partie prenante, les exigences peuvent également changer. Nous devons donc nous assurer qu'il est défini avant de commencer à magasiner. Lorsque nous magasinons, il y a des polices de caractères gratuites et payantes. Les cartes payantes seront plus uniques, mais peuvent également avoir un meilleur alignement et plus de glyphes à notre disposition. Les jeux gratuits sont soit construits par des amateurs qui ont construit leur strict minimum. Tout ce qu'ils peuvent être créés par Google ou Microsoft copient trop souvent polices de caractères populaires et peuvent donc donner quelque chose de moins distinctif. Pour la plupart des projets. Cependant, quelque chose comme Google Fonts sera votre boutique incontournable, ou peut-être les polices Adobe si vous avez un compte Creative Cloud ou si votre client le fait, caractères professionnelles peuvent être très utiles cher et il est très important de vous assurer que vous disposez de la licence correcte pour notre texte d'affichage et nos en-têtes. Nous voulons quelque chose d'unique qui exprime le caractère de l'application et lui donne une sensation rare et précieuse. Nous avons besoin de n'importe quelle combinaison de polices pour contraste les unes avec les autres, et pour se complimenter mutuellement à parts égales. Lorsque nous sélectionnons notre corps de texte, l' un des attributs les plus importants est la facilité de lecture pour notre utilisateur.