Créer une échelle de type (Bootcamp de conception d'UI, semaine 5)

1. Intro: Dans cette vidéo, dans ce court cours, nous allons construire un système typographique. Nous allons d'abord parler des raisons pour lesquelles la partie la plus importante de notre grille de conception est la grille verticale, en particulier avec une conception réactive. pourquoi notre topographie est pourquoi notre topographie va tout dicter. Nous utiliserons ces connaissances pour construire une échelle typographique où nous nous intéressons simplement à la taille des différentes rubriques et des espaces, aux rembourrages et aux marges autour de ces différents titres . titres et paragraphes. Nous examinerons certains des autres éléments qui créent la hiérarchie visuelle dans un système typographique. Et nous examinerons certaines des fonctionnalités avancées que nous pouvons utiliser pour rendre notre système typographique un peu plus intéressant. Enfin, nous allons mettre tout cela avec notre projet cette semaine pour créer un système typographique simple comme celui que vous pouvez voir actuellement à l'écran. Votre système typographique est premier élément à construire un système de conception complet. Nous allons faire le tri. 2. Grille verticale: Il existe de nombreuses raisons différentes pour lesquelles la première chose que nous allons faire lors de la conception d'une application est de choisir la topographie du corps. Le choix de la police de caractères pour le corps du texte va influencer la hauteur de ligne du corps du texte. Et la hauteur de ligne du corps du texte va influencer le rythme vertical de l'ensemble de la page, la conception complète de l' ensemble du site ou de l'application. Si nous examinons quelques lignes de corps de texte sur ma page Facebook, nous pouvons voir exactement la même grille de référence utilisée ailleurs pour les éléments de l'interface utilisateur ou toutes sortes de parties différentes de la conception de cette page, y compris les icônes, les bas, mais aussi différentes tailles de typographie. Maintenant, cela nous donne un look plus unifié, ce qui est bien sûr bon pour le design, avec une belle grille de base uniforme en bas de la page. Mais cela va également contribuer à la lisibilité. En tant qu'utilisateur lit différentes zones de texte de différentes tailles. Lorsqu'ils reprennent ces mouvements oculaires saccadiques, ils comprennent inconsciemment où se trouve la grille de référence. C'est pour ces raisons que je crois personnellement que la première chose à faire lors de la conception d'une application est de choisir la police de caractères corporelle. La trace de la police de caractères dictera la taille de la police de caractères du corps. La taille de la police de caractères du corps dictera la longueur de la ligne. Et toutes ces choses combinées dicteront la hauteur de la ligne, ce qui dicte le rythme vertical de l'ensemble du design de la page. Si Facebook décidait soudainement redéfinir l'image de marque et d'utiliser Garamond, il faudrait redessiner tout ce qui se trouve sur la page, chaque marge, chaque pièce de rembourrage, car la hauteur de la ligne doit être modifié pour le texte. Le terme grille de référence peut être un peu trompeur. Nous devrions probablement vraiment appeler cela une grille verticale. Je viens de prendre ce bouton assez similaire à celui que nous venons de voir sur Facebook. Et je viens de vous le montrer avec une ligne qui vient juste sur la grille en bas des lettres. De façon réaliste, la grille sur Facebook et je ne sais pas, je n'ai pas travaillé sur Facebook. Ça ressemble probablement à ça. Nous voyons en fait que d'autres ne sont pas tout à fait sur la grille de référence. Et si je le divise en petits morceaux, il s'agit d'une grille de quatre pixels. Il s'agit d'une grille de 16 pixels. Je pense que ça ressemble probablement un peu plus à ça. Le texte se trouve au milieu de cela. La hauteur des lignes de Seymour est essentiellement de 16 pixels, plutôt que de poser les lettres au bas de la grille. Maintenant, les différentes raisons pour lesquelles nous utilisons réellement une grille similaire à celle-ci. Et le premier est que dès que vous traduisez cela en japonais, il ne sera plus au bas de la grille. Et bien sûr, nous changerions légèrement la taille pour le japonais, mais il ne restera pas confortablement sur cette ligne de base. Il va s'asseoir au milieu. La hauteur de ligne est basée sur la grille, non sur la ligne de base du texte. Une erreur incroyablement courante que j'ai vu des concepteurs avec un arrière-plan imprimé qui ont commencé à faire du web design est de nous dire quelle est cette marge. Marge entre la ligne de base d' un texte et le haut de l' en-tête du texte suivant. Maintenant, comme nous le savons, ce n'est pas ainsi que nous mesurons la hauteur du texte, mais lorsque nous écrivons du CSS, il est absolument impossible de mettre en œuvre ce dont nos développeurs ont besoin. Ou si nous sommes des développeurs front-end, nous avons besoin de connaître cette marge. Il s'agit de la marge située en bas de la zone de limite. Si je sélectionne ce texte de titre, vous pouvez voir la zone de limite. Et si je double-clique ici et que je sélectionne le texte, vous pouvez voir où la hauteur de ligne se termine en haut de ce texte. Et si je clique ici et que je sélectionne du texte, vous pouvez voir où se trouve la hauteur de ligne. Maintenant, en CSS, nous pouvons implémenter cela si nous connaissons cette taille ici, nous pouvons l'implémenter. Cela, nous ne pouvons pas, car à mesure que ce texte change, à mesure que ces marges changent, à mesure que notre grille verticale change et que cette taxe change, cet espace va également changer. Un problème très courant chez les nouveaux designers ou designers ayant un arrière-plan imprimé est donc nouveaux designers ou designers ayant un arrière-plan imprimé de penser que l'espace de la grille de référence nous est utile. Ce qui nous intéresse toujours, c'est l'espace réel de la zone limite, et c'est pourquoi nous sommes plus intéressés par la hauteur de la ligne. J'ai ramené nos deux favoris, Garamond et Verdana. Et comme je l'ai déjà dit , j'utilise ces deux-là comme exemples parce qu'il s'agit de polices de caractères tellement différentes qu'elles ont des hauteurs de x très différentes. Maintenant, nous savons déjà que pour rendre EB Garamond lisible, nous le voulons idéalement avec une taille de 17,5 pixels de référence de hauteur. Et pour cette raison, j'ai fait de la hauteur de ligne environ 1,25 fois la police de caractères, en partie parce qu'il s'agit d'une longueur de ligne assez longue. Il est écrit 75. Caractère par ligne, longueur de ligne. Et comme vous pouvez le constater en ce moment, 75 caractères par ligne ne sont pas très longs. Maintenant, ce que nous avons avec cette hauteur de ligne de 24 pixels, nous avons une hauteur de ligne pratique pour créer une grille verticale. Je viens de créer une grille de pixels complète. Et nous pouvons voir que toutes les hauteurs de lignes s'intègrent bien à cela parce qu'elles sont toutes à 24 hauteurs de ligne. J'ai créé une rubrique qui s'intègre aussi. Et un bouton avec un rembourrage, des marges et des trucs qui s' intègrent confortablement. En fait, si je superpose cet espace entre eux, nous pouvons voir que les espaces entre chaque bloc de texte s'intègrent également très bien dans cette grille de quatre pixels. C'est donc bien pour Garamond. Qu'en est-il de DAWNA ? Nous savons maintenant que Verdana a une hauteur X plus grande, donc nous pouvons réduire la police de caractères, mais idéalement, nous voulons une hauteur de ligne légèrement plus élevée. Voyons à quoi ressemble Vedanta. Je pense que c'est assez joli ici. Vous saurez d'après les vidéos précédentes que pour Donna, nous voulons idéalement une hauteur de texte de 12,5 pixels de référence. Et si nous mettons cela au maximum, jusqu'à 150  % de hauteur de ligne, cela nous donne 18,5 pixels de référence. Maintenant, nous ne pouvons pas défier cela en une grille verticale agréable et confortable si facilement. Je l'ai divisé en une grille verticale à trois points sept. Et n'oubliez pas que vous pouvez avoir une fraction d'un pixel de référence. Certains développeurs, concepteurs et même logiciels ne vous laisseront pas utiliser des fractions d'un pixel de référence. Les fractions d'un pixel de référence sont tout à fait acceptables depuis la toute première version de CSS. Et il n'y a aucune raison pratique que cela pose problème lorsque l'on tient compte du fait qu'un pixel de référence est très rarement divisible par les pixels réels de l'écran. De toute façon. Au lieu de cela, j'ai donné à Donna une grille de référence de 3,7 pixels de référence plutôt que quatre. C'est ainsi que j'ai choisi la hauteur de ligne du texte du titre, soit 48,1 pixels de référence, la hauteur de ligne, le bouton et l'espacement. Bien sûr, c'est bon dans un monde parfait, mais vous travaillez très rarement dans un monde parfait. Normalement, vous devez sortir vos créations assez rapidement et vous devez les traduire dans d'autres langues assez rapidement. Ce que beaucoup de designers feront et ce que vous finirez probablement par faire. Et ce que je vais surtout faire pour le reste de ce cours. Allons juste arrondir un peu les chiffres. Par exemple, nous savons que la hauteur parfaite pour notre texte Vedanta est de 12,5 pixels. Mais peut-être que nous avons juste arrondi cela jusqu'à 13 et nous avons simplement agrandi la hauteur de la ligne afin qu' elle s'intègre mieux dans une grille de pixels de référence complète. Et cela va nous permettre d'utiliser un logiciel de conception beaucoup plus facile pour communiquer avec d' autres concepteurs et communiquer quels développeurs. Et nous allons sortir nos créations plus rapidement, sans faire de meilleurs designs. Mais dans le monde réel, il faut normalement faire de légers compromis. De même, beaucoup de designers, lorsqu'ils le traduisent en japonais, par exemple, ignorent le fait que vous voulez obtenir taille de texte d' environ 110% à 115%, car ils vont devoir puis modifiez beaucoup cette grille de référence, ce qui pourrait punir les utilisateurs japonais. Mais si nous prenons cela pour Donna, par exemple, nous ne rendons pas la tâche plus difficile à utiliser pour nos lecteurs japonais. Nous compliquons l'utilisation de nos lecteurs anglais parce que nous arrondissons déjà la taille du texte. Mais il ne s'agit pas seulement de traductions dont nous devons nous inquiéter. C'est également de la réactivité. Maintenant, si je regarde cette belle page Garamond pratique, j'ai une grille verticale de quatre pixels. Dès que je transformerai cela en mobile, nous allons réduire la hauteur de la ligne car la longueur de la ligne n'est pas aussi longue. Et puis ça va complètement changer ma grille verticale. Figma ne me laisse même pas avoir une fraction de la taille de ma grille verticale. J'ai dû créer mes propres grilles avec des boîtes. Et vous pouvez voir ici que le textile s'intègre encore très bien dans ma propre grille sur mesure dessinée avec des boîtes. Et toutes les marges s'intègrent également parfaitement dans cette grille. Mais comme nous l'avons vu, subtilement changé de la vue du bureau à la vue mobile, il va falloir modifier ces marges un peu. Changez un petit peu ce bouton pour vous assurer que nous ne perdons pas le rythme vertical qui descend sur la page. cette raison, nous ne pouvons jamais vraiment compter sur notre grille verticale étant un nombre rond agréable et confortable comme quatre pixels. Encore une fois, dans cette situation, vous allez probablement faire un petit sacrifice pour vos utilisateurs mobiles ou peut-être optimisé pour mobile et faire un petit sacrifice pour les utilisateurs de votre ordinateur de bureau. Normalement, dans l'intérêt de quelque chose d'aussi important que de respecter la date limite. Dans la conception Web, l'idée d'une grille de référence est impossible. Nous avons une grille verticale. La ligne textuelle ne figure jamais sur la grille. Il serait impossible d'écrire le CSS pour et d'élaborer les traductions. La grille de référence idéale pour une application Web est la hauteur de ligne du corps des textes. La hauteur de ligne du corps des textes peut maintenant changer. Par exemple, lorsque nous examinons l'application sur leur téléphone mobile ou si nous changeons le texte en japonais si possible, nous voulons que des règles CSS soient mises en place pour japonais si possible, nous voulons que des règles CSS soient mettre à jour cela. Nous examinerons cela beaucoup plus en détail au stade de la mise en œuvre pour l'instant. Une fois que nous connaissons notre police de caractères et que nous connaissons la longueur de la ligne et que nous connaissons la hauteur de la ligne. Nous avons maintenant une bonne idée de ce que sera notre grille de référence. Nous pouvons commencer à élaborer une échelle de type et éventuellement élaborer l'ensemble de la conception de notre application. dehors de cette hauteur de ligne. 3. Arborescence visuelle: Bien sûr, lorsque nous travaillons sur notre système typographique, nous voulons y intégrer une hiérarchie visuelle. Nous savons que la hiérarchie visuelle est d'une importance vitale car l'utilisateur doit savoir quoi lire en premier, ce qu'il faut lire en deuxième et quoi lire. Troisièmement, nous connaissons le contenu du site Web. Ils ne le font pas encore. C'est à nous de leur dire l'importance de chaque typographie. Maintenant, tout le monde connaît l'ancienne règle selon laquelle texte plus important est plus grand et que le texte moins important est plus petit. Mais il y a plusieurs autres choses que nous pouvons faire pour créer une hiérarchie visuelle dans notre système typographique. J'ai ce site Web ici, pensez à global health.org. Je n'ai jamais vu ce site Web auparavant, mais je vais l'utiliser pour repérer quelques exemples de hiérarchie visuelle dans la topographie. La première chose est que les gros titres en haut, c'est gros, mais ce n'est pas vraiment beaucoup plus grand que le corps des textes. Il y a un énorme saut, mais ce n'est pas beaucoup plus grand. C'est rocher. Mais plus important encore, c'est que c'est centralement justifié. C'est la seule chose. Ceci et le menu ci-dessous sont la seule chose qui soit centralement justifiée. Tout le reste reste aligné, tous les autres textes apparaissent instantanément. Il semble que c'est plus important car il se trouve au centre de la page et bien sûr en haut de la page. Et je me demande en quelque sorte si nous avons rendu ce texte encore moins gras, soit un peu plus petit, mais il reste assez important. Maintenant, une autre chose qui donne beaucoup de hiérarchie visuelle est d'avoir beaucoup d'espaces blancs autour de lui. Souvent, nous n'avons pas nécessairement besoin d'agrandir le texte, nous devons simplement agrandir l' espace qu'il occupe. Cela pense à la boîte de santé mondiale en haut, il y a une marge assez importante autour de lui. Et si vous incluez le verrouillage dans le menu, c'est un pourcentage significatif de la page qui est occupé par ce texte d'en-tête. Sans penser que la santé mondiale est bien plus grande qu'une taille qui ne correspond pas à tous a clairement beaucoup plus d' importance en raison de la quantité d'espaces blancs qui existent autour d'elle. Maintenant, je remarque que chaque article d' actualité sur cette page a un peu trop de pauvreté, gouvernance, ce genre de choses pour dire dans quelle catégorie il se trouve. Et cela a surgi d'une certaine façon parce qu'il est dans toutes les casquettes et il est dans une couleur différente. Il y a donc deux autres choses qui aident à lui donner une hiérarchie, qui aident à la différencier et à dire que c'est quelque chose de différent. La seule chose sur la page de cette couleur orange, qui est évidemment l'une des couleurs de surbrillance de la marque, est le bouton d'inscription et ces boutons de catégorie. Une autre chose qu'ils ont utilisée pour identifier la hiérarchie est la police de caractères. Lorsque nous arrivons aux titres des articles individuels, ils sont dans cette police de caractères à empattement, alors que les titres principaux semblaient tous se trouver dans cette police sans empattement. Nous pouvons immédiatement repérer que ces choses signifient des choses différentes. Lorsque je fais défiler la page vers le bas, vous verrez qu'il y a des séparateurs avec une bordure supérieure écrite en gras. Ceux-ci divisent évidemment la page haut et constituent un niveau de titre différent. Ce séparateur est également, en quelque sorte, un mécanisme de hiérarchie visuelle typographique. Et si je fais défiler un peu plus loin, vous verrez qu'il y a des textes de soutien écrits de temps à autre en italique, ce qui nous dit encore une fois que cela signifie quelque chose de différent des autres textes de la page. Il s'agit d'un niveau différent dans la hiérarchie. Il s'agit clairement de balises Meta ou d'une description du sujet de cette série. Maintenant, quelques autres choses qu' ils n'ont pas utilisées sur ce site, même si je pense qu'ils ont utilisé plupart des techniques de hiérarchie visuelle auxquelles je peux penser avec la typographie c'est avoir une couleur d'arrière-plan bien que je sache qu'il est ici où il est dit abonner et d'utiliser une écriture moindre et assez grande. Comme évidemment, vous vouliez que nous voyions qu'il s' agit d'un fond noir avec du texte blanc. se démarque donc instantanément et ressemble tout à fait différent de l'autre texte de la page. Nous pourrions bien sûr avoir un bloc de couleur derrière certains textes ou quelque chose du genre pour créer une hiérarchie visuelle sans colorer le texte lui-même, mais en lui donnant un arrière-plan, manière générale, les textes présentant un contraste plus élevé entre l'arrière-plan et la couleur de premier plan sont considérés comme plus importants. Et je n'ai pas pu m'empêcher de remarquer que cette couleur du texte ici est un gris légèrement plus clair que les en-têtes. Et en fait, tout en haut, Think Global Health semble être un noir légèrement plus sombre lorsque ces sous-titres également. Enfin, un autre outil de hiérarchie visuelle est le suivi. En fait, ce texte orange dit « pauvreté ». Les en-têtes de catégorie semblent avoir un certain espace autour des lettres, bien sûr, car ils sont écrits en majuscules, sorte qu'ils ont augmenté le suivi. Mais de plus en plus d'espacement ou de suivi des lettres peuvent à nouveau rendre un bloc de texte plus important dans la hiérarchie visuelle. Nous venons de regarder ce site Web Think Global Health parce qu'il contenait de nombreux exemples de hiérarchie visuelle dans la typographie. manière générale, les sites Web d' information le font parce qu'ils contiennent beaucoup de texte. Mais certaines des techniques que nous voudrions peut-être penser à notre couleur, à notre arrière-plan, à notre couleur, espacement ou à notre suivi des marges, la quantité d'espaces blancs autour du texte. En utilisant toutes les majuscules, la justification, nous pourrions mettre légèrement en retrait le texte en italique ou en petites majuscules ou en différents styles de texte. Nous pourrions avoir une texture au-dessus du texte s'il s'agissait d'un texte de titre spécifique. Voyez s'il y a autre chose à laquelle je n'ai pas pensé que vous pouvez penser littéralement au ciel, aux limites, mais ce sont ceux que nous avons surtout semblé utiliser dans les systèmes typographiques. 4. Échelle de type: Une fois que nous avons toutes les dimensions de notre corps de texte, nous pouvons déterminer la taille des textes de titre et des textes de légende, etc. En élaborant une échelle de type, nous voulons le titre, texte du titre, quelle était la même taille. Vous voulez que toutes nos légendes soient de la même taille. Mais nous voulons également qu'ils aient l'impression qu'ils font partie de la même composition, si vous voulez, en tant que corps de texte, nous voulons qu'ils s'intègrent dans une échelle. Il arrive parfois que les gens utilisent l'une des balances musicales parce que nous savons qu' elles se sentent naturellement bonnes pour nous. J'ai tendance à utiliser le ratio doré ou la séquence Fibonacci principalement parce que j'utilise ce ratio ailleurs dans ma conception. Et peut-être que cela donne une sorte de champ uniforme à tout en utilisant le même rapport pour l'échelle de type. Je n'en suis pas sûr à 100 %. J'ai défini la hauteur de mon corps de texte à 16 pixels de référence. Et vous pouvez voir qu'il est alors décidé que si vous utilisez l' échelle des tiers principaux et votre corps de texte est de 16 pixels de référence, alors vous êtes en tête de texte doit être de 48,83. Pixels de référence. Les pixels de référence ne sont pas exactement la même chose que les pixels. Vous pouvez avoir un point ou une fraction de pixel. Il est donc tout à fait normal que vous utilisiez quelque chose comme ça. Et ces chiffres vont être légèrement différents. Vous allez devoir utiliser un peu votre œil et voir comment il fonctionne avec d'autres parties de votre design et s'adapte à votre rythme vertical de votre design, tout ce genre de choses. Mais je pense que c'est un très bon point de départ pour trouver ce qui pourrait potentiellement être une bonne taille de titre pour ce corps de texte. Maintenant, comme je viens de le dire, j'ai tendance à utiliser le ratio d'or. Et l'autre avantage de cela est que cette calculatrice, G R T calculator.com, je trouve un peu plus gentille de toute façon. Maintenant, j'ai mis dans EB Garamond, qui est une Google Fonts, une version gratuite de Garamond disponible sur Google Fonts. Et nous pouvons voir que le rapport d'aspect d' EB Garamond est un peu plus grand que celui de Garamond. La version de Google a une hauteur X légèrement supérieure à celle de la police standard Garamond. Et si je divise sept pixels de référence par zéro, 0,4, sept pixels de référence ont été d' environ neuf minutes d'arc. Je vais obtenir 17.517.5 est une bonne taille de police pour rendre Garamond, rendre plus lisible pour la plupart des gens, j'ai défini la largeur du contenu à 700 pixels de référence pour l'instant. Et vous pouvez voir si vous regardez ici, l'échelle, il est suggéré l'échelle du ratio d'or. Il a en fait arrondi mes 17,5 pixels de référence. Il n'aime pas les fractions d'un pixel sur cette application, mais vous pouvez voir qu'elle m'a donné les tailles de police pour les différentes hauteurs ainsi que la hauteur de ligne. Maintenant, si je modifie la largeur du contenu ici, vous pouvez voir qu'il met à jour la hauteur de la ligne comme nous l'avons parlé plus tôt. Si nous avons des textes plus longs, nous voulons également une hauteur de ligne légèrement plus élevée. Ce que j'aime cette calculatrice, c'est en fait que si je descends, je peux voir des exemples de toutes les tailles de texte différentes et de l'apparence de notre liste et de tout ce genre de choses en utilisant ceci police de caractères avec cette échelle de type. Si je passe à Verdana parce que nous avons déjà parlé de Dinah. Nous savons maintenant que pour Diana, il peut être un peu plus petit que Garamond. Je vais régler cette valeur à 12,5, qui est la meilleure hauteur de lecture pour Verdana selon nos calculs antérieurs. Et vous verrez qu'en fait, la hauteur de ligne donnée est un peu plus grande et elle lui donne en fait une hauteur de ligne légèrement plus grande, même si nous la faisons de la même taille que Garamond parce qu'elle est calculé qu' il a une hauteur X légèrement plus élevée et qu'il a donc besoin d'un peu plus d'espace autour. Cette calculatrice pourrait être un bon endroit pour obtenir des chiffres de base avant de commencer à essayer de déterminer notre échelle de type. Nous ne voulons jamais simplement prendre ces chiffres et les coller dans notre design et espérer que ça paraît beau. Il va falloir les modifier légèrement parce que tout est basé à peu près sur des chiffres de base autour de ces polices de caractères. Nous pouvons voir beaucoup plus avec nos yeux que ces calculatrices ne peuvent jamais voir avec ces chiffres. Nous voulons simplement prendre ces chiffres et éventuellement les utiliser comme point de départ avant d' affiner apparence de ces échelles de type. Une fois que nous savons quelle est notre police de caractères corporelle, nous pouvons l'utiliser pour savoir quelle est la taille de notre corps de texte, puis nous connaissons hauteur de ligne de nos textes corporels. Et nous pouvons utiliser cela pour identifier deux choses. Quelle est la grille de référence que nous allons utiliser pour l'ensemble de l'application ? Et quelle est l'échelle de type ? Quelle sera la taille de nos rubriques et sous-titres ? 5. Créer des échelles de type: Dans la dernière vidéo, nous avons appris à utiliser un calculateur d'échelle de type en ligne pour obtenir des hauteurs de base pour nos titres de un à six et notre texte de paragraphe, et nous avons également eu une idée du hauteur de ligne initiale. Maintenant, ce que j'ai fait ici sur mon écran en ce moment c'est que j'ai mis du texte dans Figma. Et si vous utilisez un logiciel de conception différent, c'est tout à fait correct. Je vais juste faire des démonstrations à Figma parce que c'est ce que j'utilise. Et j'ai six textes pour différentes tailles de titres et un pour la taille des paragraphes. Maintenant, j'ai fait deux choses à chacun d'entre eux. Une fois que j'ai décidé de la taille du texte, j'ai également décidé une hauteur de ligne. Vous pouvez voir si je zoom avant, j'ai une grille verticale de quatre pixels. Vous pouvez voir que la hauteur de ligne s'intègre parfaitement dans cette grille de quatre pixels car j'ai une hauteur de ligne de 64. Mais j'ai aussi caché une boîte grise, ce qui serait la marge. Maintenant, si vous n'êtes pas familier avec le modèle de boîte CSS, vous auriez votre hauteur de ligne et votre rembourrage, etc., à l'intérieur de la boîte, qui se trouveraient à l'intérieur de cette zone, alors vous auriez quelques marges en dehors de la boîte. Maintenant, je ne vais pas trop entrer dans les détails de ce qu'est le modèle de boîte CSS. Mais tout ce que vous devez savoir maintenant, c'est que cette zone grise est l'espace supplémentaire que nous allons ajouter autour du titre. Et cela doit également être en rouge. Ainsi, la hauteur de toute la zone pour les étiquettes de titre est de 132, ce qui s'intègre également très bien dans notre grille de quatre pixels. Maintenant, ce que j'ai fait, c'est que je suis allé dans boîte NAT cachée pour que vous ne puissiez pas le voir réellement. Mais vous pouvez voir que chaque titre n' a pas d'espace entre eux. Et c'est parce que pour chacune des rubriques, j'ai ajouté ces cases de marge nous puissions voir comment elles s' adapteraient. C'est parce que pour chacun de ces titres, j'ai ajouté cette zone de marge grise et je l'ai cachée. Nous pouvons facilement les aligner et voir comment ils s' adapteraient à leurs marges. Maintenant, ce que j'ai fait, c'est que j'ai fait cela pour les six éléments de la rubrique. Et une fois pour le paragraphe, le paragraphe, comme vous pouvez le voir, n'a qu'une marge de quatre pixels en haut et en bas. C'est peut-être bon. Ce n'est peut-être pas le cas. Nous allons le découvrir maintenant. Et maintenant, je les ai créés en tant que composants Figma, mais si vous utilisez différents logiciels de conception, n'hésitez pas à le faire comme vous le souhaitez. Ce que je peux maintenant faire, c'est que j' ai une page d'exemple et je vais faire glisser mon composant de titre vers l'extérieur, insérer dans mes grilles, puis faire glisser un paragraphe et l' aligner pour que puis faire glisser un paragraphe et nous puissions voir qu' ils touchent chacun. autres. Si je fais un zoom arrière, je devrais pouvoir commencer à faire une idée de ce que ça a l'air bien, si j'ai un titre numéro un et quelques textes de paragraphe, est-ce que ça va bien ? Maintenant, ce que je veux faire sur cette page c'est de m'assurer que j'ai essayé toutes les combinaisons afin que nous voyions à quoi elles ressemblent maintenant, plutôt que d'essayer de créer toute notre application, puis Réalisez que quelque chose ne fonctionne pas. Je vais peut-être aller à la troisième position. Qu'en est-il du moment où j'ai la troisième ligne suivie d'un cap vers ? Maintenant, je commence déjà à penser que l'espace en haut de la rubrique 3, la marge n'est pas assez élevée et que la marge en bas est peut-être un peu trop petite. Ce que je peux faire, c'est que je peux revenir ici et dans mon composant, je peux déplacer la marge. Et puis ça va être mis à jour sur tous ces éléments et je peux réinitialiser ma page. Maintenant, je pense qu'il y a probablement encore besoin d'un peu de peaufinage, mais une fois que j'ai l' air raisonnablement bien, je veux essayer ça avec meilleurs textes que de se contenter d'en prendre un , deuxièmement, à la première occasion possible lorsque nous créons un système de conception ou une échelle de typographie, nous voulons y mettre du contenu réel parce que nous voulons voir à quoi il ressemble avec le réel contenu qui pourrait réellement s'intégrer dans la conception. Rubrique. L'un d'eux est très court. Nous n' aurons probablement jamais cela. Maintenant, je vais simplement me rendre sur le site Web de BBC News et prendre du texte. Maintenant, j'ai un nouveau texte dans la première ligne, et nous pouvons en fait avoir une meilleure idée du fonctionnement de et nous pouvons en fait avoir une meilleure idée du fonctionnement de la hauteur de la ligne, car elle passe sur une deuxième ligne et nous pouvons voir comment marge autour de ça fonctionne. Aujourd'hui, idéalement, nous voulons mettre à jour nos rubrique deux et nos textes de rubrique trois. Nous pouvons donc commencer à voir à quoi cela ressemble avec du texte réel. Maintenant tout de suite, je vais dire que ce titre est peut-être un peu trop loin de ce texte ici. On peut donc réduire de quatre pixels la marge entre le titre 1 et le texte du paragraphe. Et à un moment donné, nous voudrons peut-être dire, eh bien, vous savez quoi, il n'y a pas vraiment assez de définition entre les deux. Le titre trois et le titre du texte. Je pense que je dois rendre le titre trois textes un peu plus gros ou le texte intégral de la rubrique un peu plus petit. Eh bien, nous pouvons simplement le faire dans notre composant et voir à quoi il ressemble tout au long de notre page d'exemple. Et peu importe si cela ne rentre pas dans cette calculatrice d'échelle de type avec laquelle nous avons commencé, car notre œil est beaucoup plus important que les mathématiques s'il beau sur la page et que nous pouvons permet de voir facilement la hiérarchie visuelle et la différence entre les titres. C'est ce qui est important. Nous utilisons donc cette échelle de la dernière vidéo comme point de départ, mais nous allons la modifier maintenant et trouver quelque chose qui fonctionne mieux pour nous et pour cette police de caractères. Lorsque vous faites cet exercice, lorsque vous faites cela avec votre échelle de type, une chose très importante à retenir est qu' il y a une grille de quatre pixels que j'ai créée. Et vous pouvez choisir une grille de six pixels ou choisir une grille de 3,5 pixels. J'utilise quatre pixels ou j'utilise un nombre complet de pixels car il est plus rapide de configurer la grille sur Figma, je vais utiliser la grille verticale des pixels de référence A6. Et rappelez-vous si, à un moment donné, cela semble mieux si quelque chose ne s'insère pas dans cette grille, alors ne l'insérez pas dans la grille. Nous utilisons la grille verticale comme ligne directrice pour l' aider à paraître plus belle sans trop d'efforts dès que nous pensons qu'il est sans trop d'efforts dès que nous pensons qu'il préférable d'ignorer la grille ou de casser la grille, alors nous devrions absolument le faire que quand je suis bien réglé. Si je décide que cette rubrique trois devrait avoir marge de trois pixels haut plutôt qu' une marge pleine de pixels, alors c'est absolument ce que nous devrions faire. La grille verticale, le rythme vertical de la page sont là pour nous aider. Il n'est pas là pour dicter complètement la façon dont nous travaillons. Prenez donc l'une des polices de caractères avec lesquelles vous travaillez et ouvrez n'importe quel logiciel de conception que vous utilisez. Commencez par l'une de ces calculatrices d'échelle de type. Si vous trouvez que c'est un point de départ utile et créez vos textes de titre de 1 à six et vos textes de paragraphe sous la forme d'une boîte invisible qui sera utilisée comme marge, puis essayez-les dans différentes commandes. quoi cela ressemble-t-il si vous avez une rubrique trois avec un titre sous celle-ci, puis cinq paragraphes de texte. À quoi cela va-t-il ressembler ? Est-ce qu'il a l'air trop condensé ? Est-ce qu'il a l'air trop étalé ? Est-il évident que l' en-tête se rapporte au texte qui se trouve en dessous de celui-ci ? est possible que cette rubrique trois échoue en ce moment et qu'elle a peut-être besoin d'une marge légèrement plus grande en haut. Et puis, une technique souvent utilisée par les concepteurs de types consiste à plisser légèrement vos yeux ou à les sauvegarder et à les mettre dans Photoshop ou quelque chose pour que vous puissiez utiliser un flou. Maintenant, lorsque nous avons mis le flou sur le corps des textes, nous voulions avoir une belle couleur gris clair cohérente qu'elle ne nous paraisse pas trop lourde. Mais un autre bon point est d'aider notre hiérarchie. Nous voulons idéalement que la densité ou l'obscurité de la rubrique principale paraisse beaucoup plus sombre que le texte du paragraphe. Si vous plissez les yeux, obtenez-vous une cohérence légèrement différente pour le texte du titre et les textes de paragraphe, ce qui devrait au moins vous indiquer qu'il y a suffisamment de différenciation. N'oubliez pas que les gens ne se concentrent pas sur l'ensemble de la page à la fois. Ils ne se concentrent que là où le centre mort absolu de leur œil regarde à ce moment-là, c'est ce qu'on appelle la fovéa. Tout le reste de la page semble floue pour eux et ils doivent être en mesure d' identifier immédiatement où se trouvent les en-têtes. Si la page est floue ou s'il s'agit cohérences différentes en gris pour les différents titres. Je veux que vous choisissiez une police de caractères aléatoire ou une police avec laquelle vous avez travaillé et essayez créer cette échelle de type très simple. Mettez du texte réel là-dedans et essayez autant de mises en page que possible avec l'en-tête à la troisième position, la quatrième position pour vous avec l'en-tête à la troisième position, assurer qu'il a l'air bien. Maintenant, avant de commencer créer le reste de votre système de type, votre système de conception, puis à concevoir l'application. 6. Créer des échelles de type 2: Dans les deux dernières vidéos, nous avons créé une échelle typographique que nous pouvons commencer à utiliser pour notre système de type et notre système de conception. Jusqu'à présent, nous avons établi hiérarchie visuelle en utilisant uniquement la taille de la police. Maintenant à l'écran ici, j'ai fait le même exercice. J'ai créé des en-têtes de un à six et quelques balises de paragraphe. J'ai essayé de créer une hiérarchie visuelle dans laquelle je ne modifie pas la taille du type, grande. J'ai rendu les textes de paragraphes assez volumineux parce que je sais que je l'utilise tout au long. Il s'agit donc d' une hauteur de 18 pixels de référence. Mais j'ai fait le type taille quatre, tous les textes 18 pixels de référence. Et j'ai essayé de créer une hiérarchie visuelle. Quelques idées d' autres choses que nous pouvons faire pour créer une hiérarchie visuelle avec nos textes. La première des plus importantes est probablement la taille de cette marge autour du texte, elle n'a pas nécessairement besoin d'être beaucoup plus grande, mais s'il y a un grand espace autour de lui, elle est instantanément. semble plus important et il se situe plus haut dans notre hiérarchie, souvent dans une échelle de type, dans un système de types, titre six ne sera même pas plus grand que le texte du paragraphe. Il y a beaucoup de systèmes de type que nous dirigeons six sont en fait plus petits que le texte du paragraphe, mais peut-être qu'il est en gras sont en majuscules ou qu'il a quelque chose à ce sujet qui le distingue. Parfois, cela pourrait simplement être qu'il y a plus d' espace autour de lui. Maintenant, je pense que cette rubrique six ressemble toujours à un titre. Quelques autres choses à prendre en compte. En tête d'un ici, j'ai un **** de beaucoup de suivi. Il y a beaucoup d'espacement entre les lettres. Alors qu'au moment où je reviens à la sixième position, je suis en train d'écraser la laitue assez près l'une de l'autre. Il y a évidemment de la couleur dans les deux premiers titres , puis un autre indicateur visuel dans les deux titres suivants et les titres finaux que j'ai mis italique juste pour leur donner quelque chose qui attire l'attention sur et les fait ressembler un peu plus à un titre. J'ai un peu utilisé les blancs. Celui-ci est très lourd en haut, et au moment où nous arriverons au bas, c'est un texte assez fin. Nous pourrions potentiellement en mettre un. Cela pourrait être légèrement en retrait ou même en retrait négatif. Cela va donc entrer dans la marge et cela va instantanément le faire ressortir et rendre les destins évidents plus importants. Et en fait, le simple fait de ne pas s'adapter à la grille, que ce soit vertical ou horizontal, va lui donner de l'importance. Il est donc possible que nous puissions créer une hiérarchie visuelle pour certains textes simplement en ne le faisant pas fonctionner sur la grille verticale que nous avons créée. Maintenant, je veux que tu y ailles aussi. Voyez si vous pouvez trouver deux façons différentes d' identifier les titres de ce que j'ai essayé, vous ne le ferez jamais dans la vraie vie. C'est uniquement pour la pratique, mais voyons si nous pouvons créer une hiérarchie visuelle, une échelle de type sans toucher à la taille de la police. Et puis, comme dans la dernière vidéo, je vais créer une nouvelle vue de bureau. Je vais voir à quoi ressemblent ces éléments si je les place l'un sur l'autre, quoi ressemble-t-il si j'ai un titre puis un texte de paragraphe ? quoi ressemble-t-il si j'ai la deuxième rubrique, suivie de la troisième ligne, suivie d'un texte de paragraphe supplémentaire. Maintenant, je n'ai pas vraiment essayé ça. accord, mais je peux tout de suite voir que c'est beaucoup trop écrasé ici. Je voudrais ajouter une petite marge en haut de cette rubrique deux, par exemple. Et peut-être que cette ligne rouge qui traverse pourrait être un peu trop un séparateur pour avoir au milieu d'un article. Semblable à celui de la dernière vidéo. À un moment donné, nous allons vouloir modifier ce texte pour qu'il soit légèrement plus réaliste. Voyez simplement si vous pouvez créer une échelle de type, une hiérarchie visuelle qui fonctionne bien, mais sans avoir à toucher la taille du texte car il y a tellement d'autres choses que nous pouvons faire. Je ne suis pas sûr que je l'ai complètement atteint ici, mais j'ai un jeu avec ça. Ça ne va pas être superbe et ce ne sera pas parfait. Mais c'est vraiment un bon exercice pour amener votre cerveau à réfléchir à d'autres choses que la taille du texte avant passer à autre chose et de créer un système de type réel. 7. Concevoir des systèmes: Une grande différence entre la topographie imprimée et typographie Web réside souvent dans un magazine ou un livre. Le type sera écrit en premier. Le compositeur recevra tous les articles et tous les textes prêts à créer un système typographique. Alors que souvent avec une application Web ou un site Web, les articles et le contenu arriveront beaucoup plus tard. Lorsque nous avons affaire à la typographie Web, nous avons besoin d'un système beaucoup plus solide de la façon dont les légendes, les citations, l'apparence de toutes ces choses, parce que nous ne savons pas quel sera le contenu. Nous ne savons pas si le journal est un jour très long et que d' autres jours en auront un très court. Nous avons besoin d'une série de règles car en tant que concepteur ou même développeur frontal, nous ne serons pas disponibles lorsque chaque article sera publié. élaboration d'un système typographique solide est un élément très important de notre système de conception. Et je vais recommencer avec un peu d' inspiration, si vous venez à concevoir des systèmes repo.com, vous voyez des liens vers des centaines et des centaines de systèmes de conception différents. Au revoir, parfois de très grandes entreprises, Uber, IBM sont ici. Beaucoup d'Audi, beaucoup de grandes entreprises publient leurs directives de conception qui conçoivent des systèmes pour que tout le monde puisse les voir. Et nous pouvons examiner certains d'entre eux pour trouver une source d'inspiration pour créer notre propre système de design. Et une grande partie de cela, c'est que j'ai un système typographique. Je vais en regarder un maintenant parce que c'est l' un des plus célèbres. C'est Google, le système de conception de matériaux, de conception de Google. Et je ne fais que regarder la section typographie en ce moment. Maintenant, la principale chose qu'ils ont, c'est l'échelle de type. Nous en avons déjà parlé un peu et nous allons peaufiner dans cette section. Vous verrez qu'ils ont une échelle de tous les en-têtes tout le corps du texte et du texte du bas, ainsi que leur apparence. Nous avons en fait un petit tableau pratique qui montre qu'il existe deux types de corps de texte. C'est un bouton. Le bouton est en majuscules. Et il nous indique non seulement quelle police utiliser, où, qu'elle soit légère, régulière ou moyenne. Il indique la taille et les pixels de référence, si le bouton ou le sous-jacent sont en majuscules. Et en fait, nous indique le moindre espacement aussi parce que ces titres sont assez grands, donc nous allons vouloir le resserrer un peu. Alors que ce texte de bouton, bien que les boutons, nous avons des biens immobiliers limités, il est en majuscules. L'espacement des lettres ou le suivi y a été légèrement augmenté. Nous pouvons jeter un coup d'œil à cela, nous donner une idée de la façon dont Google utilise cela. Quelques choses intéressantes à prendre en compte sont tout d'abord, bien que ce graphique contient des pixels de référence, ils suggèrent d'utiliser davantage les unités de RAM à ce sujet plus tard. Mais si on descend un peu, ils ont quelques trucs sur la façon d'appliquer l'échelle de type. Il s'agit de règles qui sont écrites dans le système de conception afin que lorsque les gens l'utilisent, ils puissent voir exactement quelques idées sur la façon de l'utiliser. Maintenant, une chose que je trouve très intéressante avec conception des matériaux de Google est quand ils remplacent la police de caractères de titre. Vous avez peut-être remarqué qu'ils utilisaient Roboto pour les en-têtes et le corps du texte. Mais ils suggèrent, lors du remplacement de la police d'en-tête, d'utiliser exactement les mêmes exigences, la même taille de type. Et je suppose le même suivi, hauteur de ligne et tout le reste. Donc, malgré le fait que dans cette conception, ils ont une police de caractères très, très lourde. Et celui-là, ils ont ceci pour un script léger avec une hauteur X très élevée. Ils suggèrent d'utiliser exactement la même taille de type que vous utiliseriez avec Roboto. Maintenant, cependant, si je fais défiler un peu plus loin, cela suggère que pour des choses comme les sous-titres, cela donne un petit avertissement disant que vous ne voulez pas utiliser un pour exprimer une police de caractères pour les sous-titres. Ils le font. Essayez de restreindre les règles lorsque vous arrivez au corps et au texte du titre plus petit. Mais dans l'ensemble, c'est un très bon endroit pour s' inspirer de la façon dont un système de type va regarder les prochaines vidéos, certainement à de type va regarder les prochaines vidéos, la fin de cette section, nous allons disposer d'un système de type très solide pour nos propres applications sur lequel nous travaillons. Une des façons dont la typographie Web diffère massivement topographie imprimée est souvent la typographie Web nous devons définir le système de type bien avant que la plupart du contenu ne soit écrit. Un système de type Web doit avoir beaucoup plus de règles avant de compléter nos propres systèmes de type, cela vaut la peine d'y aller et de s'inspirer un peu en regardant comment Google type system fonctionne, ou Uber ou toute autre entreprise assez grande qui, selon vous, a un très bon design. 8. Figma: Dans cette vidéo et dans les deux prochaines vidéos, je vais vous montrer comment utiliser certaines des fonctionnalités avancées de type ouvert pour différents logiciels. Cette vidéo, je vais parler de Figma. Si vous n'utilisez pas Figma, passez à celle d'Adobe XD ou Sketch pour savoir comment activer ces fonctionnalités sur ces applications. Maintenant, dans Figma, j'ai écrit cette ligne de textes qui dit Figma, et elle est écrite en Roboto. Roboto possède des fonctionnalités de type ouvert que nous pouvons activer. Si je clique sur ces trois points ici. En fait, Figma est absolument la plus facile à travailler avec ce genre de choses parce que lorsque je clique sur ces trois points, il arrive avec ce menu très long avec tous les éléments disponibles pour cette police de caractères. Nous venons, pour un exemple rapide, pouvoir activer les ligatures. Et ce que cela va faire si vous regardez le F et le I de Figma, c'est juste les relier très bien là. Donc, bien que nous utilisions une police de caractères assez standard, Roboto, une police de caractères assez couramment utilisée. On peut allumer ce coup d'exploit et ça va lui donner un peu plus de caractère, ce qui est plutôt sympa pour nous. Et puis il y en a une autre appelée ligatures rares. vais examiner pourquoi passer à ces options ultérieurement et toutes les fonctionnalités disponibles pour différentes polices de caractères. Mais pour que vous sachiez que si vous êtes un utilisateur de Figma, c'est ainsi que vous accédez aux fonctionnalités de type ouvert d'une police de caractères. Si l'une des fonctionnalités est grisée comme celles affichées en bas de l'écran en ce moment. Cela signifie que la police de caractères spécifique, le texte spécifique actuellement sélectionné, ne dispose pas d'option pour cette fonction de type ouvert. Maintenant, si vous ne savez pas ce que signifie le type ouvert, ne vous inquiétez pas, nous en parlerons tout au long de cette section. 9. Croquis: Maintenant, si vous êtes un utilisateur d'esquisse, nous allons à un moment donné activer les fonctions de type ouvert pour certains textes d'esquisse. Je viens d'écrire le sketch 50 ici parce que c'est la version du sketch que j'utilise. Je n'ai pas payé de croquis depuis un moment. Vous pouvez donc voir les choses un peu différemment si vous avez une nouvelle version de sketch, j'ai écrit ce texte dans Playfair display. Maintenant, si je le sélectionne, je peux accéder aux polices View Show. Et ça va me montrer toutes les différentes polices disponibles en ce moment. Et si je clique sur le rouage tout en haut et que je sélectionne la typographie. Ce sont toutes les fonctionnalités de type ouvert disponibles pour l' affichage Playfair en ce moment. Si je déplace ce texte ici, maintenant si je sélectionne simplement ce texte, je voudrais peut-être changer ces chiffres minuscules parce qu'il est en ligne. texte en minuscules est également appelé figures de style ancien. Nous en parlerons plus tard. Mais si je sélectionne cela, vous verrez que cela transforme ces chiffres en minuscules. Maintenant, si vous voyez ici différentes fonctionnalités de typographie de celles que j'ai actuellement. C'est probablement parce que vous avez sélectionné une autre police de caractères. Si, par exemple, je sélectionne Roboto à la place et que vous verrez que j'ai différentes options disponibles. Maintenant, si vous ne comprenez pas ce que sont les nombres à l' ancienne, c'est très bien. Nous allons avoir une vidéo là-dessus sous peu. Mais maintenant, vous savez comment accéder à toutes les fonctions de type ouvert dans Sketch. Il suffit donc de visualiser, d'afficher polices, puis de cliquer sur le rouage en haut ici et de cliquer sur Topographie. Et ça va faire monter cette fenêtre. 10. Autre logiciel: J'ai passé un certain temps à essayer trouver comment activer les fonctionnalités de type ouvert dans Adobe XD ou InVision Studio. Et en toute honnêteté, si vous voulez le faire, vous devrez peut-être écrire un code qui peut devenir incroyablement compliqué. Mon opinion personnelle est que si vous n' utilisez pas actuellement Sketch ou Figma pour créer des conceptions d'interface utilisateur, c'est peut-être le moment idéal pour apprendre à utiliser Figma. Parce que pour être parfaitement honnête, Adobe XD et InVision Studio n'ont jamais vraiment réalisé leur rêve d'être un concurrent de sketch complet. Et je pense que leur manque de prise en charge des fonctionnalités de type ouvert n' est qu'une des nombreuses raisons pour fonctionnalités de type ouvert n' est qu'une des lesquelles ces logiciels ne peuvent peut-être pas encore être utilisés pour la conception de l' interface utilisateur. Bien sûr, cela ne sera peut-être pas possible selon l'endroit où vous travaillez, mais même si vous êtes obligé d'utiliser l'un de ces logiciels pour travailler, en apprendre un peu plus sur Figma ou si vous choisissez d' esquisser simplement pour pouvoir jouer avec les fonctionnalités de type ouvert dont nous parlerons tout au long de ce module. 11. Du style: Pour le reste de cette section, nous allons avoir quelques vidéos rapides sur la façon ajouter du style et de l' intérêt visuel pour aider votre hiérarchie visuelle à convertir votre échelle typographique en un système de type complet prêt à être utilisé dans une application ou un site Web. Dans cette première vidéo, je veux parler de ce que nous appelons couramment le style de type, qui est gras et italique. Il y a quelques règles très rapides que je veux énoncer sur l'une d'elles si vous avez un texte de titre très lourd, vous ne voulez pas le rendre audacieux. Si je change de cap pour Montserrat, Montserrat a un noir extra gras même s'ils l'appellent « Black ». Maintenant, rendre votre tête numéro un aussi épaisse est assez intense. Cela demande un peu trop d'attention. Et pour être honnête, cette police de caractères, Montserrat n'a pas le genre de détail pour travailler à cette échelle et que l'attente, elle ne s'adapte pas bien à cette taille, mais elle est aussi incroyablement dense et incroyablement dense percutant. Une chose que vous pourriez faire si vous deviez le faire, c'est que vous pourriez en fait baisser aussi légèrement la couleur. Si je fais de cela un noir légèrement plus clair, de façon réaliste, il va ressembler à peu près à la même couleur que le reste du texte parce qu'il est tellement plus dense qu'il paraîtra plus noir de toute façon. Parfois, si les gens ont une zone de texte beaucoup trop dense, ils peuvent réduire un peu cette couleur pour aider à la contrer. Mais vraiment, tu ne devrais pas faire ça. Bien sûr, nous pourrions avoir notre tête principale pour être dans un Montserrat noir, mais pas si grand que nous introduisons de nouveaux styles pour nous aider dans notre hiérarchie visuelle, nous n'avons pas à nous fier à la taille tellement de choses encore. Pour des raisons similaires, si j'ai eu cette rubrique 6 ou même une partie de mon texte plus petit. Et j'ai aussi créé ce monstre. Et je choisis Montserrat parce que je sais qu'il y a beaucoup de blancs. Si je rendais Montserrat plus léger, cela ne fonctionnera tout simplement pas sur cette rubrique 6, selon la qualité des moniteurs de quelqu'un, il pourrait même ne pas être en mesure de le voir correctement. Il se peut que le rendu ne soit pas correctement affiché à l'écran. Les lignes sont beaucoup trop fines. Bien sûr, lorsque nous nous assurons ne pas placer notre titre le plus gros les textes les plus audacieux et notre plus petit titre dans le texte le plus léger, cela ne fonctionnera pas. Vous devez savoir si vous êtes encore au stade de la conception, si vous avez une police de caractères qui ne possède pas fichier de polices en gras ou ne possède pas de fichier de police en italique. Certains navigateurs corrigeront cela pour vous. Il ne vous indiquera pas que vous n'avez pas de fichier de polices en italique. Il va en fait incliner les lettres, italiques ne sont pas des versions inclinées des mêmes lettres. Il s'agit d'un tout nouveau Original Cliff qui a le style d'un italique. Il ne s'agit pas seulement d'incliner la lettre, mais le navigateur le fera pour vous dans une fonctionnalité horrible que certains navigateurs disposent, où ils inclineront simplement le texte pour vous. Et parfois, certains navigateurs ont même été connus pour Bolden le texte pour vous sans avoir la police de caractères en gras disponible. Nous voulons être prudents si nous avons un poids assez lourd de texte à une taille assez importante que nous ne le rendons pas aussi assez audacieux, cela va être un peu trop. De même, si nous avons un texte assez petit, nous ne voulons pas le rendre trop fin. Si nous rendons certains textes un peu trop denses sur la page, nous pouvons ajuster aussi légèrement l'obscurité ou la clarté de la couleur . Et cela sera presque perceptible par nos utilisateurs car le texte plus dense apparaîtra de toute façon plus sombre. Donc, nous ne faisons que corriger cela. Et si nous utilisons du texte en italique ou une pondération spécifique du texte gras, nous voulons nous assurer que le fichier de police est correct, car il peut parfois passer inaperçu si le navigateur corrige le fait que nous ne le faisons pas. 12. Ligatures: Jetons un coup d'œil à certaines de ces fonctionnalités que nous venons voir comment activer dans Figma et dans l'esquisse. Je vais sélectionner ce titre de type II. Je l'ai changé en sable plus juste. J'utilise la peur pour la raison qu'il existe de nombreuses alternatives aux styles de type ici. Si je n'écris que FF, FF II même vous verrez comment le F se heurte aux points de l'œil. Maintenant, vous voudrez peut-être créer un style pour que f ne tombe pas dans le point de l'I ou vous voudrez peut-être qu'il apparaisse comme ça. C'est là que les ligatures sont utiles. Je viens de sélectionner FI et dans le panneau Détails de type, je vais activer les ligatures. Et vous verrez que les I et F Now se combinent en une seule lettre. Et en fait, cette police de caractères a également ce qu'on appelle des ligatures rares, où si je veux que le FF soit combiné ensemble, je peux également activer cela. Et cela se réunit maintenant en un seul glyphe de trois caractères. Maintenant, cela vaut la peine d'être examiné un peu lorsque vous sélectionnez votre police de caractères. Parce que ces changements subtils peuvent parfois rendre une police de caractères très différente. Et ensuite, il vous offre des options potentiellement plus intéressantes. Vous voudrez peut-être que les ligatures apparaissent uniquement pour certaines parties des textes , mais pas pour une autre. Ou vous ne voudrez peut-être pas les utiliser du tout, mais cela vaut la peine d'y jeter un coup d'œil. Maintenant, les sons de Farah ont en fait d'autres choses. Par exemple, ces symboles intéressants peuvent être activés et désactivés. Honnêtement, je ne sais pas ce que c'est le cas. Ou peut-être, par exemple, j'ai besoin d'utiliser le raccourci pour le numéro comme non. Si je l' allume, je peux écrire N O point et ça va automatiquement convertir en ce symbole ici. Si nous étions en train de créer une application ou un site Web qui contient beaucoup de maths en cours nous voudrions probablement prendre note qu'il existe certains symboles mathématiques que certaines polices vont permettre. pour allumer ou éteindre. Nous avons également des variations stylistiques ici, partout où une forme très traditionnelle ici. Mais si nous le voulons, nous pouvons rendre cela plus simple comme celui-ci avec le G. Vous pouvez voir comment il y a une plus simple comme celui-ci avec le G. Vous pouvez voir comment il y a légère modification est que vous pouvez apporter à une police de caractères pour créer plus d'intérêt, pour pourrait créer une certaine variation. Mais certainement cela, certains d'entre eux seront des symboles mathématiques dont vous pourriez avoir besoin pour l'application que vous créez. Maintenant, si vous utilisez un logiciel et que vous utilisez une police de caractères et que vous êtes presque sûr qu'il devrait avoir ces options, mais vous ne les voyez pas. Il convient de noter que cela dépend du type de fichier de police que vous possédez. Et nous en parlerons un peu plus au stade de la mise en œuvre. Mais ces entités sont parfois appelées entités de type ouvert. Le type de fichier de type ouvert vous permet de les avoir, tout comme le type de fichier W OFF. Si vous utilisez un ancien fichier de polices de style, il se peut que les ligatures ne soient pas nécessairement disponibles pour cette police de caractères. Et bien sûr, cela signifie que nous voulons nous assurer que nous chargeons également le bon fichier de police sur nos sites Web. Il s'agit de ligatures et alternatives stylistiques, quelle que soit la police de caractères , voyez s'il existe des glyphes supplémentaires pour combiner certaines lettres ou des alternatives pour certaines lettres qui pourraient mieux fonctionner avec les dessins que vous allez créer. condition que nous utilisions une police de type ouvert et un fichier OTF ou un fichier Web ouvert au format de police et un fichier W0 OFF, nous avons accès aux fonctionnalités de type ouvert telles que les ligatures et les alternatives stylistiques. Il vaut la peine de jeter un coup d'œil à ce qui est disponible, car certains d'entre eux vont aider notre police à transmettre le message que nous voulons transmettre. Et parfois, il y aura des symboles que nous devons utiliser pour notre texte. 13. Petites capsules: Parfois, vous voyez cela dans livres écrits et parfois vous pouvez le voir sur des sites Web, mais commencer un paragraphe ou une section de texte avec quelques mots de petites majuscules peut nous aider à entrer et demie, un un peu d'intérêt visuel au début du texte. Je vais donc changer cette police de caractères. C'est actuellement plus tard, et je vais le changer en allégorie ou c' est parce que vous remarquerez que la police de caractères est maintenant complètement modifiée. Et je vais simplement sélectionner les trois premiers mots. Et ça va encore une fois, rappelez-vous que cela fonctionnera différemment dans l'esquisse, mais je vais cliquer ici. Et je vais venir ici et il y a ici un style pour les petites casquettes. Ce que nous avons maintenant, c'est que nous avons ce petit peu génial où le paragraphe commence par trois mots en petites majuscules. Maintenant, il y a plusieurs raisons pour lesquelles nous pouvons choisir d'avoir petits camps au début ou au milieu d'une phrase, ou peut-être pour nos rubriques. Maintenant, si nous voulions utiliser deux polices de caractères dans le même paragraphe et avoir l'autre police de caractères de petites majuscules en ligne avec les lettres minuscules de cette autre police de caractères. Nous allons essayer d' aligner les petites casquettes avec la hauteur X. On dirait que nous sommes déjà assez proches ici. Nous voudrions peut-être augmenter une petite quantité de suivi pour aider à différencier ces éléments. Je vais juste placer deux espaces pour l'instant. Juste pour nous assurer que nous les séparons légèrement. Nous pourrions utiliser de petites majuscules pour l' un des titres ou quelque chose comme ça, mais il est plus couramment utilisé comme un petit début d'un paragraphe de texte. Nous pourrions potentiellement utiliser une police de caractères différente pour les petites majuscules si celle que nous utilisons n'a pas de petites majuscules, par exemple, lorsque nous voulons aligner la hauteur X avec le haut des petites majuscules. Et comme il s'agit de plafonds, nous voudrions peut-être augmenter légèrement le suivi et avoir peut-être un peu plus d'espace à la fin de la section des petites majuscules. 14. Espacement des lettres: Disons que l'espacement, l' espacement des caractères et le suivi sont trois noms différents pour essentiellement la même chose. qui est si vous cochez cela, la quantité d'espace entre chaque lettre individuelle. Si j'ai un gros en-tête en haut de la page, c'est peut-être la raison la plus couramment utilisée pour le suivi. Si j'ai un titre surdimensionné, un titre assez important, je vais réduire le suivi légèrement en dessous de 0. Je vais donc prendre une partie de l'espace excédentaire entre les lettres. Les différentes raisons pour lesquelles vous pouvez le faire sur une rubrique surdimensionnée. La première est qu'elle est juste plus grande, donc il y a plus d'espace disponible pour l'écraser. Bien sûr, vous disposez probablement d'un espace limité sur votre écran, en particulier sur mobile. Il peut donc y avoir plusieurs raisons pour lesquelles vous devez le réduire. Donc, tout l'écran n'est pas pris en charge par un titre. Mais la plupart des autres sites Web suppriment également un certain suivi des grands titres surdimensionnés. Cela peut donc paraître un peu bizarre maintenant quand les gens voient de grosses rubriques qui n'ont pas de suivi réduit. De manière générale, pour notre rubrique principale, nous allons réduire légèrement le suivi. Et puis, pour deux et la troisième position potentiellement, vous allez prendre un peu moins de suivi à chaque fois. vous descendez plus loin, plus vous aurez d'espace entre ces lettres. Maintenant, si à un moment donné vous avez un titre qui est dans toutes les majuscules ou même assez audacieux, assez lourd, alors il va commencer à paraître un peu trop encombré. Vous allez donc vouloir un suivi supplémentaire autour de ces lettres. Encore une fois, nous pouvons le faire en brouillant la page ou en louchant nos yeux et en voyant si elle a une couleur grise raisonnablement cohérente. Nous ne voulons pas de gros blocs denses de couleur foncée. Le suivi peut donc nous aider à nous assurer que nous les supprimons. En ce qui concerne l'interface utilisateur, les boutons de texte, les menus et autres choses de ce genre, il y a probablement une raison d' étendre le suivi et parfois de le réduire. Vous avez peut-être choisi toutes les majuscules du texte de votre interface utilisateur. Il peut s'agir d'une vie assez petite ou assez petite, selon ce que vous avez cherché. S'il est assez petit et qu'il s'agit de bouchons, il va falloir les espacer un peu. Vous souhaitez que les éléments de votre interface utilisateur se démarquent et soient faciles à identifier. Mais à l'inverse, c'est peut-être pour ces raisons vous avez rendu le texte un peu plus grand comme moi. Peut-être que vous faites toutes les majuscules et que vous ne pourrez y insérer que tant d'éléments de menu à l'écran. Vous voudrez donc peut-être réduire le suivi et écraser un peu ces éléments d'interface utilisateur. Le suivi est donc un très bon moyen de réduire la densité autour de la page et de réduire l'espace que certains textes moins denses peuvent occuper, mais il peut également être utilisé pour la hiérarchie visuelle. Par exemple, j'ai ici mon texte sous-jacent, qui peut être d'une couleur différente de certains textes. Nous examinerons quelques-unes des autres options plus tard. Mais peut-être que je veux que ce texte se démarque et qu' il soit très différent. Alors peut-être que je vais juste mettre une sorte de suivi ridicule. Et cela va créer une hiérarchie plus visuelle car elle est instantanément très différente des autres éléments. En plus d'avoir besoin d'un suivi pour contrôler la densité sur la page et notre utilisation de l'espace. Il peut également nous aider à établir une hiérarchie visuelle plus intéressante. Nous pouvons utiliser l'espacement des lettres, l'espacement des caractères ou le suivi de tout ce que vous voulez appeler pour augmenter ou réduire la densité de différents blocs de texte. Mais nous pouvons également l'utiliser pour nous aider à établir notre hiérarchie visuelle et à créer des éléments textuels présentant un intérêt visuel un peu plus important. 15. Crénage: Nous avons simplement examiné l'espacement des lettres ou le suivi de l'espace qu'il y a entre chaque lettre. Mais le crénage est la différence entre l'espace de certaines lettres. Par exemple, nous ne voulons pas que cela soit trop proche parce que ce sont des lettres assez grosses, mais quelque chose comme ceci e et ceci peut se rapprocher légèrement parce qu'ils ont ce bord arrondi et il y a moins de densité du personnage au bord du glyphe pour ces raisons, lorsque nous déterminons combien d'espace il y a entre chaque lettre. ne nous préoccupe pas. Nous ne sommes pas préoccupés par l'écart. Nous sommes préoccupés par la région. Cela nous préoccupe. Laissez-moi simplement rendre le texte blanc pour que vous puissiez le voir plus facilement. Ces deux zones jaunes ont-elles à peu près la même surface ? La forme à gauche semble un peu plus grande, mais c'est probablement plus parce que j'ai dessiné lignes droites sur le bord du E et du A. On peut voir les espaces entre ces lettres. La zone entre eux est à peu près la même. Eh bien, si vous avez la chance de travailler avec une police de caractères avec des fonctions de police ouvertes. Nous pouvons revenir ici et nous pouvons activer des paires de crénage. En fait, il est déjà allumé pour cela. Mais si je l'éteins, vous pouvez voir qu' en fait, cela ajoute encore plus d'espace entre ce H et E. Certaines lettres sont assez difficiles pour le logiciel ou le navigateur pour identifier la taille de cet espace. être. Ce qui se passe, c'est lorsque les utilisateurs créent la police de caractères, lorsqu'ils créent les fichiers de polices, ils ajoutent dans une table de crénage afin de pouvoir identifier les écarts entre des données spécifiques. des lettres problématiques quand elles vont ensemble. Lorsque vous pensez à toutes les combinaisons de toutes les différentes lettres et vérifiez qu'elles ont l'air bien. Cela peut vous aider à comprendre pourquoi les polices de caractères prennent littéralement des années à créer. Il peut également vous aider à comprendre certaines des différences entre les plus chères et celles que les gens donnent gratuitement. Les problèmes entre une majuscule et une lettre minuscule posent toujours problème. Ainsi, le fichier de police contient des données de crénage pour nous dire que ce E devrait être plus proche que celui-ci h. Maintenant, votre logiciel ou votre navigateur essaie parfois de le comprendre lui-même. Il effectue des calculs spéciaux pour déterminer comment cela devrait se produire dans les lettres, lesquelles devraient être les plus proches et les plus éloignées ? En fait, le logiciel que j'utilise actuellement pour le montage vidéo complet le fait. Donc, si vous regardez les écrans de titre de ces conférences, vous remarquerez peut-être parfois un crénage obscur. Beaucoup de logiciels ne considèrent pas que cela est trop important, et beaucoup de navigateurs ne le font toujours pas non plus. Et pourtant, il est en fait très important lorsque vous réfléchissez à la quantité de votre site Web taxée et à la façon dont vous avez besoin pour qu'il soit confortable, facile à lire, à lire et non. paraissent bizarres pour vos utilisateurs. Le crénage est un élément extrêmement important de la conception Web, mais vous ne pouvez pas vraiment le faire correctement. La plupart des navigateurs ne vont pas corriger cela, et la plupart des polices de caractères ne vont pas en faire trop non plus. Mais c'est de mieux en mieux. Et nous examinerons cela lorsque nous examinerons la mise en œuvre. Mais il y a quelques bibliothèques JavaScript que nous pouvons utiliser qui nous feront un peu de crénage optique et détermineront certains de ces chiffres. Si nous avons une police de caractères qui n'a pas de bonne table de crénage. Celui-ci, j'utilise une police Google gratuite appelée Laura. Je dirais que ça a l'air plutôt bien. Et vous allez devoir entraîner votre regard là-dessus. Encore une fois, j'ai trouvé un jeu vraiment cool appelé méthode de type, où vous devez essayer de Kern les lettres vous-même, donc il vous donne les lettres à l'écran. Je dois essayer de déterminer si l'espace entre chacune de ces lettres est égal, non pas d'un point à l'autre, mais de la zone réelle entre elles. Je pense donc qu'il faut que V soit un peu plus proche de ça. Lorsque vous en êtes satisfait, vous cliquez sur Comparer. Et vous verrez que j' ai vraiment mal fait. J'ai été concepteur web pendant la majeure partie de ma carrière. Et le crénage est quelque chose qui n'a pas vraiment été possible sur les sites Web tout récemment. Je n'ai jamais été bon pour le crénage. Mais suivez ce que je dis, pas ce que je fais et comparez et essayez-le parce que c'est maintenant possible. Certaines polices de caractères ont désormais ces tables de crénage dans les entités de type ouvert. Il existe certaines fonctionnalités JavaScript pour nous aider manière réaliste lorsque nous y réfléchissons dans nos conceptions. Tout ce que nous devons savoir, c'est qu'il existe d' énormes limites avec les polices de caractères et les navigateurs. Et nous voulons nous assurer que nous ne sommes quelques-uns des problèmes de crénage que nous pourrions voir. crénage est l'espace entre des lettres spécifiques. Nous nous adaptons donc aux lettres qui apparaissent plus proches parce qu'elles ont poids plus dense ou qu'elles ont des lignes droites l'une à côté de l'autre. Une police de caractères de bonne qualité comporte une table de crénage intégrée pour s' adapter à certaines des lettres problématiques. Tant que nous avons un fichier OTF ou W OFF, nous pouvons activer ces paires de crénage. Si ce n'est pas le cas, nous voudrions peut-être entraîner légèrement nos yeux à repérer davantage les problèmes de crénage, car nous pouvons maintenant utiliser JavaScript pour résoudre certains problèmes de crénage. 16. Alignement des paragraphes: Nous avons raillé une petite partie de notre texte ici l'aide de notre système de conception actuel, j'ai raillé une petite section de ce à quoi ressembleraient nos textes avec deux titres et quelques paragraphes. Une chose avec les paragraphes en ligne qui sont généralement assez courts par rapport à deux paragraphes d'un livre, les gens ont beaucoup moins de patients une fois arrivés à leur ordinateur. Les cerveaux se sont adaptés depuis que nous avons commencé à utiliser des ordinateurs. Et si nous voyons deux gros blocs de texte trop intimidants, nous avons peur et nous arrêtons de le lire. Nous gardons généralement nos paragraphes assez courts, mais aussi avec le texte imprimé, vous avez normalement un petit retrait au début du paragraphe comme celui-ci. Un petit indicateur indique que le paragraphe commence là. On ne voit jamais vraiment ça en ligne. Ce n'est pas comme ça que nous faisons. Ce que nous avons tendance à faire, c'est de placer un peu d' espace autour des paragraphes. Nous l'avons déjà fait avec notre marge, mais il convient de noter que cela concerne davantage la façon dont nous lisons en ligne. En général, un paragraphe de texte sur une application Web ou un site Web est écrit telle manière qu'il puisse être lu hors contexte parce que les gens s'écroulent généralement, peuvent trouver une rubrique qui Rafael ressemble à ce qu'ils voulaient relire et parfois sauter un paragraphe. Les paragraphes sont normalement écrits pour être légèrement plus autonomes qu'ils ne le feraient dans un livre. Ils sont moins susceptibles de suivre ce qui a été écrit auparavant, sont plus susceptibles d'être un bloc de texte autonome en soi. Si vous écriviez du texte et que vous vouliez qu'il soit lu dans un style similaire à celui d'un livre, cela pourrait être un indicateur visuel très utile pour la moitié retraits plutôt que les marges entre les paragraphes. Une autre chose que vous voyez très rarement en ligne est les textes qui justifient le couloir de gauche à droite, vous avez toujours ce chiffon à l'extrême droite. Il existe des règles CSS pour que les textes s'étendent complètement et augmentent simplement l' espacement afin que toutes les lignes de texte se terminent dans le même espace. Malheureusement, ces règles CSS ne sont pas prises en charge par presque aucun navigateur. Et je ne sais pas vraiment pourquoi vous le feriez. De toute façon. Il crée des rivières d' espace horribles au milieu de vos paragraphes. Ça a l'air moche et ça n'a pas vraiment un très grand avantage. Une autre chose que vous ne verriez généralement jamais dans l'impression est d'avoir un mot orphelin au bas comme celui-ci. Normalement, nous pousserions intentionnellement quelques mots vers le bas pour créer un chiffon plus agréable . le côté droit ici. Et pour nous assurer que nous avons au moins deux ou trois mots sur la nouvelle ligne. Encore une fois, ces choses ne sont pas nécessairement si possibles en ligne, donc nous acceptons simplement que nous ayons à y faire face. Il y a encore une fois des bibliothèques JavaScript, ou nous pourrions écrire du JavaScript pour prendre soin des mots orphelins et en tenir compte. Mais c'est un très mauvais compromis quand il ralentit votre site ou quel genre de choses vous devez décider à quel point c'est important pour vous. que vous verriez très rarement quelqu'un faire est aligner ou de justifier de manière centralisée les textes comme celui-ci. Pour quelques lignes, ce n'est pas grave, mais rappelez-vous comment votre œil doit apprendre à revenir au début de la ligne suivante. Et lorsque cela a commencé, il devient plus difficile des blocs de textes plus volumineux ne justifient normalement le texte de manière centralisée que s'il s'agit d'un texte très court . L'une des raisons pour lesquelles vous pouvez essentiellement justifier un texte de temps à autre est qu'il semble plus autoritaire. Cela rappelle les dépliants à l'ancienne et d'autres éléments graphiques dont le texte est centralement aligné serait normalement quelque chose de tout à fait autoritaire. Nous avons regardé un site Web d'information plus tôt et il avait un logo centralement aligné au milieu. Cela rend le journal un peu plus autoritaire. Pour nos textes de paragraphes, nous n'allons presque jamais le justifier de manière centralisée. Lorsque nous présentons des paragraphes de textes, nous voulons savoir que les gens ne lisent pas en ligne de la même manière qu' ils lisent dans un livre. Nous n'avons donc pas les mêmes règles. Nous ajoutons des marges entre les paragraphes et nous ne mettons pas en retrait parce qu'ils ne suivent pas autant les uns des autres. Si nous essayons de faire une déclaration et d'encourager les gens à lire de manière linéaire. Nous voudrions peut-être être davantage influencés par la conception de l'impression. La plupart du temps, nous ne nous inquiétons pas de choses comme des mots orphelins à la fin d'un paragraphe ou des choses comme le chiffon sur le côté droit d' un paragraphe est beaucoup trop difficile pour nous de mettre des règles notre système pour veiller à ce que cela ne se produise pas. Et nous ne justifions centralement un morceau de texte que s' il est très court, je cite ou peut-être le titre principal, il peut paraître un peu plus autoritaire, paraître plus important quand nous le faisons. Et cela le distingue certainement. 17. Numbers et données: Un point très important lors sélection d'une police de caractères et de la sélection des styles et de leur utilisation via notre système typographique est celui des nombres et des données. Parce qu'il y a toutes sortes de choses différentes à prendre en compte dans nos chiffres et nos données. Nous avons déjà beaucoup parlé de la façon dont avec votre police de caractères, vous voulez vous assurer d'avoir accès à tous les symboles mathématiques que vous aimez. Certaines polices contiennent des glyphes pour les fractions ou pour certains symboles mathématiques que d'autres peuvent ne pas le faire. Vous n'avez pas besoin de lutter ou de trouver des substituts. Vous devez trouver une police de caractères contenant tous les glyphes dont vous avez besoin. Maintenant, une chose que j'ai évoquée plus tôt, c'est que si je mets des chiffres au milieu de ce texte, sont des chiffres majuscules. Ceux-ci ont probablement l'air correct dans le titre, même s'il s'agit d'un en-tête minuscule, mais au milieu d'un paragraphe qui est assez étrange avoir ces gros chiffres, c'est assez distrayant même, Et c'est juste un peu bizarre. Ce que nous voulons faire ici, c'est pour nos paragraphes, nous voulons activer ce que l'on appelle parfois des nombres anciens, mais vous pouvez considérer comme des nombres minuscules. Vous pouvez considérer que les majuscules sont des numéros de doublure. Si je change cette option, vous pouvez maintenant voir que les chiffres au milieu de ce paragraphe sur nos chiffres minuscules, ils sont maintenant confortablement placés sur cette ligne de base. Ils doivent nous envoyer exactement la même chose que certaines lettres minuscules. Bien sûr, si vous avez affaire à des personnes chinoises, japonaises, coréennes, où il n'y a pas de concept de nombres minuscules. Ce n'est pas quelque chose dont vous allez devoir vous inquiéter. Il y a ensuite la question de savoir quand les données se trouvent dans une table. Il s'agit maintenant d'un outil que nous n'avons pas encore examiné d'outil, mais bien sûr, vos données se trouvent parfois dans une table. Maintenant, la règle la plus courante que vous avez probablement déjà entendue est que, bien que vous ayez laissé aligner toutes les colonnes de texte, vous devez écrire une ligne. Les colonnes numériques. Normalement, vous auriez quelque chose comme ça. Et une partie de la raison est qu'il est légèrement plus facile de voir ce qui est juste de ce point décimal. Ce chiffre supérieur que j'ai donné ici, 1,27 est un peu plus facile à comparer avec le nombre ci-dessous lorsque les virgules sont toutes alignées. Mais au fur et à mesure que ces chiffres augmentent et que vous pouvez déjà voir quelques différences en ayant un ici plutôt qu'un 0, ces points vont manquer une ligne. Idéalement, ce que vous voudriez, c'est pouvoir aligner la police de caractères sur la virgule plutôt que sur la gauche ou la droite. Eh bien, ce serait assez difficile, mais nous avons un système pour contourner ce problème. Et c'est similaire à cette police de caractères monoespacée, nous avons parlé de police monoespacée est légèrement plus tôt. C'est lorsque chaque caractère la même largeur que les nombres, nous n'utilisons généralement pas le mot monospace, nous utilisons normalement le mot tabula. Mais si je sélectionne tous ces éléments, il y a une autre option pour avoir un monospace ou des numéros Tabula qui sont également majuscules et doublés. Si je clique dessus, maintenant, soit le nombre de nombres que j'arrive à gauche ici et quels que soient ces chiffres, ces points décimaux vont tous s'aligner sur cette police de caractères plus tard, n' est pas le cas semblent faire trop de différence. Sur cette note. Je voudrais simplement souligner que plus tard, il y a de très bonnes options pour les chiffres et qu' y a de très bonnes options pour les chiffres il fonctionne assez bien dans un tableau. Il s'agit donc d'une police de caractères très agréable à utiliser pour les données de table. Il y a donc vraiment trois choses à penser avec les chiffres et les données. Et la première consiste à s'assurer que la police de caractères que vous utilisez contient tous les symboles mathématiques dont vous pourriez avoir besoin. Si vous allez utiliser beaucoup de fractions, assurez-vous que la police contient des glyphes pour les fractions. Ensuite, si vous savez que vous allez utiliser beaucoup de chiffres au milieu des paragraphes. Assurez-vous qu'il existe une option pour les nombres minuscules ou anciens. Et si vous allez utiliser beaucoup de nombres dans les tables, assurez-vous qu'il existe une version monospace des nombres, parfois appelée version tabulaire des nombres. 18. Systèmes typographiques: cette étape, nous disposons de nombreuses informations sur la façon de prendre une bonne décision, choisir une police plutôt qu'une autre pour notre marque et pour le projet que nous créons avec cette marque, nous avons appris beaucoup de choses sur l'obtention des tailles et des longueurs de ligne, etc., correctes pour une bonne lisibilité. Ensuite, nous avons examiné comment examiner les différentes tailles de titres et créer une bonne hiérarchie visuelle en utilisant d'autres techniques autres que la taille, le meilleur moyen pour nous d'apporter tous ensemble, ces compétences consistent à créer un système de conception typographique que nous utiliserions dans toute une application lorsque nous la créons. Maintenant, je suis allé de l'avant et j'en ai créé trois à titre d'exemple, et je vais vous en parler à travers eux. Maintenant. Dans ces trois exemples, j'ai pris une page Wikipédia qui n'est pas complètement aléatoire. Je voulais en obtenir quelques uns assez différents, mais presque complètement au hasard. Et j'ai essayé d' utiliser mon nouveau système typographique. Il se peut que nous ne soyons pas dans une position où nous disposons d'une mise en page pour la page ou que nous connaissions exactement le contenu. Mais lorsque nous commençons à essayer de créer notre système, nous voulons réfléchir aux possibilités et nous voulons utiliser du contenu réel. Nous ne voulons pas utiliser de texte réservé. Cela va paraître différent et nous ne comprendrons pas complètement comment la chose finie fonctionnera. Bien sûr, alors que nous commençons à créer une application, alors que nous commençons à concevoir des pages et des éléments différents, nous allons réaliser qu' alors que nous commençons à concevoir pages et des éléments différents, il existe différents styles typographiques qui nous devons changer légèrement. Mais tant que nous disposons de notre système de conception, nous avons une source unique de vérité que nous pouvons partager avec tous nos auteurs, développeurs et autres concepteurs. Le premier exemple est que j'ai pris celui-ci au sujet de la procréation d'un yacht, et j'ai choisi, vous l'avez peut-être remarqué, j'ai également pris des décisions initiales sur les couleurs et les choses qui ne sont pas nécessairement ce dont nous parlons dans ce cours, mais cela vaut la peine de le jeter pendant que vous essayez de créer ce système de conception, car il vous donne une meilleure idée tailles et des choix de polices de caractères. Si nous regardons le système, vous verrez que je ne me suis pas arrêté avec le nom de 1 à la tête six. Je suis allé de l'avant et je leur ai donné des noms en fonction de la façon dont ils seraient réellement utilisés tout au long de l'application. Et nous n'avons pas de super gros en-tête d'affichage sur les cheveux qui pourrait apparaître sur la page d'accueil ou quelque chose comme ça parce qu' il n'est tout simplement pas utilisé dans la page. J'ai ensuite créé pour ce système de type. Si j'avais un titre d' affichage, c'est le style que j'ai utilisé, avec les ligatures et tout. Mais je ne l'ai pas utilisé dans la conception, donc je viens de le retirer du système typographique car s'il n'est pas utilisé, je ne veux pas qu'il soit dans le système. Tout ce que nous avons sur ce bloc à gauche a toutes les tailles correctes avec les hauteurs de ligne, les longueurs de ligne et les marges qui les entourent. Comment je pense qu'ils vont bien fonctionner sur une page. Et puis j'ai créé une page. En réalité, vous allez en créer plusieurs et voir comment cela pourrait fonctionner dans différentes parties de votre application ou de votre site Web pour vous assurer que mon système typographique est quelque chose que je suis heureux de maintenant parce que c'est une sorte de chose exotique et traditionnelle, d' affréter un yacht. Il a une sensation très, très traditionnelle de classe supérieure. J'ai opté pour une police de caractères de style Baskerville, qui, comme nous le savons, est une serif traditionnelle. Et je pense que cela correspond très bien à la façon dont je crois que l'image de marque serait de quatre pages sur l'affrètement d'un yacht. Si nous regardons mon deuxième exemple, je suis parti pour Blockchain. J'ai pris la page Wikipédia pour la blockchain et j'ai choisi quelque chose qui ressemble un peu plus technique aux cheveux, bien sûr, des couleurs légèrement plus techniques. Cette police de caractères ici est Mary Weather, et elle possède un Serif un peu plus moderne. Un contraste intéressant dans la topographie et quelques formes assez intéressantes sans être vraiment dehors et bizarres. Il a l'air très moderne, sans être trop stylistique. Il a l'air très moderne. Et je pense que pour une technologie de pointe, c'est un excellent choix. Et vous pouvez voir que j'ai ajouté quelques couches dans ma hiérarchie typographique que j'ai encore une fois essayé de mettre en page sur une page, ma page initiale et de voir à quel point la hauteur de ligne semble baisser. Il a peut-être un aspect un peu plus officiel, le genre de chose qu'un journal pourrait ressembler parce qu' il est probablement assez informatif et parle de technologies de pointe et peut-être d'essayer pour convaincre les gens de nouvelles preuves scientifiques sur la qualité de la blockchain ou quelque chose du genre. Je l'ai donc présenté un peu plus comme un journal, mais avec quelques éléments qui font qu'il est un peu différent de montrer qu'il s' agit d'une technologie de pointe. Et puis j'ai fini par chercher quelque chose avec un peu de données à ce sujet. Je suis allé voir cette page sur le PIB de Wikipédia. Et pour cela, je suis centralement aligné sur les rubriques, comme je l'ai déjà dit, cela donne toujours une impression plus autoritaire lorsque nous parlons de données que le texte centralement aligné est peut-être une bonne idée. Les en-têtes et le corps du texte sont tous dans Roboto. Maintenant, roboto est un très bon choix pour ce style de liste de pages, car il possède tous les styles de chiffres dont nous avons besoin pour nous assurer qu' il est correctement aligné afin que nous puissions lire notre chiffres correctement. Mais une des raisons pour lesquelles je pense que Roboto est vraiment bon pour ce style de page c'est qu'il s'agit d'une page qui sera lue par des analystes et qui aiment les styles absurdes. Sans vraiment admettre cela au fond, ils sont tout aussi influencés par le style visuel que tout le monde. Je pense que Roboto a une sorte d' esthétique sans absurdité, tout en étant assez sympathique, a des bords arrondis et des choses assez agréables. Je crois donc que je décrirais ces polices de caractères n'ont pas une personnalité très accueillante, mais c'est assez subtil pour que les analystes de données et les personnes qui ne croient pas qu'il y ait des émotions ou qu' il y ait des émotions. les affecte. D'autres personnes qui vont peut-être laisser glisser ce petit peu de style. Il est bien sûr assez ironique de suggérer que certaines personnes seraient tout à fait logiques. Croyez simplement qu'ils veulent lire un article juste pour obtenir les données lorsque vous parlez de quelque chose comme comparaison des chiffres du PIB entre les pays, ce qui est presque totalement illogique parce que la façon nous mesurons maintenant que le PIB est ridicule. Mais certaines personnes aiment simplement voir les chiffres et ont une foi illimitée dans les chiffres. Et je crois comprendre que ce genre de personnes vont vouloir cette police de caractères plus simple, car roboto a des caractères assez bien espacés avec un bon x- hauteur et grands compteurs comme par exemple, dans le système d'exploitation et autres, j'ai réussi à le rendre un peu plus petit tout en étant assez lisible. Si nous venons de côté ici, vous pouvez voir seul le système typographique. Maintenant, lorsque vous utilisez, j'utilise des cheveux Figma, comme je l'ai déjà dit, j' utilise Figma et lorsque vous les visionnez sur la page, vous voulez vous souvenir que pour définir la vue à 100% lorsque vous êtes décider si vous pensez que c'est une bonne taille et lisible en ce moment sur mon écran. Et cela peut être différent en fonction de la taille de votre écran et de la façon dont les dimensions vidéo sont différentes. Mais en ce moment sur mon écran, je regarde ça à 100%. C'est donc la taille exacte qui apparaîtrait à l' écran si nous créions ce design exactement de la même manière. Mais cela va changer un peu lorsque vous souhaitez créer votre système typographique réactif. Juste pour ce système, j'ai créé la version mobile. Il s'agit d'une page mobile de la même page que celle de la version mobile créée. Et c'est le système mobile. Il s'agit de toutes les marges et tailles de types pour mobile. Maintenant, une chose que vous remarquerez est que si vous cherchez, si vos dimensions ressemblent à mon écran, cela semble trop petit pour être lu. Mais c'est bien sûr, parce que vous ne tenez pas votre téléphone portable si loin de votre visage. Lorsque nous utilisons un logiciel de conception et que nous voulons vraiment nous assurer de remettre nos créations à nos développeurs ou de les partager avec le reste de notre équipe dans les tailles qui seront réellement sur le écran et les dimensions physiques réelles. C'est ainsi que nous voudrions créer notre système de type et nos conceptions. Mais lorsque nous le visualisons sur notre écran de bureau, si nous sommes assis sur un ordinateur portable ou un ordinateur de bureau, nous voulons nous assurer, lorsque nous examinons la version mobile que nous effectuons un zoom, et qui entrent 200 pour cent à compensez le fait que l'écran est tellement plus éloigné de notre visage que nous ne le tiendrions normalement sur notre téléphone portable. Maintenant, comme je l'ai dit, j' utilise Figma et il est intéressant de noter que si vous utilisez également Figma, il existe une application mobile appelée miroir Figma, où une fois que vous vous connectez , quel soit le plan de travail que vous avez sélectionné sur l'application de bureau sera mis en miroir sur votre téléphone mobile. Vous pouvez regarder confortablement votre téléphone et voir exactement à quoi ressemblera ce design sur un téléphone mobile, ce qui est une bien meilleure façon d'évaluer si nous pensons que les tailles de type sont bonnes puis il suffit de zoomer sur 200 %. J'ai déjà vu d'autres concepteurs faire des choses comme faire simplement le tableau d'art pour la vue mobile deux fois plus de taille sur leur bureau afin qu' ils regardent tout deux fois la taille pour obtenir une idée de ce que ça va ressembler en comparaison. Je pense que nous voulons toujours faire face à la taille physique réelle que tout sera lorsque nous traitons fichiers de conception, de sorte que c'est moins déroutant lorsque nous le partageons avec le reste de notre équipe. Il suffit de quelques pointeurs indiquant que lorsque vous vérifiez la vue mobile, vous jouez avec vos tailles de types. N'oubliez pas de zoomer ou de simplement afficher le design directement sur un téléphone, car il ne sera pas identique à celui d'une vue de bureau. Le grand défi, c'est le grand défi de conception, c'est que je veux que vous créiez un système de conception. Maintenant, utilisez l'application que vous allez créer, qu'il s'agisse d'une application Web ou d'un blog ou d'un magazine. Et réfléchissez à tout ce que nous avons déjà appris sur le choix de la police de caractères. Nous y étions déjà allés. Obtenir les tailles de types correctes, hauteurs de lignes et toutes ces choses liées à la lisibilité. Et maintenant, commencez à réfléchir à la hiérarchie visuelle et toutes les choses que nous pouvons modifier pour obtenir une belle hiérarchie visuelle. Que ce soit en couleur, qu'il s'agisse de petites majuscules, qu'il s'agisse d'utiliser plusieurs polices de caractères, créer des marges plus grandes autour choses pour décider ce qui crée une belle hiérarchie visuelle tout en travaillant avec le contenu que vous avez et l'image de marque que vous avez. Encore une fois, plus vous terminez ce défi, mieux c'est. Alors pourquoi ne pas faire ce que j'ai fait et simplement obtenir une page Wikipédia et voir si une page Wikipédia de secours, vous pouvez trouver des polices de caractères qui, selon vous , communiquent le même message. Découvrez comment rendre ces polices de caractères de bonne taille lisibles, puis créez une hiérarchie visuelle pour cette page Wikipédia. Plus vous faites cela, mieux vous allez créer des systèmes typographiques. 19. Résumé: style et la mise en forme de notre texte présentent de nombreux avantages. Nous pouvons utiliser des ligatures, par exemple, pour créer des combinaisons uniques dans nos textes qui lui confèrent plus de personnalité. Mais nous pourrions également utiliser nombres minuscules à l'intérieur d'un paragraphe et des numéros de largeur fixes à l'intérieur d'un tableau, où cela va être beaucoup plus utile. Si nous choisissons une police de caractères gratuite, il se peut que nous n' ayons pas toujours ces options. Cela peut être un facteur déterminant lorsque nous choisissons la police de caractères la mieux adaptée à notre projet. Nous pouvons utiliser des styles plus évidents tels que la couleur et texte gras pour créer une hiérarchie visuelle tout au long de notre conception Nous voulons que nos utilisateurs identifient instantanément où ils sont censés regarder . d'abord et n'ont que très peu d'objets qui se battent pour notre attention à tout moment. Nous pourrions commencer par créer une échelle typographique à l'aide de la séquence Fibonacci ou d'une échelle musicale si nous voulons nous assurer avoir des rapports cohérents tout au long de notre conception, en fonction de la nature de l'application que nous concevons, nous voudrions peut-être que la taille du type augmente moins considérablement pour le texte plus volumineux. Il n'est donc pas si grand. Nous n'avons pas nécessairement besoin d'un panneau publicitaire sur chaque page, mais nous devons toujours prendre les décisions finales concernant le dimensionnement sans yeux. Il existe différentes pondérations optiques et différentes couleurs qui peuvent rendre la taille légèrement différente. Nous devons entraîner notre œil. Tout ce que nous pouvons utiliser pour différencier un en-tête, position de couleur, une couleur de bordure de couleur d'arrière-plan, marges peuvent tous être utilisés pour convertir l'échelle de type simple dans système typographique sophistiqué Sway. Une fois que nous avons la TVA, nous sommes prêts à écrire un code.