CSS permet de nombreuses manipulations du contenu (texte) pour l’adapter à la taille de l’écran (@media, var(), flex, …), ou d’utiliser des valeurs relatives (%, em, rem, clamp(), …).
Avec la prolifération d’écrans de plus en plus grands, en desktop notamment, on peut se retrouver, à avoir un contenu qui s’étend en largeur plus que de raison.
Il est difficile de lire des lignes de texte au delà d’une certaine longueur.
L’oeil se perd entre 65/80 caractères.
Ennuyeux si on a un site qui profite d’autres fonctions responsives pour s’adapter à la largeur de l’écran, dont grandir le texte qui n’est pas forcément la solution idéale.
Limiter la longueur de ligne via CSS pour améliorer la lisibilité
Une astuce en CSS consiste à utiliser l’unité ‘ch‘, qui est égale à largeur du caractère 0 dans la police rendu, pour définir la largeur maximale de l’élément.
Il est recommandé de garder les contenus de ‘flux’ , comme les articles, dans une largeur comprise entre 60 et 75ch (caractères).
La longueur de ligne dépendra du choix de la typographie, de sa graisse, de son corps, de son inter-lettrage… Autant d’éléments ajustables finement en CSS.
Exemple de code :
article {
max-width:65ch;
}
p, h2, h3, img, text-area { width:65ch;}
On peut soit cibler le container (un div ou un article), soit cibler une entité de type texte (P,UL,blockquote,etc …)
Pour info, ce site utilise une valeur de 70ch pour la largeur maximum des paragraphes, bloc de code, text-area, etc…
Je pourrais l’avoir défini via le parent mais cela me limiterait. En visant des entités précises je peux jouer sur le ‘débordement’ de certains éléments contenus (comme avoir des images ou des citations plus larges que le ‘texte (<p></p>)’.
