Development #68540
typographie : uniformiser/personnaliser rythme vertical (line-height)
0%
Description
Partons d'un exemple de layout en 2 colonnes + sidebar
- Dans la sidebar se trouve une cell code de suivi composé de 2 paragraphes de texte.
- Dans la colonne 1 une cellule texte composé de paragraphes, listes.
- Dans la colonne 2 une cellule démarches par cat avec description de la catégorie + liste de liens
Pour une uniformité rythmique, tous les textes de même taille : les paragraphes, listes devraient avoir par défaut le même line-height.
Ce n'est pas le cas.
Les cellules texte posent un `line-height: 1.4` sur ses enfants `p, ul, ol, table`.
Tous les autres éléments ont un `line-height: normal` (valeur par défaut) qui tourne habituellement autour de `1.3` (mais ça dépend de chaque font).
Le rythme vertical est cassé.
L'idée serait non seulement de l'harmoniser mais également de pouvoir le personaliser (voir charte Nantes et ticket #68131)
Fichiers
Révisions associées
Historique
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus d'un an
- Fichier 0001-scss-introduce-font-line-height.patch 0001-scss-introduce-font-line-height.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Piste 1
La bonne pratique CSS est de poser le line-height voulu pour tout le document sur `body`
Et d'ensuite personnaliser les tags specifiques, à minima les headers (h1 -> h6), et dans notre cas, pour ne pas tout chambouler, rester en `normal`.
body { line-height: 1.4 }
h1, h2, h3, h4, h5, h6 { line-height: normal }
Appliquer cette solution va faire bouger légèrement tous les sites existants: les toplinks, les items de links-list vont prendre 2-3 px en hauteur. Certaines cellules vont prendre 10-15px. Peut-être plus pour les portails avec une font size de base de 18px.
Déjà supprimer les impacts sur le header (la nav & la nav pwa ont déjà un line-height personalisé)
main, footer {
line-height: 1.4;
}
Je partirai bien là-dessus même si ça va bouger. Et je le pense en mieux dans pas mal de cas.
Et introduire `$font-line-height` en prime.
Mis à jour par A. Berriot il y a plus d'un an
- Statut changé de Solution proposée à Solution validée
Appliquer cette solution va faire bouger légèrement tous les sites existants: les toplinks, les items de links-list vont prendre 2-3 px en hauteur. Certaines cellules vont prendre 10-15px. Peut-être plus pour les portails avec une font size de base de 18px.
J'aurais tendance à dire que c'est pas très grave, surtout si c'est une variable SCSS qu'on peut ajuster sur un thème en cas de pépin. Le bénéfice en termes de lisibilité et de cohésence que tu pointe me paraît plus intéressant que de garder l'existant tel quel.
Au pire, à tester en recette avec quelques thèmes importants et à revert avant un passage en prod si c'est vraiment problématique ?
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus d'un an
- Statut changé de Solution validée à Résolu (à déployer)
commit 2b78ac308c8a3da6c684f51a6b8ca36a7466882b
Author: Thomas JUND <tjund@entrouvert.com>
Date: Tue Aug 30 12:20:30 2022 +0200
scss: introduce $font-line-height (#68540)
Mis à jour par Transition automatique il y a plus d'un an
- Statut changé de Résolu (à déployer) à Solution déployée
scss: introduce $font-line-height (#68540)