Le développement front-end est une activité délicate qui peut s'avérer très ingrate. Un développeur qui a étudié l'ingénierie ou l'informatique fait ce type de code facilement mais, à la fin, il y a toujours trop de détails à corriger et, oui, ils concernent souvent des problèmes de typographie.
C'est parce que il existe un net décalage entre les attentes du concepteur et la perception qu'il a du travail effectué. En d'autres termes, d'une manière générale, le concepteur voit un tas de choses que le développeur ne voit pas.
Les applications de prototypage ont certainement aidé à comprendre la structure des pages, et certaines ont même aidé à comprendre le type de transitions de mouvement ou d'interactions dont nous aurons besoin. Sketch, par exemple, a certainement aidé le concepteur à fournir toutes les informations au développeur: des tailles aux polices, en passant par les codes couleurs, tout y est.
Pourtant, le concepteur regarde le travail produit par le développeur et les corrections commencent à affluer : »Cette police n'a pas le bon poids», »Ce titre doit être en majuscule», »L'espacement des caractères n'est pas correct», et ainsi de suite.
D'après mon expérience, la plupart des corrections apportées concernent le texte. Tout le reste est moins technique et plus compréhensible sur le plan empirique de base, mais pas la typographie.
Il y a beaucoup de choses, des cours complets consacrés à sa conception et à son utilisation. Il est donc très peu probable que l'on se contente de regarder la police et de savoir immédiatement quoi en faire, pour lui donner l'apparence que le concepteur a choisie.
C'est pourquoi j'ai décidé de créer un atelier de typographie.
Avant d'entrer dans les explications, il est important de comprendre comment fonctionne la lettre, quelle est sa relation avec ses partenaires et comment cela affecte le mot, la phrase et le paragraphe.
Des notions de base qu'il est bon d'avoir et qui permettent de parler plus facilement de typographie :
1.2. Anatomie de la typographie
Une forme de lettre partagera des caractéristiques communes avec ses semblables au sein d'une même police de caractères. Ces caractéristiques sont basées sur les tailles et les proportions des mêmes caractéristiques anatomiques de base qui concernent tous les personnages occidentaux.
J'ai pensé qu'il serait intéressant de les énumérer, mais pas dans l'intention de les mémoriser, car leur dénomination ne suffira pas
une grande différence dans la vie quotidienne du graphiste ou du développeur.
Je les répertorie pour savoir ce qu'il faut rechercher lorsque vous essayez de comparer des polices de caractères et pour mieux comprendre la variété des fonctions que peuvent avoir les différentes polices, en fonction de leur anatomie.
Sur la base de ces caractéristiques techniques/structurelles, de définitions interprétatives ou même du contexte historique, il existe des classifications par type. En voici quelques-unes :
Les plus couramment utilisés et les plus pertinents en termes de code sont les célèbres Serif et Sans-Serif. La raison pour laquelle ces deux distinctions sont la plus importante à faire est que sa caractéristique fondamentale est objective et très visible, si l'on sait ce qu'il faut rechercher.
Le sans-serif a été créé en supprimant l'empattement, « sans » signifiant « sans ». Ce style adapté à l'impression a été créé pour sa clarté et sa lisibilité, qui était utile pour les présentoirs et les publicités. De plus, il était plus facile d'imprimer en très grands formats.
D'autre part, le type Serif est considéré comme le meilleur choix pour les textes longs, tels que ceux que l'on trouve dans les livres ou les journaux. Cela est cependant discutable, car une grande partie de ce qui rendrait l'ensemble de cette famille de caractères plus lisible peut également se retourner contre elle-même, en fonction de certaines caractéristiques de base de chaque police de caractères : Je suis presque sûr qu'un Didot, même s'il s'agit d'une police Serif, sera pire qu'un Lato, par exemple, pour la lisibilité de longs textes.
En effet, Didot présente un contraste élevé entre les lignes horizontales et verticales, ce qui crée beaucoup de bruit et des « bosses » dans le flux de lecture, tandis que Lato présente une proportion plus uniforme entre les différentes lignes de la lettre, ce qui en fait une meilleure option que Didot. Ce n'est pas une option parfaite, mais vous comprenez l'essentiel.
La chose importante à comprendre à propos de ces deux styles de caractères différents, afin de savoir lequel convient le mieux à quoi, est la fonction de l'empattement. Sa fonction est plus facile à comprendre si l'on connaît son histoire.
Avant tout cela, l'humanité n'envisageait même d'utiliser des pièces métalliques pour créer des mots et de les presser contre du papier afin de créer des livres plus rapidement. Avant même d'envisager l'idée d'un livre, d'un article ou même d'un texte, nous étions déjà en train de créer des visuels pour communiquer.
Des milliers d'années d'évolution ont rendu nécessaires des formes plus complexes de communication visuelle, d'où les alphabets. Mais ceux-ci ne sont pas nés de nulle part, ils sont le résultat de leurs propres mutations et adaptations. Je trouve que l'histoire de la lettre « A » est un exemple très simple de l'évolution de la plupart des lettres.
Différentes civilisations sont apparues et disparues, des significations et des sons ont été établis (certains ont muté, d'autres non) et la tête de bœuf et de vache a été de plus en plus simplifiée, pivotée, perfectionnée sur le plan géométrique par les Romains pour être gravée sur des monuments, écrite et embellie par des moines, déformée à la main pour une écriture plus rapide et plus fluide et enfin reprise par des typographes.
Donc, pour résumer : la naissance primordiale du Serif est née de la nécessité d'une écriture rapide et d'une connexion entre les différentes lettres. Lorsque la lecture est devenue une activité qui ne se limitait pas au greffier et à la monarchie, une meilleure lecture était également devenue une exigence, et c'est à ce moment-là que le serif a commencé à être utilisé à cette fin. Maintenant tu sais.
Puis est arrivée la typographie.
Comme il y avait un une prise de conscience accrue de la lisibilité de la police, son utilisation et sa disposition ont également suscité plus d'attention et de prudence.
3.1. Espacement des lignes
Quelque chose d'aussi simple que l'espacement des lignes, qui est directement influencé par la police et sa taille, influencera l'ensemble de la page. La création de systèmes de grilles a permis de consolider les règles qui permettent à tout concepteur de créer facilement du texte lisible et des pages équilibrées.
Espacement des lignes - hauteur de ligne en CSS - est d'ailleurs la distance verticale entre les différentes lignes de texte. Cet espacement peut être décisif pour n'importe quelle zone de texte, car si elle est trop petite ou trop grande, vous risquez de sauter des lignes ou de les lire encore et encore (tout le monde est passé par là, et non, ce n'est pas de votre faute).
Il existe une taille optimale pour cet espacement, qui se situe généralement entre 120 % et 145 % de la taille du texte. Mais juste au cas où vous auriez besoin de trouver une solution vous-même, vous pouvez garder à l'esprit les points suivants :
Essayez de tracer une ligne imaginaire au milieu des lignes, sans vous heurter à des descendeurs ni à des ascenseurs. S'il passe, nettoyez-le, ça devrait être bien.
Faites également attention à la longueur des lignes dans l'image suivante. Les modules construits à partir de la hauteur des lignes sont généralement assez petits par rapport à la taille de la police, non pas par hasard, mais parce que cela donne au concepteur une plus grande flexibilité lors de l'organisation d'une page entière, en permettant des zones de texte plus ou moins grandes, tout en maintenant toujours une bonne distance proportionnelle entre les différents éléments.
De plus, des lignes plus courtes sont synonymes d'une meilleure lisibilité.
Il existe en fait une bonne mesure de la longueur des lignes, qui se situe généralement entre 50 et 75 caractères (en haut), espacements compris. Il y a plusieurs bonnes raisons à cela :
Les lignes trop courtes obligeront le lecteur à interrompre le flux trop souvent, en étant obligé de revenir en arrière lors d'un changement de ligne. Cela peut également amener les lecteurs à sauter certains mots importants en fin de ligne, au milieu de l'angoisse d'aller et venir constamment. Cela semble stressant, non ? En fait, ça l'est.
D'autre part, il est plus difficile de se concentrer sur les lignes trop longues, car il est plus difficile de voir immédiatement où elles se terminent, ce qui crée l'anxiété de changer à tout moment. De plus, lorsque le lecteur change de ligne, il est également plus probable qu'il passe à la mauvaise ligne, car il est plus difficile de savoir où la ligne a commencé au départ.
Il s'avère que la concentration du lecteur est plus élevée lorsqu'il commence une nouvelle ligne, et qu'elle s'estompe lorsqu'il passe à la fin. Il y a donc un équilibre très serré à maintenir. D'où l'intervalle de 50 à 75 caractères en règle générale.
Dans l'ensemble, ce sont là certaines des choses les plus importantes à garder à l'esprit en matière de lisibilité. Mais si vous souhaitez avoir une bonne source de connaissances de base en matière d'expression typographique, le documentaire « Helvetica » est fait pour vous.
Tout au long du documentaire, vous découvrirez le processus de réflexion qui sous-tend le nouveau design réalisé dans les années 50 et la manière dont il a créé une conscience basée sur la responsabilité sociale, une gueule de bois due à la Seconde Guerre mondiale. Vous aurez également un aperçu de certains des designs vraiment intéressants réalisés à l'époque et une introduction à l'origine et à la finalité de la célèbre police Helvetica.
Vous serez également en mesure de comprendre le contraste saisissant entre les publicités réalisées avant et après International Style, et les implications pragmatiques que cela avait sur la façon dont la communication visuelle était/est réalisée.
Il y a un tas d'autres choses qu'il est important de savoir, et je vais les énumérer ensuite, mais gardez à l'esprit qu'il existe des exceptions à ces directives générales, en fonction du rôle que joue la typographie dans tout ce que vous allez faire.
Comme quand les mots finissent par être isolés. Que ce soit à la fin d'un paragraphe ou au début d'une colonne de texte. Ça a l'air vraiment moche et ils ont même un nom - orphelins et veuves - Beurk. Mais, en toute honnêteté, il n'est pas si facile de les éviter lorsque vous travaillez avec un design réactif. Il n'y a donc pas grand-chose à faire. Il en va de même pour « chiffons » et un tas d'autres situations typographiques aux noms affreux que je n'ai pas jugé nécessaire de mentionner.
Un autre « à faire » ou à « ne pas faire » clair, cette fois plus facile à contrôler, est l'espacement des caractères, c'est-à-dire l'espace entre les caractères. Si le texte est trop serré ou trop long, la lisibilité du texte long sera clairement compromise.
Le texte ou les affichages déjà courts peuvent bénéficier d'une certaine stylisation, selon l'ambiance que vous recherchez.
Quoi que vous fassiez, ne déformez pas votre texte manuellement. Vous avez besoin d'un texte plus large horizontalement ? Recherchez des polices de caractères « étendues ». Une police de caractères plus grande et plus percutante, c'est ce qui vous manque ? Optez pour les types « condensés », il y a beaucoup de choix.
Mais lorsque vous déformez manuellement une police de caractères, toutes les tailles du caractère deviennent disproportionnées et le résultat sera tout simplement horrible.
Il en va de même pour l'inclinaison de votre police de caractères pour obtenir un effet « italique ». Cela ne finit pas toujours par mal paraître, mais il existe de nombreuses bonnes alternatives.
Il existe des polices italiques bien conçues, qui ne consistent pas simplement à incliner une police existante. Ils ont leur propre ensemble de proportions qui garantit sa lisibilité et lui permet de continuer à être utilisé avec sa version normale de manière harmonieuse.
Il y a encore beaucoup à dire et beaucoup à apprendre. Mais, en même temps, ce sont à peu près les bases nécessaires pour comprendre ce qu'il faut rechercher lors de la transformation de la typographie en code.
La prochaine fois que vous utiliserez le front-end, vous aurez plus ou moins compris la routine : »Transformation de texte? » Vérifiez. »Espacement des caractères? » Vérifiez. »Hauteur de ligne? » Vérifiez. « Est-ce un serif ou sans empattement? » Maintenant tu le sais. « Attends une seconde, c'est un peu bizarre, est-ce que cette police doit être utilisée dans un menu ? » Trop tôt, trop tôt.
Lectures complémentaires : Lisibilité de la longueur des lignes; Espacement des lignes; Un cours intensif de typographie : les bases de la typographie; Un cours intensif de typographie : paragraphes et caractères spéciaux.
À Imaginary Cloud nous avons une équipe d'experts en conception d'interface utilisateur et d'expérience utilisateur. Si vous pensez avoir besoin d'aide pour la conception, envoyez-nous un message ici!
Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !
Je suis designer d'interface utilisateur et de produits, illustrateur et peintre. Connue pour mon amour des serviettes de plage sales, de la production musicale, de la typographie et de toutes sortes de pizzas.
People who read this post, also found these interesting:
