better-typography

優質排版

好的排版多半是克制。合理的字級、舒適的間距和足夠的對比，勝過任何花俏的效果。標籤、表格儲存格、行銷標題和文章段落不該共用同一套規則。在建立或審查任何包含文字的內容時，請套用這些原則。

審查時，請閱讀頁面而非掃描程式碼：瞇眼看標題層級是否合理、完整閱讀一個段落以確認舒適度、調整視窗大小以檢查在實際內容長度下是否有不良換行、孤行和截斷問題。

文字本身（按鈕標籤、錯誤訊息、空狀態）由 better-writing 技能負責；語意標題結構由 better-accessibility 負責；空間 RTL 佈局和邏輯 CSS 屬性由 better-layout 負責；渲染對比測量和色彩修正由 better-colors 負責。本技能負責文字如何渲染、換行以及在混合方向內容中的行為。

符合專案的樣式系統。 在建議或撰寫任何修正前，先檢查程式碼庫的樣式方式，並以該系統表達所有變更：Tailwind 專案使用 Tailwind 工具類別、CSS 使用純宣告、CSS Modules、styled-components 或 StyleX。速查表將每個宣告對應到其 Tailwind 等效項目。切勿為了套用排版修正而引入第二種樣式方法。

快速參考

類別	使用時機	參考文件
選擇字型	字型類別、搭配、格式、字體解剖	choosing-fonts.md
可變字型與 OpenType	軸、字重、表格數字、風格集	variable-fonts-and-opentype.md
間距與尺寸	字級比例、標題層級、行高、字距、文字修剪	spacing-and-sizing.md
換行與標點	行長、換行、截斷、智慧標點、RTL	wrapping-and-punctuation.md
細節與無障礙	底線、選取範圍、表單、裝飾文字、對比	details-and-accessibility.md
CSS 速查表	快速查詢所有涵蓋的屬性及 Tailwind 等效項目	css-cheat-sheet.md

核心原則

1. 提供正確格式

在網頁上使用 .woff2（Brotli 壓縮，廣泛支援）。.woff 僅作為非常舊的瀏覽器的備用；.ttf 和 .otf 是未經網頁壓縮的原始桌面格式。檔案如何載入是專案本身的考量，本技能不指定載入方式。

2. 優先使用屬性而非原始標籤

當 CSS 屬性存在時，請使用它。使用 font-weight: 650 而非 font-variation-settings: "wght" 650、font-optical-sizing: auto 而非 "opsz"、font-variant-numeric: tabular-nums 而非 font-feature-settings: "tnum" 1。屬性在非可變字型備用渲染時仍能運作。保留原始標籤屬性給自訂軸（"GRAD" 80）和沒有對應屬性的特殊功能（"ss01" 1）。

3. 載入預期的字重與樣式

瀏覽器可能會合成目前字型家族未提供的字重或樣式。建議載入設計實際使用的字體。僅在確認所有需要的粗體、斜體、小型大寫、上標和下標形式在完整備用字型堆疊中仍保持視覺區別後，才設定 font-synthesis: none；停用合成並非診斷手段，且不得消除強調效果。

4. 減少字型、尺寸和字重數量

很少使用超過三種字型。字重和尺寸定義層級，但過度使用會迅速損害可讀性。搭配時應追求對比而非相似：襯線標題搭配無襯線內文看起來是刻意的，兩個幾乎相同的無襯線字型則像是錯誤。低於 18px 時，保持字重 400 以上；字重低於 300 僅適用於顯示用途（28px 以上），在文字尺寸下會消失。

5. 使用具有語意名稱的字級比例

定義一組少量的尺寸，並盡可能不偏離它。沒有系統的硬編碼尺寸在規模擴大時會崩潰。對於個人專案，只要使用規則明確，預設名稱如 text-sm 即可。在團隊中，應按用途命名尺寸（text-body-sm），而非按尺寸命名，以保持規則一致。

6. 標題尺寸隨層級遞減

在連貫的頁面層級中，將標題層級對應到字級比例的遞減步驟：視覺上從屬的標題不應意外壓過其父層級。相鄰層級在比例較小的一端可以共享相同尺寸，只要字重或間距能區分它們。根據 better-accessibility 選擇語意標題元素；本技能僅控制其視覺處理。

7. 依角色設定行高

