如果你是軟體工程師,每天可能會花大量時間瀏覽、閱讀、修改程式碼,至少有八個小時會緊盯著編輯器,俗話說「工欲善其事,必先利其器」,適合閱讀程式碼的字型對於工作效率和舒適度來說有很大的幫助,不過那麼多的字型應該要怎麼選擇呢?Dev Fonts 提供超過 36 種開發者會用到的字型,直接在線上預覽程式碼,選擇不同的編輯器配色、程式語言,幫助使用者找出最符合閱讀習慣的字型選擇。
字型工具
Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)
對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google Fonts 和 Adobe Fonts(以前叫作 Typekit)就有提供思源黑體和思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。
360 查字體:查詢電腦裡的字型能否免費商用,避免產生侵權糾紛
如果你還有印象,2018 年微軟字型事件曾鬧得沸沸揚揚,這件事起源於有台灣 YouTuber 表示收到字型開發商的法務通知,告知使用者未經授權使用微軟內建字型(像是華康少女體、華康海報體等等)做為影片字幕,必須支付授權費用(後來原設計商有發表正式聲明表示不會主動向任何營利或非營利單位收取微軟內建字型的使用費)。
Evernote Design 設計師必備懶人包,一站整合各種設計相關素材資源
對於設計師來說,可能手邊有不少平時工作會用到的工具,包括一些靈感來源、素材或相關軟體等等,但感覺上很零散,除非自己整理不然只能自行 Google 或從網路獲取資訊。事實上我認為真正缺乏的是一些將資訊分類清楚整合起來的網站,讓需要的使用者不用花太多時間大海撈針,雖然免費資源網路社群已經在做這件事,但有時候還是覺得不夠清楚或者是範圍太過廣泛,讀者無法很快就找到自己需要的免費資源。
FontSpark 找尋字型靈感工具,隨機套用英文字體即時線上預覽
還記得之前介紹過 ColorSpark 隨機產生配色或漸層色組合,協助設計師在開發網頁或應用程式時獲取配色靈感嗎?其實類似的色彩工具還不少,而且很多都有提供使用者快速隨機選色功能,有時候真的沒什麼想法,透過隨機展示可能會有收穫,如果你又不擅於程式碼,網站也會直接提供對應的 CSS 原始碼,方便帶入樣式表使用。除了配色外,字型也是影響使用體驗的重要因素,現在你有更直覺的方法挑選字型。
Sans Forgetica 可幫助你在閱讀學習上獲得更好成效的免費英文字型
有許多研究指出適當的學習難度有助於提高學習成效,例如使用單字卡記憶單字會比直接閱讀書籍或筆記來得更有用,因此有大學研究團隊設計出一款特殊字型,讓你在閱讀學習上不會「過目即忘」,透過字體獨特性讓讀者能更長時間記住閱讀的內容,使大腦有更多時間參與更深層次的處理,藉此加深印象,亦能提高學習成果,強化資訊在腦中停留的時間。雖然聽起來有點不可思議,RMIT 大學的研究人員對此進行科學實驗,透過導入此字型幫助學生在考試中獲得更好的成績。
CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)
對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。
Font Swap 在任何網頁快速更換字體,從 Google Fonts 選擇免費字型一鍵套用(Chrome 擴充功能)
有時候在瀏覽某些網站時會覺得網站使用的字型很醜、很不好閱讀,除了聯絡網站管理者調整,或使用類似 Mercury Reader 工具來開啟閱讀模式,還有其他更好的解決方法嗎?就我所知有一些瀏覽器外掛可快速更改網站字型,不過對一般使用者來說還是稍嫌困難,若有類似需求,本文要介紹一款非常好用的外掛「Font Swap」,可以快速將網站的標題、內文套用成 Google Fonts 裡任何字體。
Type Anything 從瀏覽器測試建立完美網頁排版,一鍵匯出 CSS 樣式

不怕說出來讓大家知道,其實我對網頁設計很挑剔,尤其在排版方面。如果你經常回來免費資源網路社群,應該會發現這裡更新頻率很高,不單單只有文章內容汰舊換新,連最細節的文字設定我都費盡心思,主要是希望能帶給讀者最好的閱讀感覺。儘管沒有一項設計能符合所有人喜好,我仍在不斷測試、交換中找到最適合大多數人閱讀習慣的排版風格。