如何將可變式字體使用於網頁上
時間在2016 年底,Microsoft、Apple、Adobe、Google聯合發佈了OpenType 1.8 可變式字體Variable Font。
一個可變式字體檔案可以包含傳統靜態字體家族中的每一個字體。如果使用者端在字體有使用到兩個字重以上的情境,基於可變式字體技術的特性,字體的檔案資料量是可變式字體的一個優勢,我們以文鼎UD晶熙黑體G30字體為例,如果設計案件需要使用5個字重、4個字寬這樣龐大的字體家族,那麼總共20個字體檔案約有160MB,但若採用可變式字體,則僅需20MB,足足減少了87.5%的檔案資料量。
更好的是,設計師和工程師還可以幾乎不受限制的使用可變式字體中的變化。例如字重與字寬的變化,使用者可以在Medium、Heavy或與長體Condensed間透過變數軸或參數的調整自由穿插的使用字體。隨著可變式字體的推出與應用軟體的支援,我們可以預測到可變式字體使用上的好處:為網頁/UI工程師在多字重字體資料量提供更好的壓縮,為設計師在作品上提供更細膩的呈現,以及為讀者提供更精緻的閱讀體驗。
可變式字體在2016/11月發佈後,最早支援可變式字體的主要設計軟體是 Adobe Photoshop、Illustrator 和 InDesign。如今,這些軟體內建了多款英文可變式字體,因此,現在數百萬使用 Creative Cloud 的設計師都可以體驗到可變式字體這種新的排版潛力。
使用情境如果移轉到Web呢?我們先來體驗一下吧!將滑鼠經過下方文字,看看會有怎樣的效果~
這個效果都是可變式字體透過CSS的設定所設計出來的互動呈現,我們分解成5個步驟:
1. 設定Web Font
於網頁內嵌入Web Font JS
2. 準備好小篇幅文章,設定於網頁內
例如文字為『文鼎晶熙黑』,將文字用<span>分別組合起來並放入網頁內<span>今</span> <span>晚</span> <span>我</span> <span>想</span> <span>來</span><span>點</span>
3. 設定字型名稱\
span {
font-family:'文鼎VF甜妞體_Wr';
}
4. 設定動畫呈現
預設文字字重為 300
span {
font-variation-settings: 'wght' 300;
}
當滑鼠移到文字上時,將字重設定為 600
span:hover {
font-variation-settings: 'wght' 600;
}
5. 加入一些進場、退場效果
設定3秒回到原始字重300
span {
font-variation-settings: 'wght' 300;
transition: 3s;
}
設定0.1秒字重設定到600
span:hover {
font-variation-settings: 'wght' 600;
transition: .1s;
}
透過以上五個步驟及CSS的設計,就可在網頁上以文字輕鬆、快速的呈現出動態效果來。在現在的桌機和移動設備上主要的瀏覽器大都已支援可變式字體的顯示,支援的瀏覽器版本整理如下表,因此,我們可以期待,透過更多可變式字體產品的推出,網頁的面貌將在互動設計師與網頁工程師攜手下,帶來許多的視覺觀感體驗。
Web browsers |
||
Chrome |
✅ |
62+ |
Safari |
✅ |
11+ (requires macOS 10.13+) |
iOS Safari |
✅ |
11+ |
Firefox |
✅ |
62+ (requires macOS 10.13+) |
Edge |
✅ |
17+ |
Opera |
✅ |
49+ |
Samsung Internet |
✅ |
8.2+ |
如果對於可變字體在網頁CSS動態效果的設定有興趣的話,下方網址有更多中文可變式字體套用Web CSS設定的使用範例。
https://ifontcloud.com/index/variablefont_demo.jsp
文鼎網頁字型方案
https://ifontcloud.com/index/plan.jsp
提升可讀性的字距調整
單音、獨體、結構方正的中文漢字,如明體、黑體、圓體等造型,在數位字體設計規格上,無論是應用在印刷或是螢幕顯示,筆畫數少還是多、字重細還是粗,大多將每個漢字字元設計在固定大小的方框內,在使用上,比較少注意到字元間距的排版。
我們先前在「定距字型與應用」的文章中題說明過符號/拉丁字具有定距設計(Monospace)與調和設計(Proportional)的設計規格,現在讓我們來看看當漢字與拉丁整合成我們使用的字體產品時,在使用上有沒有需要注意的地方。
下圖我們以Adobe 思源黑體與文鼎方新書做為範例,在圖的上方範例,是兩款字體在Illustrator上的排版顯示效果,對於視覺較為敏感的設計師可能會覺得「T」與「y」在字元距離的白空間好像比p, e來的大,下方是經過調整後的結果,整體上,提升了閱讀的舒適度與可讀性,視覺效果舒服多了。
形成「T」與「y」在字元距離白空間的問題,在於大多數中文開發廠商,對於漢字裡的拉丁字,僅對拉丁/符號字元做基本的調和設計(Proportional),缺少對字元做進階的字元間距調整kerning的緣故,以致形成預設的字距對於某些字元組合的不理想,需要手動調整讓所有字元間的空白看起來和諧一致。
不過在Adobe軟體上,設計師們可以透過字元面版中「兩個字元之間的特殊字距」功能裡的「視覺」選項,快速的達到類似kerning字元間距調整的效果,主要是Adobe在「視覺」這個功能中,做到可以依據字元的形狀,來調整相鄰字元之間的間距。
目前Adobe CC版本的產品中,設計師常用的Photoshop、Illustrator、InDesign在字元面版都支援上述的功能,目前使用這個功能時,漢字與符號/拉丁字元都會起作用,若不希望漢字的字距受到調整,則選取符號/拉丁字元做調整即可,這點需特別留意。
不舒適的字距會讓設計失了分,適當的調整字距有助於閱讀的舒適度與可讀性,不過我們還是要提醒,瞭解所使用字型產品的特性,因應外部環境做最佳化的修正,才能讓字體的這設計元素為設計作品做加分。
「iFontCloud」APP操作解說
操作步驟
1. 登入iFontCloud會員帳號
2. 進入到字體清單頁面
3. 輸入關鍵字或用條件搜尋字體
4. 安裝字體
5. 字體安裝完成後,開啟有支援custom fonts的APP使用
支援安裝custom fonts的APP
- Pages
- Keynote
- Numbers
- Draft
- Notebook
- Noteshelf
- GoodNotes
- Adobe Photoshop
- Adobe illustrator
- Clip Studio Paint