Setting Line Length in CSS (and Fitting Text to a Container)

On sous-estime la longueur de ligne. Dès que la ligne devient trop longue, l’œil se perd, on relit, on décroche. La règle pratique : rester sous ~80 caractères, idéalement dans la zone 60–70. En CSS, c’est bête comme max-width: 65ch sur le bloc de texte. Simple, robuste, lisible. 

Ensuite, je veux une taille qui s’adapte sans faire le yo-yo : font-size: clamp(1rem, 1.2vw + 0.2rem, 1.25rem). Ça donne une typo fluide, bornée, sans surprise. Et si l’UI est component-driven, j’utilise les unités de requête de conteneur (cqi, cqw) pour que chaque carte garde sa cohérence, indépendamment du viewport. 

Dernier point : “remplir” un container avec du texte. Il y a plusieurs approches : responsive type avec clamp(), requêtes de conteneur pour affiner par composant, et, en dernier recours, un peu de JS si tu dois vraiment auto-ajuster au pixel près (genre titres très courts qui doivent occuper toute la largeur). Le bon choix dépend du contexte, mais la base ne change pas : longueur de ligne confortable d’abord, micro-ajustements ensuite.


Likes, Bookmarks, and Reposts

  • Samuel Webdev & plus

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again. (Find out more about Webmentions.)