MontrerDémontrer

par Émilie Habets

Lors de la composition d’une page web, la typographie occupe une place importante tant dans la création du design que dans son intégration, ce sont deux choses complémentaires. Tout au long de ces explications, nous nous baserons donc sur la typographie dans le monde du web.

Macro Typographie

Dans l’intérêt de créer un design attractif mais avant tout cohérent et lisible, quelques principes de bases sont à respecter. La couleur de paragraphe, le corps du texte, l’interlignage, la longueur de lignes du texte et la combinaison de police sont en effet des caractéristiques de la macro typographie qui nous aide à rythmer le contenu textuel de ce design.

La couleur de paragraphe

La couleur d’un paragraphe est en réalité le gris typographique que nous percevons lorsque nous observons un texte. Ce gris est déterminé par 3 caractéristiques : la longueur de lignes, le corps du caractère et l’interlignage. Ces éléments peuvent varier selon le contexte du projet et le résultat attendu par rapport à l’utilisateur. Mais bien souvent, pour faciliter la lecture de ce dernier, il y a des règles propres à chaque caractéristique à mettre en rigueur pour obtenir un gris ni trop clair, ni trop foncé.

la couleur de paragraphe

La longueur de lignes

C’est une valeur importante pour la lecture de l’utilisateur lorsque son œil effectue le retour à la ligne. De fait, si la ligne est trop longue ( ou trop courte ), le lecteur peut se perdre et sa lecture peut devenir fatigante. La longueur doit varier entre 60 et 80 caractères pour que la lecture d’un paragraphe soit facile.

Le corps du caractère

Le corps est une valeur relative, une taille est choisie en fonction du support et du résultat souhaité c’est - à - dire une lecture aisée. Cependant, il est intimement lié à une troisième valeur qu’est l’interlignage.

L’interlignage

Le corps et l’interlignage sont deux valeurs étroitement liées, si l’un varie, l’autre change en fonction. Lors de la lecture d’un texte, l’œil favorise certaines lettres en réalisant des saccades et des fixations. Pour qu’un texte corresponde à cette lecture naturelle, l’interlignage doit correspondre au minimum à 140 % de la valeur du corps utilisé. Si l’interlignage est trop petit, l’œil s’efforce de faire des mouvements supplémentaires pour faciliter sa lecture.

+

L’utilisation des capitales et des bas - de - casse est également un élément important car les capitales ont tendance à briser l’effet de saccade que l’œil fait lors de la lecture.

Des marges sont également nécessaires et correspondent à la valeur de l’interlignage.

La hiérarchie

La hiérarchie est un rapport de proportion entre les différents éléments qui constituent une page web. Nous devons obligatoirement la mettre en place afin de garder un design et un rythme cohérent mais également pour que l’utilisateur identifie les différents blocs d’information qu’il a sous les yeux. Pour se faire, le corps choisi change en fonction de l’importance des éléments qui sont les titres, les paragraphes, les descriptions ou encore les citations. La valeur du corps est multiplié plusieurs fois par un nombre choisi et seules les valeurs obtenues peuvent être utilisées. Pour choisir ce nombre / facteur, nous choisissons parmi les rapports de proportions utilisés en musique ou en mathématique pour obtenir une certaine harmonie. Nous devons aussi faire attention aux lignes de base. En utilisant des interlignages multiples de 3, 4 et 5, toutes nos lignes de texte sont calées sur une grille harmonieuse et logique.

la hiérarchie

Sur ce site, le rapport de proportion est Minor Sixth, le corps de base étant de 21px, tous les autres corps utilisés correspondent à cette valeur multipliée par 1,600.

Cette hiérarchie de texte est finalement liée à la hiérarchie des espaces qui forment, ensemble, une cohérence graphique et une lecture claire.

La combinaison de polices

Le tout est de chercher une correspondance de corps entre 2 ( ou 3 ) polices de caractères en se basant sur 3 critères : la chasse, la hauteur de x et le contraste. Il n’est pas obligatoire d’utiliser les 3 pour une combinaison, un peut suffire.

La hauteur de x

Afin de maintenir un équilibre graphique et une lecture fluide et naturelle, c’est - à - dire avec des saccades et des fixations, la hauteur de x est une caractéristique que nous nous devons d’observer. C’est en fait la distance qui sépare les lignes entre lesquelles sont posées les lettres de bas - de - casse de la police, sans tenir compte des ascendantes et des descendantes. Nous examinons ainsi la lettre x de plusieurs polices et on opte pour les polices ayant des x de hauteurs similaires voire identiques.

La chasse

Pour une combinaison agréable, nous étudions la largeur de la lettre et ses approches ( espaces de part et d’autre du caractère ) théoriquement appelée la chasse. Elle est soit monospace, c’est - à - dire qu’elle est identique sur chaque lettre. Soit proportionnelle, elle varie selon le caractère. Nous optons pour les polices ayant la même chasse. Notons que si la chasse est étroite, nous aurons plus de lettres sur une même ligne de texte que avec un typo à caractère qui chassent.

Le contraste

Le contraste d'une police est l’épaisseur du trait du dessin du caractère. Ce trait est régulier, on parle alors de contraste bas ou il est irrégulier et on parle de contraste haut. Nous favorisons les polices de contrastes semblables.

combinaison de polices

