This post is a living style guide for rich content. Every combination of headings, lists, quotes, code, links, and formatting appears below so we can tune the typography. Scroll through and tell me what works and what needs adjustment.
Heading 1 — Major Section Title
Body text under an H1. This is the largest heading level and should only appear once per page — typically as the page title. The body copy here gives you a sense of the contrast between heading and paragraph type.
Heading 2 — Section Title
Body text under an H2. Section headings break up long-form content into scannable chunks. Notice the size difference between this and the H1 above.
Heading 3 — Subsection
Body text under an H3. Subsections drill deeper into a topic. This is probably the most common heading level in blog posts.
Heading 4 — Minor Subsection
Body text under an H4. Minor subsections are rare but useful for technical documentation or deeply nested content.
Heading 5 — Tertiary Detail
Body text under an H5. These get small enough that they start to compete with body copy — use sparingly.
Heading 6 — Smallest Heading
Body text under an H6. The smallest heading level — barely larger than body text. Good for labels or captions within content.
Inline Formatting
This is bold text. Use it for emphasis on key terms or phrases.
This is italic text. Use it for foreign words, titles, or subtle emphasis.
This is bold and italic together. Reserve this for maximum emphasis.
This is strikethrough text. Use it to show corrections or deprecated information.
This is an external link to Astro.build, the framework this site is built on. Links should stand out clearly in body text.
Here is a sentence with bold, italic, a link, and strikethrough all mixed together in one paragraph.
Blockquote
Design is not just what it looks like and feels like. Design is how it works. — This is a standard blockquote, typically used for attributions, citations, or calling out a key idea.
A second blockquote right after the first one. Notice how consecutive quotes stack — they should have enough spacing to feel distinct but related.
Lists
Unordered list — use for items where order does not matter:
- First bullet point in the list
- Second bullet point with bold emphasis inside the item
- Third bullet point that is noticeably longer to test how the list handles multi-line wrapping and the relationship between marker indentation and text alignment
- Fourth bullet point
Ordered list — use for steps, rankings, or sequences:
- Start by defining the problem clearly
- Research existing solutions and patterns
- Sketch multiple approaches before committing
- Build, test, and iterate based on feedback
- Ship and measure the results
Code
Inline code looks like this: font-size: var(--font-size-body). It should be visually distinct from regular body text.
.container {
max-width: 72rem;
margin-inline: auto;
padding-inline: var(--space-4);
}
/* Comments should also render clearly */
.heading {
font-family: var(--font-heading);
letter-spacing: -0.02em;
}export async function getBlogPosts() {
return client.fetch(`
*[_type == "blogPost"] | order(publishedAt desc) {
title,
slug,
excerpt,
publishedAt
}
`);
}Horizontal Rule
The horizontal rule appears below this line. It should create a clear visual break without being too heavy.
And the text continues here after the horizontal rule separator. The spacing above and below the rule should feel balanced.
Long Form Paragraph
This is a longer paragraph to test how the typography handles extended reading. Good body copy should feel comfortable at length — not too tight, not too loose. The line height, font size, and max-width all work together to create a readable rhythm. When designing for the web, aim for around 65 characters per line as a sweet spot. This paragraph is long enough to wrap multiple times on most screens, so you can see how the line-height and letter-spacing feel over sustained reading. The goal is that a reader loses track of the individual letters and just absorbs the content naturally. Lorem ipsum is tempting here, but real text reveals spacing issues that filler words hide.
Conclusion
That covers every rich text element. Review the spacing, sizing, and visual hierarchy above and let me know what needs tuning. I can adjust heading scale, list markers, blockquote treatment, code block styling, link treatment, and line heights.