MontrerDémontrer

Christopher Saenen

La typographie est composée de deux grandes catégories : la macrotypographie et la microtypographie. La première relative au texte dans sa globalité, où chaque règle permet d’obtenir un contenu fluide, aéré et agréable à lire. Chacune d’elles s’applique sur le tout, là où la microtypographie s’appliquera plutôt sur une partie du texte.

La macrotypographie

Couleur de paragraphe

Montre, démontre qu’avec des fixations, des saccades, tu lis plus aisément.

Montre, démontre qu’avec des fixations, des saccades, tu lis plus aisément.

Montre, démontre que sans fixation, sans saccade, tu lis moins aisément.

Ces saccades et fixations sont étroitement liées à l’interlignage. S’il est trop faible, la lecture demandera un effort supplémentaire. Les paragraphes de cette page ont un interlignage de 183%, pour permettre une lecture confortable. L’interlignage doit se situer entre 140% et 200%. Mais comment choisir le bon pourcentage ? Tout est expliqué dans les rapports et proportions.

Longueur de ligne

70 ch

Ni trop longue, ni trop courte. Bon, ce n’est pas une vérité absolue et on peut la faire varier en fonction de notre contenu, tant que c’est justifié. Mais il vaut mieux rester entre 60 et 80 caractères. N’oublie pas que le lecteur doit passer à la ligne suivante, donc autant qu’il n’en saute pas une.

Combinaisons de polices

Sérif, sans-sérif ? Les fontes sérifs sont généralement utilisées en paragraphes car elles possèdent un empattement qui facilite la lecture. On utilisera, en général, une sans-sérif pour les titres et sous-titres. Mais tout ceci ne constitue pas une loi, il n’y a que des bons et des mauvais choix.

Trois paramètres sont à considérer lorsqu’on compare deux fontes. Ces trois règles aident à associer tes polices, mais essayer de faire correspondre chaque paramètre au pixel près n’a pas de sens non plus. Le but est de garder une harmonie, un équilibre.

  • Hauteur de x

    Lorsqu’on sélectionne une paire de fontes, il faut être attentif à leur équilibre, ce qui permettra de maintenir la fluidité de la lecture. La hauteur d’un même caractère doit être similaire, le glyphe du « x » étant un bon indicateur du fait que le haut et le bas se reposent sur une ligne horizontale.

    hauteur_x_3 Hauteur de corps Hauteur
  • Chasse ou avance

    La chasse est la largeur du glyphe d’un caractère à laquelle il faut ajouter l’approche (espace entre deux caractères). Elle peut être soit monospace (toutes les glyphes ont une largeur identique) ou proportionnelle (chaque glyphe a sa propre largeur). Comparer les glyphes du caractère m ou n est conseillé du fait de leurs côtés plats.

    Chasse + approche
  • Contraste

    Le contraste est l’épaisseur du trait sur l’ensemble d’un glyphe. Il peut être soit régulier (contraste bas), soit irrégulier (contraste haut).

    cont_02 cont_01

Ligne de base

Au début, j’ai parlé de l’interlignage qui doit se situer entre 140% et 200% de la taille de corps. Seulement, un texte ne se compose pas uniquement de paragraphes. Il faut y ajouter des titres, des sous-titres, bref, il y a un niveau hiérarchique qui se différencie principalement par la taille de corps. Sur cette page, le corps de paragraphe est de 18 pixels et le niveau supérieur est à 25,4 pixels. Le premier a un interlignage de 33 pixels (183%) et le second est à 42 pixels (165%). Pourquoi ?

Chaque ligne de texte doit reposer sur une ligne de base qui est celle du paragraphe. C’est-à-dire que les niveaux inférieurs et supérieurs, qui n’ont pas la même taille de corps, doivent aussi reposer sur cette même ligne de base. Pour y arriver, il faut utiliser des multiples de trois, quatre ou cinq.

La ligne de base

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

La ligne de base

30 est un multiple de 6.

42 est un multiple de 6.

54 est un multiple de 6.

