MontrerDémontrer

par simon haddad

Macro Typographie

La macro typographie est une notion qu’il faut absolument assimiler pour pouvoir proposer un contenu propre et cohérent sur le web.

Les règles de typographie viennent du passé mais évoluent constamment avec leur époque. En fonction du média utilisé les règles varient et s’adaptent.

En effet on ne travaillera pas de la même manière pour du print et pour du web. Même si les notions d’échelle et de rythme sont valables dans les deux cas on les emploiera avec des règles différentes.

Couleur du Paragraphe

La couleur de paragraphe est l’impression visuelle qui est dégagée d’un paragraphe. Cette impression découle de trois éléments qui détermineront la façon dont on percevra le paragraphe. Ces éléments sont le corps des caractères, l’interlignage et la longueur de ligne. On peut rajouter à cela un élément que l’on détermine avant les autres, le choix de la police de caractère.

Type Size

Le corps des caractères doit toujours être supérieur à 16px en web. Un corps plus petit rendra la lecture difficile sur écran. On préconise d’utiliser une valeur comprise entre 16 et 22px pour le corps. Cette valeur peut être augmentée si l’on s’adresse à un public âgé pour leur faciliter la lecture.

Line Height

L’interlignage est en relation direct avec le corps des caractères. La lisibilité d’un texte dépend de l’harmonie entre ces deux valeurs. En print l’interlignage est égal à 120% du corps. En web on poussera cette valeur à minimum 140%, on peut envisager d’aller jusqu’à 200% dans certains cas. L’interlignage joue sur les mouvements de l’oeil. Un interlignage trop peu élevé demandera un effort de lecture important.

Line Width

La longueur de ligne influe aussi sur la lisibilité d’un texte. On recommande qu’une ligne comporte entre 50 à 60 caractères et qu’elle ne dépasse pas ou alors très légèrement les 10 mots. La longueur de ligne permet de faciliter le retour de l’oeil à la ligne suivante. En print la longueur de ligne est plus importante car il s’agit ici de faire des économies sur le papier pour l’impression. En web nous n’avons pas ce problème.

Combinaison des polices

La combinaison des polices ne se fait pas au hasard. Des polices vont bien ensemble si elles respectent certaines proportions. Choisir deux polices ayant la même hauteur de X permet d’équilibrer et de fluidifier la lecture. Le contraste du caractère peut être vérifier avec les O. La chasse, elle, se vérifie avec les M.

Les polices Serif et sansSerif peuvent être combinées. Le choix d’une police Serif ou sansSerif se fait en fonction de l’esprit que l’on veut que le texte dégage. C’est un choix graphique qui doit quand même respecter les règles de proportion énoncées plus haut.

Hauteur des X Contraste des O Chasse des M

La hiérarchie

La hiérarchie en typographie est le rapport de proportion entre le corps de texte, les titres, les sous-titres et ce qui suit. Les rapports de proportion ne se choisissent pas au hasard mais sont issus de rapport musicale et géométrique.

Le golden ratio — 1.618 est à proscrire car il est trop souvent utilisé et rendrait une page web trop basique et déjà vue.

Pour obtenir sa hiérarchie il faut multiplier la taille du corps de texte par le ratio que l’on a choisi. Dans mon cas j’ai choisi le ratio Augmented Fourth — 1.414 et j’ai un corps de 21px. J’ai donc multiplié 21 par 1.414 pour obtenir mes différents niveaux de hiérarchie.

Ceci

Est

Un

Rapport

Hiérarchique

Les caractères ne révèlent leurs secrets et partant, leurs beautés qu’à ceux qui les regardent attentivement.

— Jérôme Peignot, Typographe, De l’écriture à la typographie

Micro Typographie

Écrire correctement à l’ère du numérique implique de connaître la micro typographie correctement.

Le choix des tirets à utiliser, les espaces entre les signes de ponctuations et les caractères qui les précèdent, l’accentuation des majuscules … Rien ne doit être laissé au hasard  !

