---
# System prepended metadata

title: 如何改善字體在介面設計上
tags: [ux日記]

---

###### tags: `ux日記`
# 如何改善字體在介面設計上


字體在介面上是一個很重要的關鍵元素，因為它對使用者來說是一個很重要的訊息。
以下我們照著幾個步驟來改善我們的介面

### 1. 選擇正確的字型

在UI設計上，我們可以選擇無襯線字體（Sans-serif）來做介面設計
要如何找到正確的字型：

[google fonts](https://fonts.google.com/)
[adobe fonts](https://fonts.adobe.com/)
[font Squirrel](https://www.fontsquirrel.com/)
[1001 fonts](https://www.1001fonts.com/)
[fontsly](https://fontsly.com/)
[fontspace](https://www.fontspace.com/)
[dafont](https://www.dafont.com/)


### 2. 字體的放大比例

透過底下的網站來測試字體的比例大小
https://type-scale.com/


### 3. 字體的粗細

字體的粗細也是增加網站的易讀性。
粗體，斜線字體，細體，分別使用的情境有哪些?


### 4. 行距
設計師增加行距來改善閱讀性和易用性。
行距我們通常設定在 130% - 170

![](https://i.imgur.com/4CcwAGC.png)

#### 閱讀軌跡
![閱讀軌跡](https://i.imgur.com/OcZfTiG.gif)

### 5.留白空間

空間留白可以增加易讀性，並且區隔視覺重點
![](https://i.imgur.com/9PeEICs.png)

### 6. 字體顏色的反差

使用透明度來增加易讀性

![](https://i.imgur.com/25DVQ4t.png)





## 參考文獻
https://smad.jmu.edu/shen/webtype/index.html
https://tbrown.org/notes/2012/02/03/molten-leading-or-fluid-line-height/
https://www.instagram.com/p/CDtYXDHn2tg/
https://webaim.org/
https://www.justinmind.com/blog/the-ux-designers-ultimate-compendium-of-free-typography-resources/


