共通設計理論教材 / Class LLL

文字、圖像與閱讀層級

先看見什麼，還找得到必要資訊嗎？

用同一份展覽資訊比較標題與活動資訊兩種層級，再分開改字級字重、行高字距和圖像占位。讀數描述排樣，閱讀障礙仍需自己指出；不是Photoshop文字控制教學或美感評分。

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

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

閱讀目標

先定資訊任務，再比較主次
分開觀察字級與字重的作用
區分行高、行間空白、段距與附加字距
辨認圖像占位與文字長短造成的疏密
在另一份內容與成品尺寸重新驗收

適用條件與學習範圍

標題、時間、地點和圖片同時出現時，要讓讀者先找到什麼？哪些字仍難讀或不易定位？

不需要先會Photoshop。先選一個閱讀任務，例如查時間地點，或先了解展覽主題。

能比較兩個資訊層級，指出具體閱讀障礙，逐項調整字級、字重、行距字距和圖文密度；換成較長內容後重新檢查，說出取捨。

通用觀察理論；不是文字工具、字型引擎或完整中文組版教學。大小／比例／行數不是美感分數、眼動路徑或真人學習成效，Photoshop文字承載及字型語言另沿唯一知識。

原理與判斷

資訊層級是安排意圖：哪些內容先被辨認、哪些是補充；實際閱讀也受任務、語言、視力、字型和媒介影響。NN/g以反差、尺度與分組解說層級，這些是可比較的線索，不是我們已驗證的眼動順序。先說「讀者現在要找什麼」，比一律放大標題更能提出可檢查的問題。本站兩份原創活動資訊保留相同文字，左片固定標題優先、右片可改活動資訊優先；另外提供可選取、可放大的原文。你可以比較找到時間地點的障礙，但網站不計時、不推算注意力，也不因選了某提案就宣布已經好讀。

資訊主次：先定任務，才談先後

看展覽介紹時，展名和主圖可能是入口；準備出門時，日期、時間和地點卻可能更急需。切換兩個層級提案，先只找時間與地點，再完整讀介紹，描述你在哪個位置停下或誤認了分組。提案名稱指設計者意圖，不是系統量過你的目光。適用於資訊都有用、卻互相競爭時。終點是說出「為這個任務讓哪項優先」與另一項仍如何找到；若所有內容都大而粗，差異會被抹平。分組與位置沿構成觀察補讀，不把視覺順序直接當輔具讀序。依據：NN/g Visual Hierarchy。

字級：相對差異與真實尺寸一起看

字級是字型設計空間的尺度，不等於每個字可見筆畫的實際高度。同樣px的不同字型，外觀大小也可能不同；先固定本站字型與字重，只改標題字級，觀察標題行數和周圍資訊是否擁擠。適合建立角色差異，不保證最大字一定是最重要或最先看。終點要在實際閱讀尺寸辨認內容，並在較長標題重看斷行；失敗是只在放大畫面覺得漂亮，縮小後必要資訊難讀。本文數值是網站打樣像素，不是Photoshop點數／列印尺寸換算。依據：NN/g尺度、W3C可調整呈現。

字重：強調不能靠全部加粗

一般與粗體改變筆畫外觀及字面反差，可能強調一項，也可能在小尺寸讓細節和字腔更擁擠。固定字級，在標題一般400與粗體700間切換；它們是此本地Noto Sans TC字型的兩個指定值，不代表任何字型都提供相同樣式或筆畫增量。適合在不大改版面時建立差別。終點指出哪裡較容易辨字、哪裡開始擁擠；失敗是用所有粗體來補救分組錯誤，或把換重後的行寬變化當文字內容變了。字型資源／缺字／樣式支援仍到唯一字型頁排查。依據：NN/g字體反差、既有字型知識。

行距與行高：別把基準距當筆畫空白

本站正文固定16px，行高18–32px控制水平行盒的基準間距；24px對應1.5倍。這不等於量出字的筆畫與下一行之間恰有8px白色，字體的上伸、下伸及度量仍會影響空白。段落之間的距離又是另一項分組控制，本例保持固定以隔離行高。先逐行讀一句，再只改行高，看會不會串行或找不到下一行；適合多行文字，不必替單行標題套同一倍率。終點能分清一行內與段落間的空間，過緊可能相干涉、過疏可能讓一段像分散多組。CLReq的行距／行高定義只作草案背景，不當普遍美感定律。依據：MDN line-height、CLReq草案。

字距：整段附加空隙不等於字偶微調

正文附加字距是在自然字距之外，對文字間再加0–2px；它不同於針對特定兩個字形關係的kerning，也不會增加字的資訊。固定行高改字距，觀察分行與詞句連貫性；不要只看字是否不相碰。適合比較這份水平繁中短文，不能推成所有語言都應加大字距。過大可能拆散詞句、過小可能重疊；阿拉伯文等連接文字另有條件。終點是指出這段內容和這個字型的障礙；字距數字相同不證明不同字型一樣易讀。依據：MDN letter-spacing。