Il faut réfléchir et choisir les marques de paragraphe, chaque choix s’accompagne de règle à suivre et chaque choix se fait en fonction d’un contexte. Les espaces de ponctuations sont aussi à respecter et pour certains caractères il faut l’encoder dans le HTML pour être sûr que ces espaces seront respectés.

Les marques de Paragraphe

Les marques de paragraphes servent à signifier visuellement au lecteur que l’on change de paragraphe. Il existe deux marques de paragraphes principales.

Il y a le saut de ligne où l’on saute une ligne entre deux paragraphes et il y a le retrait équivalent à un em (ou un multiple d’em) en début de paragraphe. Attention ce retrait ne se fait pas sur le premier paragraphe. Il existe 8 autres marques de paragraphes mais elles ne sont pas autant utilisées que les deux principales et sont très situationnels.

Dans tout les cas une fois notre type de marque de paragraphe choisit il faut s’y tenir et garder la même marque pour tout le texte. Sauf peut-être sur ce site où le but est de montrer et démontrer  ?

Les marques de paragraphes servent à signifier visuellement au lecteur que l’on change de paragraphe. Il existe deux marques de paragraphes principales.
Il y a le saut de ligne où l’on saute une ligne entre deux paragraphes et il y a le retrait équivalent à un em (ou un multiple d’em) en début de paragraphe. Attention ce retrait ne se fait pas sur le premier paragraphe. Il existe 8 autres marques de paragraphes mais elles ne sont pas autant utilisées que les deux principales et sont très situationnels.
Dans tout les cas une fois notre type de marque de paragraphe choisit il faut s’y tenir et garder la même marque pour tout le texte. Sauf peut-être sur ce site où le but est de montrer et démontrer  ?

Les majuscules accentuées

La langue française a pour particularité d’utiliser des lettres avec des accents. Ce n’est pas la seule langue à en utiliser mais en anglais il n’y en a pas. Malheureusement pour nous francophones la langue anglaise est la langue que nos langages de programmations utilisent.

Il est néanmoins important de respecter notre langue et de respecter ses accents, nos claviers nous permettent d’en écrire facilement quand les caractères sont en minuscules mais qu’en est-il quand les caractères sont en majuscules  ?

Quand ils sont en majuscules il faut utiliser des raccourcis claviers qui sont propre à chaque OS. Il y a aussi des mots-clefs propre au HTML.

 À Ä Ê É È Ë Î Ï Ô Ö Û Ü Æ Œ Ç

Les bons tirets

Il existe trois types de tirets distincts qui sont utilisées pour des situations différentes. Il faut savoir quand et où les utiliser.

Le premier type de tiret est le tiret court. Il est utilisé pour les traits d’unions, les soustractions et les césures. -

Le deuxième type de tiret est le tiret moyen aussi nommé en dash. Il est utilisé pour remplacer des parenthèses, pour exprimer une durée ou une distance et pour les listes. –

Le troisième type est le tiret long aussi nommé em dash. Il est utilisé pour les dialogues, les transitions, les citations et les signatures. —

C’est-à-dire

12 - 8 = 4

Ouvert 8:00 – 18:00

  • une liste
  • avec les bons tirets

— La lecture de cette page web se passe bien  ?

— Je vais te dire que oui  !

Les bons guillemets

Il faut différencier les guillemets typographique et les guillemets de programmation. Sur nos claviers on a facilement accès aux guillemets de programmation. En plus de cela il y a aussi une différence entre les guillemets français et les guillemets anglais, pour choisir entre les deux c’est plutôt facile cela dépend de la langue dans laquelle est écrite le texte.

Better to die than spend his life misunderstood to explain.

— William Shakespeare

« Le chemin est long du projet à la chose. »

— Molière

La ponctuation et les espaces

Les espaces et la ponctuation font aussi parti de la micro typographie. Il y a des règles à respecter :

  • pour la virgule pas d’espace avant et un espace après
  • pour le point pas d’espace avant et un espace après
  • pour le point-virgule un espace insécable avant et un espace après.
  • pour les deux points un espace avant et un espace après pour une liste, un espace insécable dans les autres cas
  • pour les points d’exclamations et d’interrogations un espace fine insécable avant et un espace après