bitbypixel

bitbypixel

Menu

各國數位政府字體排版：為什麼英國用像素、加拿大用百分比？

by

上篇：台灣如何定義「數位政府設計原則」？現行設計規範的優點與風險

上個章節在討論設計系統的「原則（Principles）」與「準則（Guidelines）」，本篇開始研究設計系統的「基礎設定」。

首先是「字體」。

為什麼字體排版很重要？

在數位介面中，字體排版不僅僅是關於選哪個字體，而是能夠確保資訊被高效且舒適地傳遞有效工具。

  1. 提升可讀性與可用性: 好的字體大小、行高、字重，直接決定了使用者是否能快速、不費力地閱讀和理解內容。
  2. 確保無障礙性: 排版是 Web 無障礙規範（WCAG）的一部分。透過使用相對單位（例如 rem）來定義字體大小，可以確保視力受損或偏好大字體的使用者，能夠順利地透過瀏覽器設定來放大文字。此外，高對比度的排版能讓所有使用者，特別是具有色覺缺陷的使用者，輕鬆區分文字與背景。
  3. 建立品牌語氣與一致性: Design System 統一的排版規範，確保所有產品中的文字都傳達出一致的專業感和品牌個性，可以建立用戶的信任和熟悉感。

因此，Design System 中的排版規範不是一組隨意的設計選擇，而是經過嚴格測試的技術實施指南，重點在於優化所有用戶的閱讀效率和對介面理解。

字體排版有多重要？

加拿大 Canada.ca design 將「字體排版」歸類於「強制性」，代表所有頁面都必須遵守 Typography 所定義的規範。

字體（font-family）

在數位政府 Design System 中，選擇字體（font-family）時會考量：可讀性、無障礙性以及是否開源授權。在比較各國的字體差異前，讓我們先來閱讀一則關於「美國公文的字體之爭」

品牌信任度與閱讀舒適度，哪個更重要？

2025 年 12 月 10 日，美國國務院下令將公文預設字體由 Calibri 改回 Times New Roman。國務卿 Marco Rubio 表示，此舉象徵公文回歸傳統，並強調 Times New Roman 在紙本文件中的莊重與權威感。

然而，設計師與無障礙專家提出質疑，指出 Times New Roman 為印刷而生，在數位環境下可讀性與無障礙性較差，可能削弱對低視力使用者的友善程度。

這場爭議凸顯 Design System 在「品牌信任感」與「閱讀舒適度」之間的拉鋸。最終，國務院仍在紙本公文中採用 Times New Roman。

各國數位政府字體（font-family）

  • 英國
    • GDS Transport（英國政府訂製標準字）
    • Helvetica（備用字體）
    • Arial（備用字體）
  • 加拿大
    • Lato（標題）
    • Noto Sans（內文）
  • 新加坡
    • Lato
  • UAE
    • Noto Kufi Arabic（阿拉伯文標準字）
    • Alexandria（阿拉伯文輔助字）
    • Roboto（英文標準字）
    • Inter（英文輔助字）
  • 義大利
    • Titillium Web（義大利數位介面標準字）
    • Titillium Pro（實驗中備選版本）
    • Lora（輔助襯線字，使用於長篇文章）
    • Roboto Mono（功能性標準等寬字體，用於數字字符）
  • 美國
    • Public Sans（美國數位介面標準字）
    • Source Sans Pro（輔助無襯線字）
    • Merriweather（標準襯線字）
    • Roboto Mono（功能性標準等寬字體，用於程式碼、數據）
  • 臺灣
    • Noto Sans TC（中文）
    • Noto Sans（英文）

各國數位政府字體選擇的共同趨勢

  1. 無襯線字體
    • 多數國家傾向選擇現代、開源的無襯線字體（Sans-serif），像是 Public Sans、Lato、GDS Transport、Titillium、Noto Sans）在電腦螢幕、手機等數位介質上擁有更好的可讀性和清晰度。
  2. 開源性字體
    • Noto Sans、Lato、Source Sans Pro、Inter 都是免費且開源的字體，Google 的 Noto 家族可以用於多語言，用於加拿大、台灣與 UAE 的阿拉伯文。
  3. 自定義字體
    • 英國的 GDS Traansport、義大利的 Titillium 及美國的 Public Sans 則顯示部分政府為了追求獨特的品牌視覺度，會選擇自訂專屬字體。
  4. 功能性字體
    • Roboto Mono 等寬字體專門用於程式碼、數據或需要嚴格對其的數字。
  5. 輔助襯線字
    • 美國的 Merriweathre 及義大利的 Lora 等「輔助襯線字」專門為螢幕上的長文閱讀設計。
  6. 多語言字體
    • UAE 同時列出阿拉伯（Noto Kufi Arabic, Alexandria）與英文（Roboto, Inter）的標準字，確保兩種閱讀方向和書寫系統都能融合。
  7. 備用字體堆疊
    • 英國備用字 Helvetica 和 Arial，其他國家多用系統字 -apple-system、sans-serif 作為備用字體。

