返回總覽

字型系統

Brickverse 的字型系統針對繁體中文 (CJK) 進行了專門優化。採用 Perfect Fourth (1.333) 比例的模組化字級量表，搭配響應式 Fluid Typography，確保在手機、平板、桌面上都有清晰的視覺層級。

字型家族

以 Noto Sans TC 為主要字型，搭配跨平台 fallback 確保繁體中文在各系統上的最佳顯示。

Token值預覽
font-sansNoto Sans TC, Noto Sans, Microsoft JhengHei, PingFang TC, Arial, sans-serif思源黑體 Noto Sans TC
font-monoJetBrains Mono, Fira Code, Consolas, monospaceconst x = 42;
Tailwind 用法
<p className="font-sans">思源黑體內文</p>
<code className="font-mono">程式碼字型</code>

字級量表

基於 Perfect Fourth (1.333) 比例的模組化字級量表，基準為 16px (1rem)。相較於先前使用的 Major Third (1.250)，新的比例在中文方塊字環境下提供更明顯的層級對比。

xs0.75rem / 12pxtext-xs

用 AI 把想法變成產品

sm0.875rem / 14pxtext-sm

用 AI 把想法變成產品

base1rem / 16pxtext-base

用 AI 把想法變成產品

lg1.125rem / 18pxtext-lg

用 AI 把想法變成產品

xl1.3125rem / 21pxtext-xl

用 AI 把想法變成產品

2xl1.5rem / 24pxtext-2xl

用 AI 把想法變成產品

3xl1.75rem / 28pxtext-3xl

用 AI 把想法變成產品

4xl2.375rem / 38pxtext-4xl

用 AI 把想法變成產品

5xl3.125rem / 50pxtext-5xl

用 AI 把想法變成產品

6xl4.1875rem / 67pxtext-6xl

用 AI 把想法變成產品

字重

Noto Sans TC 提供 5 種字重。不同層級搭配不同字重以強化視覺區分：標題 h1-h2 使用 Bold (700)、h3 使用 SemiBold (600)、h4-h5 使用 Medium (500)、內文使用 Regular (400)。

light300

用 AI 把想法變成產品 — Build with AI

regular400

用 AI 把想法變成產品 — Build with AI

medium500

用 AI 把想法變成產品 — Build with AI

semibold600

用 AI 把想法變成產品 — Build with AI

bold700

用 AI 把想法變成產品 — Build with AI

Tailwind 用法
<p className="font-light">Light 300</p>
<p className="font-normal">Regular 400</p>
<p className="font-medium">Medium 500</p>
<p className="font-semibold">Semibold 600</p>
<p className="font-bold">Bold 700</p>

行高

CJK 字元視覺上比 Latin 字元大，需要更多垂直空間。內文建議使用 1.75，標題使用 1.4。

compact1.3

這是 Vibe Coding 的時代，用 AI 把想法變成產品。無論你是初學者還是有經驗的開發者，都能在這裡找到適合自己的學習路徑。

heading1.4

這是 Vibe Coding 的時代，用 AI 把想法變成產品。無論你是初學者還是有經驗的開發者，都能在這裡找到適合自己的學習路徑。

caption1.625

這是 Vibe Coding 的時代，用 AI 把想法變成產品。無論你是初學者還是有經驗的開發者，都能在這裡找到適合自己的學習路徑。

body1.75

這是 Vibe Coding 的時代，用 AI 把想法變成產品。無論你是初學者還是有經驗的開發者，都能在這裡找到適合自己的學習路徑。

字距

中文閱讀用途的字距建議設為 0em（default），避免字元間過於鬆散。UI 元件（Label、Button）可適度加寬至 0.06em（ui）以提升辨識度。

default0em

Brickverse Design System 提供了完整的 Typography 規範，確保繁體中文與 Latin 字元的最佳呈現效果。

fine0.02em

Brickverse Design System 提供了完整的 Typography 規範，確保繁體中文與 Latin 字元的最佳呈現效果。

ui0.06em

Brickverse Design System 提供了完整的 Typography 規範，確保繁體中文與 Latin 字元的最佳呈現效果。

display0.08em

Brickverse Design System 提供了完整的 Typography 規範，確保繁體中文與 Latin 字元的最佳呈現效果。

複合文字樣式

預先組合的文字樣式，涵蓋常見的使用情境。字重隨層級遞減：Display/H1-H2 (700) → H3 (600) → H4-H5 (500) → Body (400)。

display3.125rem / 50px

用 AI 把想法變成產品

h12.375rem / 38px

用 AI 把想法變成產品

h21.75rem / 28px

用 AI 把想法變成產品

h31.5rem / 24px

用 AI 把想法變成產品

h41.3125rem / 21px

用 AI 把想法變成產品

h51.125rem / 18px

用 AI 把想法變成產品

body1rem / 16px

用 AI 把想法變成產品

bodySmall0.875rem / 14px

用 AI 把想法變成產品

caption0.75rem / 12px

圖片說明文字 Caption Text

label0.875rem / 14px

表單標籤 FORM LABEL

button1rem / 16px

立即報名 SIGN UP

CJK 設計考量

行高 1.75

CJK 字元佔據更多垂直空間，1.75 的行高能確保段落閱讀的舒適性。相較於 Latin 文字常用的 1.5，增加了 16% 的行距。

字距 0em（閱讀用途）

中文排版專家建議閱讀用途的字距應設為 0，避免字元間過於鬆散影響閱讀節奏。僅在 UI 元件（Label、Button）中使用 0.06em 的加寬字距以提升辨識度。

