排版
排版是政府數位服務中最基本的視覺元素。良好的排版能提升閱讀性、建立資訊層級，並確保所有使用者（包含視覺障礙者）都能順利取得資訊。
本系統參考 GOV.UK Design System 的排版架構，針對中文（CJK）排版特性進行調整。
字型
內文字型
--govtw-font-family-base: 'Noto Sans TC', 'Microsoft JhengHei', system-ui,
-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;以 Noto Sans TC 為首選，確保跨平台一致的中文顯示品質。fallback 依序為微軟正黑體、系統預設字型。
等寬字型
--govtw-font-family-mono: 'Noto Sans Mono', 'SF Mono', Monaco,
'Cascadia Code', Menlo, monospace;用於程式碼區塊、技術文件中的 inline code。
字級對照表（Type Scale）
字級系統定義了所有排版樣式的基礎。每個字級對應明確的字體大小與行高，並在不同螢幕尺寸下調整以確保可讀性。
大螢幕（≥ 640px）
| Token | 大小 | 行高 | 對應用途 |
|---|---|---|---|
--govtw-font-size-4xl | 2.25rem (36px) | 1.2 | 頁面標題（h1） |
--govtw-font-size-3xl | 1.875rem (30px) | 1.3 | 大標題（h2） |
--govtw-font-size-2xl | 1.5rem (24px) | 1.4 | 標題（h3）、前導段落 |
--govtw-font-size-xl | 1.25rem (20px) | 1.4 | 小標題（h4） |
--govtw-font-size-lg | 1.125rem (18px) | 1.6 | 大段文字 |
--govtw-font-size-base | 1rem (16px) | 1.8 | 內文 |
--govtw-font-size-sm | 0.875rem (14px) | 1.6 | 次要文字、註解 |
--govtw-font-size-xs | 0.75rem (12px) | 1.5 | 輔助文字、標籤 |
小螢幕（< 640px）
為提升行動裝置上的可讀性，大字級會等比縮小，但內文字級（16px）不縮小，以符合無障礙最佳實務。
| Token | 大螢幕 | 小螢幕 | 說明 |
|---|---|---|---|
--govtw-font-size-4xl | 36px | 27px | 頁面標題縮小 |
--govtw-font-size-3xl | 30px | 24px | 大標題縮小 |
--govtw-font-size-2xl | 24px | 21px | 標題微調 |
--govtw-font-size-xl | 20px | 19px | 小標題微調 |
--govtw-font-size-lg | 18px | 18px | 不縮小 |
--govtw-font-size-base | 16px | 16px | 不縮小 |
--govtw-font-size-sm | 14px | 14px | 不縮小 |
--govtw-font-size-xs | 12px | 12px | 不縮小 |
無障礙注意：GOV.UK 於 2022 年後不再於小螢幕使用更小的內文字級，因為 14px 以下的字體大小對視覺障礙使用者造成困難。本系統遵循相同原則，內文字級在任何裝置上皆維持 16px。
字重
| Token | 值 | 用途 |
|---|---|---|
--govtw-font-weight-regular | 400 | 內文 |
--govtw-font-weight-medium | 500 | 強調文字 |
--govtw-font-weight-bold | 700 | 標題、重要資訊 |
標題
標題用於建立頁面的資訊層級。使用語意化的 HTML 標題標籤（<h1> 到 <h6>），tokens.css 已為每個標題元素定義預設的排版樣式。
標題展示
標題層級對照
tokens.css 會為 <h1> 到 <h6> 元素直接套用對應的排版樣式，使用時不需額外加 class。
| 元素 | 預設字級 | 行高 | 字重 |
|---|---|---|---|
<h1> | 36px (--govtw-font-size-4xl) | 1.2 | 700 |
<h2> | 30px (--govtw-font-size-3xl) | 1.3 | 700 |
<h3> | 24px (--govtw-font-size-2xl) | 1.4 | 700 |
<h4> | 20px (--govtw-font-size-xl) | 1.4 | 700 |
<h5> | 18px (--govtw-font-size-lg) | 1.4 | 700 |
<h6> | 16px (--govtw-font-size-base) | 1.4 | 700 |
用法
<h1>勞動部線上申辦服務</h1>
<h2>服務項目</h2>
<h3>勞工保險</h3>
<h4>投保申請</h4>
<h5>注意事項</h5>
<h6>附註說明</h6>標題書寫原則
- 使用語意化的
<h1>至<h6>標籤，不可跳級 - 標題應簡潔明確，描述該區塊的內容
- 每個頁面只有一個
<h1>
段落
段落展示
內文（Body）
預設內文字級為 16px，行高 1.8，適合中文閱讀。tokens.css 已為 <body> 和 <p> 設定基礎樣式。
<p>本服務提供線上申辦各項勞工保險業務，包含投保、退保及給付申請。</p>段落樣式參考
| 用途 | 字級 | 行高 | 說明 |
|---|---|---|---|
| 前導段落 | 18px | 1.6 | 頁面頂端摘要文字，每頁最多一次 |
| 預設內文 | 16px | 1.8 | <p> 預設樣式 |
| 小字內文 | 14px | 1.6 | 附註、版權聲明等次要資訊 |
連結
所有需要連結行為的地方都應使用 <govtw-link> 元件，確保連結在所有狀態下都有一致的互動回饋。詳細說明請參閱 Link 連結元件。
預設樣式
連結預設為藍色加底線，讓使用者能清楚辨識可點擊的文字。
段落中的行內連結
<govtw-link> 以 display: inline 呈現，可自然嵌入段落文字中，字體與行高繼承自父層。
連結互動狀態
連結的互動回饋參考 GOV.UK Design System，核心特色是 focus 與 active 時以雙色指標（背景色 + 粗底線）確保在任何背景色上都清晰可辨。
| 狀態 | 樣式 |
|---|---|
| 預設 | 連結色（--govtw-link-color），底線 1px |
| 已造訪 | 紫色（--govtw-link-visited-color） |
| Hover | 底線加粗至 3px，文字色加深 |
| Focus / Active | 背景色（--govtw-focus-color），文字色（--govtw-focus-text），底部 4px 粗線 |
不顯示已造訪狀態
導覽連結等不需要顯示已造訪色彩的場景，加上 no-visited 屬性：
無底線連結
預設不顯示底線，hover 與 focus/active 時才出現。適用於導覽列、頁尾等已有明確視覺區隔的場景。
開新視窗的連結
當連結必須在新視窗開啟時，加入明確的文字提示：
列表
項目符號列表
<ul>
<li>準備身分證正反面影本</li>
<li>填寫申請書</li>
<li>至櫃台繳件</li>
</ul>編號列表
當項目有順序性時使用：
<ol>
<li>登入系統並選擇申辦項目。</li>
<li>填寫申請表單並上傳文件。</li>
<li>確認資料無誤後送出。</li>
</ol>CJK 排版注意事項
- 行高：中文內文建議
1.8，標題建議1.2–1.4 - 段落間距：段落之間使用
1rem以上的間距 - 標點符號：使用全形標點（，。、；：）
- 中英混排：中文與英文 / 數字之間建議加入半形空格
- 避頭尾：行首不應出現句號、逗號等結尾標點；行尾不應出現開括號
使用方式
引用 tokens.css 後，<h1> 至 <h6>、<body>、<p> 等元素會自動套用設計系統的排版樣式，直接使用語意化 HTML 即可。
<h1>頁面標題</h1>
<p>這是一段內文。</p>若需要自訂樣式，可使用 CSS 自訂屬性：
.my-heading {
font-size: var(--govtw-font-size-3xl);
font-weight: var(--govtw-font-weight-bold);
line-height: 1.3;
}無障礙
- 不使用 14px 以下的字級作為主要閱讀文字
- 行高至少 1.5 倍字體大小（中文內文建議 1.8）
- 確保文字與背景的色彩對比度至少 4.5:1（WCAG 2.2 AA）
- 使用
rem而非px定義字級，讓使用者能透過瀏覽器設定調整文字大小 - 標題層級不跳級，維持正確的文件結構
- 粗體僅用於強調關鍵資訊，避免大量使用