我的網頁設計常用字體｜關於Roboto Flex｜無襯線字體

筱涵｜Hannah

發佈於網頁一角等個房間

更新於 2025/03/20發佈於 2024/03/21閱讀時間約 5 分鐘

每個設計師應該都有一些常用字體清單，可能是依照自身喜好風格或功能性選擇。

認識且能記得字體特性時，在執行設計就能有更豐富的選擇、更靈活的運用。

以下分享一些我自己很常用，也很實用的幾款歐文字體。

✦ 延伸閱讀 - 關於無襯線與襯線字體｜更多的字體知識

本篇內容，以「我的網頁設計使用分享」的字體為主軸。

若想直接以「具有多種字重和變化款式」做為優先選擇的話，歡迎利用左側目錄功能抵達本文最末項【如何在Googlefonts尋找款式數量最多的字體？】

利用Googlefonts本身的篩選功能達成字體選擇，節省時間。

▉ 常用到的百搭黑體｜無襯線字體

Roboto

1. Roboto｜Roboto Flex

第一個一定要提到它，由 Google 為了Android作業系統設計的一個無襯線字型。

以「現代的、有感情的、平易近人」為設計特點，具有6種字重，且每種都提供斜體樣式其俐落的外觀，非常適用於各種數位平台和印刷呈現。

在兩年前突然有了襯線版本的「Roboto Serif」
且後續甚至推出了「Roboto Flex」，一款具有可變字重（Variable Font）功能的字體。這個「可變字重」技術允許設計師自行定義多個字重和特性，讓使用該字體的過程更具有彈性，設計師們能夠更靈活地控制該字型的外觀。

也就是說，設計師可以在googlefonts上面改到飽，滿意了再下載使用。

◆ 關於Roboto Flex「可變字重」功能位置

要使用「可變字重」功能，進到該字體頁面後，請點選紅框圈選的【Type tester】

◆ 關於Roboto Flex「可變字重」功能選項

就會出現「可變字重」功能項目，可利用紅框處介面自行調整字體數值。

雖然設計師在繪圖軟體也可以調整粗體、斜體、尺寸，但Roboto Flex還能讓人同時調整字體細部的字重、字寬、傾斜角度，且所見及所得。

而這些調整過的選項，在網頁字體使用時也都有寫好的語法，設計師甚至能分享自己調整過的Roboto Flex字體程式碼，這個功能讓人深深感受到 Google 很用心對待這款字體！

Open Sans

2. Open Sans

這款字體也是因Google而誕生的，在各種尺寸和解析度下都表現良好，具有5種字重，且每種都提供斜體樣式，且支援多種語言，其均勻的字重和良好的可讀性，特別適合用於長段落的文本，在全球廣受歡迎，經常可以看到它。

Lato

3. Lato

這款是由波蘭設計師Łukasz Dziedzic 所設計的無襯線字體，字體有「夏天」的意思。

同樣具有現代、清晰、溫暖的風格，我覺得它有種可愛俏皮的感覺，這款字體的 a 在斜體的表現樣式和原本不同，同樣具有5種字重，且每種都提供斜體樣式，它和前面兩款不同的是，提供了像髮絲一樣細的款式選擇。

Poppins

4. Poppins

這款字體是由 Indian Type Foundry 所開發，支援多種語言(尤其天城文與拉丁文)，在製作特殊語系時非常方便，其獨特的幾何形狀可能會讓人感覺它與Futura的感覺有點相似，它富有簡約俐落的外觀與9種字重，且每種都提供斜體樣式，這款字體特別適合用於標題、和品牌設計，同樣提供了極細的款式，非常適用於多語系的網頁用途。