← Back Typography
Universal App
此章節說明 Universal App Typography System 的開發文件和設計規則。
Typeface
字型
Universal 與官網的文字顯示會依照各用戶的瀏覽器與裝置支援限制有所不同,所以我們設計會用優先字體,但用戶端顯示的字體會依照所選語系的 font-family 裡的字體順序去 fallback 到可顯示的,若都沒有就會 fallback 到系統自訂的字體。
優先字體
- Universal 設計檔優先使用
Noto Sans TC
CH: Noto Sans TC, Microsoft JhengHei, PingFang TC, sans-serif EN: Lato Sans EN, Arial, Helvetica Neue, sans-serif JP: Noto Sans JP, Yu Gothic, Meiryo, Hiragino Sans, sans-serif
Line Height
文字行高
Universal 文字行高的計算方法同 Figma 行高,所以 figma 畫面即為 app 裡所看到的樣式,不需特別調整。
Text Style
文字樣式
相關文件連結 Universal Typography
Dynamic Type Style
動態文字樣式
Universal 文字會根據使用者的裝置或瀏覽器的設定自動縮放尺寸,縮放倍率依照網頁預設,無額外定義。
所以在設計時要注意有包含文字的區塊要避免設計固定高度,要用文字行高 + Top / Bottom padding 去將高度撐開,高度才會根據文字尺寸動態調整。
Text Formatting
文字結構
Title
主要應用在各式標題,可以提供使用者一個頁面或區塊的內容大綱,也可以將不同內容快速分區,因為樣式的視覺份量較大,所以需要盡量精簡內容。
Body
主要應用於各式內文,需要利用文案表達內容的地方,可以以段落方式呈現,但設計時要注意段距以及段落寬度。
Callout
應用於 SideMenu / Tooltip / ContextMenu 之類的一些特殊元件。
Caption
主要用於較小、次要的字級表示,像是一些次要資訊或副標題,因為字級較小使用時要注意易讀性。
第一階段未完成