← Tous les articles

Tutoriels

Ajustez la taille et l'espacement des polices pour une lecture confortable

17 mai 2026 · par JustZix Team

Beaucoup de sites entassent un texte minuscule dans des colonnes bord à bord. Les lire est fatigant. Avec JustZix, vous pouvez attacher une règle CSS qui redimensionne le texte, ouvre l'interligne et plafonne la largeur de colonne — transformant n'importe quel mur de texte en quelque chose de reposant.

Augmentez la taille de police de base

Les navigateurs calculent chaque taille relative à partir de la taille de police racine. Élevez cette unique valeur et la majeure partie de la page se met à l'échelle avec elle.

html {
  font-size: 18px !important;
}

Si un site utilise partout des tailles fixes en pixels, l'astuce de la racine ne l'atteindra pas. Ciblez alors directement le texte du corps.

p, li, span, div, td, article, .content {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

Donnez de l'air aux lignes

La hauteur de ligne est le plus grand facteur de confort à elle seule. La plupart des sites la règlent trop serrée. Une valeur entre 1,6 et 1,8 est le point idéal pour le texte courant.

body, p, li {
  line-height: 1.75 !important;
}
h1, h2, h3 {
  line-height: 1.3 !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

Plafonnez la largeur de colonne

Les lignes qui s'étirent sur un écran large sont épuisantes à parcourir. La mesure idéale est d'environ 65 à 75 caractères. Contraignez le contenu principal et centrez-le.

article, .post, .content, main, .entry-content {
  max-width: 70ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

L'unité ch mesure la largeur en largeurs de caractères, donc la colonne s'adapte à la police que vous utilisez. Associez ceci à un changement de police et la page se transforme.

Desserrez l'espacement des lettres et des paragraphes

Un peu d'espacement supplémentaire entre les paragraphes et un soupçon d'espacement des lettres rend le texte dense plus calme.

p {
  margin-bottom: 1.1em !important;
  letter-spacing: 0.01em !important;
}
ul, ol {
  margin-bottom: 1.1em !important;
}
li {
  margin-bottom: 0.4em !important;
}

Un curseur de mise à l'échelle avec JavaScript

Vous voulez ajuster la taille en direct au lieu de modifier le CSS ? Une minuscule règle JavaScript ajoute un zoom clavier pour le texte uniquement.

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;
  var html = document.documentElement;
  var size = parseFloat(getComputedStyle(html).fontSize);
  if (e.key === '=') html.style.fontSize = (size + 1) + 'px';
  if (e.key === '-') html.style.fontSize = (size - 1) + 'px';
});

Maintenez Alt et tapez la touche plus ou moins pour redimensionner. JustZix exécute ce script sur les pages de votre choix, donc le raccourci n'existe que là où vous le voulez.

Liste de contrôle

• Commencez par la taille de police racine ; repliez-vous sur les sélecteurs directs si le site utilise des pixels fixes.
• Visez une hauteur de ligne de 1,6–1,8 et une colonne d'environ 70ch.
• N'espacez pas trop — un espacement des lettres trop grand nuit autant à la lisibilité qu'un trop petit.
• Combinez avec un changement de police pour la plus grande amélioration.

Poursuivez avec notre article sur le changement de polices des sites web, parcourez les exemples prêts à l'emploi pour des recettes instantanées, ou téléchargez JustZix pour appliquer votre première règle de lecture dès aujourd'hui.