Une échelle typographique

Couleurs, unités et typographie · niveau 3 (difficile)

Énoncé

Une échelle modulaire choisit les tailles de titres comme puissances d'un rapport fixe. Avec le rapport $1, 25$ et une base de 1rem :

calculer les tailles des niveaux 4, 3, 2, 1 (puissances 1 à 4) en rem (trois décimales) et en pixels ; et celle du texte <small> (puissance $- 1$ ) ;
écrire la feuille correspondante (titres en Georgia, interlignage 1,2 ; texte interligné à 1,5) ;
calculer l'interlignage en pixels du <h1>.

Corrigé

$1, 2 5^{1} = 1, 25$ ; $1, 2 5^{2} = 1, 5625$ ; $1, 2 5^{3} \approx 1, 953$ ; $1, 2 5^{4} \approx 2, 441$ ; $1, 2 5^{- 1} = 0, 8$ .

Niveau	`rem`	pixels
` `	2.441	39,056
` `	1.953	31,248
` `	1.563	25,008
` `	1.25	20
texte	1	16
`<small>`	0.8	12,8

Feuille :


/* Échelle de rapport 1,25 (« tierce majeure ») à partir de 1rem */
body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #222;
}

h1,
h2,
h3,
h4 {
  font-family: Georgia, serif;
  line-height: 1.2;
  color: #1f3a68;
}

h1 {
  font-size: 2.441rem;
}

h2 {
  font-size: 1.953rem;
}

h3 {
  font-size: 1.563rem;
}

h4 {
  font-size: 1.25rem;
}

small {
  font-size: 0.8rem;
}

$1, 2 \times 39, 056 \approx 46, 87$ pixels.

Chromium donne 39.056px, 31.248px, 25.008px, 20px, 12.8px et un interlignage de 46.8672px pour le titre.

L'échelle de la librairie (40, 28, 20 pixels) est plus contrastée en haut et arrondie : une échelle est un point de départ, pas une obligation.

Énoncé

Corrigé

`

`

`

`