Body Formatting Example (Rich Text HTML)

This is a sample article written with a rich text editor, used to check how body content actually looks on the front end: paragraphs, headings, lists, quotes, tables, and code.

1. Why standardize typography

On the same website, if news, product descriptions, and AI answers each use their own font sizes and line spacing, readers will feel like they are looking at several different websites. Once standardized, body text is 16px with 1.8 line height, headings are divided into three levels, and hierarchy comes from font size and whitespace rather than underlines.

1. Paragraphs and whitespace

Leave about one line of spacing between paragraphs; leave a little more before headings and tighten it after them, 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 when line spacing is too tight—by the third line, readers start losing their place; but too loose is also a problem, and a paragraph falls apart into several unrelated lines. At 16px, 1.8 line height is about 29px of line spacing, which is fairly comfortable for on-screen reading.

2. Lists

• Bullets in 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;
• There is a small amount of spacing between list items, so they do not crowd together.

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

2. Quotes and emphasis

Good typography is when readers do not notice the typography at all.

Words that need to draw the reader's attention can be bolded; Chinese does not use italics, because Chinese fonts do not have true italic glyphs, and the browser's forced slant does not look good.

3. Tables

Level	Body	H1	H2	H3
Article level	16px	26px	22px	18px
Conversation level	About 14px	20px	18px	16px

4. Code

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

npm install
npm run build
npm run start

---

For more content, you can return to the homepage to take a look.