Official Website

此章節說明 Official Website Typography System 的開發文件和設計規則。

Typeface

字體

Official Website 的文字顯示會依照各用戶的瀏覽器與裝置支援限制有所不同，設計時會使用優先字體，但用戶端顯示的字體是依照 Font-family 的字體順序去 fallback 到可顯示的字體，若都沒有則會 Fallback 回系統自訂字體。

優先字體

	Official Website
用戶端顯示	Font-family
Design with Figma	PingFang TC (TC) noto sans jp (JP) Helvetica Neue (EN)

💡

Font-family

台、港、星、馬使用同一組 Font-family。

日本使用優先顯示日文字體的 Font-family，因為日本標點符號及部分文字與中文字不相同。

TW、HK、SG: Helvetica Neue,Arial,PingFang TC,Heiti TC,微軟正黑體,sans-serif JP: Helvetica Neue,Arial,Noto Sans JP,Hiragino Kaku Gothic Pro,Meiryo,sans-serif

特殊字體

⚠️

Museo Sans

使用於 KKBOX 英文大標，主要為凸顯強調。在需使用英文大標的場合，例如官網特色功能頁的標語「KKBOX Features」會套用 Adobe 授權的 Museo Sans 字體。

交付工程師此字體時，需由設計師提供 Embed Code。 → 提供流程請見此

Line Height

文字行高

網頁字型的行高計算方法與 Figma 行高一致，Figma 畫面即網頁上看到的樣式，無需特別調整。

Text Style

文字樣式

字級

官方網頁通常有二種不同用途的頁面，依據不同用途 Text Style 會有些許不同，例如：在 Marketing（行銷）頁面上為吸引來訪者，標題字級通常會較大且字串簡短；在 Information（資訊）上通常會揭露更多深入內容介紹，文字含量較多，因此標題字級相對 Marketing（行銷）頁面會較小。

Marketing（行銷）網頁：主要為產品介紹，整體文字少，避免文字過多導致來訪者無法第一時間快速獲得資訊。例如：特色功能頁、無損音質介紹頁。

Information（資訊）網頁：主要做深入的內容介紹，整體文字多，例如：專欄文章頁、4more 歌單頁。

以下列出了官網上常使用的 Text Style。

Type Name	Size (sp)	Weight	usage	Description
Headline Large	120	600	Marketing	尺寸最大的標題文字，使用於需強調的簡短字串。
Title Large	54	500	Marketing	區分段落的標題文字。Large 常使用於行銷頁，例如特色功能頁的「為你打造」標題。
Title Small	28	500	Marketing	次級標題，通常為補充 Title Large 的內容。
Page Title	36	500	Information	資訊頁主標，強調該頁重點。例如 4more 專輯頁的該專輯名稱。
Label Medium	16	500	All	用於按鈕文字。
Body Large	16	400	All	用於描述詳細內容，經常使用於內文。
Body Medium	14	400	All	Secondary Text。
Body Small	12	400	Information	Tertiary Text，通常使用於資訊頁上最不需要凸顯的文字，例如曲長時間。

Color

官網功能單純，區分層級的文字用色也相對單純，以下列出目前官網經常使用的 Text Color。

在 Marketing（行銷）網頁上，可以以視覺判斷決定使用 Graphic Design Palettes，在不影響易讀性的前提下帶來視覺上有趣、富有表現力的溝通。

💡

官網沒有利用 Semantic Color 與工程師協作，工程師會使用色碼寫 code，因此設計師交付的 spec 只需以色盤顏色套用文字即可。

Type Name	Size (sp)	Weight	Color (Light Mode / Dark Mode)
Headline Large	120	600	Gray90 / White
Title Large	54	500	Gray90 / White
Title Small	28	500	Gray90 / White
Page Title	36	500	Gray90 / White
Label Medium	16	500	Gray90 / White
Body Large	16	400	Gray60 / Gray40
Body Medium	14	400	Gray60 / Gray40
Body Small	12	400	Gray60 / Gray40