Configuring this Blog with a Delightful Example

Cyrus Radfar on (Updated: February 22, 2026) originally posted on Medium
4 min read
design , typography

This post exists for one reason: to put every content element on display so we can tune the typography until it feels right. Think of it as a fitting room for the blog’s design system.

Good writing breathes. The space between paragraphs, the weight of a heading, the indent of a blockquote — these details are invisible when they work and distracting when they don’t. Let’s see them all.

The Role of Headings

Headings create hierarchy. They tell the reader what matters, what’s subordinate, and where to jump when scanning. An H2 is a chapter break — it earns its whitespace.

When to Use an H3

An H3 is a section within a chapter. It carries less visual weight but still demands separation from the body text around it. If an H2 is a doorway, an H3 is a room divider.

The Occasional H4

H4s are rare in blog posts. They’re useful for labeling sub-points within a section — a glossary entry, a sidebar thought, a caveat worth calling out. They should feel like a whisper compared to an H2’s declaration.

Paragraphs and Emphasis

Body text is where readers spend most of their time. The line-height, letter-spacing, and font choice here matter more than anywhere else. A paragraph should feel like a conversation — unhurried, clear, and rhythmic.

Sometimes you need to emphasize a word to shift the reader’s attention. Other times you need strong text to mark something critical. And occasionally you combine both at once to really drive a point home.

Inline code appears when referencing a function name like addEventListener or a CSS property like margin-top. It should stand out just enough without breaking the flow of the sentence.

Blockquotes

The details are not the details. They make the design. — Charles Eames

A blockquote pulls the reader out of the main narrative. It’s a breath, a pause, a different voice entering the room. The left border, the indentation, the shift in typeface — all of these signal: this is someone else talking.

Short quotes hit different.

And sometimes a blockquote carries more weight when it’s longer and more reflective:

I have always wished for my computer to be as easy to use as my telephone; my wish has come true because I can no longer figure out how to use my telephone. — Bjarne Stroustrup

Images

Images need generous whitespace. They’re the loudest element on the page, and cramming them against text makes everything feel cluttered.

A placeholder to test image spacing and borders

The space above and below an image, the subtle border, the rounded corners — these are the details that separate a blog from a Google Doc.

Lists

Unordered Lists

Design principles worth remembering:

  • Proximity groups related elements together
  • Alignment creates visual connections across distance
  • Repetition builds consistency and rhythm
  • Contrast draws attention to what matters most

Ordered Lists

Steps to tune your blog typography:

  1. Start with the body text — get the font, size, and line-height right
  2. Set heading sizes relative to the body, not in isolation
  3. Establish vertical rhythm with consistent spacing multiples
  4. Test with real content, not lorem ipsum
  5. Read your own posts on a phone before shipping

Nested Lists

Sometimes lists contain sub-points:

  • Typography fundamentals
    • Measure (line length) should be 45–75 characters
    • Line-height between 1.5 and 1.8 for body text
    • Headings can use tighter line-height (1.1–1.3)
  • Spacing fundamentals
    • Use a consistent scale (4px, 8px, 16px, 32px, 64px)
    • More space above headings than below
    • Blockquotes need breathing room on all sides

Code Blocks

Inline code like const x = 42 blends into the paragraph. But a full code block demands its own space:

.post-body {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-text);
}

.post-body > * + * {
  margin-top: var(--space-7);
}

Code blocks should feel contained — a distinct zone with its own background and mono-spaced type.

Links are subtle. They should be readable inline without screaming for attention. The underline color, the hover state, the text color — all should feel like a gentle invitation, not a billboard.

Here’s a paragraph with multiple different links woven throughout to test how they feel in dense text. Links should never make a sentence harder to read.

Horizontal Rules

Sometimes you need a hard break between sections — not a heading, just a line that says “we’re shifting gears.”

Like that. A horizontal rule is a palate cleanser. It earns generous vertical spacing.

Putting It All Together

A well-designed blog post flows. The reader’s eye moves from heading to paragraph to blockquote to image without friction. Every element has its place, its breathing room, its typographic voice.

Good typography is invisible. Bad typography is everywhere.

The goal isn’t to make the reader notice the design. It’s to make them forget they’re reading on a screen at all.

Open the configurator with Shift+S and start tuning.

Keyboard Shortcuts