Typography 文字段落
定義介面中的字型、段落以及間距，確保資訊的可閱讀性。
網頁版標題、段落
字體：思源黑體、微軟正黑體、Arial
單位：16px=1rem
| 標題 | 字級 | 字重(強調) | 行距 | 字距 | 使用情境 |
|---|---|---|---|---|---|
|
Heading 1
|
36px | 500(700) | 1.5rem | normal | 最大標題(ex.官網首頁輪播大標) |
|
Heading 2
|
32px | 500(700) | 1.5rem | normal | 次大標題(ex.各區塊大標) |
|
Heading 3
|
24px | 500(700) | 1.5rem | normal | 內容區塊大標(ex.卡片標題) |
|
Heading 4
|
18px | 500(700) | 1.5rem | normal | 內容段落標題 |
| 內文 | 字級 | 字重(強調) | 行距 | 字重 | 使用情境 |
|---|---|---|---|---|---|
|
Paragraph 1
|
20px | 500(700) | 1.5rem | normal | 最大內文(ex.官網首頁輪播內文) |
|
Paragraph 2
|
18px | 500(700) | 1.5rem | normal | 一般內文 |
|
Paragraph 3
|
16px | 500(700) | 1.5rem | normal | 次要內文 |
|
Paragraph 4
|
14px | 500(700) | 1.5rem | normal | 文字超連結、注意事項、警語 |
手機版標題、段落
字體：思源黑體、微軟正黑體、Arial
手機系統：roboto(Android)、san
francisco(iOS)
單位：16px=1rem
| 標題 | 字級 | 字重(強調) | 行距 | 字距 | 使用情境 |
|---|---|---|---|---|---|
|
Heading 1
|
32px | 500(700) | 1.5rem | normal | 最大標題(ex.官網首頁輪播大標) |
|
Heading 2
|
24px | 500(700) | 1.5rem | normal | 次大標題(ex.各區塊大標) |
|
Heading 3
|
20px | 500(700) | 1.5rem | normal | 層級3大標題(ex.區塊內容物大標) |
|
Heading 4
|
16px | 500(700) | 1.5rem | normal | ex.表尾標題 |
| 內文 | 字級 | 字重(強調) | 行距 | 字距 | 使用情境 |
|---|---|---|---|---|---|
|
Paragraph 1
|
18px | 500(700) | 1.5rem | normal | 最大內文(ex.官網首頁輪播內文) |
|
Paragraph 2
|
16px | 500(700) | 1.5rem | normal | 一般內文 |
|
Paragraph 3
|
16px | 500(700) | 1.5rem | normal | 次要內文(為求閱讀舒適性，故大小同網頁版) |
|
Paragraph 4
|
14px | 500(700) | 1.5rem | normal | 文字超連結、注意事項、警語、備註文字 |