Sample Post

Style guide: how every post on this blog looks

This opening paragraph is the lead. It is set a little larger so the reader eases into the post and knows what it is about within a few seconds.

Body text is set in Inter at 19px with a line height of 1.75, and each line holds about 65–75 characters. That width is the sweet spot for long reading: the eye finds the next line without effort, and nothing feels cramped.

Text styles

Inside a paragraph you can use bold for key ideas, italics for emphasis or titles, and links that are underlined in lime. Short technical terms go in inline code, and you can highlight a phrase that matters. Keyboard shortcuts look like ⌘ + K, and abbreviations like GHL show their meaning on hover.¹

Headings

Headings use Cormorant Garamond, the same serif as the rest of the site. They break a long post into parts that are easy to scan.

Heading level three

Use this for sections inside a main section. It stays serif, but smaller.

Heading level four

A bold Inter heading for small sub-points, steps or short groups of paragraphs.

Heading level five · label

A small uppercase label for things like “Step 1” or “Key takeaway”.

Lists

An unordered list, with a nested level:

• Keep each point short — one idea per line.
• Start with the most important point.
  • A nested point adds detail.
  • Use nesting only one level deep.
• End with a clear next step.

An ordered list for steps:

1. Write the draft without editing.
2. Cut every sentence that doesn’t help the reader.
3. Read it out loud, then publish.

A checklist:

• ✓Pick a topic
• ✓Write the first draft
• Add images and captions

Quotes

A blockquote is for quoting someone else, with the source underneath:

“A quote from a book, a person or another article sits here, set in italics with a lime rule on the left.”

— Author name, Source

Images

An image inside the text column, with a caption:

A wide image breaks out of the text column for more impact:

Two images side by side, for comparisons or before-and-after:

Video

Videos from YouTube or Vimeo sit in a 16:9 frame with a lime play button:

Code

Code blocks show the file name, the language and a copy button. Highlighted lines draw attention to what changed:

// Estimate reading time from the post bodyexport function readingTime(text, wpm = 220) {  const words = text.trim().split(/\s+/).length;  const minutes = Math.max(1, Math.round(words / wpm));  return `${minutes} min read`;}readingTime(post.body); // → "6 min read"

Tables & notes

Tables are simple, with plenty of space and numbers aligned to the right:

A short closing paragraph ends the post and points the reader to what to do next — reply, share, or read another post.