Body Text Formatting Example (Markdown)

This is a sample article written in Markdown, similar in content to another rich-text sample, used to compare whether the two approaches render consistently on the front end.

Table of Contents

• 1. Why Standardize Typography
  • 1.1 Paragraphs and Whitespace
  • 1.2 Lists
• 2. Quotes and Emphasis
• 3. Tables
• 4. Code

1. Why Standardize Typography

If news, product introductions, and AI answers on the same website each use their own font sizes and line heights, readers will feel like they're looking at several different websites. Once standardized, body text is 16px with a line height of 1.8, headings come in three levels, and hierarchy is conveyed through font size and whitespace rather than underlines.

1.1 Paragraphs and Whitespace

Leave about one line of spacing between paragraphs; add a bit more space before headings and tighten it after, so readers can tell at a glance which paragraphs belong to the same subsection.

This paragraph is deliberately written a bit longer to observe whether the line spacing feels comfortable after wrapping. Long Chinese paragraphs suffer most from line spacing that's too tight—by the third line you start losing your place; but too loose is also a problem, as a paragraph scatters into several unrelated lines.

1.2 Lists

• Bullet symbols for unordered lists hang outside the text;
• When a line wraps, the second line aligns with the text of the first line rather than indenting under the bullet—this item is written longer to show the wrapping effect;
  • Second-level lists indent by one level;
  • The spacing from the level above is smaller.
• There's a small amount of spacing between list items, so they don't crowd together.

1. State the conclusion first;
2. Then give the reasoning;
3. Finally, offer the next-step recommendation.

• Done: standardized font sizes and line heights
• To do: organize image width and height guidelines

2. Quotes and Emphasis

Good typography is when readers don't notice the typography at all.

A quote can have multiple paragraphs, with spacing between them as well.

Words that need to draw the reader's attention can be bolded; Chinese doesn't use italics, because Chinese typefaces have no true italic glyphs.

3. Tables

Tier	Body	H1	H2	H3
Article tier	16px	26px	22px	18px
Conversation tier	~14px	20px	18px	16px

4. Code

Inline code looks like this: npm run build. Multi-line code uses a code block:

function greet(city: string) {
  return `Welcome to ${city}`;
}

console.log(greet("Hangzhou"));

---

For more content, return to the official homepage.