Class LLL / 設計星團教材目錄編輯與來源

共通設計理論 教材 / Class LLL

行長、字距與行距

三個方向的空間，分開比較

固定原文、字體與字級，分別改容器、字距和CSS行高。從實際斷行與高度說明取捨，分清行盒高度、字框間空白和字形墨跡，不把單一行長或倍數當所有語言最佳值。

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

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

閱讀目標

適用條件與學習範圍

增加字距、加大行高與縮窄容器都會讓文章變高，它們到底改了什麼？

能固定原文做一次單變因比較，說明容器寬、字距與CSS行高如何分別影響排樣，再用220px窄容器限制原結論。

不是所有語言最佳行長／行距研究；本例左齊、固定18px、不實作完整兩端對齊、注音、直排或印刷分頁。CSS line-height不等於clreq字框間空白。

原理與判斷

同一份文章變高，可能是容器窄而多換了行，也可能是每行之間的距離增加，或字距讓某些字移到下一行。只看總高度，無法知道是哪個條件造成差異。先固定原文、字族、字級與其他間距，再改一項。 clreq討論中文出版的版心、行長與行距條件；本頁用網站原生HTML觀察它們之間的關係。需求草案、出版慣例與CSS實作分開，沒有把書籍的參考字數或品牌尺度當手機文章的普遍最佳值。

行長先看容器與內容，不只數字數

行長可以用容器尺寸或排入的字元來描述，但中西混排、字型與標點都會影響實際斷行。教具A固定360px，B可切220px；原文沒有增加或刪除，正文仍18px。先觀察首段行片段與整份原文高度，而不是認為越寬行越少就一定更好讀。 clreq §7.1.1.5在中文出版脈絡列行長參考，並要求依字體、成品、版式及媒介設定。本頁不把其中數字換成所有語言、裝置的最佳值，也不把px寬度除以18就稱為實際字符數。

字距改的是字元排樣空間

B字距控制CSS letter-spacing。固定容器與行高後增加它，看某些字是否換到下一行；這沒有在原文插入空白，也不是把字形水平拉伸。需要知道中西相鄰間距或標點擠壓時，回到對應教材，不把一般字距當完整中文排版規則。 CSS Text3這個固定版本是Candidate Recommendation Draft；本頁採瀏覽器實際結果，不重建其全部字形組合或逐字距公式。字距對不同書寫系統的適用條件也不能由這段繁中直接外推。

CSS行高不等於可見空白

CSS line-height參與行盒高度計算；使用無單位數值時，與元素字級相乘得到使用尺度。本例18px正文、1.8倍會得到32.4px computed line-height，讀數直接從瀏覽器取，不把它冒稱兩筆墨跡間距。 clreq把字框間的空白稱為行距，另討論相同字級下的行高關係；這個前提不等於所有混合字級、注音或inline元素的CSS盒模型。教具另列首兩個範圍文字矩形頂端距，明示不是直接讀基線或墨跡空白。

反例：窄容器與較大行高

先在360px比較1.8與2.4，再把B切220px。當行數增加，同一行高改動對總高度的影響也可能更明顯；不能把總高的變化全歸給字距或讀者能力。 如果想改善段落分組，增加每行行高未必能代替段落間隔。沿下一篇比較同節段落與下一節標題的距離；真正閱讀體驗還需實際內容、裝置與讀者觀察，本頁沒有成效分數。

步驟與觀察

  1. 建立同一原文的基準

    重設，兩版360px、18px、行高1.8、字距0、段落18px。比較首段與總高度，確認沒有內容增刪。

  2. 只改B行高

    把行高從1.8改2.4，字距與寬度不動；看computed line-height與實際行片段，說明垂直距離和斷行是不同問題。

  3. 還原後比較字距與窄容器

    重設後只改字距2px，再還原只切220px。每次記錄這輪變因，不把三項一起改後歸因給單一控制。

  4. 補讀段落並返回

    沿段落標題教材看另一層分組；返回／重載保留本頁教具，重設只改本頁，不改另頁方案。

常見問題

把line-height說成墨跡之間的空白

分清CSS行盒、字框與可見筆畫；本頁computed行高和範圍頂端距都不是墨跡空白量測。

18px寬除容器就能知道實際行字數

混排、標點和字型會改變斷點；直接看真排樣，不用字級推成所有字符等寬。

找到一個行距就套所有內容

換容器、字型、內容與用途重查；來源的出版或品牌條件不能抹除。

適用範圍與證據

原教材查核日期：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引擎或多瀏覽器一致性驗收。 學習成效驗證：沒有眼動、真人閱讀速度、可讀性、美感或學習成效實驗。較少行、更大空白與自行插旗都不構成學會證明。

參考來源

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

相關知識