Chaque ligne va donc se reposer sur une même ligne de base.

La ligne de base

La ligne de base

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

30 est un multiple de 3 et 5.

35 n'est est un multiple de 3.

47 n’est pas un multiple de 3 ou 5.

Les lignes ne vont donc pas se reposer sur une même ligne de base.

Hiérarchie

J’ai 18 pixels de taille de corps de paragraphe, très bien. Mais pourquoi 25,4 pixels pour le niveau hiérarchique supérieur ? Choisir la première valeur se fait arbitrairement par rapport à la couleur de paragraphe que l’on veut. La seconde se base sur des rapports de proportion issus de la musique et de la géométrie. Il suffit d’en choisir un pour rythmer nos textes et les rendre harmonieux. Attention cependant à l’aspect exponentiel de ces valeurs, on peut facilement obtenir des rapports inutilisables. Et on évitera le ratio 1,618.

    • Musique
    • Minor Second — 1.067
    • Major Second — 1.125
    • Minor Third — 1.200
    • Major Third — 1.250
    • Perfect Fourth — 1.333
    • Augmented Fourth — 1.414
    • Perfect Fifth — 1.500
    • Minor Sixth — 1.600
    • Golden Ratio — 1.618
    • Major Sixth — 1.667
    • Minor Seventh — 1.778
    • Major Seventh — 1.875
    • Octave — 2.000
    • Major Tenth — 2.500
    • Géométrie
    • Adrat (or Square Even) — 1
    • Hemidiagon — 1.118
    • Trion — 1.154
    • Quadriagon — 1.207
    • Biauron — 1.236
    • Penton — 1.272
    • Diagon — 1.414
    • Bipenton — 1.458
    • Hemiolion — 1.5
    • Auron — 1.618
    • Hecton (or Sixton) — 1.732
    • Doppelquadrat (Halves) — 2
Hello Hello Hello Hello Hello Hello

Pixel versus EM

Le pixel est l’unité de base en typographie web. Il existe néanmoins une autre unité qui offre quelques avantages, l’EM. Cette unité est relative au corps choisi, c’est-à-dire que si la taille de corps est spécifiée, tous les enfants auront une valeur relative à leur parent. Par défaut, 1 em est équivalent à 16px.

Toutes ces règles permettent d’avoir un ensemble cohérent, un texte fluide, agréable à lire, rythmé. Depuis le début, on reste en surface, chaque règle s’appliquant à l’ensemble. Il faut maintenant aller au spécifique. On est parti du texte, on entre au niveau du paragraphe, du mot, de la lettre. Ces principes vont être plus subtils à identifier pour le lecteur, il ne s’en rendra pas toujours compte, mais ils participeront à son plaisir de lire, de nous lire.

La microtypographie

Marques de paragraphe

  • Indent
  • Exdent
  • Extra leading
  • Graphic Element
  • Rule
  • Initial Capital
  • Drop Capital
  • Capitals
  • Weight
  • Margin

Quelques paragraphes, ou plutôt deux, seront suffisants pour montrer les dix marques. Ceci est le premier paragraphe, il est souvent différent des autres car c’est celui indique le début du texte. Le choix d'une règle est arbitraire, mais comme toujours, il n'y a que de bons et de mauvais choix.

Voici le second paragraphe. Que ce soit le deuxième ou le centième paragraphe, les règles s'appliquant ne changent plus, si ce n'est la règle “margin” qui diffère légèrement. Et pour une, deux, trois, dix marques de paragraphe, il n'y a que deux principes essentiels.

On applique soit un saut de ligne, soit un retrait équivalent à un em (ou multiple de). Et ne pas oublier de ne pas mettre de retrait sur le premier paragraphe.

Majuscules accentuées

La langue française comporte des accents, nos claviers pas autant. Comment faire un À, un È ou un É dans ce cas ? Personne ne les fait. Mais nos textes sont respectueux de nos lecteurs, donc si une lettre comporte un accent (ou tout autre caractère spécial, majuscule ou minuscule), il doit être mis, même en majuscule.

