一、中文排版的基础概念
中文排版的核心在於行距、字距與段落的協同優化，這三項參數直接決定閱讀流暢度與視覺舒適度。行距影響垂直方向的呼吸空間，字距調節水平緊密度，段落結構則掌控資訊消化節奏。根據 W3C 中文排版需求，這三要素需根據裝置特性、字級大小動態調整，而非設定單一固定值。掌握其原理，就能系統性地提升內容可讀性。
1-1. 為什麼行距、字距、段落決定閱讀體驗
人類眼球在閱讀時會進行微小的跳動（saccade），過密的文字會增加眼球負荷，導致快速疲勞。行距不足會讓行間產生「黏連感」，字距過緊則壓縮字符間的呼吸空間，而段落過長則會形成心理壓力，使讀者產生「看來不及看完」的焦慮。這三大參數共同構成了閱讀的微觀體驗，影響停留時間與資訊吸收率。
1-2. 文字排版的四大原則（對齊、留白、節奏、層次）
優質排版需遵循四大原則：對齊建立秩序感，中文以左對齊最自然；留白不是空白，而是主動設計的休息區；節奏透過段落長短、行距變化創造韵律；層次則利用字級、顏色區分資訊優先順序。這四大原則是行距、字距、段落設定的上層指導框架。
二、段落長度與分段技巧
段落長度是讀者第一眼感知的密度指標。過長的段落會產生視覺壓力，大幅提高跳出率。量化而言，桌面版每段應控制在 2–5 行，行動裝置則需縮短至 1–3 行。分段時應以「一個完整意念」為單位，並配合段前段後留白創造呼吸節奏，這對內容編輯與前端開發都是必修課。
2-1. 段落行數具體建議（IG‑2）
| 裝置類型 | 建議行數 | 主要理由 |
|---|---|---|
| 桌面 | 2–5 行 | 較大畫面可容納稍多內容，但仍需避免單段超過 6 行 |
| 手機 | 1–3 行 | 小畫面需極度精簡，單行文字過長會導致多次換行，破壞閱讀流 |
此數據來自多篇可讀性研究，實務上可根據字級大小微調，但原則不變：段落越短，掃描性越高。
2-2. 段前/段後留白的 CSS 實作
段間留白透過 CSS 的 margin-bottom 實現，推薦使用 em 單位以隨字級彈性調整。基底範例如下：
p {
margin-bottom: 1.5em; /* 段後留白，約為 1.5 倍字高 */
/* 可選：段前留白由上一個段落的 margin-bottom 處理，或使用 :not(:last-child) */
}
若需更精細控制，可針對第一個段落去除段前留白：article > p:first-of-type { margin-top: 0; }。這能避免標題與首段間過度間隔。
三、行距最佳化
行距（line-height）是垂直閱讀流暢度的關鍵。行距過小導致行間黏連，過大則破壞段落整體性，使視線跳動困難。最佳實踐是建立行距與字級的比例關係，並針對行動裝置進行微調，確保無論在何種螢幕上，文字都能「漂浮」在舒適的空間中。
3-1. 行距與字級的比例公式
行距不應設定為固定像素，而應以字級為基準計算。業界公認的穩健公式為：
line-height = font-size × 1.6
例如：正文字體設定為 16px，則行距應為 25.6px（CSS 可寫為 1.6 或 25.6px）。此比例適用於 12px–24px 的主流字級範圍。若使用較細或較粗的字體，可視覺微調至 1.5–1.8 倍，但 1.6 是適用性最廣的起始點。
3-2. 行距在手機端的調整技巧
手機螢幕小、閱讀距離近，且常伴隨環境光變化，行距可略增以提升可讀性。透過媒體查詢針對小螢幕微調：
@media (max-width: 768px) {
body {
line-height: 1.7; /* 手機端行距比例稍增 */
}
}
此調整與段落行數縮短（1–3行）相輔相成，能在有限畫面內創造最優閱讀節奏。我實際測試發現，1.7 倍在 14–18px 的手機正文字級下，閱讀舒適度最佳。
四、字距與對齊
字距（letter-spacing）是水平方向的微調參數。中文因字符本身寬度固定，字距調整空間極小，過度調整會破壞漢字結構；英文則有較大彈性。正確的字距設定能消除文字「擠壓感」，而對齊方式則決定段落邊緣的整潔度。
4-1. 字距調整原則與範例（含中英文混排）
中文預設字距為 0，在極大字級（如標題）或特定字體下，可微調至 0.02em–0.1em 增加鬆散感。英文建議維持 0–0.05em，過大會影響單詞辨識。中英文混排時，關鍵在於「以詞為斷行單位」，避免英文單詞被從中間拆開。CSS 實作：
/* 避免單詞斷行 */ p { word-break: keep-all; /* 對中文、英文皆有效，防止單詞mid-break */ /* 针对英文段落，可搭配 */ /* overflow-wrap: break-word; */ }
/* 微調字距範例 / .title { letter-spacing: 0.05em; / 標題常用 */ }
實務上，除非設計需求，否則正文字體建議保持預設字距，將精力放在行距與段落更為有效。
4-2. 左右對齊 vs. 兩端對齊的取捨
中文排版強烈建議使用左對齊（left align）。兩端對齊（justify）在英文中能創造整齊右邊界，但中文因字符寬度一致，系統會透過調整字距或單詞間距來填滿行尾，導致產生不規則的「河流」（rivers）與過大間隙，嚴重破壞閱讀節奏。對 SEO 而言，對齊方式不直接影響排名，但左對齊能提升停留時間與可讀性分數，間接有益。除非是極短標語或特殊設計，否則避免兩端對齊。
五、中英文、數字與單位的空格規則
中英文、數字與單位之間的空格是隱形的排版指南針。正確的空格能區隔不同語系元素，防止視覺黏連，讓讀者自然分段閱讀。錯誤的空格則會造成「10kg」像一個整體、「中文English」難以瞬間辨識。這規則對內容編輯與前端都是必備知識。
5-1. 中英文空格最佳實務（pangu.js）
中文與英文、數字之間應加入全形空格（或半形但視覺效果較差）。例如：「中文 English」應為「中文 English」（注意中間空格）。手動添加繁瑣，推薦使用 pangu.js 自動處理：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
<script>
pangu.spacingPage(); // 自動在網頁所有中英之間加空格
</script>
若僅想用 CSS 處理，可嘗試 word-spacing，但效果不如 pangu.js 精準，因它無法區分「中文後接英文」與「英文後接中文」的不同需求。我建議以 pangu.js 為主力，CSS 輔助。
5-2. 數字與單位之間的空格
數字與其單位之間應加入半形空格（或 Unicode 窄不換行空格 U+202F），例如：10 kg、2026 年、30%。這能讓數值與單位視覺分離，提升掃描效率。實務寫法：
/* 使用普通半形空格 */ 10 kg
/* 或使用窄空格（CSS 中可用 \202F 表示） */ 10\202Fkg
在 HTML 中直接輸入半形空格即可。注意：百分比符號 % 前通常不加空格，如「30%」。
六、全形/半形標點與空格
中文標點應使用全形符號（，。？！），這是中文排版的基本節奏器。全形標點佔用一個漢字寬度，能自然創造停頓感。關鍵在於標點後不加空格，這是與英文排版最大的差異。錯誤的空格會切斷語意節奏，讓文字顯得鬆散。
6-1. 全形標點的空格禁則
全形標點（逗號、句號、問號、感歎號、頓號等）後面絕對不能加任何空格。常見錯誤是受英文習慣影響，寫成「， 」或「。 」。正確範例：
| 錯誤寫法 | 正確寫法 | 說明 |
|---|---|---|
| 今天天氣很好， 我們去公园。 | 今天天氣很好，我們去公园。 | 逗號後不空格 |
| 他問：「你吃了吗 ？」 | 他問：「你吃了嗎？」 | 引號內標點後不空格 |
唯一例外是全形標點出現在行首，此時應避免，可微調字距或手動換行。CSS 無法自動處理此規則，需靠內容撰寫時注意。
七、圖片排版技巧與視覺留白
圖片是文字排版的休止符與視覺焦點。正確的圖片排版包含出血設定、跨版設計與圖文比例。不當的圖片尺寸或邊界會破壞版面完整性，甚至因壓縮不當影響載入速度，反噬 SEO。圖文配置是設計與前端的共同功課。
7-1. 圖片出血與跨版的實作
出血指圖片超出內容區域的邊界，創造無框的視覺衝擊。CSS 實作需讓圖片容器溢出：
/* 假設圖片在 .full-bleed 容器中 */
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
overflow: visible; /* 確保圖片不被裁切 */
}
.full-bleed img {
width: 100%;
height: auto;
display: block;
}
跨版則讓圖片橫跨欄位（如兩欄佈局），同上原理，將容器寬度設為 100% 或更大。實作時需注意父級 overflow 設定，並在 RWD 下手動調整，避免小螢幕圖片過大。
7-2. 圖文比例與 SEO 的關聯（IG‑6）
圖文比例是內容質量的隱形指標。每 500–600 字應至少配置一張高品質圖片。這不僅創造視覺節奏，更能：
- 提升頁面停留時間與互動率。
- 圖片
alt文字提供額外 SEO 關鍵字機會。 - 正確壓縮的圖片（WebP 格式、尺寸得當）能改善 Core Web Vitals。
低解析度或比例失調的圖片會拉低整體專業度，審核時務必確認。AI 生成圖也需经过同等级检核，後續章節會說明。
八、行動裝置排版最佳實踐
行動裝置是当前中文閱讀的主要場景。手機排版的核心原則是「極簡節奏」：更短的段落、略大的行距、更大的點擊區域。前端框架如 Tailwind CSS 與 Bootstrap 已預先定義實用的排版類別，善用它們能快速達成 RWD 友好設計。
8-1. 手機段落行數與留白（重申 IG‑2）
再次強調：手機端單段不超過 3 行。配合段後留白 margin-bottom: 1.5em，並將行距調至 1.7 倍。這三項調整是手機可讀性的鐵三角。測試時可使用 Chrome DevTools 的裝置模擬器，確認在 375px 寬度下，段落是否呈現「塊狀分明」的视觉效果。
8-2. Tailwind / Bootstrap 中的排版類別
主流框架已封裝最佳實踐：
- Tailwind CSS：
leading-relaxed（行距 1.625）、space-y-4（垂直間距 1rem）、max-w-70ch（限制行长最佳閱讀長度）。 - Bootstrap 5：
mb-3（段後間距）、text-wrap（避免溢出）。
實例：
<article class="prose max-w-3xl mx-auto leading-relaxed space-y-6">
<p>內容...</p>
</article>
這些類別直接對應本文推薦數值，是開發者的快速通道。
九、排版測試工具與品質檢核
排版品質需量化檢測，不能单凭肉眼。工具分兩類：自動化性能檢測（如 Lighthouse）與人工審查清單。尤其當內容包含 AI 生成圖片時，必須建立額外的影像品質把關流程，避免低解析度圖片破壞整體排版。
9-1. Lighthouse Accessibility → Readability 設定
在 Chrome DevTools 的 Lighthouse 稽核中，選擇「Accessibility」類別，會產生 Readability 分數。目標分數應達 80 分以上。若分數偏低，通常肇因於：
- 字體大小過小（建議正文字體不低於 16px）。
- 行距不足（檢查是否低於 1.5）。
- 對比度不足（非本文重點，但相關）。
調整後重新執行，直到分數達標。這是最直觀的排版健康指標。
9-2. AI 產圖品質檢核清單（IG‑7）
AI 生成圖片常出現解析度虛假或邊緣模糊問題。上傳前必須檢查：
- 實際解析度：放大至 100% 檢視，確保無像素化。網頁用圖建議寬度 ≥ 1200px，印刷需求 ≥ 300 dpi。
- 壓縮率：使用工具（如 Squoosh）檢查，建議視覺無損壓縮後檔案大小減少 < 30%。
- 邊界與出血：確認圖片關鍵內容未貼近邊緣，留有 3–5% 安全邊界。
- 格式：優先使用 WebP，次選 JPEG。
這清單能防止一張低質圖片拉低整個頁面的專業度。
十、結語：快速套用的 CSS 片段與檢查清單
行距、字距、段落是中文排版的三根柱子，彼此環環相扣。總結本文核心，您可將以下 CSS 片段作為專案基底，再根據内容微調：
/* 基礎排版系統 */ body { font-family: "Noto Sans TC", system-ui, sans-serif; line-height: 1.6; /* 行距比例 */ letter-spacing: 0.02em; /* 輕微字距，可移除 */ text-align: left; /* 堅持左對齊 */ }p { margin-bottom: 1.5em; /* 段後留白 / max-width: 70ch; / 限制每行字符數，提升閱讀流 */ }
/* 手機端微調 */ @media (max-width: 768px) { body { line-height: 1.7; } p { margin-bottom: 1.2em; } }
/* 中英文混排輔助（可選） */ p { word-break: keep-all; }
搭配檢查清單發布前確認：
- 單段行數：桌面 ≤5 行，手機 ≤3 行。
- 行距比例：font-size × 1.6，手機可至 1.7。
- 字距：正文字體維持 0，標題可微調至 0.05em。
- 空格：中英、數unit 之間有空格，標點後無空格。
- 標點：全程使用全形，確認無「， 」等錯誤。
- 圖片：每 500–600 字一張，已壓縮，alt 文字完備。
- Lighthouse Readability：分數 ≥ 80。
排版是細節的累積，從這份清單開始，逐步建立您的設計系統。了解更多全形標點規範，請參閱〈全形標點在網頁設計中的正確使用時機〉；如需 Tailwind 實戰範例，可閱讀〈用 Tailwind CSS 打造台灣-friendly 的閱讀體驗〉。
中文排版行距要設多少才舒服？
以正文字體 16px 為基準，行距建議設定為 1.6 倍（即 25.6px）。這是最通用的起始值，適用於多數中文字體。若字體較細（如思源黑體 Light），可微調至 1.7；若為報紙型密集排版，可降至 1.5。行動裝置上建議增至 1.7 倍以補償小畫面。
字距太緊怎麼調？
正文字體通常無需調整字距。若覺緊繃，可嘗試將 letter-spacing 設為 0.02em 至 0.05em。標題可稍高至 0.1em。切忌超過 0.15em，否則文字會顯鬆散。中文字距調整空間遠小於英文，建議優先調行距與段間距。
段落太長會影響 SEO 嗎？
間接影響。段落過長（單段超過 6 行）會降低頁面停留時間與可讀性分數（如 Lighthouse Readability），而停留時間是 SEO 的間接信號。此外，Google 偏好結構清晰的內容，適當分段有助於演算法理解文章層次，可能提升精選片段機會。建議桌面每段 2–5 行，手機 1–3 行。
中英文混排要加空格嗎？
需要。中文與英文、數字之間應加入全形空格（或半形空格），例如「中文 English」而非「中文English」。這能避免視覺黏連，提升掃描效率。可用 pangu.js 自動處理，或手動檢查。數字與單位（如 10 kg）之間則加半形空格。
全形標點與半形標點的差別？
全形標點（，。？！）佔用一個漢字寬度，是中文排版的標準，能創造自然的停頓節奏。半形標點（,.?!）寬度僅半個漢字，會導致文字密度不均、視覺跳動，網頁中文內容應避免使用。此外，全形標點後絕對不能加空格，這是與英文排版最大的差異。
手機上排版要怎麼調整？
手機排版核心是「極簡節奏」：1. 段落行數縮短至 1–3 行；2. 行距比例增至 1.7 倍；3. 正文字級至少 16px；4. 避免使用兩端對齊。善用 Tailwind 的 leading-relaxed 與 space-y-4 類別可快速達成。測試時務必在實際裝置或 DevTools 375px 模式下檢視。
圖片要怎麼排版才不會破版？
首先，確保圖片寬度不超過容器（max-width: 100%）。若需出血效果（圖片超出內容區），將圖片容器設為 width: 100vw 並配合 margin-left: 50%; transform: translateX(-50%);，同時確認父級 overflow 為 visible。圖片比例建議每 500–600 字一張，並在 CSS 中設定 height: auto 維持縱橫比。
有沒有現成的 CSS 範本可以直接貼上？
有。本文結語已提供基礎片段，涵盖行距、字距、段間距、行长限制與手機 RWD。若使用 Tailwind，可直接應用 prose 插件（需安裝 @tailwindcss/typography）並覆寫變數：leading: 1.6、paragraphSpacing: 1.5em。詳細框架範例請參考 Pixelcake 的〈Tailwind 排版實戰〉。
如何用 Lighthouse 檢測排版可讀性？
在 Chrome 中開啟頁面，按 F12 進入 DevTools，點選「Lighthouse」分頁。選擇「Accessibility」類別（可同步選 Performance），生成報告。在「Accessibility」章節內尋找「Best practices」或「Readability」分數。目標為 80 分以上。若分數低，檢查報告中是否有「Text is not legible」「Font size too small」等警告，並依建議調整 CSS。
AI 產圖品質該怎麼把關？
建立三层检核：1. 解析度：放大至 100% 確認無像素化，網頁用圖寬度至少 1200px；2. 壓縮：使用 Squoosh 或 ImageOptim 壓縮，視覺無損下檔案大小減少 < 30%；3. 內容：檢查邊界是否留有安全間距，是否有奇怪畸變。劣質 AI 圖片會嚴重破壞排版精緻度，務必手動審查。
繁體與簡體排版有什麼差別？
核心原理相同（行距、字距、段落），差異在於字體選擇與標點習慣。繁體中文習慣使用標楷體、明體（Song），簡體常用黑體；部分標點（如「、」「：」）在兩岸的線條粗细與位置略有不同。排版參數（行距 1.6、段落 2–5 行）則完全通用。關鍵是選擇支援兩岸字形的 font-family 堆疊，如 "Noto Sans TC", "Microsoft JhengHei"。
什麼是「字距」與「字間距」的差異？
在中文排版語境中，兩者通常同義，皆指 letter-spacing，即單個字符間的間距。但嚴格來說，「字距」更偏向設計术语，包含字符間微調；「字間距」則更技術性，直接對應 CSS letter-spacing。本文統一使用「字距」泛指，並以 CSS 屬性實作。注意勿與「詞距」（word-spacing）混淆。