字體大小（font-size）

字體大小（font-size）也會影響可讀性和無障礙性 ，需考量響應式設計（在不同螢幕尺寸下動態調整）及基礎字體的大小。

各國數位政府字體大小

以下列出的各國比較皆為大型裝置。

  • 英國：
    • 標題：xl (48px), l (36px), m (24px), s (19px)
    • 內文：l (24px), m (19px), s (16px)
  • 加拿大：
    • 標題：h1 (41px), h2 (39px), h3 (29px), h4 (27px), h5 (24px), h6 (22px)
    • 內文：Body (20px)
  • 新加坡：
    • 標題：display (84px), h1 (54px), h2 (44px), h3 (32px), h4 (26px), h5 (22px), h6 (20px)
    • 內文：paragraph (18px), small text (base font size) (16px)
  • 阿拉伯聯合大公國（UAE）：
    • 標題：display (76px), h1 (62px), h2 (48px), h3 (40px), h4 (32px), h5 (26px), h6 (20px)
    • 內文：3xl (30px), 2xl (24px), xl (20px), lg (18px), base (16px), sm (14px), xs (12px)
  • 義大利：
    • 標題：h1 (40/48px), h2 (32/40px), h3 (28/32px), h4 (24/32px), h5 (20/24px), h6 (16/18px)
    • 內文：lead (20/24px), body-sans (12/18px), body-serif (16/18px)
  • 台灣：
    • 標題：Display/Large (57px), Display/Medium (45px), Display/Small (36px), Heading/Large (32px), Heading/Medium (28px), Heading/Small (24px), Title/Large (22px), Title/Medium (18px), Title/Small (16px)
    • 內文：Body/Large (18px), Body/Medium (16px), Body/Small (12px)

各國數位政府字體大小的共同趨勢

  1. 內文基礎字體 (Body Text) ：
    • 內文是使用者閱讀時間最長的部分，基礎字體大小的設定直接決定了閱讀疲勞度。
    • 近年來，為了優化高解析度的螢幕閱讀，以及降低閱讀疲勞，全球 Design System 普遍將基礎字體尺寸放大。
    • 像是英國的基礎字體的 19px，以及加拿大基礎字體 20px。
    • 英國更在 2024 年 2 月改版，刪去了 body-xs (12px) 的字體大小。
  2. 單位規範：
    • 為了實現無障礙性，各國設計系統大多使用 rem 與 em 的作為計算單位，
  3. 從設計到實作的標準流程（以英國為例）
    • 維持根基準： Design System 不改變瀏覽器的預設根字體大小（通常為 16px）。
    • 設定內文： 確定標準內文的尺寸（例如英國的 19px）。
    • 轉換實作： 將設計定義的 px 尺寸轉換為 rem 數值。計算範例： 19px / 16px = 1.1875rem。
  4. 台灣 PDIS 設計系統可以考慮減少標題種類，以及增加基礎字體大小。
GOV.UK 前端輸出的 CSS 使用的是相對單位，例如 em 或 rem。這有助於在縮放或放大時更好地調整字體大小。為了便於理解，我們在這裡使用了像素 (px)。

行高（line-height）

行高（Line Height），是指一行文本的基線到下一行文本基線之間的距離。它直接影響文本的可掃描性 (Scannability) 和閱讀舒適度。

各國數位政府字體行高

  • 英國：
    • 標題：xl (50px), l (40px), m (30px), s (25px)
    • 內文：l (30px), m (25px), s (20px)
  • 加拿大：
    • 標題：h1 (117%), h2 (123%), h3 (137%), h4 (133%), h5 (133%), h6 (145%)
    • 內文：Body (160%)
  • 新加坡：
    • 標題：h1 (48px), h2 (40px), h3 (32px), h4 (32px)
    • 內文：paragraph (32px), small text (28px)
  • 阿拉伯聯合大公國（UAE）：
    • 標題：display (1.1), h1 (1.2), h2 (1.2), h3 (1.2), h4 (1.375), h5 (1.375), h6 (1.375)
    • 內文：3xl (2.25rem), 2xl (2rem), xl (1.75rem), lg (1.75rem), base (1.5rem), sm (1.25rem), xs (1rem)
  • 義大利：
    • 標題：h1 (48/56px), h2 (40/48px), h3 (32/40px), h4 (32/40px), h5 (24/32px), h6 (24px)
    • 內文：lead (32px), body-sans (24px), body-serif (24px)
  • 台灣：
    • 標標題：Display/Large (4rem), Display/Medium (3.25rem), Display/Small (2.75rem), Heading/Large (2.5rem), Heading/Medium (2.25rem), Heading/Small (2rem), Title/Large (1.75rem), Title/Medium (1.5rem), Title/Small (1.25rem)
      內文：Body/Large (1.6875rem), Body/Medium (1.5rem), Body/Small (100%)

