BACK

Foundations

Brand

Interaction / Animation

Mobile App

此章節分別說明 iOS / Android Typography System 的開發文件以及設計規則。

iOS Typography System

iOS 文字系統

Typeface 字體

開發採用系統預設字體。

設計稿預設繁中字體，設計師需自行使用不同字體測試 iOS 的畫面呈現。

	TC	EN	JP
開發	System default font	System default font	System default font
Design with Figma	PingFang TC (預設)	SF Pro	Hiragino Sans

💡

SF Pro 擁有兩種子字體 —— SF Pro Display 和 SF Pro Text，Apple 要求 20pt 或以上的字級一律顯示 SF Pro Display；而 19pt 或以下的字級一律顯示 SF Pro Text。好處在於 SF Pro Text 的字元間距 (letter spacing) 比 SF Pro Display 寬，小字級下不會感覺很緊湊，更容易閱讀。

Line Height & Line Spacing 行高與行距

開發與設計差異

Figma 需要以設定文字 Line height 的方式進行設計，相較開發使用 Line spacing 的設定值，Figma 的文字框會溢出一點間距 (參考附圖)。所以開發時，需要在所有文字框上下自動增加文字框的 Padding，讓設計的視覺和開發成果一致。

⚠️

計算方式

Line Spacing (pt)：原始 Line Height (pt) -Height of Text

Top & Bottom Padding (pt)：Line Spacing/2

Dynamic Type Style 動態文字樣式

文字會根據使用者手機系統設定縮放文字尺寸 (Size) 、行距 (Line Spacing) 、Top & Bottom Padding，此時字重 (Weight) 不變，預設顯示為「Large Size」。

⚠️

Larger Accessibility Type Sizes 一律顯示「xxxLarge」，無額外定義。

⚠️

文字最小值為 11pt，此時 line spacing=(11/default text size)*default line spacing

	xSmall	Small	Medium	Large (Default)	xLarge	xxLarge	xxxLarge
- Text Size - Line Spacing - Top & Bottom Padding	0.85x	0.9x	0.95x	1x	1.15x	1.3x	1.45x

Small Screens Text Style 小尺寸螢幕文字樣式

Size Class

當裝置螢幕尺寸判斷為 Small Screens 時，顯示 Small Screens Text Style。

螢幕尺寸判斷依據
Layout / Mobile App / Screen size

Spec for Development & Design

工程師以 Line Spacing 開發文字系統，所以請參考表格中的 Line Spacing 欄位；設計師以 Line height 設定 Figma 文字系統，所以請參考表格中的 Line height 欄位。

Type Name	Size (pt)	Line Height (pt)	Height of Text (pt)	Line Spacing (pt)	Weight
Headline Large	32	40	38.33	1.67	Medium 500
Headline Medium	28	36	33.66	2.34	Medium 500
Headline Small	24	32	28.66	3.34	Medium 500
Title Large	22	28	26.33	1.67	Medium 500
Title Medium	16	24	19.33	4.67	Medium 500
Title Small	14	20	17	3	Medium 500
Label Extra Large	16	24	19.33	4.67	Medium 500
Label Large	14	20	17	3	Medium 500
Label Medium	12	16	14.33	1.67	Medium 500
Label Small	11	16	13.33	2.67	Medium 500
Body Large	16	24	19.33	4.67	Regular 400
Body Medium	14	20	17	3	Regular 400
Body Small	12	16	14.33	1.67	Regular 400

⚠️

iOS 文字自帶高度，此高度不直接等於上表中的 Height of Text，因為高度可能會根據字體不同而有變化。文字高度 (Height of Text) 以 iOS 系統預設字體 - 英文 SF Pro / 中文 PingFang TC 計算，兩者文字高度相同。

Large Screens Text Style 大尺寸螢幕文字樣式

Scaling Fonts

Large Screen Text Style 以 Small Screens Text Style 為基礎放大 1.15 倍，以符合大螢幕的閱讀體驗。

Size Class

當裝置螢幕尺寸判斷為 Large Screens 時顯示 Large Screens Text Style。

螢幕尺寸判斷依據請參考 Layout / Mobile App / Screen size

Spec for Development 工程師請看此區塊

工程師以倍率自動計算大螢幕文字樣式，除文字尺寸 (Text Size) 之外，Line Spacing 與 Top & Bottom Padding 也需共同放大 1.15 倍。

	Small Screens Text Style	Large Screens Text Style
- Text Size - Line Spacing - Top & Bottom Padding	1x	1.15x

Design with Figma 設計師請看此區塊

Text Size & Line Height 為設計師以 Small Screens Text Style 乘 1.15 倍換算，設計師使用此規格建立 Figma Typography System，讓設計稿與開發成果一致。

Type Name	Size (pt)	Line Height (pt)	Weight
Headline Large	36.8	46	Medium 500
Headline Medium	32.2	41.4	Medium 500
Headline Small	27.6	36.8	Medium 500
Title Large	25.3	32.2	Medium 500
Title Medium	18.4	27.6	Medium 500
Title Small	16.1	23	Medium 500
Label Extra Large	18.4	27.6	Medium 500
Label Large	16.1	23	Medium 500
Label Medium	13.8	18.4	Medium 500
Label Small	12.65	18.4	Medium 500
Body Large	18.4	27.6	Regular 400
Body Medium	16.1	23	Regular 400
Body Small	13.8	18.4	Regular 400

Android Typography System

Android 文字系統

Typeface 字體

開發採用系統預設字體。

設計稿預設繁中字體，設計師需自行使用不同字體測試 Android 的畫面呈現。

	TC	EN	JP
