Grille typographique: La théorie

Après la découverte de LESS, et de SASS, ma première idée pour exploiter ce langage, concernait la typographie. Même si les frameworks CSS proposent des styles pour la typographie, il est fréquent de devoir les modifier, pour changer la police, modifier la taille de base et/ou la taille des titres. Utiliser SASS pour se construire une feuille de styles typographique paramétrables est donc une idée assez logique.
Avant de rentrer dans le codage, il m’a semblé utile de faire un point sur les éléments clés de la typographie.

Pour écrire cet article, je me suis principalement basé sur deux articles de Smashing Magazine: Le premier Technical Web Typography: Guidelines and Techniques (2011), nous donne les principales règles à suivre, le second, plus ancien (2009), Typographic Design Patterns and Best Practices, compile les données typographiques d’un certain nombre de sites.

La construction d’une feuille de styles typographiques comporte globalement 6 étapes:

  1. Choix de la police de caractères,
  2. Choix de la taille de la police,
  3. Choix du rythme vertical,
  4. Définition de la taille des titres,
  5. Alignements, indentation, et césure,
  6. Définition des autres éléments

Choix de la police de caractères

Pour simplifier, les polices de caractères se divisent en deux grandes familles: Serif, et Sans Serif. Le terme Serif signifie « empattement ». Les caractères « sans serif » sont également appelés « caractères bâton ».

Empattements

Le choix d’une police de caractère influe sur la lisibilité d’un texte, certaines polices étant plus lisibles sur papier que sur écran, par exemple.
Les polices les plus connues sont:

  • en Serif: Georgia, Times New Roman, Times, …
  • en Sans Serif: Arial, Verdana, Lucida Grande and Helvetica, …

Il est recommandé d’utiliser une seule, voire deux polices de caractères maximum pour un site.

Selon, l’étude de Smashing Magazine, les polices Sans Serif sont plutôt utilisées pour les titres, tandis que les polices Serif sont préférées pour le texte.

