← All posts

Tutorials

Adjust font size and spacing for comfortable reading

17 May 2026 · by JustZix Team

Plenty of sites cram tiny text into edge-to-edge columns. Reading them is tiring. With JustZix you can attach a CSS rule that resizes text, opens up the line spacing and caps the column width — turning any wall of text into something restful.

Bump the base font size

Browsers compute every relative size from the root font size. Raise that one value and most of the page scales with it.

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

If a site uses fixed pixel sizes everywhere, the root trick will not reach it. Then target the body text directly.

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

Give lines room to breathe

Line height is the single biggest comfort factor. Most sites set it too tight. A value between 1.6 and 1.8 is the sweet spot for body copy.

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;
}

Cap the column width

Lines that stretch across a wide monitor are exhausting to scan. The ideal measure is roughly 65 to 75 characters. Constrain the main content and center it.

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;
}

The ch unit measures width in character widths, so the column adapts to whatever font you are using. Pair this with a font swap and the page transforms.

Loosen letter and paragraph spacing

A touch of extra spacing between paragraphs and a hair of letter spacing makes dense text feel calmer.

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

One scaling slider with JavaScript

Want to nudge the size live instead of editing CSS? A tiny JavaScript rule adds keyboard zoom for text only.

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';
});

Hold Alt and tap the plus or minus key to resize. JustZix runs this script on the pages you choose, so the shortcut only exists where you want it.

Checklist

• Start with the root font size; fall back to direct selectors if the site uses fixed pixels.
• Aim for line height 1.6–1.8 and a column around 70ch.
• Do not over-space — too much letter spacing hurts readability as much as too little.
• Combine with a font swap for the biggest improvement.

Continue with our post on swapping website fonts, browse ready-made examples for instant recipes, or download JustZix to apply your first reading rule today.