標題較緊湊，約 1.1。內文 1.5 到 1.6。偏好無單位值，使行高隨字體大小縮放；固定值如 24px 則不會。緊湊行高適用於短文字：任何換行超過三行的文字至少需要 1.4，即使在高度受限的行中也是如此。

8. 依尺寸設定字距

大型標題通常需要略微負的字距。小型大寫標籤需要一點正字距，以免字母顯得擁擠。閱讀尺寸的內文則不需要。

9. 限制行長

長行會使眼睛難以找到下一行。將長篇文字限制在每行約 60–75 個字元。任何單位都可以：65ch 直接測量字元數，像素或 rem 限制也同樣有效：在 16px 內文尺寸下，範圍大約落在 560px 到 680px 之間，因此 Tailwind 的 max-w-xl 或 max-w-2xl 都合適。重要的是存在限制，且產生的行長在範圍內。

10. 有意識地換行

text-wrap: balance 均勻分配文字到各行：用於標題。text-wrap: pretty 避免在最後一行留下單一短詞：用於描述。兩者都跳過長篇文字：瀏覽器在幾行後就會忽略 balance，而平衡整個段落會浪費空間並使閱讀更困難。overflow-wrap: break-word 用於長單詞、連結或 ID 可能溢出容器時。white-space: nowrap 用於標籤和徽章，因為換行會顯得很奇怪。

11. 對變動數值使用表格數字

數字預設寬度不同，因此計時器、計數器和價格在更新時會改變佈局。對任何會變動的數值套用 font-variant-numeric: tabular-nums。

12. 截斷而不遺失內容

單行：text-overflow: ellipsis 搭配 overflow: hidden 和 white-space: nowrap。多行：line-clamp。截斷會隱藏內容，因此如果遺失的文字很重要，請在工具提示或展開檢視中保留完整數值。

13. 自然書寫文案，用 CSS 設定樣式

以自然大小寫儲存文字，並用 text-transform 控制呈現，這樣重新設計時永遠不需要重寫文案。使用智慧標點：散文使用彎引號（程式碼使用直引號）、範圍如 2010–2020 使用 en dash、插入想法使用 em dash、單一省略號字元、使用   將 16 px 等數值保持在一起、使用 ­ 控制長單詞可能斷行的地方。

14. 從字型取得底線

預設底線由瀏覽器決定位置。使用 text-underline-position: from-font 和 text-decoration-thickness: from-font 從字型本身的度量拉取位置和粗細，或手動調整 text-decoration-thickness、text-underline-offset 和 text-decoration-skip-ink。text-decoration-style 將線條繪製為虛線、點線或波浪線；點線底線是常見的提示，表示單詞帶有額外資訊，例如縮寫或定義的術語。除非唯一動畫效果是顏色變化，否則應將底線建構為獨立元素，而非使用 text-decoration：顏色是真實底線中唯一能可靠動畫化的部分。

15. 行動裝置上輸入框使用 16px

iOS Safari 會在輸入框文字小於 16px 時放大整個頁面。在行動裝置視口上將輸入框文字保持在 16px（text-base sm:text-sm）。避免使用 maximum-scale=1 視口中繼標籤：Safari 會忽略它以允許捏合縮放，但其他瀏覽器會遵守它並阻止縮放，這會違反 WCAG。

16. 尺寸與對比下限

長篇內文從瀏覽器預設的 16px 開始，然後在實際字體、行長、平台和產品密度中評估。UI 文字可以更小：14px 是輸入框和選單的良好起點（輸入框在行動裝置上仍需 16px，見原則 15）、13px 用於說明文字，很少低於 12px。當文字看起來對比不足時，使用 better-colors 測量渲染對比，並使用 better-accessibility 分類需求；除非被要求，否則不要更改顏色。

17. 在根元素設定字體平滑

在 macOS 上，文字渲染比預期更粗。在根佈局上一次套用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale（兩者皆由 Tailwind 的 antialiased 涵蓋），使其涵蓋所有文字。

18. 語言與雙向行為

設定 lang 以便瀏覽器和輔助技術選擇正確的發音、引號和斷字。在方向變更的文件或內容邊界設定 dir，保留數字順序，並在需要時使用 <bdi> 隔離混合方向的數值。空間鏡像和邏輯 CSS 屬性屬於 better-layout。

19. 保持有用的文字可選取