Voici la liste des caractères spéciaux difficiles à entrer au clavier avec leur entité HTML. Le reste est à voir sur le site W3Schools.

  • Œ
  • œ
  • À
  • Ç
  • È
  • É
  • É
  • Ù
  • Œ
  • œ
  • À
  • Ç
  • È
  • É
  • Ù

Tirets

Le tiret court

  • tiret court - tiret quart de cadratin - trait d’union - signe moins
  • -
  • -

Il est utilisé pour un mot composé, tel que « demi-cadratin », une césure en fin de ligne, signifier « moins » que ce soit pour un nombre (sans espace), comme « -5 », ou une soustraction (avec espace) telle que « 3 - 2 = 1 ». Dans la tradition française, il permet d’indiquer un intervalle tel que « 2017 - 2018 » où le tiret est entouré d’espaces fines insécables ( )

Le tiret moyen

  • tiret moyen – tiret demi-cadratin – demi-tiret – en dash
  • –

Il est utilisé pour encadrer une incise (élément qui interrompt la continuité de la phrase), entourée d’un espace fine insécable à l’intérieur de l’incise et un espace insécable à l’extérieur, pour les listes, les intervalles, délimités d’espaces fines insécables ( ). L’utilisation du demi-cadratin est prescrite par la tradition anglo-américaine et est plus précise (ainsi que plus belle, mais chacun est libre de penser autrement).

Le tiret long

  • tiret long — tiret cadratin — em dash
  • —

Il est utilisé pour les dialogues, un changement ou une transition dans une phrase (avec espace avant et après).

Guillemets

Quel que soit le type de guillemets utilisés, ils doivent contenir des espaces fines insécables.

  • Guillemets simples, typographiques ou français
  • « … »
  • Guillemets anglais - à utiliser pour tout ce qui est en anglais tels que les citations ou les références.
  • “ … ”
  • “ … ”
  • Guillemets droits - jamais en typographie.
  • " … "

Apostrophes

Même principe que les guillemets. Et sans espace.

Jamais l'apostrophe droite.

Toujours lapostrophe inclinée.

 La citation idéale se compose des bons guillemets accompagnés d’un espace fine insécable, où le premier sera aligné en dehors du cadre.    Christopher Saenen, typographie Web

Alignement des listes

  • J’aligne correctement mes listes :
  • avec un point virgule ;
  • avec un point virgule ;
  • terminé par un point.

Ligatures

  • oeuf > œuf
  • finir > finir
  • ex aequo > ex æquo
  • flou > flou

Il est nécessaire de vérifier que vos fontes possèdent les ligatures (ce qui est habituellement le cas pour les serif et slab) et de les utiliser, ce qui profitera à l’esthétique globale de vos textes, même si vous serez toujours dépendants des nagivateurs (qui ont chacun leur approche sur le sujet). Vous pouvez retrouver toutes les ligatures sur le site de Jon Tan

Les chiffres

0123456789 — Lining

0123456789 — Oldstyle

Les chiffres « oldstyle » seront souvent préférés dans un texte courant, dont leur style se veut moins intrusif et se fond bien avec les lettres avoisinantes. Ils se pairent également bien avec les petites majuscules. Les chiffres « lining » seront en revanche plus adaptés aux données, telles que les dates, les quantités, les prix, les numéros, etc.

  • 23
  • 7  483
  • 1  394  033
  • 1  h  45
  • 25  

Les nombres composés de 4 chiffres et plus sont groupés par 3 et séparés par un espace insécable ( ).

  • 23,00
  • 983,84
  • 2,98
  • 8 372,00
  • 1,00

Si des nombres se trouvent dans un tableau, tous doivent avoir le même nombre de décimales et être alignés droite.

0 1 2 3 4 5 6 7 8 9 — proportionnels

0 1 2 3 4 5 6 7 8 9 — tabulaires

Les chiffres peuvent aussi être proportionnels ou tabulaires. Les premiers sont préférables dans un environnement textuel, tandis que les seconds sont plus appropriés quand ils sont lus en colonnes.