這個網站怎麼用字

金萱 4.0,兩個字重,八個字級,五檔字距。這一頁是規範,也是教材:所有尺寸都是網站真的在用的那一套,改了變數這頁就跟著變。

一、字體:金萱 4.0

金萱是台灣字型公司 justfont 設計的字體,介於黑體與宋體之間:筆畫有宋體的起落,骨架有黑體的穩定。長文讀起來不像宋體那麼硬,標題又比黑體多一點手感。本站取得網頁授權,用的是兩個字重:四分糖(400)和八分糖(800)。

四分糖 400願一切生命,都能適得其所。
八分糖 800願一切生命,都能適得其所。
數字54.75 公里・24 天・1,200 隻

為什麼只用兩個字重:中文的層級靠字級和留白就夠了。多一個中間字重,讀者分不出來,排版的人卻多一個要猶豫的選項。需要「次一級的強調」,用顏色(朱紅、靛藍)或字級,不用粗細。

字型檔怎麼送到你手上:一個中文字重有 1 萬 5 千多個字,整包 3.4 MB。本站照 Google Fonts 的切法把每個字重切成 107 個小檔,瀏覽器只下載這一頁用到的字,第一次打開多載的量在 100 KB 以內。字型還沒到之前先用思源字顯示,不會白屏。

二、字級:一個基準,一個比例

基準是內文 17px(手機 16.5px),比例是 1.2。所有字級都從 17 乘或除 1.2 得來再取整,所以任何兩級放在一起都有固定的大小關係。

名稱用在哪桌機手機行高字重
註圖說、出處、表格小字、標籤12121.8400
小副標、日期、按鈕、表單標籤14141.8400 / 800
內文文章段落、信、表單內文1716.51.95400
導言文章副標、引言20181.75400 / 800
小標h3、卡片標題24211.45800
中標h229251.45800
大標文章標題35291.4800
數字數字卡、金額42341.1800
大標 35牠把死掉的孩子,拖回家
中標 29那一窩,我們來不及了
小標 24二仁溪旁的草叢裡
導言 20現在是繁殖季,她可能正趴在蛋上。
內文 17牠的巢蓋在地上,巢裡本來有 4 隻剛孵出來的孩子,還有 3 顆蛋。
小 142026 年 10 月 12 日・環境部第 2 次延續會議
註 12照片:農業部林業及自然保育署

三、行與段:中文長文的呼吸

以前

牠的巢蓋在地上,在台南二仁溪旁邊的草叢裡。巢裡本來有 4 隻剛孵出來的孩子,還有 3 顆蛋。那天晚上,來了 7 個彪形大漢。沒有要搶劫,也沒有搶走任何東西。

現在

牠的巢蓋在地上,在台南二仁溪旁邊的草叢裡。巢裡本來有 4 隻剛孵出來的孩子,還有 3 顆蛋。那天晚上,來了 7 個彪形大漢。沒有要搶劫,也沒有搶走任何東西。

左邊是舊設定:字距 0.1em、行高 1.6。字跟字之間鬆,行跟行之間擠,讀長文會累。右邊是現在:字距 0.02em、行高 1.95。金萱本身的節奏已經很好,不需要再拉開。

四、字距:只有五檔

檔值用在哪
內文0.02em所有段落、信、表單
標題0.04em所有標題、卡片標題、表單標籤
按鈕0.1em按鈕、導覽、付款方式這類要點的東西
標籤0.18em全形字分開排的小標籤,例如「內 容 五 大 主 軸」。這是本站的識別,只用在標籤
數字0數字卡、金額

五、顏色:四個,各有職責

墨色:主文灰:次要、出處、說明朱紅:行動、強調、重點靛藍:結構、標籤、連結

文字只用這四個顏色。朱紅不當裝飾,只在要人動手或要人記住的地方出現;一頁裡朱紅越少,它出現時越有力。

六、元件:同一套規則長出來的樣子

文章裡的數字卡、金句、重點卡,全部用上面的字級與字距,沒有另外的尺寸。

20 公頃草鴞媽媽最集中的育兒室
507 公頃沙崙整片草原
”

牠做錯的事只有一件:牠長大了

🌾
二仁溪試驗區2 公頃,8 個多月後已經錄到草鴞來活動
🐄
畜試所的經驗80 公頃牧草地,草鴞穩定繁殖幾十年

七、對與錯

不要

用三種粗細分三個層級:標題 900、副標 700、內文 600。

要

標題 800,副標改小一級,內文 400。層級靠字級,不靠粗細。

不要

每個元件自己決定字級:15.5、16.5、13.5、11.5 各寫各的。

要

只用八個字級,元件之間的大小關係才會穩定。

不要

把字距拉開當作「有設計感」,內文用 0.1em。

要

字距留給標籤,內文交給字體本身的節奏。

八、怎麼驗收

規範不是寫完就算。本站有一支稽核程式,打開每一頁數實際用了幾種字級、字距、行高。改版前文章頁是 26 種字級、53 種字距,目標是 8 種以內;每次改完數字只能往下,不能往上。

金萱 4.0 由 justfont 設計,本站依網頁授權使用。這頁的規則可以拿去用在你自己的網站,字體要向 justfont 取得授權。