Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Fondamentaux de la typographie pour les développeurs

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Working With Brand and Design Guidelines
Improving Layout With Vertical Rhythm

French (Français) translation by Henri Lotin (you can also view the original English article)

La typographie est un élément fondamental dans tout design sur lequel vous travaillez. La principale raison pour laquelle nous avons des sites Web est en premier lieu d'afficher des informations et pour que l’information soit consommée par les clients qui y arrivent. Alors qu’il peut y avoir beaucoup d’autres éléments dans un site web, le cœur est le contenu. Ce contenu doit être facilement lu, digéré, compris et avoir une base typographique solide qui y aidera.

S'initier à la typographie est probablement l'une des parties les plus accessibles de l’apprentissage du design, simplement à cause de la facilité avec laquelle on peut changer et s'amuser avec le texte pour obtenir des résultats immédiats. Cependant, affiner vos compétences en typographie afin que vous puissiez concevoir quelque chose qui fonctionne bien et qui soit efficace, lisible et utile à vos utilisateurs, est plus difficile.


Termes techniques

Tout d’abord, nous allons découvrir certains des termes techniques fondamentaux. C’est seulement un petit compte-rendu de certains des termes les plus courants que vous rencontrerez lorsque vous travaillez avec la typographie, et il y a des guides beaucoup plus complets sur le web ou dans les livres si vous voulez lire plus.

Fonte vs police de caractères

Ce premier terme est celui qui induit la plupart des gens en erreur. Police de caractères décrit les formes conçues des lettres. Une fonte est le véhicule qui contient la police de caractères. Vous téléchargez et installez un pack de fonte afin d’utiliser une police de caractères dans votre design.

Serif vs Sans Serif

En toute sécurité, vous pouvez penser qu’il y a deux classifications principales de police - serif et sans serif. Les polices de caractères serif généralement ont l'air un peu plus classiques dans le style, souvent avec de petits embellissements (empattements) où les lettres se terminent.

Sans vs Serif

Des exemples de serif sont Times New Roman, Baskerville et Georgia. Les polices sans serif manquent n'ont pas les embellissements des serif, elles sont plutôt d'apparence un peu plus moderne. Exemples de polices sans serif Helvetica, Arial et Futura.


Qu'est-ce qui compose un caractère ?

Examinons brièvement l’anatomie d’une lettre.

Ascendante

L'ascendante est toute partie d’une minuscule qui s’étend au-dessus de la hauteur d'x de la lettre. Vous serez familiarisé avec les lettres qui ont des ascendantes supérieures telles que b, d, f, h, k, l.

Ascender

Descendante

Une descendante est toute partie d’une minuscule qui s’étend en-dessous de la hauteur d'x de la lettre. Par exemple g, j, p, q, y.

Descender

Contrepoinçon

Dans une lettre, un contrepoinçon est l’espace négatif courbe fermé (ou partiellement fermé) à l’intérieur d’une lettre. Les lettres courantes avec contrepoinçon incluent b, d, e, o, s.

counter

Empattement

Comme nous l’avons mentionné, les empattements sont les décorations et embellissements supplémentaires que vous pouvez voir quand vous faites la distinction entre styles de polices serif et  sans serif.

Serif

Ligne de base

La ligne de base est une ligne invisible sur laquelle tous les caractères s'assoient. Cette ligne de base peut varier massivement entre différentes polices de caractères, mais est généralement toujours cohérente au sein d’une police de caractères individuelle.

Baseline

Hauteur des capitale

La hauteur des capitales est la distance entre la ligne de base jusqu’au sommet des lettres majuscules.

Cap Height

Hauteur d'x

La hauteur d'x est la hauteur de la partie principale des lettres minuscules (ou au moins la hauteur de la minuscule x, d'où le nom). Cette hauteur n’inclut pas la hauteur supplémentaires des ascendantes ou descendantes.

x-height

Glyphes de la police

Un glyphe est un caractère dans une police. Ceci inclue tout symbole ou lettre, jusqu'aux glyphes supplémentaires qui peuvent être mises à votre disposition et qui ne correspondent à aucun des symboles ou lettres plus communément connus ou utilisés.


Lorsque vous travaillez avec la typographie...

.. .vous devez penser à :

Taille

Lorsque vous travaillez avec la typographie (et cela peut paraître évident) vous devriez considérer la taille du texte avec lequel vous allez travailler.

size

Avec toutes les tendances design qui passent ce sera également une tendance concernant la petitesse ou la grandeur du texte. Pensez, par exemple, à l'audience visée ; votre audience est-elle jeune ou plus âgée, aura-t-elle besoin d'une plus grande taille de texte ?

Pensez aussi à comment la taille du texte se répercutera sur le design de votre site. Voulez-vous qu’il se concentre sur la typographie, ou avez-vous d’autres embellissements et éléments de design que vous souhaitez inclure et qui peuvent influencer la façon dont la typographie se comporte dans la design ?

