01 / INTRODUCTION
Typography is more than choosing a font. It is the discipline of organizing information through rhythm, scale, and whitespace. In a digital editorial system, every heading, paragraph, list, and image should feel deliberate.
在数字独立的建站体系中，排版不仅是视觉表达，更是信息层级的骨架。本文用于展示 TiHUBB 博客内容页中常见排版格式规范，帮助后续文章在统一的网格与节奏下完成输出。
A NOTE ON SCALE AND RHYTHM
The hierarchy should be legible at a glance. Large headings announce structure; body copy carries the narrative; supporting elements such as quotes, tables, and code blocks create pauses and emphasis.
02 / HEADING HIERARCHY
H3 / Section Heading
This level introduces a subsection and creates a clear break in the reading flow.
H4 / Supporting Heading
This smaller heading is suitable for annotations, examples, or compact subpoints.
H5 / Detail Heading
Use this for micro-structure within a section, especially when the content requires further decomposition.
H6 / Minor Heading
This is the smallest heading level and should remain rare, reserved for highly specific notes.
03 / PARAGRAPHS AND EMPHASIS
A paragraph should be readable, calm, and precise. It should not compete with the heading above it. Typography becomes powerful when the reader can scan the page without friction.
This sentence uses strong emphasis to draw attention. Here is some inline styling: bold, italic, and strikethrough. The goal is not decoration, but clarity. A short inline quote like "structure is meaning" can reinforce a point without breaking the flow.
04 / LISTS AND COLLECTIONS
Unordered List
- Establish a clear information hierarchy.
- Keep each item concise and parallel in form.
- Use spacing to avoid visual crowding.
Ordered List
- Define the core message.
- Group supporting ideas.
- Review rhythm across breakpoints.
05 / TABLES
Tables are useful when information needs to be compared quickly.
| Element | Purpose | Example |
|---|---|---|
| H1 | Page title | The Anatomy of Typography |
| H2 | Major section | 02 / Heading Hierarchy |
| H3 | Subsection | Lists and Collections |
| Paragraph | Body content | Standard editorial prose |
| Code | Technical reference | TypeScript example |
06 / CODE AND TECHNICAL REFERENCE
Inline code such as const layout = "structured"; should feel precise and industrial. For longer examples, use a fenced block.
import { defineCollection, z } from "astro:content";
export const collections = {
blog: defineCollection({
schema: z.object({
title: z.string(),
date: z.string(),
description: z.string(),
}),
}),
};
07 / QUOTE AND EDITORIAL PAUSE
A blockquote introduces a moment of pause. It signals that the following words deserve extra attention.
"Good typography does not shout. It organizes attention with patience." — A design principle for modern editorial systems
"Design is a constant battle against the chaos of visual clutter. To strip away the unnecessary, to honor the typography, and to let the structure speak for itself—that is the highest form of digital architecture." — Josef Müller-Brockmann, 1981
08 / IMAGES AND CAPTIONS
Images should support the text rather than interrupt it. Captions can provide context without overwhelming the visual rhythm.
Caption: A modular grid used to align type, images, and whitespace with discipline.
Caption: A restrained composition that emphasizes scale, contrast, and negative space.
09 / EMBEDS AND MULTIMEDIA
Embedded media should remain secondary to the article's structure. When present, they should be framed cleanly and aligned with the surrounding content.
<iframe width="100%" height="415" src="https://www.youtube.com/embed/dQw4w9wgxcq" title="Typography in Motion" frameborder="0" allowfullscreen></iframe>
<video controls width="100%"> <source src="https://assets.mixkit.co/videos/preview/12345/12345-large.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Caption: Motion and media can extend the reading experience, but should remain controlled and intentional.
10 / CONCLUSION
A well-made article is not defined by its length alone, but by the discipline of its composition. When headings, paragraphs, lists, tables, and media all follow the same system, the page becomes legible, calm, and memorable.
This document serves as a practical reference for future blog posts and as a visual benchmark for typographic consistency within the TiHUBB ecosystem.