Small typography decisions that matter

Line height beats font size

Body text runs at 1.75. English alone would be fine at 1.6, but a mixed CJK paragraph at 1.6 looks cramped while the Latin looks loose, because Han characters fill their em box and leave no natural gap between lines.

.app-prose {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.75;
}

.app-prose p {
  margin-block: 1.35em;
}typography.css

Measure: 40 to 70 characters

Too wide and the eye loses the start of the next line on the return sweep. Too narrow and the rhythm fragments.

.app-prose {
  max-width: 65ch;
}

ch is the width of a zero. Using it instead of pixels means the measure follows the font size — raise the body size later and the column widens with it, no second edit.

Two weights, no more

Headings at 500, body at 400. No 600, no 700, and none needed.

Rules should stay rare

Plenty of blogs draw a horizontal line at every subsection. But a line is also a signal: readers read it as “this is over”. If the topic merely shifted, spacing does the job.

This site uses a rule in exactly one place: the end of an article.

Easy to miss

• Numbers get font-variant-numeric: tabular-nums so dates and tables line up
• Quotes are not italic; they change colour and take a thin rule on the left
• Code blocks sit lighter than the page, never darker
• Images get an 8px radius and a hairline, never a drop shadow

Typography, done properly, is subtraction. Every visual element you add has to justify the attention it takes from the words.