,

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.

← Précédent
Suivant →

Likes, Bookmarks, and Reposts

  • Samuel Webdev & plus

Une réponse à « Setting Line Length in CSS (and Fitting Text to a Container) »

  1. @nighcrawlMerci, j'utilise encore peu les container queries et ça m'a l'air bien pratique

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. Découvrez comment les données de vos commentaires sont traitées.

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.