Contraste

Le contraste influe énormément sur la lisibilité d’un bloc de texte. Lorsque nous parlons de contraste il y a deux principales choses à garder à l’esprit.

readability-and-contrast

Tout d’abord, vous souhaitez vous assurer que le contraste entre le texte et l’arrière-plan est suffisamment fort pour se faire remarquer. Pensez à l’accessibilité ici - pour en revenir à l’accessibilité de la couleur en design, il en va de même pour votre texte. Si vous n’êtes pas sûr de si oui ou non votre texte aura suffisamment de contraste alors utilisez un outil tel que l’outil Contrast Ratio de Lea Verou pour vous aider.

Vous devez également être attentifs au choix de polices que vous faites. De nombreuses polices qui ont une graisse très fine ne peuvent pas bien s'afficher à certaines dimensions et peuvent s’avérer plus utile pour les polices de plus grande taille ou pour afficher les titres. Essayez également de vous assurer que les polices ou les fontes que vous choisissez ont une bonne prise en charge navigateur et système d’exploitation. Certaines fontes et polices de caractères peuvent bien fonctionner sur une plateforme unique, mais apparaissent et se comportent affreusement sur une autre.

Espace

Lorsque vous travaillez avec la typographie, comme avec toute autre partie de votre design, vous voulez vous assurer que vous lui donner suffisamment d’espace pour respirer et pour que le contenu parle de lui-même.

space

Le contenu sur votre site web est l’expérience de base que vos utilisateurs veulent se voir offrir. En dehors de tout autre élément de design, tout ce que vos utilisateurs ont vraiment besoin de voir c'est le contenu. Pour cette raison, n’ayez pas peur de donner plus d’espace au contenu et de laisser votre contenu faire le gros de la conversation.

L’espace négatif est l’espace ou les vides qui ont été laissés autour des éléments d’un design ; n’ayez pas peur de laisser cet espace négatif autour de votre contenu.

N’oubliez pas non plus l’espace autour de chaque partie de votre texte. Prévoyez une hauteur de ligne généreuse qui ne donne pas l'impression que votre texte est à l’étroit et donc plus difficile à lire. En règle générale (mais n’hésitez pas à jouer avec cela) une hauteur de ligne qui est au moins de 140 à 160 % de la taille du texte devrait bien fonctionner et offre un bon équilibre pour votre texte.

Hiérarchie

Une hiérarchie typographique se rapporte à la façon dont le contenu est aménagé dans votre design.

hierarchy

Établir la bonne hiérarchie de contenu commence au début, lorsque vous travaillez pour créer une bonne structure au sein de votre contenu. La hiérarchie typographique fonctionne ainsi avec votre contenu - des titres aux paragraphes normaux et toutes les pièces de votre contenu sur lesquelles vous souhaitez mettre de l’accent - pour aider à former une structure que les utilisateurs peuvent explorer facilement.

L’impact d'une hiérarchie sur votre design peut être massif. Vous devriez réaliser le parcours de vos utilisateurs de telle sorte qu'ils trouvent le contenu après lequel ils sont, aussi facilement que possible et établir une hiérarchie solide produira seulement des effets positifs.

Vous pouvez établir une bonne, visuelle, hiérarchie typographique d'un certain nombre de manières, y compris l’utilisation de couleur ou de différentes tailles de texte pour créer l'emphase et la structure de votre contenu. Tous les conseils précédents vous aideront à établir une meilleure hiérarchie typographique, même si c’est quelque chose qui viendra toujours avec de la pratique.


Fontes web

Nous allons discuter des polices web plus en détail plus loin dans cette série, mais ce qui suit devrait être une introduction solide dans les possibilités des fontes web.

Aujourd'hui, nous avons vraiment de la chance de disposer de beaucoup d’options d'implémentations des fontes web sur nos sites web - et avec l’utilisation plus courante des fontes web sur le web (provoquée par la meilleure prise en charge transversale navigateur), nous pouvons être plus inventifs dans les styles typographiques et les designs que nous pouvons inclure dans nos créations.

En plus d’être en mesure d’accueillir vos propres polices à l’aide de @font-face, il y a beaucoup de services en ligne disponibles pour vous aider à utiliser plus de fontes web en ligne, y compris :

et beaucoup plus. Même les sites comme FontShop ou MyFonts (qui étaient limités à juste vendre des fontes desktop) entrent maintenant dans le marché des fontes web, vous proposant des fontes téléchargeables que vous pouvez utiliser avec la technique @font-face.


À la prochaine...

Après avoir couvert les principes fondamentaux de la typographie, dans le prochain article, nous allons jeter un coup d’oeil au rythme vertical. N’oubliez pas que vous pouvez aussi plonger dans notre session en cours The A-Z of Web Typography pour plus de détails sur un de ces points.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.