Pour utiliser l'explication la plus élémentaire, la typographie est la conception et l'utilisation de caractères typographiques en tant que moyen de communication. Beaucoup de gens considèrent que la typographie a commencé avec Gutenberg et le développement du type mobile, mais la typographie remonte beaucoup plus loin que cela. Cette branche du design trouve ses racines dans les formes de lettres manuscrites.
La typographie englobe tout, de la calligraphie au type numérique que nous voyons aujourd'hui sur les pages Web de toutes sortes. L'art de la typographie inclut également les concepteurs de caractères qui créent de nouvelles formes de lettre qui sont ensuite transformées en fichiers de polices que d'autres conceptions peuvent utiliser dans leur travail, des travaux imprimés aux sites Web susmentionnés. Aussi différentes que soient ces œuvres, les bases de la typographie sont à la base de toutes.
Les éléments de la typographie
Si vous avez déjà parlé à un concepteur Web qui utilise la typographie dans son travail, vous avez probablement entendu les termes "police de caractères" et / ou "police de caractère". Beaucoup de gens utilisent ces deux termes de manière interchangeable, mais il existe en fait des différences entre ces deux éléments.
Police de caractères est le terme utilisé pour désigner une famille de polices (telles que Helvetica Regular, Helvetica Italic, Helvetica Black et Helvetica Bold). Toutes les différentes versions d'Helvetica constituent la police de caractères complète.
La police est le terme utilisé lorsque quelqu'un fait référence à un seul poids ou à un seul style au sein de cette famille (comme Helvetica Bold). Tant de polices sont composées d'un certain nombre de polices individuelles, qui sont toutes similaires et liées mais d'une manière ou d'une autre. Certaines polices ne peuvent contenir qu'une seule police, alors que d'autres peuvent inclure de nombreuses variantes des formes de lettre constituant les polices.
Si cela semble déroutant, ne vous inquiétez pas, si quelqu'un n'est pas un expert en typographie, il utilisera probablement le terme "police de caractères", quel que soit le terme choisi, et même de nombreux concepteurs professionnels utilisent ces deux termes indifféremment. À moins que vous ne parliez de la mécanique du métier à un pur compositeur, vous êtes probablement assez sûr d'utiliser le terme que vous préférez. Cela étant dit, si vous comprenez la distinction et utilisez correctement les termes corrects, ce n'est jamais une mauvaise chose!
Classifications de caractères
Parfois appelées «familles de polices génériques», il s'agit de grands groupes de polices de caractères basés sur un certain nombre de classifications génériques appartenant à différentes polices. Sur les pages Web, il existe six types de classifications de polices que vous êtes susceptible de voir:
- Serif
- Sans-serif
- Scénario
- Monospace
- Cursive
- Fantaisie
Il existe également un certain nombre d'autres classifications de polices qui en découlent. Par exemple, les polices "slab serif" sont similaires aux empattements, mais elles présentent toutes un dessin reconnaissable avec des empattements épais et épais sur les formes des lettres. Serif et sans-serif sont les deux classifications de polices les plus courantes utilisées par la plupart des sites Web.
Anatomie des caractères
Chaque police est composée d'éléments différents qui la distinguent des autres polices, appelée anatomie de la police. À moins que vous ne vous lanciez spécifiquement dans la conception de caractères et que vous cherchiez à créer de nouvelles polices, les concepteurs Web ont généralement besoin de connaître les bases de la terminologie des caractères.
Au niveau de base, les éléments de l’anatomie de la police de caractères que vous devez connaître sont les suivants: "cap" et "x-height", "descendeurs" et "ascendeurs".
Cap and x-height correspond à la hauteur des lettres majuscules de la police et à la hauteur de la lettre x. Il vous indique la taille des plus grandes lettres, ainsi que la taille de la plupart des lettres minuscules. Toutes les polices sont dimensionnées en fonction de ces deux caractéristiques.
Les descendeurs et ascendeurs sont les portions de lettres qui vont au-dessous et au-dessus de la ligne de hauteur x. Cela fait généralement référence à des lettres minuscules. Par exemple, la lettre "b" a un ascendeur (la partie qui dépasse "de la lettre") tandis que la lettre "p" a un descendeur (les parties qui plongent de la lettre).
Espacement autour des lettres
Plusieurs ajustements peuvent être effectués entre et autour des lettres qui affectent la typographie. Les polices numériques sont créées avec bon nombre de ces caractéristiques. Sur les sites Web, nous ne sommes guère en mesure de modifier ces aspects. C'est souvent une bonne chose, car le mode d'affichage par défaut des polices est généralement préférable.
- Kerning: L'espace horizontal entre les lettres individuelles
- suivi: L'espace entre les groupes de lettres
- De premier plan: Espace vertical entre les lignes de type (c'est ce qu'on appelle la hauteur de ligne en termes de site Web)
- Mesure: La longueur des lignes de texte
- Alignement: Placer visuellement du texte à gauche, à droite, au centre ou justifié
- Ligatures: Les lettres sont si proches les unes des autres que leurs anatomies sont combinées, passant d’une lettre à l’autre
Plus d'éléments de typographie
La typographie ne se limite pas aux polices de caractères utilisées et aux espaces qui les entourent. Il convient également de garder à l’esprit certaines autres choses lors de la création d’un système typographique adapté à chaque design:
La "césure" est l'ajout d'un trait d'union (-) à la fin des lignes pour aider à éviter les problèmes de lisibilité ou à donner une meilleure apparence à la justification. Bien qu'ils se trouvent couramment dans les documents imprimés, la plupart des concepteurs Web ignorent la césure et ne l'utilisent pas dans leur travail, car ce n'est pas quelque chose que les navigateurs Web gèrent bien.
"Chiffon" est le bord vertical inégal d'un bloc de texte. Lorsque vous portez une attention particulière à la typographie, vous devez regarder vos blocs de texte dans leur ensemble pour vous assurer que le chiffon n’a pas d’impact sur le dessin.Si le chiffon est trop irrégulier ou irrégulier, cela peut affecter la lisibilité du bloc de texte et le rendre distrayant. C’est quelque chose qui est automatiquement géré par le navigateur en ce qui concerne la manière dont il enveloppe le texte d’une ligne à l’autre.
Un seul mot à la fin d'une colonne est une veuve et s'il est en haut d'une nouvelle colonne, il est un orphelin. Les "veuves" et les "orphelins" ont mauvaise mine et peuvent être difficiles à lire.
Obtenir vos lignes de texte pour s'afficher parfaitement dans un navigateur Web est une proposition éreintante, en particulier lorsque vous avez un site Web réactif et différents affichages pour différentes tailles d'écran. Votre objectif doit être de consulter le site sous différentes tailles afin de créer le meilleur rendu possible tout en acceptant que, dans certains cas, votre contenu comporte des fenêtres, des orphelins ou d’autres affichages non optimaux. Votre objectif doit être de minimiser ces aspects de la conception d'un type, tout en restant réaliste dans le fait que vous ne pouvez pas atteindre la perfection pour toutes les tailles d'écran et tous les affichages.
Étapes pour vérifier votre typographie
- Choisissez les types de caractères avec soin, en examinant l’anatomie du type et la famille de caractères qu’il contient.
- Si vous créez la conception à l'aide d'un texte fictif, n'approuvez pas la conception finale tant que vous n'avez pas vu le texte réel dans la conception.
- Faites attention aux petits détails de la typographie, tels que les traits d'union et les tirets.
- Regardez chaque bloc de texte comme s'il ne contenait aucun mot. Quelles formes le texte crée-t-il sur la page? Assurez-vous que ces formes portent toute la conception de la page.
