06 · Typography

字型

三種嗓音各有職責,互不代班。這一章的每個尺寸都是實際字級,不是示意。

Three Voices

展示、閱讀、指示
三種嗓音

職責互斥:展示體不做按鈕,指示體不做內文,閱讀體不做超大標。越界就是角色分工瓦解。

Display辰宇落雁體 ChenYuluoyan-2.0-ThinSIL OFL 1.1

慢,是一種溫柔
明天,還有明天的光

用途 大標題、hero 展示字、章名、詩意標語

字級 硬底線 ≥ 44px,低於此筆意失真、鋸齒明顯

篇幅 單次 ≤ 2 行,每行 ≤ 12 字

字重 僅 Thin,原始字型只有這一個字重

禁用於「鬆鬆」二字與品牌名,一律用 LOGO 資產

禁 CSS 合成粗體,禁作 UI 按鈕與表單

Reading霞鶩文楷 LXGW WenKaiSIL OFL 1.1

我們相信一個人的身體,值得被慢慢地讀懂。
不是流程、不是療程,是一段陪你重新校準呼吸的時間。

用途 內文、段落主體、卡片內文、h1 至 h4 標題、副標

字級 15 至 44px,超出走展示或指示字型

字重 Light 300、Regular 400、Medium 500

版本 官方標準版 v1.510 以上

禁襯線字型(新細明體、Times New Roman)代替作內文

禁 CSS 合成粗體,只用字型檔提供的字重階

UINoto Sans TCSIL OFL 1.1

預約時段 · 服務內容 · 抵達方式 · 常見問答

用途 按鈕文字、caption、狀態訊息、表單 label、metadata

字級 12 至 16px,超出走閱讀或展示字型

字重 Regular 400、Medium 500

字距 大寫搭配 letter-spacing 0.12 至 0.28em

禁以 system-ui 或平台預設無襯線體代替

系統字型在 macOS 解析為蘋方、Windows 為微軟正黑、Android 為思源黑體變體,同一份文字會有三種字面寬度

Scale

十一階
比例 1.25

Major Third 模數,base 16px。下面每一列都是該階的實際字級與行高,不是示意圖。

display-2xl128px / 8rem · lh 1.05
ls 0.04em · w 300
慢下來
display-xl96px / 6rem · lh 1.10
ls 0.04em · w 300
回到節奏
display-lg64px / 4rem · lh 1.15
ls 0.04em · w 300
明天還有明天的光
h144px / 2.75rem · lh 1.20
ls 0.02em · w 500
頁面主標題
h235px / 2.20rem · lh 1.25
ls 0.02em · w 500
章節標題
h328px / 1.75rem · lh 1.35
ls 0.02em · w 500
小節標題
h422px / 1.40rem · lh 1.45
ls 0.02em · w 500
子項標題
body-lg19px / 1.20rem · lh 1.90
ls 0.02em · w 400
展示段落的內文,用於段落需要更多呼吸的地方。
body16px / 1.00rem · lh 1.85
ls 0.02em · w 400
標準內文。多數段落用這一階,是全站字級的基準。
body-sm14px / 0.85rem · lh 1.75
ls 0.06em · w 400
卡片內文與說明文字,字距略放以維持小字的清晰度。
caption12px / 0.75rem · lh 1.60
ls 0.12em · w 400
METADATA · 標籤 · MICRO COPY

標題深度上限 4:h1 至 h4 是最深層級,需要更深就拆章節或改用清單與表格。

Rhythm

字與字之間
段與段之間

混排空格與段落間距是最容易被忽略、也最容易一眼看出沒做的兩件事。

中英混排
中英之間Sunsun 是一間森林邊的小屋Sunsun是一間森林邊的小屋
中數之間共 21 個 stops共21個stops
全形標點Sunsun,鬆鬆Sunsun ,鬆鬆
英文標點在英文語境內沿用原生規則:Hello, world.在英文語境內硬套全形規則
段落節奏

標題與其下第一段是緊接關係,段落與下一個標題是呼吸關係。兩者間距不同,層級才讀得出來。

空間即照護

空間本身是主體,不是療程的容器。噪音承諾、無彈跳廣告、無促銷簡訊,都是識別主軸的具體防守。

這一段與上一段之間的距離,等於內文的行高。

靜謐是主餐

標題之前留的距離比段落之間更大,讀者才知道這裡換了主題。

段落間距 = 1.85em(等於內文行高) · 標題後 0.5em · 標題前 1.5em

中文段落禁止兩端對齊。兩端對齊會為了對齊右緣而拉開字距,中文字本來就是等寬的方塊字,拉開後會產生忽寬忽窄的不自然空隙,閱讀節奏被打斷。

↑ 這是禁止的兩端對齊示範。中文段落一律左對齊,展示體與詩意標語可居中。

展示字的斷行

展示字的凝視感建立在一眼掃過一個完整語意單位,斷在語意中間會讓標題必須重讀。

✓ 手動指定斷點
從門口到躺下,
大約走十步

在語意單位的邊界斷行,兩行各自完整。窄視窗下若單行過短,交給平衡排版設定重新分配。

✗ 以 ch 限制寬度
從門口到躺下,大約走十步

ch 的定義是數字零的推進寬度,中文字寬遠大於此值,同一個 ch 值換算出的實際容納字數比預期少三成以上,標題在未預期處斷行。

Get

三個字型
怎麼裝

三個都是 SIL OFL 1.1 開源授權,可自由用於商業專案。

辰宇落雁體

完整字型 4.3MB,僅用於 44px 以上的展示標題不值得讓訪客整包下載。已切為 21 個分片,以 unicode-range 按需載入,一般瀏覽只需 core 片。

chenyuluoyan-core.woff2
霞鶩文楷

官方標準版 v1.510 以上。本站與官網目前以 CDN 載入,上線前評估是否一併 self-host。

複製 CDN 位址
Noto Sans TC

Google Fonts 標準版,只載入 400 與 500 兩個字重。一律實際載入,不以系統字型代替。

複製 CDN 位址
--font-display: 'ChenYuluoyan-2.0-Thin', serif; --font-reading: 'LXGW WenKai', serif; --font-ui: 'Noto Sans TC', sans-serif;
Do / Don't

七條字型紀律

Do
「鬆鬆」品牌名一律用 LOGO 的 lockup 或 wordmark 資產。文案裡的品牌名是文字,版面上的品牌名是資產。
Don't
禁用辰宇落雁體重繪「鬆鬆」二字。看起來像,但不是同一組筆畫。
Do
辰宇落雁體限詩意標語與大標:≥ 44px、單次 ≤ 2 行、每行 ≤ 12 字。
Don't
禁用辰宇落雁體於 44px 以下,也禁作 UI 按鈕與表單。字型角色分工不可越界。
Do
中英數混排加半形空格,中文段落左對齊,長字串以 overflow-wrap 在容器邊界斷開。
Don't
禁中文段落兩端對齊,禁用 word-break: keep-all(該值會讓整段不換行、撐破容器)。
Don't
禁 CSS 合成粗體,只用字型檔提供的原生字重階;禁襯線字型作內文;禁以 ch 為單位限制展示字寬度,改用手動換行標記指定斷點。