MONTRERDÉMONTRER

SIMON LAMOLINE

Macro Typographie

La macro typographie est la base de la mise en forme d’un paragraphe et les différents principes de hiérarchie qui rythment le contenu textuel et qui rendent la lecture plus facile.

La couleur de paragraphe

La couleur de paragraphe est une étape importante à ne pas négliger. Pour connaître cette dernière, il suffit de mettre côte à côte plusieurs fois le même contenu avec des typographies et des interlignes différents. En prenant un peu de recul et en plissant les yeux, les différentes couleurs de paragraphes apparaissent. Il est conseillé de choisir une couleur de paragraphe qui n'est ni trop claire, ni trop foncée.

C'est alors que le World Wide Web est arrivé et a transformé l'Internet, technologie d'interconnexion des réseaux d'ordinateurs qui comptait 213 machines connectées en août 1981, en un cyberespace planétaire qui a atteint 5 milliards de terminaux connectés en août 2013 et dans lequel s'est développé au cours des années 1990 une véritable « vie sur écran » autant qu'une forme authentique et nouvelle de « culture » .

C'est alors que le World Wide Web est arrivé et a transformé l'Internet, technologie d'interconnexion des réseaux d'ordinateurs qui comptait 213 machines connectées en août 1981, en un cyberespace planétaire qui a atteint 5 milliards de terminaux connectés en août 2013 et dans lequel s'est développé au cours des années 1990 une véritable « vie sur écran » autant qu'une forme authentique et nouvelle de « culture » .

La couleur de paragraphe varie selon plusieurs critères :

  • Le corps des caractères

    C’est la taille des caractères utilisés, la hauteur d'une ligne.

  • L'interlignage

    Il s’agit de l’intervalle entre deux lignes. En web il doit être au minimum de 140% et il peut même aller jusqu’à 200% dans certains cas.

  • Le nombre de caractères par lignes

    Pour permettre à l’utilisateur une lecture optimale, une ligne doit comporter entre 60 et 80 caractères qui composent une dizaine de mots.

La combinaison de polices

L’une des étapes les plus importantes de la conception d’un site web consiste à trouver deux ou plusieurs polices de caractères qui puissent se combiner. Dans la plupart des cas, deux polices sont utilisées, une pour les titres et l’autre pour les paragraphes. Pour combiner deux polices de caractères, au moins un des critères ci-dessous doit être respecté :

La hauteur de X

Cette technique consiste à comparer la hauteur de la lettre X des deux polices de caractères choisies à une même valeur de taille (dans ce cas Quick Stand et Hind). Si leur hauteur est similaire, ce critère est respecté.

Le contraste, la régularité de l’épaisseur du trait

Il existe deux types de contraste : le contraste bas et le contraste haut. Une police a un contraste bas (ici en gris) lorsque l’épaisseur du trait sur l’ensemble du dessin de la lettre à une taille qui reste stable. Lorsque l’épaisseur du trait varie dans le dessin de la lettre il s’agit d’un contraste haut (ici en orange). Pour que deux polices puissent se combiner, elles doivent avoir le même type de contraste.

La chasse, la largeur des caractères

Pour comparer la largeur des caractères de deux typographies, il suffit de superposer deux mêmes lettres, chacune avec une police différente. En réduisant l’opacité, il est possible de voir si leur largeur est semblable ou non. Plus elle l’est, plus les polices sont combinables entre elles.

Hiérarchie

Le rapport hiérarchique est un rapport de proportion entre le corps de texte et les autres éléments. Il a pour but de rendre le contenu plus lisible et d’apporter plus de structure et de rythme en facilitant l’identification des blocs d’informations. Pour ce faire, il suffit de multiplier la valeur du corps de paragraphe par un rapport qui peut être soit musical, soit géométrique.

Micro Typographie

La micro typographie est la vision d'ensemble, elle s'intéresse aux détails de la typographie et ce sont ces détails qui font la différence.

Les marques de paragraphes

Pour rendre le contenu plus clair, il est important de signifier un changement de paragraphe. Pour ce faire il existe 10 possibilités. Les deux principales sont l’utilisation d’un saut de page et le retrait en em. L’em est l’équivalent de la largeur d’une ou plusieurs fois la lettre m en minuscule dans la police utilisée. Si le choix se porte sur le retrait, celui-ci ne s’applique pas au premier paragraphe. Le site explorationsintypography propose d’autres possibilités de marques de paragraphes.

Les majuscules accentuées

Même s’il n’est pas toujours évident de les écrire au clavier, les majuscules accentuées ont leur importance. Le mot Ecole est par exemple différent du mot École. Sur Mac comme sur PC, il est possible de créer des raccourcis clavier qui permettent de les écrire facilement. Dans le code HTML, elles s’écrivent comme ci-contre. L'ensemble des entités de caractères spéciaux se retrouve sur le site de w3schools.

Les types de tirets

Il existe 3 types de tirets, tous avec une fonction différente.

  • Le tiret court

    Le tiret court s’utilise comme trait d’union (Ex : toi-même) et comme signe de soustraction (Ex : 6 - 5 = 1). Il s’utilise aussi pour la césure mais celle-ci est à proscrire dans le web car elle n’est pas encore au point.

  • Le tiret moyen

    Le tiret moyen – aussi appelé  « en dash » – s’utilise dans les listes et à la place des parenthèses, dans ce cas il est entouré d’espaces. Il peut aussi être utilisé pour exprimer des distances (Namur–Bruxelles) et des durées (08h40–10h40) mais dans ces deux cas il n’est pas entouré d’espaces où il l’est avec des espaces fines. En Html, le tiret moyen s’écrit –.

  • Le tiret long

    Le tiret long, où « em dash », s’utilise pour la mise en forme des dialogues et pour un changement ou une transition dans une phrase. En Html, celui-ci s’écrit —.

Les guillemets

Il existe différents types de guillemets avec des fonctions spécifiques. Le guillemet typographique, guillemet français ou guillemet simple, s’utilise avec la langue française, il se présente comme tel : « ... ».

Pour le contenu en Anglais, les citations et les références, il faut utiliser ce genre de guillemets : “ ... ”. Ils peuvent varier en fonction de la police de caractères utilisée. Dans les deux cas, ils doivent être entourés d’espaces fines insécables.

La ponctuation et les espaces

En typographie, il existe plusieurs types d’espace. L'espace simple et l'espace insécable qui ne peuvent pas être séparés par un éventuel retour à la ligne et l’espace fine insécable qui suit le même principe mais qui est légèrement plus fin que le précédent. En HTML, l’espace insécable s’écrit   et l’espace fine insécable s’écrit  . Chaque caractère de ponctuation a des critères d'espace bien spécifiques :

  • Avec la virgule et le point, il ne faut jamais placer d'espace avant mais toujours après. Celui-ci doit être un simple espace car un retour à la ligne ne gêne pas la lecture.
  • Le point-virgule doit quand à lui être précédé d'un espace fine insécable et suivi par un espace insécable.
  • Lorsqu'on utilise les deux points, il faut les faire précéder d'un espace fine insécable et les faire suivre d'un simple espace dans le cas d'une liste ou d'un espace insécable dans les autres cas.
  • Pour les points d'interrogation et les points d'exclamation, il faut placer un espace insécable avant et un simple espace après.