Montrer & Démontrer

Tom Romanzin

Macro Typographie

Lire n’est pas une chose facile, cette action fatigue l’œil.
Il est donc important de prendre soin de cet organe en faisant attention à la façon dont nous faisons nos choix pour que le lecteur ait une expérience agréable et puisse poursuivre la lecture du texte sans problèmes.

La macro typographie est essentiellement basée sur la couleur de paragraphe, les combinaisons de polices et la hiérarchie.
C’est grâce aux bons choix et au respect des règles que nos paragraphes seront lisibles et harmonieux.

1. La couleur de paragraphe

La couleur de paragraphe détermine l'équilibre, la lisibilité. Elle est traduite par le corps des caractères, l’interlignage, et le nombre de caractères par ligne.

Le corps de caractères

C’est à dire la taille de la typographie que nous allons choisir.
Par exemple, le paragraphe que vous êtes en train de lire a une taille de 24 px et le titre de ce paragraphe a une taille de 36 px. Ces valeurs n’ont pas été choisies aux hasard. J’ai respecté un rapport de proportion que voici.

Rapport de proportion

L’interlignage

L’interlignage décide de l’espacement qu’il y aura entre nos lignes et s’exprime en pixels. Il se calcule en fonction de la taille du corps de caractères. De base, l'interlignage d’une police est prédéfini sur 120%, ce qui convient pour un usage papier. Pour les écrans, nous privilégierons un minimum de 140%. Qui peut monter jusqu’à 180% voir même 200%.
Dans l’exemple illustré ci dessus, le premier paragraphe n’a pas été traité alors que pour le deuxième paragraphe, j’ai choisi le rapport de 140% par rapport à la taille de ma police. Ce qui donne un interlignage de 33.

Exemple d'interlignage

Dans l’exemple ci-dessus, si le lecteur plisse les yeux, il se rend compte que dans le premier paragraphe est quasiment illisible. Tandis que dans le deuxième paragraphe, il est possible de lire certains mots voir même, certaines phrases.

Maintenant, que notre corps de caractères et notre interlignage sont fait, on distingue déjà la couleur des paragraphes. Plus foncé pour le premier et plus clair pour le second.

Couleur de texte

Nombre de caractères par lignes

La longueur de ligne varie entre 60 et 80 caractères, car si c’est plus long, le lecteur est découragé.

Interligne correcte dans un texte

On constate maintenant que notre dernier paragraphe respecte les 3 règles de la macro typographie. Le corps des caractères, l’interlignage, et le nombre de caractères par ligne.

2. Les combinaisons de polices

Les combinaisons de polices sont utilisées pour choisir des typographies complémentaires. Généralement, pour faire de bons choix, on regarde la hauteur de X, le contraste et la chasse.

La hauteur de X

Elle nous permet de savoir si les typographies choisies sont harmonieuses entre elles. Un lecteur avisé remarquera une différence entre les 2 typographies.

Niveau de X

Le contraste

Le contraste correspond à la différence d’épaisseur de trait. Si le trait est irrégulier, alors le contraste sera élevé, et inversement, si le trait est régulier, alors le contraste sera faible.

Le contraste

La chasse

C’est la largeur du caractère et les espaces se trouvant avant et après celui-ci.

La chasse

3. La hiérachie

Un bon rapport de hiérarchie permet d’avoir un texte rythmé ce qui donne toute de suite une esthétique attrayante. Ce rapport met en forme les titres, sous-titres, paragraphes, citations
et annotations.

Il existe beaucoup de valeurs de proportions différentes, parmis les 14 vus en cours j’en ai choisi 1 pour ce site.

Hiérachie

Mais, étant donné que tout le monde n’a pas la chance de suivre des cours, voici un site web qui pourrait vous être utile.
➤ TypeScale

Micro Typographie

Maintenant que nous avons une vision d’ensemble de nos paragraphes et qu’ils n'agressent plus les yeux de nos lecteurs, il est temps pour nous de zoomer à nouveau dans notre travail et modifier les détails. Car c’est dans le détail que la différence se marque.

Afin d’obtenir une micro typographie correcte, nous devons impérativement faire attention aux marques de paragraphe, aux majuscules accentuées, aux types de tirets, aux guillemets ainsi qu’à la ponctuation et aux espaces.

1. Les marques de paragraphe

Les marques de paragraphe s’utilisent pour marquer un changement de paragraphe au lecteur. Trois techniques sont souvent utilisées. Généralement le paragraphe d’introduction n’en possède pas.

Pour marquer ce changement on peut utiliser une lettrine —
la première lettre du paragraphe en gras.

Les lettrines

Plus banal mais tout autant efficace, le saut de ligne.

Le saut de ligne

Ou bien un retrait vers la droite, équivalent à la taille de notre police de corps de texte.

Le retrait

2. Les majuscules accentuées

Lorsque nous naviguons sur internet, il est rare de voir des gens écrire avec des majuscules accentuées. Parce que les utilisateurs ne savent pas comment faire, parcequ’ils ne cherchent pas à en mettre ou tout simplement qu’ils oublient.
Afin d'éviter une partie des problèmes, voici une petite liste des majuscules accentuées les plus utilisées et leurs raccourcis clavier sur PC et Mac ainsi que leurs code HTML.

Majuscules accentuées

3. Les types de tirets

Il existe 3 types de tirets qui ont chacuns une signification et utilisation différente. Le tiret court, le tiret moyen ou « en dash » et le tiret long ou « em dash ».

Le tiret court

Il est utilisé pour les traits d’union, comme signe de soustraction et pour la césure dans les textes destinés à l’impression.

Tiret court

Le tiret moyen ou « en dash »

Il est utilisé à la place des parenthèses accompagné d’un espace avant et après le tiret, pour exprimer une durée ou une distance sans espace avant et après le tiret ou alors, pour une liste.

Tirets moyen

Le tiret long ou « em dash »

Il est utilisé pour des dialogues dans un texte, ou pour une transition dans une phrase et est toujours accompagné d’espace avant et après.

Tirets longs

4. Les bons guillemets

Dans le monde de la typographie, nous sommes confrontés aux guillemets. Ils permettent de mettre en avant une expression, une citation ou un terme. Mais ils ne sont pas tous les mêmes, ils ont des significations.

Le premier guillement est toujours suivi et le deuxième est toujours précédé d’un espace fine insécable.
Il faudra également penser à l’alignement de celui-ci.

Utilisation des guillemets

5. La ponctuation et les espaces

La ponctuation est importante dans une phrase. Elle permet de donner une intonation différente à la phrase. Le lecteur sera ravi d’en avoir !
Dans un autre registre, les espaces. Le lecteur ne verra pas vraiment de différence. Il ne se rendra pas compte que la lecture du texte sera plus simple, il existe plusieurs types d’espaces différents. L’espace, l’espace fine, l’espace insécable et l’espace fine insécable.

Les espaces

Les espaces

La ponctuation

La virgule

Pour la virgule, il n’y a pas d’espace devant mais il y a un simple espace après.

Le point virgule

Pour le point virgule ; il y a un espace fine insécable devant et un espace insécable après.

Le point

Pour le point final c'est comme pour le point virgule.

Les deux points

Pour les deux points : un espace insécable avant, suivi d’un espace classique après.

Le point d'intérogation et d'exclamation

Pour le point d’intérrogation et le point d’exclamation, ils sont séparés de la phrase par un espace fine. Un espace normal les suit.