Share
La typographie est un élément fondamental de toute conception sur laquelle vous travaillez. La raison principale pour laquelle nous avons des sites Web est d’abord d’afficher des informations et de les utiliser pour les utilisateurs qui les consultent. Bien qu'il puisse y avoir beaucoup d'autres éléments sur un site Web, le contenu est au cœur. Ce contenu doit être facile à lire, à digérer, à comprendre et disposer d’une base typographique solide n’aidera que dans la mesure du possible..
Débuter avec la typographie est peut-être l’une des parties les plus accessibles de la conception d’apprentissage, tout simplement en raison de la facilité avec laquelle il est facile de modifier et de jouer avec le texte pour obtenir des résultats immédiats. Cependant, affiner vos compétences en typographie pour pouvoir concevoir quelque chose qui fonctionne bien, qui soit lisible et utile pour vos utilisateurs, relève davantage d'un défi..
Tout d’abord, nous allons éliminer certains termes techniques de base. Ceci n’est qu’un petit aperçu des termes les plus courants que vous rencontrerez lorsque vous travaillerez avec la typographie. guides beaucoup plus complets sur le Web ou dans des livres si vous voulez lire plus.
Ce premier terme est celui qui fait trébucher la plupart des gens. Police de caractères décrit les formes de lettres conçues. UNE Police de caractère est le véhicule qui contient la police de caractères. Vous téléchargez et installez un ensemble de polices afin d'utiliser une police de caractères dans votre conception..
Vous pouvez penser en toute sécurité à l’existence de deux classifications de types principales - serif et sans serif. Serif les polices de caractères ont généralement un style un peu plus classique, souvent avec de petits films ou des embellissements (serifs) où les lettres se terminent.
Times New Roman, Baskerville et Georgia sont des exemples de polices serif.. Sans serif les polices de caractères manquent des embellissements serif, paraissent plutôt un peu plus modernes. Helvetica, Arial et Futura sont des exemples de polices sans empattement..
Examinons brièvement l'anatomie d'une lettre.
Le ascender est une partie d'une lettre minuscule qui s'étend au-dessus de la hauteur en x de la lettre. Vous serez familiarisé avec les lettres qui ont des ascendeurs tels que b, d, f, h, k, l.
Un descendant est une partie d'une lettre minuscule qui s'étend au-dessous de la hauteur x de la lettre. Par exemple, g, j, p, q, y.
Dans une lettre, un compteur est l’espace négatif fermé (ou partiellement fermé) à l’intérieur d’une lettre. Les lettres courantes avec des compteurs incluent b, d, e, o, s.
Comme nous l'avons mentionné, les empattements sont les films et les embellissements supplémentaires que vous pouvez voir lorsque vous faites la distinction entre les styles de police serif et sans serif..
La ligne de base est une ligne invisible sur laquelle tous les personnages sont assis. Cette ligne de base peut varier énormément d’une police à l’autre, mais est toujours cohérente dans une même police..
La hauteur du capuchon est la distance entre la ligne de base et le sommet des lettres majuscules.
La hauteur x est la hauteur de la partie principale des lettres minuscules (ou au moins la hauteur du x minuscule, d'où le nom). Cette hauteur n'inclut pas la hauteur des ascendeurs ou des descendeurs supplémentaires.
Un glyphe est un caractère individuel dans une police. Ceux-ci incluent tout symbole ou lettre, ainsi que des glyphes supplémentaires disponibles qui ne correspondent à aucun des symboles ou lettres les plus connus ou utilisés..
… Tu devrais penser à:
Lorsque vous travaillez avec une typographie (cela peut sembler évident), vous devez tenir compte de la taille du texte avec lequel vous allez travailler..
Avec chaque tendance de conception qui passe, il y aura également des tendances sur la taille du texte. Pensez, par exemple, au public cible. votre public est-il un public plus jeune ou plus âgé, auront-ils besoin d'une plus grande taille de texte??
Pensez également à l'impact de la taille du texte sur la conception de votre site. Voulez-vous qu'elle se concentre sur la typographie ou avez-vous d'autres éléments de décoration et d'éléments de conception que vous souhaitez inclure pouvant influer sur la manière dont la typographie s'insère dans la conception?
Le contraste influence énormément la lisibilité d'un bloc de texte. Lorsque nous parlons de contraste, nous devons garder à l’esprit deux choses essentielles..
Tout d'abord, vous voulez vous assurer que le contraste entre le texte et l'arrière-plan est suffisamment fort pour être perceptible. Pensez à l'accessibilité ici. Pour en revenir à l'accessibilité des couleurs dans le design, il en va de même pour votre texte. Si vous ne savez pas si votre texte aura suffisamment de contraste, utilisez un outil tel que l'outil Ratio de contraste de Lea Verou pour vous aider..
Vous devez également être conscient des choix de polices que vous effectuez. De nombreuses polices ayant des poids très minces risquent de ne pas s'afficher correctement avec certaines tailles et peuvent s'avérer plus utiles pour les polices plus volumineuses ou les titres affichés. Essayez également de vous assurer que les polices ou les polices de caractères que vous choisissez sont correctement prises en charge par le navigateur et le système d'exploitation. Certaines polices et polices de caractères peuvent fonctionner correctement sur une plate-forme, mais leur fonctionnement est terriblement médiocre..
Lorsque vous travaillez avec une typographie, comme avec toute autre partie de votre conception, vous voulez vous assurer de lui laisser suffisamment d’espace pour respirer et pour que le contenu parle de lui-même..
Le contenu de votre site Web constitue l'expérience principale que vos utilisateurs doivent proposer. Mis à part tous les autres éléments de conception, tous vos utilisateurs vraiment besoin de voir est le contenu. De ce fait, n’ayez pas peur de donner plus d’espace au contenu et de laisser votre contenu parler davantage..
L'espace négatif est l'espace ou les espaces laissés autour des éléments d'un dessin. n'ayez pas peur de laisser cet espace négatif autour de votre contenu.
N'oubliez pas également l'espace autour de chaque partie de votre texte. Prévoir une hauteur de ligne généreuse qui ne rende pas votre texte plus étroit et plus difficile à lire. En règle générale (bien que vous puissiez jouer avec cela), une hauteur de ligne d'au moins 140% à 160% de la taille du texte devrait fonctionner correctement et offrir un bon équilibre à votre texte..
Une hiérarchie typographique est liée à la présentation du contenu dans votre conception..
L'établissement d'une bonne hiérarchie de contenu commence au début, lorsque vous travaillez à créer une bonne structure au sein de votre contenu. La hiérarchie typographique fonctionne ensuite avec votre contenu - des en-têtes aux paragraphes normaux et aux parties de votre contenu que vous souhaitez mettre en valeur - pour aider à former une structure sur laquelle les utilisateurs peuvent naviguer facilement..
L'impact d'une hiérarchie sur votre conception peut être énorme. Vous devez faciliter le plus possible le contenu recherché par les utilisateurs, et établir une hiérarchie solide ne produira que des effets positifs..
Vous pouvez établir une bonne hiérarchie visuelle et typographique de plusieurs façons, notamment en utilisant des couleurs ou des tailles de texte variables pour créer une emphase et une structure dans votre contenu. Tous les conseils précédents vous aideront à établir une meilleure hiérarchie typographique, bien que cela vienne toujours de la pratique..
Nous aborderons les polices Web de manière plus détaillée dans la suite de cette série, mais voici une introduction aux possibilités offertes par les polices Web..
De nos jours, nous sommes vraiment chanceux de disposer de nombreuses options pour la mise en œuvre de polices Web sur nos sites Web. Grâce à l'utilisation plus courante des polices Web sur le Web (grâce à une meilleure prise en charge globale des navigateurs), nous pouvons être plus inventifs. dans les styles typographiques et les dessins que nous pouvons inclure dans nos dessins.
En plus de pouvoir héberger vos propres polices avec @ font-face, de nombreux services en ligne sont disponibles pour vous aider à utiliser davantage de polices Web en ligne, notamment:
et beaucoup, beaucoup plus. Même des sites tels que FontShop ou MyFonts (qui se limitait jadis à la vente de polices de bureau) se lancent maintenant sur le marché des polices Web, vous proposant des polices téléchargeables que vous pouvez utiliser avec la technique @ font-face.
Après avoir couvert les bases de la typographie, nous aborderons dans le prochain article le rythme vertical. N'oubliez pas que vous pouvez également plonger dans notre session en cours La typographie Web de A à Z pour plus de détails sur ces points..
Accentsconagua