← Tous les articles

Tutoriels

La largeur de colonne de lecture parfaite

17 mai 2026 · par JustZix Team

Si un seul changement pouvait améliorer chaque article que vous lisez, ce serait la largeur de colonne. Les typographes l'appellent la mesure, et bien la régler fait la différence entre une lecture sans effort et une fatigue oculaire constante.

La règle des 66 caractères

Des décennies de pratique typographique pointent vers environ 50 à 75 caractères par ligne, avec 66 comme point idéal. Trop court et vos yeux sautent constamment ; trop long et le retour de la fin d'une ligne au début de la suivante devient peu fiable. La plupart des sites web étirent le texte bord à bord sur les écrans larges, atterrissant bien au-delà de 120 caractères — loin hors de la plage confortable.

Mesurer en unités ch

Le CSS vous donne une unité conçue exactement pour ce travail. L'unité ch équivaut à la largeur d'avance du glyphe 0 dans la police courante. Un max-width de 66ch suit donc automatiquement votre choix de police :

article,
.entry-content,
main .content {
  max-width: 66ch !important;
  margin-inline: auto !important;
}

Comme ch est relatif à la police, la même règle conserve une bonne mesure que le site utilise une sans condensée ou une serif large.

Gardez larges les éléments larges

Plafonner la colonne d'article ne devrait pas piéger vos images et votre code à l'intérieur. Laissez des enfants spécifiques s'échapper en pleine largeur pendant que le texte reste étroit :

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
}
article figure,
article pre,
article table {
  width: 90vw !important;
  max-width: 90vw !important;
  margin-left: calc(33ch - 45vw) !important;
}

La marge négative recentre un enfant en pleine largeur par rapport à la colonne de texte étroite. Ajustez les nombres à votre goût — le but est des médias qui respirent pendant que la prose reste disciplinée.

Padding adaptatif

Sur un téléphone, un max-width rigide est sans importance mais le padding des bords compte. Combinez les deux pour que la règle fonctionne partout :

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

Le clamp() donne aux petits écrans une gouttière confortable et aux grands écrans une généreuse, sans une seule media query.

Associer largeur et rythme

La largeur fonctionne mieux avec un espacement vertical généreux. Une colonne étroite avec un interligne serré semble encore à l'étroit. Ajoutez ce bloc complémentaire :

article p {
  line-height: 1.7 !important;
  margin-bottom: 1.5em !important;
  font-size: 1.15rem !important;
}

Appliquez-la comme règle JustZix

Créez une règle, réglez un motif d'URL large tel que *://*/* si vous la voulez partout, ou limitez-la à une publication spécifique. Collez les blocs de largeur et de rythme dans le panneau CSS et enregistrez. Visitez quelques articles et ajustez la valeur ch jusqu'à ce que les lignes semblent naturelles — la plupart des gens s'établissent entre 60ch et 72ch.

Une mesure correcte est invisible : vous cessez simplement de remarquer la mise en page et commencez à absorber les mots. Explorez nos exemples prêts à l'emploi pour des préréglages ajustés, lisez le guide complémentaire sur la construction d'un mode lecture complet, et téléchargez JustZix pour commencer à mesurer.