共通設計理論教材 / Class LLL

字重、字寬與視覺尺寸

較粗、較窄，先問改的是哪一層

把原生字重、設定字級、字寬設計與外部變形分開。比較真實wght、400字形的外描邊及水平壓縮反例；較粗或較窄不是可讀性與美感保證。

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

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

閱讀目標

分清原生字重、字級與外描邊
辨認水平壓縮不等於設計過的窄體
以不同字形與尺度檢查空間、筆畫與辨識需求

適用條件與學習範圍

加粗、放大與水平壓縮都讓字看起來改了；哪些是字型提供的設計，哪些只是外部變形？

先能區分設定字級與字形外框；可補讀字形結構。

能做一組固定字體、字形與字級的原生字重比較，指出外描邊與水平壓縮不是本例原生字重／wdth，並以換字形或尺度說明取捨。

只示範現有字體wght；沒有原生wdth、字體造字或瀏覽器假粗體演算法。沒有把較粗／較窄換算成可讀性、美感或學習分數；完整字體選擇與授權另補。

原理與判斷

字重談筆畫厚薄及整體黑度，字寬談橫向比例與排樣佔位；放大字級又是另一種改變。三者都可能改變你對字的大小與份量的感覺，但不能因此視為同一個控制，也沒有一種數字能代表所有人的視覺尺寸。 OpenType把wght和wdth定義為不同可變軸，實際字型可以只提供其中一種。本站現有Noto與Manrope套件都只有wght，教具因此只把wght稱為原生軸；水平壓縮特別標成反例，不能因為畫面變窄就宣稱取得窄體設計。

原生字重：先隔離變因

A固定Noto400，B也選Noto並固定同一字形、同一字級，再只把B字重由400改為800。此時可比較筆畫和內部空間，但不要假定每個字符都增加相同像素寬，或認為800必定是400的兩倍粗；字重數值是軸座標，不是所有字體共享的筆畫厚度尺。本例兩個可變字體在套件中繼資料有wght範圍，教具用共同的300–800區間並等待字型face載入。不使用缺失字重後讓瀏覽器悄悄合成，再把結果叫原生字重。

外描邊反例：不是重建一套粗體

切外描邊時，B回到原生400，再加一圈與字同色的SVG描邊。你可以觀察外緣與字內空間，和原生700或800來回比較；但描邊模型沒有字型設計者逐筆調整輪廓、間距或構成的資訊。 CSS Fonts4工作草案區分字族沒有粗體時的合成粗體控制。本頁的描邊只是便於辨認修改層次的原創反例，並非模擬任一瀏覽器的合成演算法；表格仍量400原生字形，不把描邊外伸算成另一套字型度量。

字寬：形狀比例與排樣距離也要分開

原生wdth若存在，會由字型提供可變設計；本例沒有這個軸，所以不提供假的窄體預設。水平壓縮只把B的400字形在X方向乘上比例，Y方向不動；這會同時改變字腔及橫直方向的關係，不能用它證明設計過的窄體會如何呈現。表內前進寬是原生Canvas值，不隨外部壓縮偷偷改名；畫面變窄而表值不變，正好提醒你「原生排樣度量」與「外加顯示變形」是不同層次。實際換窄體時，仍要查該字體支援、字形設計與輸出條件。

視覺尺寸沒有一條萬用等式

較粗可能讓一個標題顯得更有份量，也可能使某些字內空間更擁擠；把它縮小後，原先的大樣本觀察未必足夠。先說要辨認的內容、字形和尺度，再比較兩版，不把「看起來較大」當成實際黑面高度或閱讀速度的別名。把國換成口或g、把64改成32，就是本活動的反例。記錄哪個結構需要保留，停止於這些樣本；長文、低解析輸出、視力差異及真機閱讀仍需對應檢查。

步驟與觀察

建立同一來源的基準
重設此頁，兩版同為Noto、國、64px；A400、B700。先把B調400，看相同字形的基準，再升到800；這輪只改B原生wght。
看外描邊到底改了哪裡
選外描邊反例，注意B回到400。與原生800對照筆畫轉折和內部空間；表格標明未含描邊，不把外描邊當成字型內部的設計修改。
檢查水平壓縮的反例
選水平壓縮，改到60%再100%。觀察Y方向高度與原生前進寬讀數是否仍保留原條件，指出哪個形狀比例被改變；這不是原生wdth。
換字形和尺度限制結論
把國換口或g，兩版共同改到32px，再回64。描述在小樣本需要保留的空間，而不是給可讀性打分。沿字形結構補讀基線與外框；返回／重載保留本頁獨立條件。

常見問題

把800寫成400的兩倍粗

數值是字重軸座標，不是通用筆畫厚度倍數；固定來源、字形和字級，直接比較本次樣本。

水平壓扁後稱它為原生窄體

先查有無wdth／窄體設計。本例只有wght，壓縮只是反例；不要把外加變形冒稱字型變體。

加描邊後沿用原生字形框當完整外緣

本表未含外描邊；需分開看原生輪廓與外加筆觸，不能把同一框混成兩種量測含義。

大樣本看起來清楚，就直接套小字

換字形、縮到實際用途再看必要空間。教具沒有真人可讀性或印刷結果，不能據此給最佳字重。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：跨工具字形觀察；以本地Noto Sans TC與Manrope做單字形瀏覽器比較。不是Photoshop、Illustrator或Figma操作步驟。來源狀態：已實讀Ilene Strizver署名Anatomy原文、OpenType1.9.1 OS/2之usWeightClass/usWidthClass/sxHeight/sCapHeight、wght/wdth軸、head.unitsPerEm、WHATWG Canvas TextMetrics及clreq2026-10-07 群組 Note Draft§6.4。CSS Fonts4引用2026-10-22 Working Draft的font-synthesis-weight段，未稱正式Recommendation或全瀏覽器等效。示意限制：原創雙座量測儀與字型校樣，現有OFL-1.1字體套件。先確認需要的字型face載入，再列Canvas單字形前進寬及actualBoundingBox上下界；圖只作投影。原生wght與外描邊／水平壓縮明確分開，後兩者不是原生字重／wdth或瀏覽器假粗體重建。原生軟體實測：僅網站瀏覽器的字型載入與Canvas比較；不是字型檔OS/2欄位讀取、原生設計軟體實測、印刷打樣或各瀏覽器一致性結論。學習成效驗證：沒有真人閱讀、眼動、可讀性、美感或學習成效實驗；較粗、較寬或讀數較大不等於更好。

參考來源

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