字體排印 Typography

字體家族

全產品統一使用 Noto Sans TC(思源黑體),缺字時依序退回系統中文字體:

'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Helvetica Neue', Helvetica, Arial, sans-serif

• 網頁請載入 400(Regular)、500(Medium)、700(Bold)三個字重即可,避免載入過多字重拖慢速度
• 數字建議搭配等寬數字設定(表格、金額情境),之後於各元件規範補充

字級分工規則(重要)

字級依大小分別由兩個框架負責,不要手打 px:

範圍	使用	寫法
≤ 20px(內文與一般標題)	Element Plus 字級變數	font-size: var(--el-font-size-*)
> 20px(大標題、數據大字)	Tailwind 字級 class	text-2xl、text-3xl…

行高 Line-height

一律不手動設定行高,使用各框架內建的預設值: Element Plus 字級搭配其內建行高;Tailwind 的字級 class(text-2xl 等)自帶配對好的行高。

字級 Type Scale:≤ 20px(Element Plus)

數位轉型從資料開始 Aa

Extra Large20px--el-font-size-extra-large頁面主標題

數位轉型從資料開始 Aa

Large18px--el-font-size-large區塊標題

數位轉型從資料開始 Aa

Medium16px--el-font-size-medium卡片標題、強調內文

數位轉型從資料開始 Aa

Base(預設)14px--el-font-size-base內文、表單、表格

數位轉型從資料開始 Aa

Small13px--el-font-size-small輔助說明

數位轉型從資料開始 Aa

Extra Small12px--el-font-size-extra-small標籤、註解

字級 Type Scale:> 20px(Tailwind)

超過 20px 的大字用 Tailwind class,行高已由 Tailwind 內建配好:

Class	大小 / 行高	用途
text-2xl	24px / 32px	頁面大標題
text-3xl	30px / 36px	數據看板數字
text-4xl	36px / 40px	行銷區塊標題
text-5xl	48px / 48px	Hero 主視覺標題
text-6xl	60px / 60px	行銷頁超大標題
text-7xl	72px / 72px	全螢幕主視覺、活動頁

數位轉型從資料開始 text-2xl · 24px

1,284,592 text-3xl · 30px

數位轉型從資料開始 text-4xl · 36px

資料開始 text-5xl · 48px

資料開始 text-6xl · 60px

資料 text-7xl · 72px

20px 剛好在交界怎麼辦?

20px 屬於 Element Plus 這邊(--el-font-size-extra-large)。 請不要用 Tailwind 的 text-xl(也是 20px)—— 同一個大小只留一種寫法,避免兩套並存。

字重使用原則

字重	使用時機
700 Bold	頁面主標題、數據強調
500 Medium	區塊標題、表頭、按鈕文字
400 Regular	內文與其他所有文字

注意

不使用 300 以下的細字重 —— 中文筆畫多,細字重在低解析螢幕上會糊掉。