Grille typographique: la pratique avec SASS

Dans le précédent article, nous avons repris les grands principes permettant l’élaboration d’une grille typographique. Dans cet article, nous allons mettre tout cela en pratique, en utilisant le langage SASS. L’objectif est d’obtenir une feuille de styles complète, décrivant une typographie qui respecte le rythme vertical.

L’idée est de construire cette feuille à partir de deux paramètres seulement: la police de caractères, et sa taille. Des paramètres supplémentaires, peuvent permettre une personnalisation éventuelle.

Début de la feuille

Avant de commencer notre travail sur la typographie, il est conseillé d’effectuer un « reset » de nos styles, pour garantir que la situation de départ est bien la même, quel que soit le navigateur. Vous pouvez au choix, utiliser le reset de Meyer, ou le normalize.css.

Ensuite, notre feuille démarre avec les lignes suivantes:

1
2
3
$baseFontSize: 14!default;
$baseFontFamily: Cambria, Georgia, "Times New Roman", Times, serif!default;
$headingsFontFamily: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif!default;

Ici j’ai choisi de différencier la police des titres, et celle du texte. La taille par défaut est de 14 pixels.

A partir de là, nous pouvons commencer notre feuille de styles, en suivant la trame de l’article précédent:

  1. Calculer le rythme vertical,
  2. Définition de la taille des titres,
  3. Définition des autres éléments,
  4. Alignements, indentation, et césure,

Rythme vertical

J’ai choisi un rapport hauteur de ligne / taille de caractère de 1.5 par défaut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$baseline-ratio: 1.5!default;
 
$baseLineheight: $baseFontSize * $baseline-ratio;
$lineheight-em: $baselineRatio + 0em;
$marginleft: $lineheight-em;
 
@mixin margin-bottom($size) {
	margin-bottom: $baseLineheight / $size + 0em;
}
 
html {
	font-size:100.01%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
 
body {
	font-family: $baseFontFamily;
	font-size: percentage($baseFontSize / 16);
	line-height: $baseline-ratio;
}
p {
	@include margin-bottom($baseFontSize);
	hyphenate: auto;
	hyphenate-lines: 3;
}

Nous calculons notre hauteur de ligne en pixel (ligne 3). Cette valeur va nous servir ultérieurement pour les titres.
En ligne 4, et 5, j’initialise deux valeurs qui seront ensuite reprises pour les espacements verticaux.

Le mixin margin-bottom va nous permettre de gérer les sauts de ligne, comme dans la définition de la balise p.

Taille des titres

Les paramètres de tous les titres sont calculés de la même façon. Nous allons donc créer un mixin:

1
2
3
4
@mixin font-size($size, $addline: 0) {
	font-size: $size / $baseFontSize + 0em;
	line-height: (ceil($size / $baseLineheight) + $addline)* $baseLineheight / $size;
}

Le calcul de font-size, et de line-height, est basé sur deux paramètres: size, la taille du titre en pixel, et addline, qui permet éventuellement d’augmenter la hauteur de ligne par rapport au calcul par défaut.

Avec le mixin font-size, nous allons pouvoir définir la taille de nos titres:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$h1Size: ($baseFontSize+20)!default;
$h1Addline: 0!default;
 
$h2Size: ($baseFontSize+14)!default;
$h2Addline: 0!default;
 
$h3Size: ($baseFontSize+8)!default;
$h3Addline: 0!default;
 
$h4Size: ($baseFontSize+4)!default;
$h4Addline: 0!default;
 
$h5Size: ($baseFontSize+2)!default;
$h5Addline: 0!default;
 
$h6Size: $baseFontSize!default;
$h6Addline: 0!default;
 
h1, h2, h3, h4, h5, h6 {
	font-family: $headingsFontFamily;
}
 
h1 {
	@include font-size($h1Size,$h1Addline);
	@include margin-bottom($h1Size);
}
 
h2 {
	@include font-size($h2Size,$h2Addline);
	@include margin-bottom($h2Size);
}
 
h3 {
	@include font-size($h3Size,$h3Addline);
	@include margin-bottom($h3Size);
}
 
h4 {
	@include font-size($h4Size,$h4Addline);
	@include margin-bottom($h4Size);
}
h5 {
	@include font-size($h5Size,$h5Addline);
	@include margin-bottom($h5Size);
}
h6 {
	@include font-size($h6Size,$h6Addline);
	@include margin-bottom($h6Size);
}
h4, h5, h6{
	font-weight: bold;
}

Définition des autres éléments

Pour calculer les paramètres des autres éléments, je vais reprendre l’échelle définie dans l’article précédent: 77% (small), 85% (smaller), bigger (115%).

1
2
3
$smaller: 0.85!default;
$smallest: 0.77!default;
$bigger: 1.15!default;

A partir de ces valeurs, nous pouvons calculer les paramètres des balises small, big, sup, sub:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
small {
	font-size: percentage($smaller);
	line-height: $baseLineheight / ($baseFontSize * $smaller);
}
big	{
	font-size: percentage($bigger);
	line-height: $baseLineheight / ($baseFontSize * $bigger);
}
sup, sub {
	font-size: percentage($smallest);
}
sup	{
	vertical-align:top;
}
sub	{
	vertical-align:bottom;
}

Les paramètres des autres éléments peuvent être calculés de la même façon.

Pour les tables, il faut tenir compte des bordures horizontales, qui occupent, en général, 1 pixel. Il faut donc globalement réduire les hauteurs de ligne de 1/$baseFontSize:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
table {
	border-collapse: collapse;
	margin: ($lineheight-em - 1/ $baseFontSize) auto;
}
th, td {
	line-height: 2 * $baselineRatio - 1/$baseFontSize;
	padding: 0 $lineheight-em;
}
table	{
	border-top: solid 1px black;
	border-bottom: solid 1px black;
}
th {
	border-bottom: 1px solid black;
}
td {
	border-bottom: 1px solid #aaa;
}

Alignements, indentation, et césure

1
2
3
4
5
6
7
p {
	text-align:justify;
}
p+p {
	text-indent: 1em;
	margin-top: -$lineheight-em;
}

La feuille de style complète

Vous pouvez télécharger le fichier complet ICI.

typography
Titre: typography (137 clics)
Légende:
Nom du fichier: typography.zip
Taille: 1 kB

L’utilisation est très simple. Dans une feuille de style style.scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* --- Definition des valeurs --- */
$baseFontFamily: Georgia, "New Century Schoolbook", "Century Schoolbook L", "Times New Roman", serif;
$headingsFontFamily: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
 
$h1Size: 36;
$h2Size: 24;
$h3Size: 24;
$h4Size: 18;
$h5Size: 16;
 
/* --- Chargement des librairies --- */
@import "reset.scss";
@import "typography.scss"
 
/* --- Vos styles --- */
... ...

Ce qui donne la typographie de ce site.

Conclusion

Nous voyons ici, tout l’intérêt d’un pré-processeur CSS. En quelques lignes de code, nous avons une feuille de style prête à l’emploi, quelle que soit la taille de caractère choisie au départ.

Références

 

Partager cet article