---
# System prepended metadata

title: typography study
tags: [UX / UI]

---

參考：
TCD https://citydashboard.taipei/dashboard?index=youbike
SWAE https://192.168.1.205:9090/network

---

1920*1080

|          | TCD                                                                       | SWAE                                                                      | SPX                                                                       |
| -------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| sidebar  | ![截圖 2024-05-08 上午10.38.44](https://hackmd.io/_uploads/ryv0rD_MA.png) | ![截圖 2024-05-08 上午10.38.32](https://hackmd.io/_uploads/ryw0SPOGC.png) | ![截圖 2024-05-08 上午10.50.08](https://hackmd.io/_uploads/BkeFuPuMR.png) |
|          | 18px, 400                                                                 | 16px, 400                                                                 | 14px, 400                                                                 |
| widget   | ![截圖 2024-05-10 下午3.13.32](https://hackmd.io/_uploads/HywJoHsMC.png)  | ![截圖 2024-05-10 下午3.26.24](https://hackmd.io/_uploads/r1IN3SsfR.png)  | ![截圖 2024-05-10 下午3.35.34](https://hackmd.io/_uploads/ryVD0BiG0.png)  |
|          | primary: 18px, 700<br>secondary: 12px, 400                                | primary: 24px, 400<br>secondary: 16px, 400<br>tertiary: 14px, 400         | primary: 14px, 400<br>secondary: 14px, 400<br>tertiary: 12px, 400         |
| 頁面標題 | ![截圖 2024-05-10 下午3.43.36](https://hackmd.io/_uploads/SJjHgUoz0.png)  | ![截圖 2024-05-10 下午4.07.59](https://hackmd.io/_uploads/H1vgI8jMR.png)|![截圖 2024-05-10 下午4.04.03](https://hackmd.io/_uploads/SklO8UifA.png)
|          |   18px, 400                                                                        |             24px, 400                                                              |   14px, 400                                                                        |
                          
                    
 ---                  
**SPX 設計稿文字調整提議：**

text medium 原為 14px weight,400 改成 16px,400

![截圖 2024-05-10 下午4.59.09](https://hackmd.io/_uploads/SyllGwsGA.png)

---
**調整後結果如下：**
- Widget
標題、項目名稱和數值: **16px**, 400
單位: 12px, 400 

    ![截圖 2024-05-10 下午4.40.25](https://hackmd.io/_uploads/ryW9pUoGA.png)

- Sidebar
元件文字: **16px**, 400

    ![截圖 2024-05-10 下午5.10.22](https://hackmd.io/_uploads/ryGqVPiMR.png)

---
:::info
使用者操作時觀看的是整個頁面而非單一元件，截圖僅提供修改前後的對比示意。建議查看 prototype 並與畫面互動，較能完整體驗設計稿。
:::
---