Une combinaison serif / sans serif est une combinaison plausible, mais n’est pas très originale donc pas obligatoire. N’oublions pas qu’il est préférable de garder la serif pour le texte courant car ça permet de guider l’œil lors de la lecture.

+

l'alignement de paragraphe

L’alignement des paragraphes est également capital pour une lecture aisée. Retenons, que nous ne centrons jamais du texte de remplissage, nous ne le justifierons pas non plus car cela induit des césures et des interdits ingérables et donc insupportables.

Micro Typographie

Dès lors que nos visuels sont élaborés à partir des principes de la macro typographie, nous devons être davantage subtils avec les règles de la micro typographie. Les marques de paragraphes, les majuscules accentuées, les types de tirets, les guillemets, la ponctuation et les espaces se révèlent être des détails mais ils feront la différence dans le résultat final et donc pour l’utilisateur.

Les marques de paragraphe

Pour marquer un changement de paragraphe, le saut à la ligne et le retrait sont les deux utilisations les plus fréquentes. Le retrait doit être équivalent au corps du caractère employé ou à un multiple de celui - ci et ce retrait n’est pas marqué sur le premier paragraphe. En fait, il y a 10 façons d’indiquer un nouveau paragraphe.

L’alinéa

L’alinéa dont la largeur correspond au corps de texte utilisé ou à un multiple de celui - ci. Il n’est pas marqué sur le premier paragraphe.

l'alinéa

La marge sur la gauche

Une marge sur la gauche du paragraphe sauf sur la première ligne.

la marge sur la gauche

Le saut à la ligne

le saut à la ligne

Le signe

Le signe ou l’élément graphique se glisse comme un caractère dans le texte.

le signe

Le tiret

Le tiret entre les différents paragraphes, avec un retour à la ligne.

le tiret

La lettrine

La lettrine sur les 3 ou 4 premières lignes du premier paragraphe et un retrait sur les suivants.

la lettrine

Le premier mot en capitales

Le premier mot en capitales et un saut à la ligne pour les autres paragraphes.

le premier mot en capitales

Le premier mot en petites capitales

Le premier mot en petites capitales en début de chaque paragraphe.

le premier mot en petites capitales

La première ligne en gras

La première ligne en gras et une marge sur la gauche pour le reste du paragraphe.

la première ligne en gras

La marge alternée

La marge à gauche sur un paragraphe, à droite sur celui d’après sauf sur la première ligne du premier paragraphe.

la marge à gauche

Les majuscules accentuées

Une règle typographique souvent omise mais qui a toute son importance, surtout si on s'appelle Émilie, les majuscules accentuées. Nous pouvons les insérer avec les raccourcis clavier ou utiliser les caractères spéciaux lors de l’intégration.

les majuscules accentuées

Les types de tirets

Il existe 3 types de tirets, le tiret court, le tiret moyen aka « en dash » et le tiret long aka « em dash ».

Le tiret court

Le tiret court est utilisé comme trait d’union, signe de soustraction et césure. Selon les cas, il faut ajouter un espace avant ou après ou pas du tout.

Le tiret moyen

Le tiret moyen est utilisé à la place des parenthèses, on ajoute alors des espaces de part et d’autre. Mais aussi pour exprimer une durée ou une distance, sans espace ou avec des espaces fines. Enfin, il est utilisé pour les éléments constituant une liste mais peut être, dans ce cas, remplacé par un autre signe graphique.

Le tiret long

Le tiret long est utilisé pour signifier un dialogue, par exemple pour les tirades d’une pièce de théâtre. Pour un changement dans une phrase également, on ajoute alors un espace avant et après.

Les guillemets

Pour mettre en exergue du texte, comme une citation, on utilise les guillemets ou l’italic. Nous pouvons observer différents types : les guillemets anglais, les guillemets français, les guillemets simples. Le premier guillemet sort du repère d’alignement vertical du texte. Il faut également mettre des espaces fines insécables avant et après les guillemets. Attention, pour les textes anglais, on utilise évidemment les guillemets anglais ou les guillemets simples. Il va de même pour l’apostrophe.

Les guillemets français

« Les guillemets français ou typograpiques. »

Les guillemets anglais

 English quotation marks. 

  English quotation marks. 

Une citation correcte

citation correcte

+

liste

Les listes sont une énumération donc ponctuées avec des points virgule et un point final. Si les éléments de la liste sont des phrases, nous utilisons le point à chaque fois.

La ligature

Encore une fois pour faciliter la lecture, nous employons des polices contenant des lettres fusionnées, les ligatures. Ce sont également des caractéres spéciaux.

ae æ
f i fi
et &

La ponctuation et les espaces

Ce sont deux choses auxquelles le lecteur ne fait pas attention pourtant si elles n’étaient pas appliquées dans un texte, ça se remarquerait rapidement. Nous cherchons ces caractères et nous insérons :
un espace après le . et le ,
un espace fine insécable avant et après le ; 
un espace insécable avant : et un espace après
un espace fine insécable avant le ? et le ! et un espace après

L’œil typo

Lorsque nous avons assimilé tous ces principes, il n’est plus question de les négliger lors d’une mise en forme de texte. Rassurons-nous, nous acquerrons un bon œil typographique grâce à l’expérience et ça deviendra un automatisme. Et peut - être qu’un jour cette image vous fera mal à la tête, à vous aussi !

Shahir Zag