如何將可變式字體使用於網頁上

2021-08-24 10:29:22.0

分類: Products and Applications

時間在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

 


Products and Applications

文鼎書苑宋四軸可變式字型 中文可變字體的新里程碑

可變式字型(Variable Fonts)在2016年ATYPI場合發佈,至今已經過了六年,字型開發商的態度有觀望也有積極開發,文鼎字型屬於積極開發可變式字型的中文廠商,最大的產品特色就是開發同時具備繁、簡中文造型的字體產品,在可變式字型的開發方向亦然,目前已經開發超過30套繁、簡中文造型的可變式字型,應用在設計師族群、中國大陸手機商城等領域。

設計師們應該都有過一個經驗,在Adobe Illustrator顏色面版裡,代表灰階的K值有0-100的設定值可以調整,這幾乎將人眼可見的灰階透過數字的方式呈現出來,進一步的若我們需要四色CMYK的色彩,我們也可以分別透過代表每一個色域的滑桿,將所需要的顏色調整出來;而字型,可以用滑桿的方式,讓設計師調整出所需要的字重甚至是字寬以及其他變化嗎?以目前字型技術領域的創新,數位字體設計進入了一個新的時代,我們可以藉由可變式字型的設計,實現設計師用字的想像。



文鼎可變式字型產品的基礎來自於以自有文字引擎開發的文鼎Infinity Font技術,文鼎UD晶熙黑體是第一個採用這個技術的產品,2012年晶熙黑體導入以內差方式開發字重家族,在當時就以可變式字型的概念,結合文鼎晶熙黑體全球字型設計於2013年獲得日本「GOOD DESIGN AWARD」設計獎「GOOD DESIGN Best100」殊榮,這是全球第一套滿足響應式設計(Responsive Design)的CCJ字型產品。



2021年7月,文鼎書苑宋繁體中文字型產品開始於iFontCloud平台銷售,目前已經有Text、Display、Contrast等屬性設計的書苑宋產品服務使用者使用,最後階段將釋出書苑宋可變式字型以及書苑宋長體字型(condensed)產品,以下我們就書苑宋可變式字型做說明介紹。

本期所要介紹的書苑宋可變式字型,產品名稱為「文鼎VF書苑宋_WrWCO」,關於文鼎可變式字型的字體命名規則,可參閱「從名稱認識文鼎可變式字型」文章介紹,「文鼎VF書苑宋_WrWCO」其最大的特色為一款具有四個變數軸的宋體中文可變式字型,變數軸包含有:

  1. 字重(weight)
  2. 字寬(width)
  3. 對比(contrast)
  4. 視覺大小最佳化(optical size)





應用上,讓設計師可以透過一個字型檔案,運用變數軸的交互調整,就能夠輕易的獲得不同調性設計案件需求的最佳字型。以設計師常用的Adobe Illustrator操作界面為例,使用者可以在字元面板中點擊「變數字體」按鈕,即可看到上述的變數軸,透過調整滑桿的方式,輕易的找到最佳的字體樣式。

瞭解可變式字型原理設計師應該可以知道,具有四軸可變字式字型的中文產品在設計與開發是有很高的挑戰性,然而,在外部的使用環境也存在著許多的挑戰,最常遇到的是軟體的支援與否(哪些系統、瀏覽器和軟體支援可變式字型(Variable Fonts)?),以及電腦硬體效能是否足夠因應可變字體變化時所需的計算效能。以我們的實際測試,在使用中文可變式字型時,會消耗大量的電腦資源,因此,我們會建議在使用中文可變字體時,盡量以一個標題所需的字數為主,做變數軸調整變化的文字字元數不要太多,以免出現電腦卡頓、誤以為是電腦效能不佳。

目前,文鼎VF書苑宋_WrWCO可變式字型產品為嚐鮮版的釋出,為的是帶來更多的創意與可能性,也期望藉由這樣的一個產品,降低設計師在字型調整的時間,透過設計師運用的巧思為設計案件帶來畫龍點睛的效果。此嚐鮮版字中文元數包含大部分的繁體中文,使用時若遇到缺字、無法順利做變數軸的變化或有其他的建議,煩請透過客服信箱讓文鼎團隊知道,我們收集到足夠的使用回饋,將其做正式產品化的重要依據。

目前文鼎VF書苑宋_WrWCO四軸可變式字型已經上架文鼎iFontCloud的書苑宋字型包、繁中旗艦包標準版、繁中旗艦包進階版等方案中。

Products and Applications

文鼎DC云康行楷

由施隆民教授書寫的文鼎DC云康行楷,字型書寫旨在掌握書法的美感,筆法上以流暢、生動為原則;結構上為了排版印刷的美觀,盡量保持「端莊」的體態。云康行楷在設計時,加入中文排版裡「疊字」效果的巧思,施隆民教授在書寫時,特意創作「相同字的不同寫法」,以展現書法中「不雷同」「不重複」的美感,讓云康行楷更能呈現書法藝術的精神。此外,云康行楷提供了兩種不同書法風格作選擇,其中云康行楷碑帖版,藉由部首共用、改變寫法、增減筆畫等多方式,保留傳統書法運筆藝術之美。

 

