共通設計理論教材 / Class LLL

段落、標題與長文節奏

間距跟著內容層次，不是一直加空白

在同一原創文章中分別調整同節段落間隔與下一節標題前距，保留文字與語義順序。從段內、段間到節的關係描述取捨，區分捲動文章與印刷分頁的孤行問題。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 9 分鐘

開啟互動教材查看參考來源

閱讀目標

將段內、段間與節的距離分開
用標題與內容關係說明空白選擇
區分連續捲動與印刷分頁限制

適用條件與學習範圍

每段後面加一樣大的空白，讀者就能知道哪些內容同一組、哪個標題接下一節嗎？

能區分行高和段落間隔；可先補讀行長與字距。

能固定原文與段內行高，分別比較段落間隔和標題前距，指出內容層級與窄容器的取捨，不以空白總量代替長文組織。

只有兩節四段的原創橫排樣文，不等於整本長文研究；不自動拆段改稿、生成假分頁或修正全部孤行孤字。語義標題固定，不把外觀大字當唯一標題證據。

原理與判斷

段落把相關句子組成一個閱讀單位，標題則提供更大一層的內容入口。空白能表現這些關係，但空白的總量不會自動替你決定文章結構。先確認哪段跟哪段談同一件事、哪個標題承接哪一節，再比較間距。本例沒有改寫原文或隱藏標題。兩版都保留兩個h4語義標題、四個段落及相同順序；控制只改同節段落間隔與下節標題前距，便於把內容分組和字體／行高的變因分開。

同一節內的段落，與下一節不同

原創文章分「來訪之前」與「留下紀錄」兩節。先讀各段內容，再看它們之間距離；不要因為都有兩個段落，就推定任何文章都應等分。教具A固定段落間隔18px、下一節前30px，B可分別改，這只是比較基準，不是規定。段內行高保持不動時，增加段落間隔會把兩段拉開，卻不會讓段內每行都更疏。用這個差異說明你要表現的是段落邊界，還是每行的距離。

標題要接住對應內容

標題不只是一段比較大的字，它還是內容結構的入口。這裡標題有h4語義，固定22px／600、標題後距10px；B只改下一節標題前距。觀察當節前距小於同節段落間隔時，你是否仍能清楚描述分組。這是一項可討論的編排假設，不是自動評分。clreq §7.1.3列不同出版標題配置，並提醒書籍與雜誌情境有差異；網站可以借此檢查關係，不能說一種間距適合所有標題。

長文節奏也包含查找與返回

長文不要求所有段落同長、每屏一定出現幾個標題。讀者可能順讀，也可能先找需要的資訊；段落、標題及可預期的順序一起支援這些行為。只改空白不會補回缺少的標題或錯亂內容。本例可跳過教具讀正文，原文完整可選取並在窄螢幕捲動。這不是把固定寬紙樣當正式手機文章的唯一布局；真文章的重排、目錄與閱讀順序需另按用途檢查。

孤行孤字：先分清有沒有頁

clreq §7.1.2討論中文出版的孤行與孤字，不同出版者也有處理差異。連續捲動文章沒有與紙本完全相同的頁界；螢幕畫面底部暫時看見一行，不代表已發生同一種印刷孤行。本例不畫假頁框、不自動刪字補字或聲稱已完成分頁引擎。需要輸出PDF或印刷時，應在實際分頁、字體與版心裡檢查標題是否與內容分離，以及段末短行的處理。

反例：窄容器會改變整段高度

把B從360改220px，段落可能變成更多行。即使段間18px、節前30px沒變，它們相對於段落總高度的感覺也不同；不要因此把固定值叫永遠正確。再只把段落間隔改36、節前距改0，逐項比較，說清哪層關係變得清楚、哪層可能模糊。這是原創取捨活動，沒有真人閱讀或眼動結果；返回別頁／重載仍能接續本頁方案。

步驟與觀察

先讀原文與標題分工
重設後找兩個語義標題與各自兩段。A、B相同，先說內容關係，再談要增減哪個距離。
只改同節段落間隔
把B段落間隔從18改36，保留行高1.8。看實際段間距增加而段內行高不變；空白增加不等於讀者必然更理解。
比較下一節標題前距與窄容器
還原後只把節前30改0，再切220px作尺度反例。固定原文與語義，說明哪些線索仍在、哪些間距關係需要重查。
補讀行距，返回保留條件
沿行長字距教材分清段內空間；返回／重載保留本頁。重設只改本ID，不把插旗或看過當閱讀實驗。

常見問題

增加每行行高來代替段落分組

先固定段內行高，只比較段間與節前距，讓不同層次的距離分別負責。

標題只要字大就是正確結構

本例保留真正h4語義與順序；真文章需核對標題接哪段內容，外觀不能替代結構。

把視窗底部一行當印刷孤行

先確認是否有實際頁界。連續捲動和PDF／印刷分頁要用不同條件檢查。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：繁中橫排的行、段落與標題觀察，固定本地Noto18px／400正文；跨工具原理，不提供軟體選單。來源狀態：實讀clreq2026-10-07 群組 Note Draft §7.1.1.4–5、7.1.2與7.1.3標題種類；CSS2.1 §10.8.1行高／行盒與CSS Text3固定2026-08-14 Candidate Recommendation Draft §7.2字距。IBM 文字縮放只作品牌背景；S12本輪無新全文證據，不用其推導數字最佳值。示意限制：原創四段資料室說明與兩個語義標題，重用QZ23雙座校樣架。A固定，B只改容器、CSS行高、字距、段落或標題前間隔；普通可選取HTML不省略。讀數取computed style、範圍行片段與DOM幾何，不用複製公式冒充墨跡／基線實測。原生軟體實測：僅網站Chromium的本地字型、CSS與DOM比較；非Ps／Ai／Figma排樣、印刷分頁、完整CJK引擎或多瀏覽器一致性驗收。學習成效驗證：沒有眼動、真人閱讀速度、可讀性、美感或學習成效實驗。較少行、更大空白與自行插旗都不構成學會證明。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。