Web Typography: Designing a Blog People Actually Read

Most blog redesigns chase a new colour or a trendy hero image, but the thing readers actually feel is the typography. The body text is roughly ninety percent of the page, yet it gets the least attention. Get the type right and a long article feels effortless; get it wrong and people leave before the second paragraph. This is a tour of the handful of decisions that matter most for web typography on a blog, and how a well-designed engine takes them off your plate.

Measure: the most important number on the page

Measure is the length of a line of text, and it is the single biggest lever on readability. Lines that run too wide make the eye lose its place on the return sweep; lines too narrow chop the rhythm into fragments. The long-standing target is roughly 45 to 75 characters per line, with about 66 as the comfortable centre. On the web you express this with a content width rather than a fixed pixel count.

.article { max-width: 38rem; } /* ~66 characters at a 1.125rem body size */

Anchoring the column in rem rather than pixels means the measure scales with the reader's preferred font size, which is the accessible default.

Line height and vertical rhythm

Line height (CSS line-height) controls the breathing room between lines. Body copy generally wants 1.5 to 1.65; headings, being larger, want a tighter ratio closer to 1.1 to 1.25. The two move in opposite directions because line height is relative to font size. Consistent vertical spacing between paragraphs, headings, and lists creates a rhythm the eye trusts, even if the reader never consciously notices it.

Pairing and the typographic scale

You rarely need more than two typefaces: one for headings and one for body. The safest pairing is a single high-quality serif or sans for everything, with weight and size doing the contrast work. When you do pair, look for families that share a similar x-height so the switch feels intentional rather than accidental.

• Scale: pick a ratio (1.2 to 1.333 reads well) and size every heading from it instead of choosing pixel values by hand.
• Weight: reserve bold for genuine emphasis; an all-bold page has no emphasis at all.
• Contrast: aim for at least a 7:1 contrast ratio on body text for comfortable long-form reading.

Dark mode is its own design

Dark mode is not just inverted colours. Pure white text on pure black vibrates and tires the eye, so soften the foreground to a light grey and lift the background off black. Heavy font weights bloom on dark backgrounds, so a slightly lighter weight often reads better than the same weight you used on a light surface. Treat the two modes as two designs that happen to share a layout.

The body text is ninety percent of the page. Design that, and the rest of the blog falls into place.

How Inkwell handles it for you

Inkwell separates structure from surface. Layouts (Magazine, Grid, Minimal, Neutral, Classic, Modern) decide the column geometry, including the measure and how headings sit against the body. Its 10 colour presets carry the surface decisions: the palette, the light and dark treatments, and the type scale expressed as CSS variables. Because a Preset is just a CSS variable file under /wwwroot/css/presets/{name}.css, you can adjust the measure or line height without touching a single Razor file. You can read more about that split on the themes page, and if you are weighing platforms generally, the static site generator vs CMS comparison covers where this kind of built-in design system fits.

The point is not to memorise ratios. It is to start from sensible defaults, change one variable at a time, and judge the result by reading a real article rather than staring at a specimen sheet.

• #Design
• #Typography
• #Readability
• #Themes