排版
排版多半是節制：合理的字級比例、舒適的間距、足夠的對比。標籤、表格儲存格、行銷標題和文章段落不共用同一套規則。
進行檢視時，閱讀渲染後的頁面而非掃描程式碼。錯誤的換行、孤立詞和截斷只有在真實內容長度下才會顯現。
每次修正都應使用專案的樣式系統，並採用下方提供的精確數值，而非看起來類似的等價數值。速查表將每個宣告對應到其 Tailwind 等效項目。
文字本身屬於 hr-better-writing。語義標題結構屬於 hr-better-accessibility。空間 RTL 配置和邏輯屬性屬於 hr-better-layout。對比測量屬於 hr-better-colors。這個技能掌管文字在混合方向內容中如何渲染、換行和表現。
提供正確的格式
在網頁上使用 .woff2，以獲得 Brotli 壓縮和廣泛支援。.woff 是針對非常舊的瀏覽器的備用方案。.ttf 和 .otf 是桌面格式，沒有網頁壓縮。檔案如何載入是專案的問題。
優先使用屬性而非原始標籤
當 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）保留原始標籤。軸線和功能標籤列於 variable-fonts-and-opentype.md。
載入預期的字重和樣式
瀏覽器會合成目前字型家族缺少的字重或樣式，從而扭曲真實的字體。載入設計所使用的字體。
font-synthesis: none 會關閉合成，但它會抹除強調效果而非回報它。只有在檢查過所有必要的粗體、斜體、小型大寫、上標和下標形式在備用字型堆疊中仍保持可區分時，才設定此屬性。
減少字型、尺寸和字重的數量
很少使用超過三種字型。字重和尺寸定義了層級；過度使用會迅速損害可讀性。為對比而非相似性進行配對：襯線字體標題搭配無襯線字體內文是刻意的設計，而兩個幾乎相同的無襯線字體則會被視為錯誤。
在 18px 以下，使用 400 或更重的字重。300 以下的字重僅適用於 28px 以上的顯示用途；它們在文字尺寸下會消失。字型配對指南請見 choosing-fonts.md。
使用帶有語義名稱的字級比例
定義一組少量的尺寸，並盡可能不偏離它們。沒有系統支援的硬編碼尺寸在規模擴大時會崩潰。使用 lint 規則或守衛測試來強制執行此比例，對任何超出允許範圍的任意尺寸進行失敗處理。
單獨的預設名稱（如 text-sm）在使用規則明確時是可以接受的。在團隊中，按用途命名尺寸（如 text-body-sm），以便規則能持續被其他人使用。比例構造請見 spacing-and-sizing.md。
標題尺寸隨層級遞減
將標題層級對應到字級比例中遞減的步驟，使得視覺上次要的標題永遠不會壓過其父標題。相鄰的層級在比例尺的較小端可以共享一個尺寸，只要字重或間距能將它們區分開來。語義元素屬於 hr-better-accessibility；此技能僅設定視覺處理。
按角色設定行高
標題較緊湊，約 1.1。內文為 1.5 到 1.6。優先使用無單位值，以便行高能隨字型尺寸縮放；固定的 24px 則不行。
緊湊的行高適用於短文字。任何換行到三行或以上的文字至少需要 1.4，即使在高度受限的行中也是如此。
按尺寸設定字距
大字標題通常帶有略微負值的字距看起來更好。小型大寫標籤需要一點正值的字距，否則字母會顯得擁擠。閱讀尺寸的內文則兩者都不需要。
限制行長
長行使眼睛難以找到下一行。將長篇文字限制在每行約 60–75 個字元。任何單位都可以，只要存在一個限制值且行長落在範圍內。詳見單位選擇與像素等價。
有意識地控制換行
四個宣告，四個功能：
text-wrap: balance將文字均勻分配在各行。用於標題。text-wrap: pretty防止單個短詞落在最後一行。用於描述。overflow-wrap: break-word用於長單詞、連結或 ID 可能溢出容器的地方。white-space: nowrap用於標籤和徽章，其中換行會顯得很奇怪。
在長篇文字中跳過 balance 和 pretty。
對變化的數值使用表格數字
預設情況下，數字具有不同的寬度，因此計時器、計數器和價格在更新時會改變佈局。對任何變化的值套用 font-variant-numeric: tabular-nums。
在不遺失內容的情況下截斷
對於單行，使用 text-overflow: ellipsis 搭配 overflow: hidden 和 white-space: nowrap。對於多行，使用 line-clamp。截斷會隱藏內容。當遺失的文字很重要時，請在工具提示或展開的檢視中保持完整值可存取。
按欄位選擇。對使用者需要完整識別項目的名稱和標題進行換行。當項目結尾不同時，在中間進行截斷，例如共用網域的文件名、路徑和電子郵件，因為結尾的省略號會使它們看起來相同。永遠不要截斷使用者要比較的數字、金額或日期。詳情請見 wrapping-and-punctuation.md。
自然地撰寫文案，用 CSS 設定樣式
以自然大小寫儲存文字，並使用 text-transform 控制呈現方式，這樣重新設計時就不需要重寫文案。
在渲染的文字中使用智慧標點：
- 散文使用彎引號，程式碼使用直引號。
- 範圍使用 en dash：
2010–2020。 - 單個省略號字元，而非三個句點。
- 使用
將16 px保持在一起，避免換行。 - 使用
­指定長單詞可能斷行的地方。
底線來自字型
預設底線位於瀏覽器決定的任何位置。使用 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。
行動裝置上的輸入框尺寸為 16px
當輸入框的文字小於 16px 時，iOS Safari 會縮放整個頁面。有兩種修正方法可以將尺寸保持在 16px，但它們看起來不同，因此請詢問設計想要哪一種：
- 在行動裝置上放大輸入框尺寸（
text-base sm:text-sm）。這會改變其在小型螢幕上的外觀。 - 保持
font-size: 16px並使用transform: scale()渲染預期尺寸，同時補償寬度和line-height。在每個視口中都相同，但需要維護更多程式碼。
兩種方法都記錄在 details-and-accessibility.md 中。
尺寸與對比下限
長篇內文從 16px（瀏覽器預設值）開始。只有在你能說出理由時才偏離它：字型偏小、行長較窄，或是產品是高密度的專業工具。
UI 文字可以更小。14px 是輸入框和選單的有用起點，13px 用於說明，很少低於 12px。輸入框在行動裝置上仍需要 16px。
當文字看起來對比度低時，使用 hr-better-colors 測量渲染的顏色組合，並使用 hr-better-accessibility 分類需求。除非被要求，否則不要更改顏色。
在根元素上設定字型平滑
在 macOS 上，文字渲染得比預期更粗。在根佈局上套用一次 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale，永遠不要在每個元件上套用。Tailwind 的 antialiased 涵蓋了兩者。
語言與雙向行為
設定 lang，以便瀏覽器和輔助技術選擇正確的發音、引號和連字符。在文件層級或內容方向變更的邊界設定 dir。保留數字順序，並使用 <bdi> 來隔離混合方向的值。空間鏡像和邏輯 CSS 屬性屬於 hr-better-layout。
保持有用的文字可選取
預設情況下，保持文字可選取。::selection 可以將品牌帶入閱讀體驗，只要選取的顏色組合保持可讀。
user-select: none 屬於可拖曳或手勢驅動的介面，其中意外的選取會造成干擾。絕對不能應用於整個介面，也不能因為按鈕標籤可以被反白而使用。
完成前檢查清單
| 錯誤 | 修正 |
|---|---|
| 合成的字體與設計不同 | 載入真實字體；僅停用已驗證的合成模式 |
| 子標題在視覺上壓過父標題 | 將該部分的層級對應到遞減的比例步驟 |
| 根據預設尺寸選擇標題元素 | 先選擇語義，然後在 CSS 中設定尺寸 |
| 段落最後一行的孤立詞 | text-wrap: pretty |
| 不對稱的兩行標題 | text-wrap: balance |
| 介面中的分散對齊文字 | text-align: start；保留 justify 給特定的編輯佈局 |
| 底線穿過下伸部 | text-decoration-skip-ink: auto，from-font 度量 |
| 混合方向的值渲染順序錯誤 | 修正 lang/dir；使用 <bdi> 隔離該值 |
| 整個應用程式框架的選取被停用 | 恢復它；僅在與拖曳或手勢衝突時停用 |
| 沒有視覺提示的額外資訊提示 | 透過 text-decoration-style: dotted 設定點狀底線 |
14px UI 文字使用細/輕字重 | 18px 以下使用 400+ 字重；細字重僅適用於顯示用途 |
三行卡片描述使用 leading-none | 任何換行到 3 行以上的文字至少使用 1.4 |
報告
嚴重性。 HIGH 使文字無法閱讀或截斷內容且無法恢復。MEDIUM 破壞了字型系統或標題層級。LOW 是孤立的打磨問題。
驗證。 沒有瀏覽器：檢查每個標題層級的計算尺寸和字重，確認遞減；檢查宣告的行長和行高；對特定欄位的截斷規則，使用真實的字串長度測試。有瀏覽器：調整視窗大小以捕捉真實內容長度下的換行、孤立詞和截斷。報告你無法執行的每個檢查為 Not verified。
格式。 將發現結果按其違反的原則分組，按嚴重性排序，每個根本原因一行，並列出其出現的每個位置：
| 嚴重性 | 位置 | 之前 | 之後 | 原因 |
|---|
位置 是 path/to/file:line。原因 說明原則和使用者影響。
當有任何 HIGH 問題遺留時報告 Block，否則報告 Approve，並將剩餘問題留在表格中作為待辦事項。永遠不要 Approve 你未檢查的範圍。沒有可報告的內容時，陳述「沒有可操作的排版發現結果」並報告驗證。