各國數位政府字體行高的共同趨勢

  1. 標題（Headings）行高比例通常較低
    • 例如 UAE（1.1 – 1.375），能讓標題文字更緊湊，強調資訊層次
  2. 內文（Body Text）行高比例通常較高
    • 例如加拿大（160%）是公認的舒適閱讀比例，可以確保長篇閱讀的舒適度。
  3. 頁面垂直網格系統
    • 英國及義大利以 px 直接固定行高，是為了讓行高數值能精準對齊 Design System 定義的基礎網格上。
    • 這種方法犧牲了部分文本的彈性，但可以換來視覺秩序感和網格系統的統一性。
  4. 無單位數值更符合無障礙標準
    • UAE 標題所使用的無單位數值，可以確保無論字體如何縮放，行高與字體大小始終保持固定比例（字體大小*無單位數值）。
  5. 中文字體適合較高的行高比例
    • 內文行高為字體大小的 1.6 – 1.7 倍；標題為字體大小的 1.3 – 1.5 倍 為更適合閱讀的比例
    • 目前台灣的 PDIS 設計系統行高單位為 rem 與 % 的混合，建議調整成固定單位，最為推薦「無單位數值」。

字重（font-weight）

在數位設計中，字重不再僅限於傳統的「細體 (Light)」、「常規體 (Regular)」和「粗體 (Bold)」。它使用數值 (Numeric Values) 進行標準化定義，範圍通常從 100 到 900，其中的 400 對應於常規體 (Regular)；700 對應於粗體 (Bold)。

各國數位政府字體字重

  • 英國：
    • Regular (400), Bold (700)
    • 可以自行將字體粗細更改為 Regular 或 Bold。
  • 加拿大：
    • 標題：h1 (700), h2 (700), h3 (700), h4 (700), h5 (700), h6 (700)
    • 內文：Text (400), Text Small (400)
  • 新加坡：
    • 標題：h1 (Bold), h2 (Bold), h3 (Bold), h4 (Bold)
    • 內文：paragraph (Regular), small text (Regular)
  • 阿拉伯聯合大公國（UAE）：
    • 標題：display (200), h1 (800), h2 (800), h3 (800), h4 (800), h5 (800), h6 (800)
    • 內文：3xl (400/600), 2xl (400/600), xl (400/600), lg (400/600), base (400/600), sm (400/600), xs (400/600)
  • 義大利：
    • 標題：h1 (700), h2 (700), h3 (700), h4 (800), h5 (800), h6 (800)
    • 內文：lead (400), body-sans (400), body-serif (400)
  • 日本：
    • Regular (400), Bold (700)
    • 可以自行將字體粗細更改為 Regular 或 Bold。
  • 台灣：
    • 標題：Display/Large (400), Display/Medium (400), Display/Small (400), Heading/Large (400), Heading/Medium (400), Heading/Small (400), Title/Large (500), Title/Medium (500), Title/Small (500)
    • 內文：Body/Large (400), Body/Medium (400), Body/Small (400)

各國數位政府字體字重的共同趨勢

  1. 個國字重策略比較
    • 極簡二分法：美國、日本、加拿大、新加坡嚴格區分 Regular (400) 與 Bold (700) 兩種做法。
    • 重磅對比型：UAE、義大利的標題使用極粗的 800，UAE 的內文也有 400 和 600 兩種選擇，讓強調字體可以跳出來。
  2. 強調需求：英國、UAE 都有說明，當內文有強調需求時可以使用的字重
  3. 台灣的字重設定非常特殊，大量使用 400 作為標題字重。儘管在設計上會顯得不具侵略性，但是 400 的標題可能會因為「視覺權重不足」，導致難以被凸顯。

研究筆記總結

  • 字體選擇：不論使用「開源字體」或「自定義字體」，都需要考慮文字的用途與無障礙性。
  • 字級比例： 先設定基礎字體大小，接著用 rem 設定字級比例，以確保文字放大縮小的響應性。
  • 行高單位： 優先使用無單位數值（Unitless）。針對中文字體，建議設定在 1.6 以上以確保閱讀呼吸感。
  • 字重策略： 標題不一定要粗，但權重對比要清晰，越少的字重選擇對數位服務的效能越好。

建立 Design System 的字體規範時，並沒有絕對的「標準答案」，只有最適合該產品語境與語系的「最優解」。希望這個各國數位政府設計系統的研究，可以為台灣政府在制定排版規則時提供更全面的參考依據。

資料來源：

Bit by pixel

I trace how stories take shape

See more stories

Have something in mind?

Let’s build something thoughtful together

Instagram Youtube Linkedin