當選取的組合保持清晰可讀時，::selection 可以將品牌帶入閱讀體驗。預設保持文字可選取。僅在特定可拖曳或手勢驅動的表面上使用 user-select: none，因為意外選取會明顯干擾互動；切勿在整個介面中停用選取，或僅僅因為按鈕標籤可以被反白。

常見錯誤

錯誤	修正
在網頁上提供 .ttf/.otf	轉換為 .woff2
使用 font-variation-settings: "wght" 設定字重	font-weight（與非可變備用字型相容）
使用 font-feature-settings: "tnum" 1	font-variant-numeric: tabular-nums
合成字體與預期設計不同	載入所需字體；僅停用已驗證的合成模式，不消除強調效果
硬編碼一次性字體大小	使用字級比例
子標題視覺上壓過父標題	將該區塊的層級對應到遞減的比例步驟
根據預設大小選擇標題元素	使用 better-accessibility 選擇語意，然後在 CSS 中設定視覺大小
在可縮放文字上使用 line-height: 24px	無單位值（1.5）
全寬段落	限制每行約 60–75 個字元
段落最後一行有孤行	text-wrap: pretty
兩行標題不平衡	text-wrap: balance
數字導致佈局偏移	tabular-nums
截斷文字且無法閱讀	工具提示或展開檢視顯示完整數值
文案中輸入 UPPERCASE	自然大小寫 + text-transform
介面中使用對齊文字	text-align: start；保留對齊給特定編輯佈局
底線穿過下降部	text-decoration-skip-ink: auto、from-font 度量
輸入框低於 16px 在 iOS 上縮放	text-base sm:text-sm
根佈局遺漏字體平滑	在根元素套用 antialiased
混合方向數值順序錯誤	設定正確的 lang/dir；必要時使用 <bdi> 隔離數值
在整個應用程式 chrome 中停用選取	恢復選取；僅在與拖曳或手勢衝突的特定互動中抑制
額外資訊提示無視覺提示	使用 text-decoration-style: dotted 的點線底線
在 14px UI 文字上使用細/輕字重	低於 18px 使用字重 400 以上；細字重僅適用於顯示用途
在三行卡片描述上使用 leading-none	任何換行超過 3 行的文字至少使用 1.4

審查輸出格式

僅在使用者要求獨立排版審查時使用此格式。當 better-interface 協調審查時，請將領域證據和發現提供給該技能，並讓其輸出格式、嚴重性等級、合併規則、上限和裁決優先。

獨立審查分為兩部分呈現。

發現

按原則分組所有確認的發現。使用包含嚴重性、位置、之前、之後和原因欄位的 Markdown 表格。切勿使用獨立的「之前：」/「之後：」行。

• 嚴重性：HIGH 使文字無法閱讀、無法取得或結構誤導；MEDIUM 損害層級、換行或掃描；LOW 是孤立的排版潤飾。
• 位置：引用 path/to/file:line。如果成品沒有原始檔案，請改為引用確切的畫面與元件。
• 之前 / 之後：顯示目前的排版和可操作的替代方案。
• 原因：說明違反的原則及其對可讀性或層級的影響。

將重複的系統性問題合併為一行，並列出所有受影響的位置。省略沒有發現的原則。

範例

表格數字

嚴重性	位置	之前	之後	原因
MEDIUM	src/Price.tsx:17	即時價格上的 <span>{price}</span>	<span className="tabular-nums">{price}</span>	比例數字導致變動數值偏移
LOW	src/numbers.css:8	font-feature-settings: "tnum" 1	font-variant-numeric: tabular-nums	高階屬性保留備用行為

行高與行長

嚴重性	位置	之前	之後	原因
MEDIUM	src/Article.tsx:33	段落內文上的 leading-none	leading-normal（1.5–1.6）	換行的內文需要足夠的垂直間距
MEDIUM	src/article.css:12	全寬文章欄	在 16px 下接近 65 個字元的 max-width	長行使文字難以追蹤

驗證與裁決

在發現之後：

1. 驗證：列出執行的確切檢查及其觀察結果，包括換行、層級、文字縮放、字型載入和動態數值穩定性（如適用）。如果未執行檢查，請說明仍需驗證的項目。
2. 裁決：如果仍有任何 HIGH 發現，則為 Block；如果僅有 MEDIUM 或 LOW 發現，則為 Needs changes；僅在沒有可操作的發現時為 Approve。

當沒有發現時，省略表格，陳述「無可操作的排版發現」，報告驗證，並以 Approve 結束。