Perfect Fourth (1.333) 字級比例

中文方塊字結構使得相同倍率下的字級差異感知比拉丁字母更小。採用 1.333 比例（取代 1.250）後，相鄰字級間的差距更明顯，視覺層級更清晰。

文字渲染優化

使用 text-rendering: optimizeLegibility 啟用字距微調與連字最佳化。搭配 -webkit-font-smoothing: antialiased 確保 CJK 筆畫的平滑渲染。

中英混排

當 CJK 與 Latin 文字混合時，Noto Sans TC 內建的字距調整能自動處理大部分情境。建議在 CJK 與 Latin 之間保留一個半形空格以提升可讀性。

響應式排版 Demo

標題使用 CSS clamp() 實現 Fluid Typography，在手機到桌面之間平滑縮放。內文 (16px) 在所有裝置上保持一致。以下為不同裝置上的排版效果模擬：

手機 (390px)

設計觀點

AI 時代的產品設計思維

2026 年 2 月 6 日8 分鐘閱讀

隨著人工智慧技術的快速發展，產品設計的方法論也正在發生根本性的轉變。設計師不再只是繪製介面的角色，而是成為了人機互動體驗的架構師。

什麼是設計系統？

設計系統是一套完整的設計標準集合，包含了可重複使用的元件、設計 Token、以及使用指南。

CJK 排版的挑戰

繁體中文筆畫較多，在小尺寸下容易糊成一團，因此最小字級不宜低於 12px。

平板 (768px)

設計觀點

AI 時代的產品設計思維

2026 年 2 月 6 日8 分鐘閱讀

隨著人工智慧技術的快速發展，產品設計的方法論也正在發生根本性的轉變。設計師不再只是繪製介面的角色，而是成為了人機互動體驗的架構師。從 ChatGPT 到各種 AI 工具的爆發，使用者對「智慧」的期待已經從科幻電影走進了日常生活。

什麼是設計系統？

設計系統是一套完整的設計標準集合，包含了可重複使用的元件、設計 Token、以及使用指南。它是設計師與開發者之間的共同語言，確保團隊中的每個人都在同一個基礎上工作。

CJK 排版的挑戰

繁體中文筆畫較多，在小尺寸下容易糊成一團，因此最小字級不宜低於 12px。行高需要比英文更大——繁體中文建議使用 1.75 而非英文常用的 1.5。

桌面 (1280px+)

設計觀點

AI 時代的產品設計思維

2026 年 2 月 6 日8 分鐘閱讀

隨著人工智慧技術的快速發展，產品設計的方法論也正在發生根本性的轉變。設計師不再只是繪製介面的角色，而是成為了人機互動體驗的架構師。從 ChatGPT 到各種 AI 工具的爆發，使用者對「智慧」的期待已經從科幻電影走進了日常生活。

什麼是設計系統？

設計系統是一套完整的設計標準集合，包含了可重複使用的元件、設計 Token、以及使用指南。它是設計師與開發者之間的共同語言，確保團隊中的每個人都在同一個基礎上工作。不同於 UI Kit 或元件庫，設計系統更加全面。

CJK 排版的挑戰

繁體中文筆畫較多，在小尺寸下容易糊成一團，因此最小字級不宜低於 12px。行高需要比英文更大——繁體中文建議使用 1.75 而非英文常用的 1.5。中文每行 30～40 字為理想行長，行長控制可透過 max-width 實現。

Fluid Typography 參考值

元素手機 (<640px)平板 (768px)桌面 (>1280px)
h128px34px38px
h224px26px28px
h320px22px24px
body16px16px16px
caption12px12px12px

使用方式

Tailwind CSS
<!-- 標題：使用語義化 leading / tracking token -->
<h1 className="text-4xl font-bold leading-heading tracking-default">標題文字</h1>

<!-- 內文：leading-body (1.75)、tracking-default (0em) -->
<p className="text-base font-normal leading-body tracking-default">內文段落</p>

<!-- UI 元素：leading-compact (1.3)、tracking-ui (0.06em) -->
<button className="text-base font-semibold leading-compact tracking-ui">按鈕文字</button>

<!-- 行長控制：使用 prose-brickverse class -->
<article className="prose-brickverse">
  <p>最大寬度 40rem，約 40 個中文字/行</p>
</article>
CSS Custom Properties
/* 使用 CSS 變數（語義化 Token） */
.custom-heading {
  font-size: var(--text-4xl);           /* 38px */
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-heading);  /* 1.4 */
  letter-spacing: var(--tracking-default); /* 0em */
}

.custom-body {
  font-size: var(--text-base);          /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);     /* 1.75 */
  letter-spacing: var(--tracking-default); /* 0em */
}

.custom-label {
  font-size: var(--text-sm);            /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-compact);  /* 1.3 */
  letter-spacing: var(--tracking-ui);   /* 0.06em */
}
Token Import (TypeScript)
import { fontSizes, fontWeights, lineHeights, letterSpacings, textStyles } from '@/tokens/typography';

// 取得字級值
const headingSize = fontSizes['4xl'].value; // '2.375rem'
const headingPx = fontSizes['4xl'].px;      // 38

// 語義化行高與字距
const bodyLH = lineHeights.body;        // 1.75
const defaultLS = letterSpacings.default; // '0em'

// 使用複合樣式
const h1Style = textStyles.h1;
// { fontSize: '4xl', fontWeight: 'bold', lineHeight: 'heading', letterSpacing: 'default' }