設計基礎

排版

選擇完整文字樣式或單一字型 token，並一次設定網站字型。

本頁目錄

使用 text-<token>，以單一 class 設定完整文字樣式：字級、行高與字距。字重、字型與顏色則分別以其他 class 補上。

易讀的文字層級

透過字級、間距與文字角色，以一般字重建立層級。所有預覽寬度都能完整顯示內文。

<p class="text-xs font-regular fg-text-muted">Field notes / 024</p><h2 class="text-2xl font-regular fg-text-strong">Make room for the details.</h2><p class="text-sm">A consistent type scale helps readers move from the main idea to the supporting detail.</p>

產生的 CSS

@layer theme {  :root,  :host {    --font-weight-regular: 400;    --font-size-2xl: 1.5rem;    --text-2xl: var(--font-size-2xl);    --text-2xl--line-height: 1.35;    --text-2xl--letter-spacing: -.015em  }}@layer utilities {  .text-2xl {    font-size: var(--text-2xl);    line-height: var(--text-2xl--line-height, normal);    letter-spacing: var(--text-2xl--letter-spacing, normal)  }  .font-regular {    font-weight: var(--font-weight-regular)  }}

此層級運用字級、間距與文字角色，同時維持一般字重。只在內容需要時加入強調；標題不必預設使用更粗的字重。文字樣式列出所有設定與新增方式。

#文字樣式與字級

font-<size> 只改變字級，保留繼承的行高與字距。text-<token> 則同時設定三者。比較兩種寫法在相同字級下的差異：

相同字級，兩種文字設定

兩個範例的字級與內容相同。font-3xl 繼承父元素的行高與字距；text-3xl 則同時設定這三項屬性。

<div class="leading-md tracking-normal">  <p class="font-3xl">Designing for a clearer reading experience.</p>  <p class="text-3xl">Designing for a clearer reading experience.</p></div>

產生的 CSS

@layer theme {  :root,  :host {    --font-size-3xl: 2rem;    --text-3xl: var(--font-size-3xl);    --text-3xl--line-height: 1.25;    --text-3xl--letter-spacing: -.02em  }}@layer utilities {  .text-3xl {    font-size: var(--text-3xl);    line-height: var(--text-3xl--line-height, normal);    letter-spacing: var(--text-3xl--letter-spacing, normal)  }  .font-3xl {    font-size: var(--font-size-3xl)  }}

內文、標題與大型展示文字使用 text-<token>。只有設計刻意偏離既有文字樣式時，才使用 font-<size>、leading-<token> 或 tracking-<token>。

font- 前綴也接受字型與字重鍵名：font-sans 選擇字型，font-bold 則要求指定字重。這些命名空間的自訂名稱應保持區別；字型列出各自的值與解析規則。

#網站字型

在 @theme 中設定一次應用程式字型。預設集的 base 層會將它套用到文件，因此標記不需字型 class。

globals.css

@import "@master/css";@theme {  --font-sans: "Geist", "Noto Sans TC";  --font-mono: "IBM Plex Mono";  --font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";  --font-feature-mono: "cv01", "cv02", "cv29";}

base 層透過 --font-family-sans 解析 --font-sans，並套用到 body 與 Shadow Host；透過 --font-family-mono 解析 --font-mono，並套用到 code、kbd、samp 與 pre。--font-feature-* token 可省略，預設退回 normal；表單控制項繼承周圍字型。使用 @font-face 或字型供應商的樣式表載入字型檔。若只針對單一元素，改用 font-mono 這類 class。