標籤「設計」的 2 篇文章

現代的 UI 設計中，「邊距設定為 8 的倍數」的規則被廣泛使用。這不僅僅是慣例，而是基於 螢幕密度、排版和比例的數學一致性所支持的經驗法則。

針對多種螢幕密度的應對​

現代顯示器具有 1x、1.5x、2x、3x、4x 等像素比率。

8 可以在多種倍率下整除，因此不容易發生次像素渲染的模糊效果。如果使用像 5 px 這樣的值，在 1.5x 環境中會導致 7.5 px 的尾數，渲染會變得不準確。

與排版的相容性​

瀏覽器的預設字體大小為 16 px (= 8 × 2)。行距通常也為 1.5 倍 = 24 px (= 8 × 3)。

使用 8 的倍數設置邊距，可以讓文本的節奏視覺上更一致。因為標題和正文的高度與邊距網格相一致，從而產生整齊的垂直節奏。

便於設計標記的創建​

--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;

這樣的比例簡單，使設計師和工程師能更易於使用共同語言。Material Design 和 Tailwind CSS 也採用了這一思路。

設計師只需指定「這裡是 space-3」，工程師便能毫不猶豫地使用 24px。命名規則的統一降低了代碼評審時的溝通成本。

4 px 基礎的選擇​

對於需要更細微調整的 UI，4 px 基礎 (4、8、12、16...) 也很常見。Tailwind CSS 預設採用 4 px 基礎 (p-1 = 4px)。

4 px 基礎也是 8 px 基礎的子集，因此兩者並不矛盾。可以在組件內部等細微的邊距使用 4 px 單位，在不同區域間等較大的邊距使用 8 px 單位進行區分，這樣的運用也很有效。

總結​

8 px 的倍數作為邊距標準的原因可以歸納為三點。

1. 應對螢幕密度: 在多種像素比率下能整除，防止次像素模糊。
2. 與排版的一致性: 與預設字體大小 (16 px) 和行距 (24 px) 一致，產生垂直節奏。
3. 比例的一致性: 簡單的標記體系成為設計師和工程師的共同語言。

即使是以明朝體或襯線字體書寫的文章，加粗時常以黑體（無襯線字體）呈現。這是設計上刻意的選擇，主要有可讀性、視認性、與歷史慣習三個理由。

維持可讀性​

若單純把明朝體加粗，襯線（裝飾筆畫）與主筆畫的對比會變得過大，字形內部的空白（counter）容易消失。這在 Web 或螢幕上的小尺寸顯示尤其明顯，字形會潰掉而難以辨認。

黑體本身沒有襯線，因此即使提高字重也能保留字形內的空白，不會明顯降低可讀性。

明確傳達強調意圖​

直接改變字體家族，可以讓「這裡是強調」的意圖在視覺上被更即刻地傳達。與單純把明朝體變粗相比，切換到黑體更容易被人眼當作「不同資訊」來處理，強調效果更明確。

歷史與文化背景​

自日本活字印刷時代起，就有「強調使用不同字體」的慣例。將明朝體做得更粗在活字鑄造上會產生問題，因此會用完全不同的黑體來表示強調。這個慣習被沿用到數位排版與 Web。

在 CSS 中的實作​

若在 Web 以明朝體作為基底字體，可以用以下樣式將加粗切換為黑體。

body {
  font-family: "Noto Serif JP", serif;
}

strong, b, h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

這個做法也有實作上的優點。無須載入明朝體的多個字重，只要為本文提供 Regular，以及為強調提供黑體的 Bold，就能減少頁面載入成本。

總結​

日文（以及台灣中文排版時常類比的情況）中，加粗時使用黑體的理由可歸納為三點：

1. 可讀性：黑體提高字重仍能保留字形內部空白，維持可讀性
2. 視認性：改變字體家族比單純加粗更清楚地傳達強調
3. 慣習：自活字印刷時代起的「強調用別書體」的做法被沿用

在 Web 上也因為相同理由採用這種組合，是設計與實作上都合理的選擇。