字型
三種嗓音各有職責,互不代班。這一章的每個尺寸都是實際字級,不是示意。
展示、閱讀、指示
三種嗓音
職責互斥:展示體不做按鈕,指示體不做內文,閱讀體不做超大標。越界就是角色分工瓦解。
慢,是一種溫柔
明天,還有明天的光
用途 大標題、hero 展示字、章名、詩意標語
字級 硬底線 ≥ 44px,低於此筆意失真、鋸齒明顯
篇幅 單次 ≤ 2 行,每行 ≤ 12 字
字重 僅 Thin,原始字型只有這一個字重
禁用於「鬆鬆」二字與品牌名,一律用 LOGO 資產
禁 CSS 合成粗體,禁作 UI 按鈕與表單
我們相信一個人的身體,值得被慢慢地讀懂。
不是流程、不是療程,是一段陪你重新校準呼吸的時間。
用途 內文、段落主體、卡片內文、h1 至 h4 標題、副標
字級 15 至 44px,超出走展示或指示字型
字重 Light 300、Regular 400、Medium 500
版本 官方標準版 v1.510 以上
禁襯線字型(新細明體、Times New Roman)代替作內文
禁 CSS 合成粗體,只用字型檔提供的字重階
預約時段 · 服務內容 · 抵達方式 · 常見問答
用途 按鈕文字、caption、狀態訊息、表單 label、metadata
字級 12 至 16px,超出走閱讀或展示字型
字重 Regular 400、Medium 500
字距 大寫搭配 letter-spacing 0.12 至 0.28em
禁以 system-ui 或平台預設無襯線體代替
系統字型在 macOS 解析為蘋方、Windows 為微軟正黑、Android 為思源黑體變體,同一份文字會有三種字面寬度
十一階
比例 1.25
Major Third 模數,base 16px。下面每一列都是該階的實際字級與行高,不是示意圖。
標題深度上限 4:h1 至 h4 是最深層級,需要更深就拆章節或改用清單與表格。
字與字之間
段與段之間
混排空格與段落間距是最容易被忽略、也最容易一眼看出沒做的兩件事。
標題與其下第一段是緊接關係,段落與下一個標題是呼吸關係。兩者間距不同,層級才讀得出來。
空間即照護
空間本身是主體,不是療程的容器。噪音承諾、無彈跳廣告、無促銷簡訊,都是識別主軸的具體防守。
這一段與上一段之間的距離,等於內文的行高。
靜謐是主餐
標題之前留的距離比段落之間更大,讀者才知道這裡換了主題。
段落間距 = 1.85em(等於內文行高) · 標題後 0.5em · 標題前 1.5em
中文段落禁止兩端對齊。兩端對齊會為了對齊右緣而拉開字距,中文字本來就是等寬的方塊字,拉開後會產生忽寬忽窄的不自然空隙,閱讀節奏被打斷。
↑ 這是禁止的兩端對齊示範。中文段落一律左對齊,展示體與詩意標語可居中。
展示字的凝視感建立在一眼掃過一個完整語意單位,斷在語意中間會讓標題必須重讀。
大約走十步
在語意單位的邊界斷行,兩行各自完整。窄視窗下若單行過短,交給平衡排版設定重新分配。
ch 的定義是數字零的推進寬度,中文字寬遠大於此值,同一個 ch 值換算出的實際容納字數比預期少三成以上,標題在未預期處斷行。
三個字型
怎麼裝
三個都是 SIL OFL 1.1 開源授權,可自由用於商業專案。
完整字型 4.3MB,僅用於 44px 以上的展示標題不值得讓訪客整包下載。已切為 21 個分片,以 unicode-range 按需載入,一般瀏覽只需 core 片。
chenyuluoyan-core.woff2官方標準版 v1.510 以上。本站與官網目前以 CDN 載入,上線前評估是否一併 self-host。
Google Fonts 標準版,只載入 400 與 500 兩個字重。一律實際載入,不以系統字型代替。