Better Font Finder 更直覺 Google Fonts 檢視器,可視化介面比較不同字型

Better Font Finder 更直覺 Google Fonts 檢視器,可視化介面比較不同字型

說到免費字型可能很多人會立刻想到 Google Fonts,早先經常被詬病介面很難用,後來新設計確實讓瀏覽和搜尋字型方便不少,其實也有一些開發者設計出更好用的 Google Fonts 搜尋工具,例如 FontCDN 或直接在瀏覽器中快速更換、預覽字型的 Font Swap,對於測試字型顯示效果很有幫助。此外,透過 FontReach 收錄百萬網站網頁字型使用情形還能得知當今最熱門的字型排名。

本文要介紹一款很實用的網路服務「Better Font Finder」,顧名思義就是更容易發掘好字型的線上工具,Better Font Finder 會以更直觀、可視化方式來顯示 Google Fonts,將各種字型並列在一起,方便找出其中細節差異,而不是像一般字型網站使用專業術語分類。使用者只需要透過網站左側的「篩選器」來調整字型列表,點選字型可連結到 Google Fonts 來找到更多資訊。

Better Font Finder

舉例來說,很多人可能都聽過襯線(Serif)和無襯線(Sans-Serif)兩種字體風格,實際上要挑選字型還是不容易從中找出符合你需求的,因為許多字型設計混雜了兩者的視覺特性,如果是直接看字型顯示效果可能會好一些。

網站名稱:Better Font Finder
網站鏈結:https://jmattthew.github.io/better-font-finder/

使用教學

STEP 1

開啟 Better Font Finder 網站後,已經有一些預設字型顯示在首頁,主要預覽文字可以從中間看到,右側字型名稱點擊後可以開啟 Google Fonts 頁面。如果想要標記字型可勾選最右邊星號圖示,讓你在比較不同字型時更輕鬆一些。

Better Font Finder

STEP 2

最主要功能「篩選器」在網站左側,從最上排挑選襯線字(Serif)或是無襯線字(Sans-Serif),網站中間會有一個大大的提示畫面,相當有趣,從畫面中的 O、I 顯示樣式就能知道這兩種字型風格的主要差異。

Better Font Finder

Better Font Finder

STEP 3

下方可以選擇你要的字體「I」樣式(其實就是字型的風格),例如有些是圓角、有些則是直角,有些會在邊邊加上襯線修飾效果。可以選擇多種樣式來一次顯示於首頁,方便比較各種字型的顯示感覺。

Better Font Finder

此外,也能從字元「O」的風格下去挑選。Better Font Finder 非常視覺化,選擇後中間會出現你剛才選擇的風格。

Better Font Finder

STEP 4

最後,點擊預覽字後可從上方挑選要預覽的不同字串,例如大寫英文字母、數字及標點符號甚至是最常見的 The quick brown fox jumps over the lazy dog ,當然你也可以直接輸入任何預覽文字來查看效果。

Better Font Finder

STEP 5

最後,點擊字型名稱鏈結可以連回 Google Fonts 原始頁面,這部份應該就不用我多做說明了吧?從這裡可以下載字型原始檔,或產生 CSS 來快速套用 Webfont 到網頁裡。詳細使用教學可參考「Google Fonts 網站全新設計,免費下載八百種英文字型」。

Better Font Finder

Better Font Finder 讓我聯想到「Programming Fonts 線上比較 50 種最適合寫程式的等寬字型」,不過後者主要集中於等寬字型部分,利用這個服務可以快速預覽、比較各種字型,尤其在搜尋 Google Fonts 時特別好用,如果喜歡別忘記加入書籤。

分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6251