La macro typographie

Qu'est-ce que c'est ?

La macro typographie est considérée comme la base de la mise en forme. Elle permet de donner un rythme au texte permettant dès lors d’attirer l’oeil de l’utilisateur. Elle est déterminée par trois facteurs qui, ne livrent pas le courrier, seront expliqués ci-dessous.

1

La couleur de paragraphe.

La couleur de paragraphe n’est pas, à proprement parler, la couleur de sa police ! Elle consiste en l’homogénéité et l’aération des paragraphes, permettant alors de donner une souplesse de lecture, une envie de lecture. Les critères les plus importants sont : la longueur des lignes, l’interlignage et le corps de texte.

La longueur des lignes.

La longueur des lignes n’est pas négligeable ! Au cours d’une lecture, la vue se fatigue et c’est la raison pour laquelle la longueur des lignes ne doit pas être trop longue ou trop courte. Il est recommandé de rester entre 55 et 60 caractères et au plus, de ne pas excéder les 80 caractères.

L’objectif est d’offrir une lecture confortable au lecteur.

Juste ici, vous êtes en train de lire un paragraphe qui est beaucoup trop long. Vous pouvez dès lors ressentir que le confort de lecture diminue grandement.

L’interlignage.

L’interlignage, ou l’espace qui sépare deux lignes, permet à l’oeil humain de ne pas lire tous les mots grâce à de petites fixations ou saccades. La casse joue un rôle important, un texte en minuscule facilitera la lecture tandis qu’un texte en majuscule pas.

Un interlignage faible (inférieur à 140%) engendre une lecture complexe.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Le corps du texte.

Le corps du texte correspond à la taille des caractères. Une bonne taille permettra d’en rendre la lecture aisée. Une taille trop petite empêchera l’utilisateur de profiter pleinement du site, ce qui pourra engendrer sa fuite (un peu comme dans Pokémon lorsque l’on tombe sur un Ratata).

La taille minimum recommandée est de 16 pixels.

La hiérarchie.

La hiérarchie se rapporte aux styles des titres et des sous-titres, etc. Ils sont étroitement liés aux paragraphes et une fois couplés avec ceux-ci, ils apportent une facilité de lecture de par le rythme qui en découle.

La hiérarchie se base sur un rapport de proportion utilisé dans le domaine de l’impression.

2

  • Minor Seventh — 1.778 ; 
  • Major Sixth — 1.667 ; 
  • Major Third — 1.250 ; 
  • Perfect Fourth — 1.333 ; 
  • Augmented Fourth — 1.414 ; 
  • etc.

La combinaison de polices.

La combinaison de polices repose sur trois caractéristiques. La première a pour nom la hauteur des « x » , la seconde est le contraste et la dernière s’appelle la chasse.

3

La hauteur des « x » .

Pour associer deux polices, on compare les lettres « x »  de celles-ci. Si les « x » ont des hauteurs similaires ou très très proches, l’association des polices est possible.

calcul de la hauteur des x

Le contraste.

L’épaisseur des traits d’une police constitue son contraste. Pour ce faire, on prend comme référence la lettre « o » . Si le trait est régulier nous parlerons de contraste bas mais, si le trait ne l’est pas nous parlerons de contraste haut.

épaisseur des traits de la lettre o

La chasse.

La chasse d’une lettre consiste dans sa largeur et l’espace qui l’entoure. Une lettre peut être étroite ou normale.

Pour connaître la chasse (et pas celle du sanglier), la lettre de référence est le « m » .

La micro typographie

Qu'est-ce que c'est ?

Comme son nom l’indique, la micro typographie se voit être plus petite que la macro typographie. Il s’agit de détails non négligeable à la présentation de la phrase.

Les marques de paragraphe.

Les marques de paragraphes se font en général par un saut de lignes ou un décalage de texte d’une longueur égale à la taille de la police d’écriture.

Il existe une dizaine de manières de réaliser les marques de paragraphe.

1

Les caractères accentués.

Comme dans tout texte, nous trouvons des accents. Ces accents sont beaucoup plus présents sur les minuscules mais cela ne permet pas de négliger les majuscules car, oui, les majuscules doivent être accentuées si nécessaire !

2

Les tirets.

Il existe trois sortes de tirets pour différentes utilisations :

  • Le tiret court s’utilise pour le trait d’union ou comme signe de soustraction ; 
  • Le tiret moyen ou « en dash » s’utilise pour remplacer les parenthèses, une durée, une distance ou encore le tiret d’une liste ; 
  • Le tiret long ou « em dash » s’utilise pour les dialogues, les transitions dans une phrase ou pour remplacer le tiret dans une liste.

3

Les guillemets.

Il existe deux sortes de guillemets, les français ou les anglais, qui s’entourent d’espaces fines insécables. Le guillemet français est utilisé pour les textes français tandis que son voisin anglais s’utilise pour des citations, des références ou encore des textes anglais.

4

Les listes.

Pour concevoir une bonne liste, les éléments de cette dernière doivent être alignés au texte du paragraphe, les tirets moyens sont de rigueur tout comme l’utilisation de point-virgule en fin de ligne sauf pour le dernier élément qui se terminera par un point.

5

Les ligatures.

Les ligatures, éléments vivement recommandés au moment du choix des polices, consistent en la fusion de lettres pour faciliter la lecture du texte.

Souvent, cette particularité est présente dans les polices dites « serif » ou « slab » .

6

Les chiffres.

Il existe deux sortes de chiffres, ceux qui suivent la ligne de texte (appelés “ lining figures ” ) ou ceux qui ne suivent pas cette ligne (appelés “ oldstyle figures ” ). Il n’y a pas de meilleur choix, aux développeurs de voir celui qui correspond le plus à son projet.

7

La ponctuation.

La ponctuation n’est pas chose aisée :

  • La virgule n’a pas d’espace avant mais un espace simple après ; 
  • Le point-virgule a un espace fine insécable avant et un espace insécable après ; 
  • Le point n’a pas d’espace avant mais un espace simple après ; 
  • Les deux points ont un espace insécable avant et un espace simple après ; 
  • Les points d’exclamation et d’interrogation ont un espace fine insécable avant et un espace simple après.

8