2024-03-21|閱讀時間 ‧ 約 25 分鐘

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

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

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

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


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


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

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

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


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

Roboto

1. RobotoRoboto 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種字重,且每種都提供斜體樣式,這款字體特別適合用於標題、和品牌設計,同樣提供了極細的款式,非常適用於多語系的網頁用途。


Montserrat

5. Montserrat

這款是由阿根廷設計師 Julieta Ulanovsky 設計的無襯線字體,一樣是廣受歡迎的幾何風格,設計靈感來自於蒙特塞拉特的路標與海報。

這款字體讓人感覺具有現代、科技感,甚至還有些優雅感,同樣提供了9種字重,且每種都提供斜體樣式,被廣泛應用於標題、品牌設計,當看膩了Roboto與Open Sans時,或許可以試試看它,也非常適用於網頁用途。


▉ 圓潤可愛的圓體|無襯線字體

Nunito

1. Nunito

這款字體是由Vernon Adams所設計,具有柔和、現代的外觀,提供了9種字重,且每種都提供斜體樣式,字母L在小寫情況下有個小尾巴,我覺得非常可愛,是一款兼具實用且靈活的字體。


Quicksand


Comfortaa


M PLUS Rounded 1c

2. QuicksandComfortaaM PLUS Rounded 1c

這​三款字體,雖然沒有斜體,但具有多種字重選擇,​也都具備柔和的曲線與良好閱讀性,光是在字母W就有不同的感覺,M PLUS Rounded 1c有種日系的工整感,而Quicksand看起來有種可愛的感覺,Comfortaa 則是有種流暢的線條感,很適合作為品牌設計文字。

這四款各自具有不同的圓潤特色和適用情境,不管是標題還是內文,都很適用。


▉ 如何在Googlefonts尋找款式數量最多的字體?

  1. 點選藍底白字的【Filters】的篩選器按鈕。
  2. 利用滾輪滑至篩選器的最下方。
  3. 利用最下方的【Number of styles】橫向操作,右邊的畫面會隨著條件出現字體。


在Googlefonts也可以看見每款字體的設計師與由來。

在下載字體前翻閱一下,會對字體更有印象,久了也會有自己的愛用字。


希望能為看到這篇文章的人,增添一些字體選擇。

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.