本影片透過Adobe Illustrator來呈現云康行楷TrueType(TTF)與OpenType(OTF)兩個字型格式的使用方式,分別示範疊字的選用,以及中文常用全型符號調和設計(Proportional)。

應用設計

Products and Applications

字體與外部環境改變的交互調整

 

80年代開始的電腦數位字體,在特性上,相較於鉛字,有更容易開發多字重字體家族的特性,但是,在物理限制上,同一個字重若要使用在不同字號大小上,排版出來的顯示效果就需要設計師稍微的留意一下字元間灰度的一致性。

 

我們一直提到字體的使用與外部環境、載體有著絕對的關係,時間拉回到活版印刷鉛字的時代,初接觸活版印刷鉛字的朋友,看到鉛字的規格有著初號、一號、二號、三號、四號、五號、六號等規格,一時間除了看到鉛字大小的差異外,並不理解當中的用途以及鉛字的設計。

 

概略來說,在鉛字印刷的時代,鉛字的設計在同一個造型不同字號的大小上,字元設計的結構佈局具有細微的差異,這可算是近來optical size(視覺大小最佳化)概念的前身了,簡單來說,就是為了讓不同字號的字體可以有最佳的呈現,如:不同的應用情境、更清晰的顯示或具有個性…而做的細微調整設計,以達到文字最佳的顯示效果。

 

傳統上,字體由細到粗的字重變化是字體這個素材在應用時最常用到的屬性,但隨著科技持續的研發創新,字體使用的載體早已不限於紙張材質的媒介,更透過不同印刷方式、油墨特性呈現多元的樣貌,甚至在螢幕上的使用,也進化到肉眼分辨不出螢幕畫素的是網膜等級。

 

我們整理幾個字體應用在外部環境比較常受到影響的因子:

1.     光線明、暗

2.     直射光、反射光

3.     載體的不同:紙本、數位螢幕、紙張材質、螢幕解析度

4.     數位螢幕:白底黑字、黑底白字

 

 

電腦數位字體相較於鉛字印刷時代,在載體、使用環境上都複雜許多,以下,我們舉幾個例子來看看,在不同的情境上,遇到漢字筆畫數差異高的字元並列時,不加思索的直接使用字體,以及瞭解字體規格與特性後,微調後的排版效果,希望透過比較後,讓使用者更加的體認到字體使用上細膩、獨到之處。

 

範例一,文鼎毛楷、文鼎顏楷

文鼎毛楷是一款擁有Bold、Extrabold、Heavy三個字重的書法字體,簡潔有勁的筆型線條變化及長形字構設計,呈現秀麗的書法的風格,適合於小標題、大標題使用。

 

下圖白底黑字為反射光用字情境,黑底白字為直射光用字情境

在左上區塊,我們可以看到「蝦」這個字元的灰度弱於其他兩字,這時候,如果我們將「蝦」單獨這個字元的字重換成Heavy(右上區塊),視覺上,三個字元的灰度是不是就平衡了許多呢?

 

 

左下區塊黑底白字為類似廣告燈箱的直射光用字情境,這時候我們看字的光線會從背板直接射入我們的眼球,筆畫多的字,散發出來的光線量會比較多,因此適當的將筆畫多的字元粗度減細,可以降低視覺上光暈的現象發生,進一步的提升閱讀的舒適度。

同樣的,下方文鼎顏楷的使用也類似文鼎毛楷的原理,由此,我們可以知道,瞭解一款字體的特性、觀察不同的用字情境,適當的選用、挑選是必要的。

 

範例二,文鼎方新書

文鼎方新書是一款保留著黑體的簡練、穩重,也融合著明體的舒適、清雅的一款字體。這個使用情境無論是上方的白底黑字或下方的黑底白字,都是模擬廣告燈箱的直射光用字情境,與範例一不同。

 

範例一我們透過對字元進行字重的挑選,達到視覺上字元灰度的平衡,而方新書這個範例情情境,則是挑選已經預設好的字體設定來使用。當用字的載體環境都相同時(直射光),變數在於淺色底及深色底,我們會建議淺色底使用標準版的「文鼎方新書H7C95_H」,而深色底我們會建議使用有對漢字筆畫數較多的字元進行筆畫減細的「文鼎方新書H7C95D_H」,追求的都是降低視覺上光暈的現象發生,進一步的提升閱讀的舒適度。

 

 

 

不同變數下使用不同規格、不同設定的字體,甚至是加以細節的微調,如字元間距、字元高度等,以達到最佳的視覺效果,這是我們在本篇文章希望讀者可以學習到的地方。