Afin d'établir une marque mémorable, reconnue et digne de confiance par les clients, les designers ont dû créer des designs de plus en plus cohérents avec les précédents. Cela a sans aucun doute conduit à une norme croissante d'actifs qui, une fois consolidés, seraient considérés comme ce que nous appelons aujourd'hui les « actifs de marque », parmi lesquels l'échelle de caractères figurerait.
Une échelle est un ensemble de niveaux ou de nombres utilisés dans un système de mesure particulier. À cet égard, une échelle typographique – parfois appelée rampe typographique – peut être décrite de manière concise comme un ensemble de niveaux typographiques qui apparaissent naturellement dès lors que l'on distingue différents niveaux de texte. Au-delà de sa simple signification explicite, il s'agit d'un outil de conception essentiel, central à la construction de l'image d'une marque. Elle contribue à définir le rythme visuel, codifie la hiérarchie du contenu et joue un rôle clé dans la construction d'un langage vernaculaire cohérent.
Technique
Lors de la conception pour le Web, l'utilisation d'une échelle de type est une habitude de productivité cruciale pour un flux de travail professionnel et heureusement, Sketch dispose de fonctionnalités intégrées pour le faciliter.
Certaines personnes utilisent systématiquement des échelles typographiques de base, d'autres se basent sur le nombre d'or , d'autres encore sur la suite de Fibonacci et d'autres nombres . Personnellement, je me retrouve toujours avec une échelle à peu près similaire, mais j'aime néanmoins commencer la conception de A à Z, puis la rétroconcevoir pour obtenir une échelle typographique formelle, afin de m'assurer qu'elle soit parfaitement adaptée au projet. À cet égard, outre le fait de ne jamais descendre en dessous de 8 points et d'avoir généralement des points de taille égale, je n'applique aucune règle particulière : je commence immédiatement la conception. L'idée est simplement d'étoffer autant d'occurrences de conception que possible tout en définissant la direction artistique, afin de m'assurer que tout fonctionne déjà dans le contexte.
Prenons cette interface simple que j'ai conçue à cet effet (basée sur la page Wikipédiade Pierre Bourdieu sur la violence symbolique , concept éclairant, je dis juste et MERDE ! Neue Montréal est un tel bourreau de travail ).
Disons que je suis satisfait de l'absence de suivi (dans Sketch, ne définissez jamais le suivi sur 0, de peur de vouloir avoir un crénage chevalin - supprimez simplement toute valeur et appuyez sur Entrée), la hauteur de ligne est ajustée, l'espace de paragraphe spécifié - le type est tout défini.
À partir de là, vous devez copier chaque niveau de texte dans un nouveau plan de travail et renommer chaque calque. Ce processus de renommage comporte deux aspects : l'identification et l'évolutivité. Premièrement, le nom exact donné à vos niveaux de texte n'a pas d'importance : il est important qu'il soit cohérent et cohérent. Vous constaterez que j'ai utilisé une nomenclature inspirée du HTML, mais qui s'en éloigne également. Deuxièmement, pour des raisons d'évolutivité, vous devez spécifier le point d'arrêt où ce niveau apparaît.
En utilisant la nomenclature slash de Sketch, les noms de vos calques doivent suivre la formule suivante : <Niveau de type> / <Point d'arrêt> . Vous pouvez gagner du temps en effectuant cette opération par lots avec ce plugin .
Une fois cela fait, installez le plugin Générateur de styles ; sélectionnez vos calques renommés ; allez dans Extensions > Générateur de styles > Générer des styles partagés et voilà. Tous les niveaux de l'échelle de type devraient maintenant être disponibles dans le premier menu déroulant de la section Apparence de l'inspecteur, lorsqu'un calque de texte est sélectionné.
Vous répéterez ensuite le processus pour chaque point d'arrêt, au fur et à mesure que vous les développerez.
Vous avez peut-être remarqué que j'ai omis, par commodité, la spécification « light » affichée dans les captures d'écran. Il arrive qu'un projet contienne des niveaux de police dans des schémas de couleurs de luminosité opposée. Dans ce cas, vous pouvez définir l'échelle de police comme dans les captures d'écran, ou l'agrandir de toute autre manière que vous jugez pertinente. Mais je m'en tiens généralement à définir les styles dans la couleur prévue, en documentant uniquement le niveau (couleur, suivi, hauteur de ligne et espacement de paragraphe) dans ses points d'arrêt, afin de le garder le plus simple possible. Si nécessaire, je gère les variations de couleurs manuellement via les Couleurs du document . Ainsi, je n'ai pas besoin de mettre à jour six couleurs du même style dans deux points d'arrêt pour simplement ajuster la hauteur de ligne. De plus, en sélectionnant des couleurs dans les Couleurs du document, vous vous assurez d'utiliser uniquement les couleurs spécifiques que vous avez sélectionnées (soyons honnêtes, qui n'a jamais rencontré une situation de type « 50 nuances de gris similaires » lors de la préparation de fichiers de conception pour les transmettre aux développeurs ?).
Ai-je besoin d’une échelle de typo formelle ?
Bien que nous n'ayons pas encore abordé la théorie de la définition d'une échelle typographique (peut-être dans un autre article), la question reste pertinente. Je me souviens qu'à mes débuts en tant que designer, j'étais toujours désireux de systématiser mes créations, même si leur échelle ne l'exigeait pas. Rétrospectivement, cela m'a permis de m'en approprier le concept, me préparant ainsi à l'occasion opportune.
Chacun s'améliore dans l'évaluation du rapport optimal entre effort minimal et rendement maximal avec ses outils. En fin de compte, on pourrait soutenir que, même si les composants du système de conception des projets de grande et de petite envergure, comme l'échelle de typographie, diffèrent quant à leur formalisation, ils sont toujours là.
En pratique, dès qu'un site web comporte plus de deux pages, des Models de conception de base devraient émerger et c'est là qu'une échelle de typographie commencera à se former. Il est donc judicieux de se simplifier la vie et de définir une échelle de typographie dès le début. De plus, des spécifications bien définies simplifient la vie des développeurs.
