Montrer. Démontrer.

par alperen aslan

Macrotypographie

La macrotypographie a pour but d’améliorer la lisibilité et l’apparence d’une page selon des critères précis. Elle est responsable de l’adaptation de la typographie au design général du site.

Couleur de paragraphe

Il y a trois éléments qui déterminent la couleur d’un paragraphe :

La couleur des paragraphes ne doit être ni trop claire, ni trop foncée, sauf si le contenu le demande. Il faut néanmoins faire attention à ne pas utiliser trop de couleurs différentes pour ne pas tomber dans une surcharge informationnelle. Métaphoriquement parlant, on parle ici d’un triangle équilatéral.

Combinaison de polices

Il existe 3 éléments qui aident à déterminer une combinaison de polices :

Si la hauteur, le contraste et la chasse correspondent, alors on peut envisager d’utiliser les deux polices d’écritures ensemble. Il ne faut pas oublier que l’on n’utilise pas une police d’écriture parce qu’elle nous plaît, mais bien parce qu’elle est clairement lisible et pratique. Métaphoriquement, on peut appliquer la technique de « l’ombre ». Notre ombre est similaire à la forme de notre corps, mais pas parfaitement pareille. Le but ici est de trouver deux polices d’écritures qui se ressemblent, tout en ayant leurs différences.

La hiérarchie

La hiérarchie, en typographie, c’est le rapport de proportions entre le corps et les autres niveaux. Il existe deux rapports de proportions :

Il suffit de prendre la valeur la plus petite de notre corps, et la multiplier par le rapport de notre choix pour obtenir, graduellement, la hiérarchie de notre typographie. Métaphoriquement, on peut parler de la méthode du « W ».

Microtypographie

La microtypographie s’intéresse plus particulièrement aux détails de la typographie. Elle est plutôt située à l’échelle du mot/du caractère, et s’attarde sur des facteurs qui touchent à la police d’écriture en tant que telle.

Marques de paragraphe

Les marques de paragraphe permettent de signaler un changement de paragraphe, et ainsi laisser le texte respirer un peu. Il existe en tout 10 marques de paragraphe différentes, ayant chacune une particularité.

Indent : Le premier paragraphe n’a pas de retrait, pour avoir un coin carré. À partir du second paragraphe, on applique un retrait équivalent à un em à la première phrase, et ce jusqu’à la fin du texte.

Exdent : Contrairement à son prédécesseur, le retrait des premières phrases de chaque paragraphe sont inchangées. On applique un retrait équivalent à deux em minimum au reste du texte.

Extra leading : On ajoute 50% de plus à l’interlignage de base. Par exemple, si j’ai un interlignage de 12, j’y ajoute 50% (donc 6) et j’obtiens un interlignage de 18.

Graphic element : On ajoute un élément graphique entre chaque paragraphe, sans faire de retours à la ligne. Ainsi, on obtient un mélange entre la typographie classique et moderne.

Rule : Une ligne noire est ajoutée entre chaque paragraphe pour les séparer.

Initial Capital : Le premier mot du premier paragraphe est entièrement en majuscule et plus grand, tout en restant sur la même ligne que le reste des mots.

Drop Capital : La première lettre du premier mot du premier paragraphe est en grand, et s’étend sur plusieurs lignes.

Capitals : Le premier mot de chaque paragraphe est en majuscule et en gras. Cela permet de garder un certain rythme, même si les paragraphes se suivent et s’enchaînent.

Weight : Le retrait des premières phrases de chaque paragraphe sont inchangées. On applique un retrait équivalent à deux em minimum au reste du texte. De plus, la première phrase est en gras.

Margin : Un paragraphe sur deux s’aligne du côté droit, et inversement.

Majuscules accentuées

Il est important que la majuscule d’une lettre accentuée garde son accent. C’est pourquoi, il existe différents raccourcis claviers pour les appliquer en majuscule. Aucune métaphore cette fois-ci, simplement de la logique.

Types de tirets

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

Les guillemets

Il existe trois types de guillemets, et chacun à une place bien précise dans une phrase. Les deux derniers dépendent de la police d’écriture. Les guillemets sont précédés et suivis d’un espace insécable.

« = Guillemets français.

” & ” = Citations anglaises, références, etc.

Espaces de ponctuation

En plus de faire attention à sa ponctuation, il est important de bien regarder aux espaces de ponctuation. Avant de les définir, penchons-nous sur les espaces insécables, qui sont les espaces précédents une ponctuation en HTML. Ils sont écrits à l’aide du code « ». Il y en a 6, et sont listés comme ceci :