Montrer

Démontrer

— Par Aline Gillard

Macro Typographie

C’est la mise en forme des paragraphes, des titres, sous-titres pour former un ensemble harmonieux.

La couleur de paragraphe

La couleur des paragraphes est la sensation de couleur plus ou moins sombre que l’on voit lorsqu’on plisse les yeux. Une sensation plus clair sera un texte plus aéré, au contraire un texte plus concentré donnera une sensation plus foncée. La couleur des paragraphes se détermine avec trois éléments.

La couleur des paragraphes est la sensation de couleur plus ou moins sombre que l’on voit lorsqu’on plisse les yeux. Une sensation plus clair sera un texte plus aéré, au contraire un texte plus concentré donnera une sensation plus foncée. La couleur des paragraphes se détermine avec trois éléments.

Le corps du texte

C’est la taille que l'on choisi pour notre police, mais attention à ne pas confondre avec la taille des lettres. Si l’on choisit une valeur de 200 pt, la lettre ne fera pas cette taille car il y a des espace au dessus et en dessous. Toute les lettres sont différentes et ne font pas la même taille.

taille d'une lettre

L'interlignage

Par défaut celui-ci est de 120 % de la valeur du corps, mais ce pourcentage n’est pas assez élevé pour nos écrans. L’interlignage du texte se situe plus entre 140 % et 200 % pour obtenir une couleur de paragraphe correcte . Pour calculer c’est très simple, voici un exemple:
[corps du texte] : 100 x [% interlignage] = interlignage en pt

La longueur des lignes

C’est le nombre de caractères qui compose une ligne. Plus la ligne est courte plus le lecteur aura de facilité pour passer à la ligne suivante. Au contraire si elle est trop longue celui-ci aura des difficultés à passer à la ligne. La plus longue ligne du paragraphes doit être entre 60 et 80 caractères pour une lecture facile, ce qui équivaut plus ou moins entre à 10 et 15 mots.

La combinaison de polices

L’utilisation d’un police sans serif pour les titres et serif pour le texte est une bonne association mais n’est pas une règle absolue. Pour avoir une bonne combinaison entre deux police il faut tenir compte de 3 éléments.

La hauteur

Les deux polices choisies doivent faire plus ou moins la même hauteur en X. Mieux la hauteur correspondra plus il y aura une bonne harmonie entres les polices.

hauteur des X

Le contraste

C’est l’épaisseur du trait sur l’ensemble de la lettre. Pour vérifier que celui-ci correspond entre les deux polices on va superposer les lettres O de chacune de celle-ci.

épaisseur des traits

Il existe deux types de trait qu’il n'est pas judicieux d’associer ensemble:

  • le trait régulier qui à un contraste bas car il a la même épaisseur partout ;
  • le trait irrégulier qui a un contraste haut car il à des épaisseurs différentes sur une même lettre.
types de traits

La chasse

C’est la largeur du caractère. Ici pour vérifier la largeur des caractères nous allons superposer les lettres m n de chaque police.

largeur des lettes

Il existe deux types de chasse qu’il n’est pas judicieux d’associer ensemble:

  • la chasse concentrée ;
  • la chasse large.
types de chasses

L’hiérarchie

C’est un rapport de proportion entre le corps des textes, des titres, sous-titres,… On utilise une hiérarchie pour le rythme et pour une meilleure identification des blocs. Il existe pleins de rapport de proportions, en musique ainsi qu’en géométrie.

Musique

  • Minor Second — 1.067
  • Minor Third — 1.200
  • Perfect Fourth — 1.333
  • Perfect Fifth — 1.500
  • Golden Ratio — 1.618
  • Minor Seventh — 1.778
  • Octave — 2.000
  • Major Second — 1.125
  • Major Third — 1.250
  • Augmented Fourth — 1.414
  • Minor Sixth — 1.600
  • Major Sixth — 1.667
  • Major Seventh — 1.875
  • Major Tenth — 2.500

Géométrie

  • Adrat (or Square Even) — 1
  • Trion — 1.154
  • Biauron — 1.236
  • Diagon — 1.414
  • Hemiolion — 1.5
  • Hecton (or Sixton) — 1.732
  • Hemidiagon — 1.118
  • Quadriagon — 1.207
  • Penton — 1.272
  • Bipenton — 1.458
  • Auron — 1.618
  • Doppelquadrat (Halves) — 2

Calcul des niveaux hérarchique

Pour calculer les différents niveaux hérarchique c’est très simple, on multiplie la valeur du corps de nos paragraphes avec le rapport de proportion de notre choix.

Exemple: Perfect Fifth — 1.500

exemple d'un calcul de niveaux hérarchique

Micro Typographie

Après avoir mis en forme le contenu, il reste à se perfectionner dans les détails, et ces détails sont la micro typographie.

Les marques de paragraphe

Il existe deux marques de paragraphe les plus utilisées:

  • un saut à la ligne sans retrait ;
  • un retrait équivalent à un em, un multiple d’em (un em est égale à la largeur du m) ou la valeur de ton interlignage. Le premier paragraphe n’a pas de retrait ;
  • il y a également 8 autres possibilités un peu moins utilisées comme les traits, lettrines, graisses, éléments graphiques, majuscules, etc. Vous pouvez retrouver ces marques de paragraphet ici.
marques de paragraphe

Les majuscules accentuées

Pour plus de précision et toujours dans le soucis du détails, il ne faut pas oublier d’accentuer les majuscules. Les raccourcis clavier sont différents sur Mac ou sur Pc et aussi en fonction des claviers. Pour les trouver, google est votre ami, poser lui la question.

majuscule accentuée

Les types de tirets

Il existe trois types de tiret, le court, moyens ou le long. Ils ont chacun une utilisation différentes.

Tiret court ou "hyphen" ( - )

  • trait d'union: arc-en-ciel ;
  • soustraction: 10 - 5 = 5 ;
  • les césures qui coupent des mots en fin de ligne, mais pour le web il est préférable de désactiver la césure automatique.

Tiret moyen ou "en dash" ( – )

  • utilisé à la places des parenthèses, avec des espaces:
    la licorne – rose – était loin ;
  • durée, sans espace: 09:40–11:40 ;
  • distance, sans espace: Bruxelles–Namur ;
  • liste à la place du tiret court, avec un espace après.

Tiret long ou "em dash" ( — )

  • dialogues ;
  • un changement ou une transition dans une phrase ;
  • signature, citation: — Aline Gillard.

Les guillemets

Ils sont différents pour les citations françaises ou anglaises. Les guillemets anglais varient en fonction de la police d’écriture choisie. Voici les guillemets appropriés:

  • « Citation française »
  • “ Quote in English ”

La ponctuation et les espaces

Un espace insécable est un espace que l’on place entre un mot et une ponctuation lorsque que ceux-ci ne doivent pas être séparé lors d’un retour à la ligne automatique. Un espace fine insécable est un espace insécable mais plus fin comme son nom l’indique.

, pas d'espace avant — un espace après
. pas d'espace avant — un espace après
; un espace insécable avant — un espace après
: un espace fine insécable avant — un espace après pour une liste, un espace insécable dans les autres cas
? espace fine insécable avant — un espace après
! espace fine insécable avant — un espace après
% espace insécable avant — un espace insécable après
« … » espace fine ou insécable avant et après