Typography
Typography 為產品的文字系統，當文字應用在產品的不同功能項目時，我們透過這套完整的文字視覺規範，讓文字應用維持一致性，進而呈現給使用者穩定的視覺及使用體驗。
⚡️ 各平台設計規則與開發文件：
Principles
設計原則
包容多語系
產品支援多語系，並確保切換不同語系能夠正常顯示
創造閱讀層次
利用文字大小、粗細、顏色和空間佈局，創造有次序的閱讀方式
跨平台易閱性
因應不同的設備螢幕尺寸，或使用者需求，顯示適合的文字大小或粗細
Accessibility
可訪問性
Adaptive Text Style 適應式文字樣式
為了適應不同裝置的閱讀體驗，同時讓系統能夠自動轉換適合當前螢幕尺寸的文字樣式，KKBOX Mobile App 將文字系統分為「Small Screens Text Style（小螢幕文字樣式）」和「Large Screens Text Style（大螢幕文字樣式）」，會根據當前的螢幕尺寸自動顯示對應的文字系統，所以 Title Large 在大螢幕和小螢幕中將顯示不同數值。
若螢幕尺寸判斷為 Large Screens（大螢幕）時，顯示 Large Screens Text Style；螢幕尺寸判斷為 Small Screens （小螢幕）時，顯示 Small Screens Text Style。
螢幕尺寸判斷依據Layout / Mobile App / Screen size
大/小螢幕設計規格
Dynamic Text Style 動態文字樣式
Mobile App 支援可動態縮放的文字系統，幫助需要閱讀更大或更小文字的使用者提升易閱性。
此動態文字會根據使用者手機系統的設定顯示，當使用者設定較大的顯示文字時，UI 會根據設計師不同的定義而有不同的效果。
動態文字的設計方法
Line Length 文字段落寬度
根據 WCAG 1.4.8 規定，文字寬度需要低於 80 個字，如果是 CJK 語言，則需要低於 40 個字。在介面設計中我們經常以限制文字外框（Bounding box）寬度的方式控制文字長度。
Mobile App 定義
Longer Lines / Paragraph 長段落
為了讓資訊量較大的段落文字更容易被使用者閱讀，建議設計師根據螢幕尺寸控制字串的長度或文字框的最大顯示空間。
Baymard Institute (UX Research Institute) 研究建議英文段落文字的長度最好在 50-75 個字母之間，過長的文字會讓使用者難以從起始點持續專注至終點，過短的長度也會讓使用者急促的閱讀下一行文字而感到壓力。
參考文獻
Shorter Lines 短段落
較短的字串或句子盡量控制在每行 20-40 個字母之間。
Design
設計
Font Size Units 字級單位
pt 為 iOS 的測量單位；sp 為 Android 使用於文字尺寸的單位，不同於測量物件長寬的 dp；px 為 Web 以及 Universal 開發時慣用的文字尺寸單位。
iOS | Android | Web / Universal App |
pt | sp | px |
Fonts Weight 字重
文字系統會根據文字不同的使用目的採用適合的字重（Fonts Weight）。
Mobile App
因為 Android 和 iOS 有部分的前端顯示差異，所以兩者的文字系統字重定義稍有不同，以保持不同狀態的易閱性。
以下是 KKBOX Mobile App 的字重使用方式，以及常用名稱對照表：
Value | Common weight name | Text Style We Use |
100 | Thin | X |
200 | Extra Light | X |
300 | Light | X |
400 | iOS: Regular
Android: Normal | iOS: Body
Android: Body |
500 | Medium | iOS: Headline, Title, Label
Android: Title M, Title S, Label (CJK 語言顯示 Normal） |
600 | Semi Bold | X |
700 | Bold | Android: Headline, Title L |
800 | Extra Bold | X |
900 | Black | X |
Android 官方文件
Universal App
文字系會根據不同使用時機調整使用不同自重設定以創造出層級或提升易讀性。
Value | Common weight name | Text Style We Use |
100 | Thin | X |
200 | Extra Light | X |
300 | Light | Callout3 |
400 | Regular | Subtitle, Body, Callout2, Caption2 |
500 | Medium | Caption1 |
600 | Semi Bold | X |
700 | Bold | PageExtraLargeTitle, PageLargeTitle, SectionTitle, ExtraLargeTitle, LargeTitle, PageTitle, Title1, Title2, Callout1 |
800 | Extra Bold | X |
900 | Black | X |
Official Website
文字系會根據不同使用時機調整使用不同自重設定以創造出層級或提升易讀性。
Value | Common weight name | Text Style We Use |
100 | Thin | X |
200 | Extra Light | X |
300 | Light | X |
400 | Regular | Body |
500 | Medium | Headline、Title、Button |
600 | Semi Bold | Headline |
700 | Bold | X |
800 | Extra Bold | X |
900 | Black | X |
Bounding Box 文字外框
文字外框（Bounding box）的高度等於文字的行高，寬度代表當前的文字顯示空間。
設計時，通常使用文字外框（Bounding box）進行排版，與 Mobile App、Universal App、Website開發相同。
Color 顏色
設計時，使用 Semantic Colors 規劃文字的資訊層級，例如：在標題使用 primaryText color，在副標題使用 secondaryText color，創造有層次的閱讀順序。
也可以使用特殊的狀態顏色呈現不同意義，例如：在需要強調的文字上使用 accentText，提升資訊的重要性。
文字顏色
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
May 19, 2023 | 1.23 | ・補齊、調整 Typography 章節 Universal ・新增 Typography 章節 Website 頁面 | Typography |  Jimmy Chang Vicky Hsu |
January 17, 2023 | 1.2 | ・Layout - 響應式斷點說明更新 ・Icons - 新增缺口風格設計說明 | All |  Jaco Huang |
November 25, 2022 | ・所有筆記彙整 | All |  Mark Liang | |
November 22, 2022 | 1.1 | ・Changelog 測試 ・範本介紹 | All | Mark Liang |
November 1, 2022 | 1.0 | ・XD Playbook Foundation 正式上線 | All |  pei-tzu Lin |