Nos sites peuvent être visualisés sur différentes plateformes (Windows, MacOS, Linux, …), qui ne disposent pas toutes des mêmes polices de caractères. Lors de la déclaration de police (propriété font-family, il ne faut donc pas indiquer une seule police (surtout si elle est exotique), mais plusieurs, en veillant à ce que nous trouvions dans la liste, les polices de base, commune à la plupart des systèmes.
Par exemple

1
2
3
body {
	font-family: Cambria, Georgia, "Times New Roman", Times, serif;
}

Cambria existe sur Windows et MacOS, mais pas sur Linux. Un navigateur fonctionnant sous Linux utilisera donc la police Georgia, qui normalement existe sur ce système. Les termes serif et sans-serif dans la propriété font-family désignent les polices serif et sans-serif par défaut.

Il existe de très nombreux exemples de font stacks. Voici trois liens pour vous aider à choisir:

Choix de la taille des caractères

Pour optimiser le confort de lecture, une ligne de texte doit contenir entre 45 et 75 caractères. Cela veut dire que le choix de la taille des caractères dépend de la largeur de vos colonnes de texte. Dans le cas de ce blog, la largeur maximum de la page est de 960px. Dans cette configuration, la partie gauche (le corps) a une largeur de 610px.

Avec une police Georgia, il faudrait que la taille de la police de caractères soit d’environ 18 pixels. Avec une police Verdana, la taille serait de 16 pixels.

Concrètement, les sites utilisent majoritairement des tailles situées entre 12 et 14. Le ratio n’est donc pas respecté. La tendance est cependant à la hausse. Il y a quelques années, les tailles utilisées étaient plutôt situées entre 10 et 12 pixels. Certains sites n’hésitent plus à utiliser des tailles de 16 pixels (Smashing Magazine, par exemple).

Pour le design de ce blog, j’ai choisi 14 pixels (14/16 = 0.875):

1
2
3
4
body {
	font-family: Cambria, Georgia, "Times New Roman", Times, serif;
	font-size: 87.5%;
}

La taille de la police n’est pas fixée en pixels, mais elle est relative à la taille de police utilisée par défaut par les navigateurs (16 pixels)

Pour plus d’informations, vous pouvez consulter l’article très détaillé de Chris Pearson Secret Symphony: The Ultimate Guide to Readable Web Typography, et utiliser son outil: Golden Ratio Typography Calculator, pour calculer vos propres paramètres.

Hauteur de ligne: le rythme vertical

A partir de la taille des caractères, nous pouvons définir l’espacement entre les lignes, qui est également la hauteur de ligne (line-height). Cette hauteur peut être déclarée en pixels, ou être un ratio par rapport à la taille de caractère.

Le ratio généralement utilisé est de 1,5. Pour une taille de caractères de 16 pixels, la hauteur de ligne sera donc de 16 x 1,5 = 24 pixels. Cette hauteur de ligne (propriété CSS line-height) est le paramètre définissant le rythme vertical de notre grille typographique. Tout doit rester aligné sur ce rythme. Cette valeur est appelé « Magic number » .

En reprenant notre exemple, avec une taille de caractère de 14 pixels, nous avons une hauteur de ligne de 21 pixels:

1
2
3
4
5
body {
	font-family: Cambria, Georgia, "Times New Roman", Times, serif;
	font-size: 87.5%;
	line-height: 1.5;
}

A partir d’ici, tous les autres éléments seront définis à partir de ces deux valeurs. Le saut de ligne entre les paragraphes, par exemple, doit être égal à line-height, pour marquer un saut de ligne, tout en conservant le rythme vertical.

1
2
3
4
5
6
7
8
9
body {
	font-family: Cambria, Georgia, "Times New Roman", Times, serif;
	font-size: 87.5%;
	line-height: 1.5;
}
 
p {
	margin-bottom: 1.5em;
}

La taille des titres

Ici, les règles ne sont plus établies, et les choix dépendent beaucoup du design lui-même, et du nombre de niveau que vous souhaitez utiliser.
Plusieurs options sont possibles, nous pouvons utiliser:

  • des tailles standards: 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72,
  • un facteur multiplicateur. Avec 1.4, nous obtenons, 11, 16, 24, 36, 54, …
  • la suite de Fibonacci: 8, 16, 24, 40, 64, 104, …
  • … …

La taille de ces balises peut être indiquée en pixels, mais il est préférable de la rendre dépendante de la taille de caractères choisie précédemment. Une taille de 28 pixels sera donc déclarée: h1 { font-size: 2em; } (28/14=2).

Le calcul de la hauteur des lignes est plus compliqué. La propriété line-height doit être

  • un multiple de 21px (notre hauteur de ligne initiale), si le taille du titre est supérieure à 21px,
  • le ratio hauteur de ligne / taille du titre, dans le cas contraire.

Dans notre cas, nous avons une hauteur de ligne de 21 pixels, et une taille de caractère de 14 pixels. Si nous souhaitons les tailles de titres de 16, 18, 20, 24, 28, nous aurons les déclarations suivantes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
h1 {
	font-size: 2em;		/* 28 / 14 = 2 */
	line-height: 1.5;		/* 28 / 21 = 1.33. Arrondi supérieur de 1.333 = 2 -  2*21/28 = 1.5 */
}
 
h2 {
	font-size: 1.7143em;	/* 24 / 14 = 1.7143 */
	line-height: 1.75;	/* 24 / 21 = 1.1428. Arrondi supérieur de 1. 1428 = 2 -  2*21/24 = 1.75 */
}
 
h3 {
	font-size: 1.4286em;	/* 20 / 14 = 1.4286 */
	line-height:  1.05;	/* 21 / 20 = 1.05 */
}
 
h4 {
	font-size: 1.2857em;	/* 18 / 14 = 1.2857 */
	line-height: 1.1667;	/* 21 / 18 = 1.1667. */
}
 
h5 {
	font-size: 1.4286em;	/* 16 / 14 = 1.4286 */
	line-height: 1.3125;	/* 21 / 16 = 1.3125 */
}

Le code suivant va nous donner quelque chose comme cela:

Rythme vertical avec les titres

Remarque concernant les titres dont la taille excède la hauteur de ligne standard:

h1 et h2 sont plus grands que les 21 pixels de notre rythme vertical. J’ai choisi une approche ou j’adapte la hauteur de ligne à la taille de ces titres (comme dans Setting Type on the Web to a Baseline Grid). Mais il existe une autre approche qui consiste à ramener la hauteur de ligne à la hauteur initiale, puis d’ajouter des marges pour les espacements et l’alignement. Dans ce cas la règle est simple: line-height = hauteur de ligne initiale / taille de caractère du titre.
Nous aurions donc:

1
2
3
4
5
h1 {
	font-size: 2em;		/* 28 / 14 = 2 */
	line-height: 0.75;	/* 1.5 / 2 = 0.75 */
	margin-bottom: 0.75em;
}

Autres éléments

A ce niveau, nous avons notre rythme vertical, sur les éléments principaux du texte. Pour être complet, il nous faut traiter les autres éléments de notre typographie, ce qui n’est pas forcement la partie la plus courte ni la plus aisée du travail.

Il y a en effet un assez grand nombre de choses à traiter:

  • Les tables,
  • Les exposants, indices (sup, et sub),
  • Les balises small, et big,
  • Les balises code, et pre,
Les tables

Si vous êtes un maniaque du rythme vertical, alors il sera important de tenir compte des bordures. Un pixel peut suffit à créer un décalage:

Une table mal alignée

Si notre rythme vertical est fixé à 21 pixels, et que la table a des bordures de 2 pixels, la propriété line-height doit être fixée à 19pixels.

1
2
3
4
5
6
table { border-collapse: collapse; margin:  1.3571em auto; } /* 19 / 14 = 1.3571 */
 
th, td {
	line-height: 2.8571;  (2*21 - 2)/14
	padding: 0 1em;
}

Le résultat:

Table alignée
Les balises small, big, sup, sub, …

Ces balises ont un point commun: il faut changer la taille de caractère, sans changer la hauteur de ligne.

CSS offre (depuis CSS 2.1, si je ne trompe pas), des valeurs par défaut: xx-small, x-small, small, large, x-large, xx-large. Nous pouvons donc, soit utiliser ces valeurs, soit gérer nous-mêmes des valeurs, pour avoir un meilleur contrôle. J’ai préféré cette seconde solution, en définissant 4 valeurs: 77% (small), 85% (smaller), bigger (115%).

1
2
3
4
5
small { font-size: 85%;  line-height: 1.7647; } /* 21 / (14*85%) */
big	{ font-size: 115%;  line-height: 1.3043; }  /* 21 / (14*115%) */
sup, sub { font-size: 77%; }
sup	{ vertical-align:top; }
sub	{ vertical-align:bottom; }
Les balises code et pre

En début d’article, j’ai parlé de polices serif, et san-serif. Les polices peuvent également être classées en deux grandes familles: les polices à espacement fixe, et celles à espacement proportionnel. Pour les premières, la largeur occupée par un caractère est toujours la même, quel que soit le caractère (un i ou un o). Dans le second cas, cette largeur varie en fonction du caractère utilisé (l’espace occupé par la lettre i, sera inférieur à celui occupé par la lettre o).

Jusqu’à présent, nous n’avons utilisé que des polices à espacement proportionnel. Pour afficher du code source, il vaut mieux utiliser des polices à espacements fixes. Nous aurons donc

1
2
3
code, pre {
	font-family: mono-space, monospace, "courier new";
}

Alignements, indentations, et césures

A ce niveau, nous avons pratiquement terminé notre feuille de styles typographiques. Il ne nous reste qu’à apporter quelques améliorations, avec par exemple,

  • la justification du texte: text-align: justify,
  • l’indentation des paragraphes: p+p { text-indent: 1em; }

Conclusion

Nous venons de parcourir rapidement les grands principes utilisés pour la construction de notre grille typographique. Je dis rapidement car la typographie est un domaine à part entière, et des sites entiers y sont consacrés. Avec l’apparition des e-books, et des tablettes, je pense que ce domaine ne peut que se développer encore, l’objectif étant d’améliorer le confort de lecture (du lecteur).

La prochaine étape, est de créer la feuille de styles elle-même, en utilisant le langage SASS.

Références

Partager cet article