文字圖像密度：占位、內容量與留白分開

圖像占位高度改變的是同一原創圖在紙面上的外框面積，字句不刪除，紙面會隨內容加高。圖框占紙面百分比只計256px寬圖框／288px紙面外框；不是黑墨密度、實際訊息量、心理負荷或圖片吸引力分數。先固定短文只改圖高，找時間地點；再換較長活動資訊，檢查標題與段落分行。適合分清「圖片變大」與「文字變長」這兩種疏密原因。終點說明空間改給了誰、什麼資訊仍找得到；失敗是為追某個圖文比例截掉必要字句，或把留白一律當浪費。依據：NN/g分組、本站幾何比較。

兩種觀看：小打樣與可縮放原文

打樣寬288px，再真實縮成144或72px；縮小後細筆畫可能合併，即使原文仍存在，成品尺寸也可能不夠閱讀。可縮放原文校樣保留相同內容與角色樣式，讓你選字、放大、用輔具閱讀；它不是假裝替已點陣化小字補回細節。終點能區分輸出辨字問題與資訊本身遺失；至少回到288px或原文確認必要內容。文字覆寫／窄寬可使原文重新分行，所以數據只對應固定288px打樣，不宣稱是目前DOM的行數。沒有用小圖作唯一教材。依據：W3C可調整呈現與文字間距。

無障礙間距數值：是允許覆寫，不是美感公式

WCAG2.2的1.4.12以行高1.5倍、段後2倍、附加字距0.12倍、詞距0.16倍檢查使用者覆寫後是否丟失內容或功能，適用的文字系統另有例外；不是要求所有作者預設都必須用這一組數值。1.4.8的CJK40字等則是AAA條件下可用調整機制的背景，不能混稱所有AA網站的唯一最佳行長。本站控制提供有限觀察範圍，不能當完整WCAG合規稽核。閱讀文字及操作允許放大和重排、不用固定高度藏字；如果覆寫後被裁切或按鈕消失，要先修可用性，再討論風格。終點說出可調整內容與固定像素打樣的差別。依據：W3C Understanding1.4.12／1.4.8。

步驟與觀察

先找資訊，再比較兩種主次
在短展覽資訊先找時間與地點；切活動資訊優先，再回標題優先。用自己的話描述哪項容易定位、哪項變得次要；不把提案名稱當作已驗證順序。
固定內容，分開改字級與字重
先只改標題字級，再固定它切一般／粗體。看行數和字腔，不把兩種變化一起歸因為「比較好看」。
讀一句，只改行高或字距
在間距與圖文只改一個控制，逐行讀完簡介。指出串行、分行或分組的具體位置，觀察讀數而非追一個標準倍率。
換長資訊與圖高，重新檢查
切較長活動資訊，先再找新的時間地點，再改圖像占位。核所有內容仍在、紙面加高，不用刪字或過小字維持同一外框。
回到真尺寸與原文說出取捨
切144／72打樣觀察小字，回288與可選取原文確認；補讀明暗返回應保方案。最後說出為哪個任務保留什麼，以及尚需真人觀察或另一媒介檢查的部分。

常見問題

每一項都放大加粗，沒有主次

先選當前閱讀任務，保留一到兩個主要線索，確認其他資訊仍可找；數量只是起點，不是硬性規律。

行高數字很大卻仍像散開的句子

分清行內、段落與群組距離；先固定字型與行長，只改一項，避免把同一段拆成多組。

圖文占比達標，但時間地點找不到

占位比例不評估資訊意義；回到任務找具體文字，檢查標籤、順序和分組，不追美感分數。

短標題合適，換長標題就擁擠

重新檢查換行及必要資訊的空間，讓內容驅動高度；不以遮掉尾字維持外框。

72px打樣看不清，卻因有原文就當成輸出可讀

原文提供替代閱讀，不替小成品取得可讀保證；回真尺寸或重新安排必要字與媒介。

把網站字重、行數當Photoshop或真人測試結果

本站只量本地字型與有限水平排樣；軟體入口和語言組版沿文字承載／字型頁，真人閱讀順序需另做觀察。

適用範圍與證據

原教材查核日期：2026-10-20 適用範圍：通用理論／原創水平繁中展覽短文、兩種資訊層級與字型量測打樣；跨軟體觀察。來源狀態：已實讀六組一手文件；NN/g2021-01-17，MDN2026-09-10／08-11；W3C理解文件未列更新日、以WCAG2.2及查核日標示，CLReq為未背書草案研究背景。示意限制：本地SIL OFL Noto Sans TC、原創文字與幾何圖；有限逐字折行、真PNG／縮小和幾何讀數，不是完整字型組版器／注意力或美感評估。原生軟體實測：未在Photoshop實測；此頁沒有軟體步驟，網站打樣不是Adobe輸出證據。學習成效驗證：未進行真人閱讀／眼動或學習成效測試；活動要求讀者自行描述障礙及取捨。

參考來源

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