開發	系統預設	系統預設	系統預設
Design with Figma	Noto Sans TC (預設)	Roboto	Roboto

Dynamic Type Style 動態文字樣式

Android 系統的文字會根據使用者的裝置設定自動縮放尺寸 (Size) 與行高 (Leading)，縮放倍率依照 Android 系統預設，無額外定義。

Small Screens Text Style 小尺寸螢幕文字樣式

Layout breakpoints

當裝置螢幕尺寸判斷為 Small Screens 時顯示 Small Screens Text Style。

螢幕尺寸判斷依據請參考 Layout / Mobile App / Screen size

Spec for Development & Design

Headline Large	32	40	Bold 700
Headline Medium	28	36	Bold 700
Headline Small	24	32	Bold 700
Title Large	22	28	Bold 700
Title Medium	16	24	Medium 500 (JCK不支援)
Title Small	14	20	Medium 500 (JCK不支援)
Label Extra Large	16	24	Medium 500 (JCK不支援)
Label Large	14	20	Medium 500 (JCK不支援)
Label Medium	12	16	Medium 500 (JCK不支援)
Label Small	11	16	Medium 500 (JCK不支援)
Body Large	16	24	Regular 400
Body Medium	14	20	Regular 400
Body Small	12	16	Regular 400

⚠️

Android 系統沒有將 CJK (中日韓) 語言加入多重字重，所以 CJK 語言僅能顯示「Normal 400」和「Bold 700」。若設定 Medium 500 時，中文會自動顯示為 Normal 400。

Android 文字開發規則請參考 Android Developers / Typeface

Large Screens Text Style 大尺寸螢幕文字樣式

Scaling Fonts

Large Screens Text Style 以 Small Screens Text Style 為基礎，由設計師計算放大 1.15 倍，以符合大螢幕的閱讀體驗。

⚠️

Text Size & Line Height 計算方式採四捨五入至最接近的整數。

Layout breakpoints

當裝置螢幕尺寸判斷為 Large Screens 時顯示 Large Screens Text Style。

螢幕尺寸判斷依據請參考 Layout / Mobile App / Screen size

Spec for Development & Design

Type Name	Size (sp)	Line Height (sp)	Weight
Headline Large	37	46	Bold 700
Headline Medium	32	41	Bold 700
Headline Small	28	37	Bold 700
Title Large	25	32	Bold 700
Title Medium	18	28	Medium 500 (JCK不支援)
Title Small	16	23	Medium 500 (JCK不支援)
Label Extra Large	18	28	Medium 500 (JCK不支援)
Label Large	16	23	Medium 500 (JCK不支援)
Label Medium	14	18	Medium 500 (JCK不支援)
Label Small	13	18	Medium 500 (JCK不支援)
Body Large	18	28	Regular 400
Body Medium	16	23	Regular 400
Body Small	14	18	Regular 400

Text Formatting

文字結構

文字系統的結構依照使用目的分為 Headline、Title、Label、Body，各自代表不同意義，並且可以互相搭配創造容易閱讀的資訊結構。

Headline

Headline 為尺寸最大的標題文字，通常使用於需要強調的簡短字串。因為小螢幕的顯示空間有限，所以在小螢幕中需要斟酌使用，若應用於大螢幕的設計可以有較好的視覺表現。

Type Name	Components
Headline Large
Headline Medium	Top Navigation Bar - Large Title
Headline Small

Title

Title 為常用的標題文字，因為尺寸比 Headline 小，所以可以使用於中等長度的強調字串。一般用於功能區塊標題或元件標題，例如：卡片等。

Type Name	Components
Title Large	Section Title - Large
Title Medium	Top Navigation Bar - Regular Title
Title Small	Section Title - Small Subtitle Cards Title

Label

Label 僅使用於可點擊的文字或按鈕中。

Type Name	Components
Label Extra Large	Top Navigation Bar - Text Button
Label Extra Large - Underline
Label Large
Label Large - Underline
Label Medium
Label Medium - Underline
Label Small
Label Small - Underline

若為字串或段落之間的可點擊文字，需使用附加底線的 Lable 文字，加強使用者辨別該文字與周圍文字的差異，例如：請參閱會員使用條款和隱私權政策。

參考章節 Components / link

Body

Body 經常用於簡短描述或段落。

Type Name	Components
Body Large
Body Medium	List Title
Body Small	Tertiary Text

Line Length

文字段落寬度

小螢幕（Small Screens）的顯示寬度較窄，所以在設計置左/右的文字段落時，可使用撐滿螢幕寬度的文字長度。但是當中等長度的字串置中排版時，需要縮短文字寬度的上限，以製造較多留白空間，進而產生資訊聚焦的效果。

文字寬度
Typography / Intro / Line Length

聚焦效果
Layout / Intro / Space Density

Small Screens

Text Alignment	Maximum Width
Align left, align right	Full
Align center	315 pt/dp

Large Screens

Text Alignment	Maximum Width
Align left, align right	315 pt/dp 🚧 需重新檢視是否合適
Align center	500 pt/dp

On This Page

Mobile App
iOS Typography System
Typeface 字體
Line Height & Line Spacing 行高與行距
Dynamic Type Style 動態文字樣式
Small Screens Text Style 小尺寸螢幕文字樣式
Large Screens Text Style 大尺寸螢幕文字樣式
Android Typography System
Typeface 字體
Dynamic Type Style 動態文字樣式
Small Screens Text Style 小尺寸螢幕文字樣式
Large Screens Text Style 大尺寸螢幕文字樣式
Text Formatting
Line Length