現在很多企業公司或品牌都會將自己開發的設計素材開放出來,像是圖示集、字型或是網頁框架等等,使這些項目可以被更多人使用,或是在開源的情況下創造出更多可能性,當然一方面也能提高被看到的機會。之前介紹過「IBM Plex:IBM 設計免費字型下載,三種字體類型及風格指南」就是其中一個例子,或是 GitHub 釋出的開放原始碼免費圖示 Octicons 也是非常好用的素材庫,如果需要圖示可以直接在網路上搜尋。
網頁字型
Radix Icons 小型 SVG 免費圖示集,Figma、Sketch 格式下載
還記得上次介紹的 System UIcons 專為系統和產品開發設計的免費圖示嗎?這類尺寸較小、精緻且適用於介面設計的圖案相當深得我心,在很多情境下可能都派得上用場,如果你覺得之前推薦的圖示集不太夠用,或者剛好缺少你需要的圖示,可以試著搜尋其他替代方案。小型圖示集選項很多,通常是開放原始碼(Open Source)且包含多種常見常用圖片格式,接下來要介紹的免費圖示包含相當豐富的圖案,需要的朋友可以研究一下。
System UIcons 專為系統和產品開發設計免費圖示集,可自由使用無限制
Basicons 用於產品設計和介面開發免費圖示集,186 個基本線條圖案下載
Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)
對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google Fonts 和 Adobe Fonts(以前叫作 Typekit)就有提供思源黑體和思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。
思源黑體 Noto Sans TC 繁體中文網頁字型正式上架 Google Fonts
Sans Forgetica 可幫助你在閱讀學習上獲得更好成效的免費英文字型
有許多研究指出適當的學習難度有助於提高學習成效,例如使用單字卡記憶單字會比直接閱讀書籍或筆記來得更有用,因此有大學研究團隊設計出一款特殊字型,讓你在閱讀學習上不會「過目即忘」,透過字體獨特性讓讀者能更長時間記住閱讀的內容,使大腦有更多時間參與更深層次的處理,藉此加深印象,亦能提高學習成果,強化資訊在腦中停留的時間。雖然聽起來有點不可思議,RMIT 大學的研究人員對此進行科學實驗,透過導入此字型幫助學生在考試中獲得更好的成績。
Iconfont.cn 阿里巴巴免費向量圖示庫,可產生中文網頁字型嵌入網站
Google Fonts 免費字型網站提供相當大量的中英文字型下載,如果要運用於網站,也能立即產生內嵌程式碼,以 Webfont 形式在瀏覽器開啟網頁時快速載入字型檔。一般來說,英文字型運用在網頁中幾乎沒什麼太大問題,但中文因為字型檔案太大、授權等問題,就必須借助一些技術來加快載入速度,避免影響使用者讀取網站,例如使用 Typekit、Google Fonts 載入思源黑體提升文字顯示質感(不過後者仍在測試階段)。
Inter UI 側重於螢幕易讀性的免費英文字型,文字偏小依舊可正常閱讀
免費資源網路社群分享過不少免費字型,絕大部分都是以英文字型為主,畢竟英文字型在製作難度上相對於中文少很多很多,不過中文還是有 Google 和 Adobe 共同開發的思源黑體、思源宋體可免費下載,算得上是近幾年免費中文字型最令人期待的開源計畫。英文字型就更不用說了,Google Fonts 一站滿足,如果你想將中文字型運用到網頁裡,可參考「Google Fonts 推出思源黑體中文網頁字型,改善網頁文字顯示效果」教學說明。