可變式字型variable font在設計上的應用,以明/宋體為例

2021-05-17 23:27:31.0

分類: Products and Applications

可變式字型(variable font) 發佈於2016年,發佈至今,我們觀察到許多字型設計公司逐漸地發布自家的可變式字型,經過這幾年的推廣,最近我們從問卷調查上發現國內的設計師對這樣的產品仍然感到陌生,今天,我們藉由幾個演示,再一次讓大家認識可變式字型。

 

可變式字型的特色在於可隨使用者的設定或是依應用程式的自動判斷,變化出將近無限種的字體屬性組合。只需要一個字型檔案,就可以無間段調整該字型提供的字重、字寬或對比等可變屬性,讓設計師用字的創意不再受侷限,同時也減少了龐大字體家族所需要的大量記憶體空間。

 

不知道大家有沒有思考過一個問題,字體設計師都是在60公分距離前的螢幕做字體設計,使用時,有可能近到20公分,遠則超過5公尺以在使用的字體,這樣的應用情境,字體的設計如果都一樣,合理嗎?設計師如果在用字的時後,思考到這樣層次的問題,有沒有產品可以上設計師挑選使用呢?

 

通常在進行字型開發前先會決定使用目的,而在選用字型時,會依情境來選用造型,在使用明/宋體這類的字型時,通常橫向筆畫的粗細是固定的,在可變式字型裡,可以將橫向粗細的變化設計在可變式字型的變化軸上,使用者除了傳統的字重外,還可以使用到橫向筆畫(對比/Contrast)變化軸的調整。下方以文鼎書苑宋體書苑宋作為舉例,因應複雜化的使用情境,書苑宋設計了四個橫筆粗細的產品,為橫筆寬度16(EM Square =1000 ) 到62 的響應式設計,使用者可依據使用配方建議,從內文到標題,從紙本到屏幕,因應不同情境選取適當字型使用。

 

有個多個橫筆粗細對比這樣的產品,我們思考一下,如果在設計這樣的指示標示,怎麼樣可以讓閱讀訊息用的字體在畫面上呈現的更好呢?畫面上『南京三民站』這幾個字分別使用思源宋體(上)與文鼎書苑宋體(下)做展示,我們可以看到這五個字元筆畫數並不算多,但『三』這個字的筆畫相對起來特別少,整體看起來視覺灰度少了一級。

這時候如果我們要對他加粗,通常的作法就是在AI裡轉外框,加筆畫,但這樣一來,字就變成圖,不是字了,會增加後續版本維護的困擾。使用書苑宋可變式字型的微調後的成果,我們來看看調整前後的差別,經過適當的調整後,每個字元的視覺量感變得更平均了。

我們認為,設計師寶貴的時間應該要用在設計思考上,如果字體可以協助設計師解決問題,節省設計師的時間,那就是我們對設計產業的幫助。關於更多可變字型的資訊可參閱下方文鼎iFontCloud雲字庫的展示說明

https://ifontcloud.com/index/variablefont.jsp


Products and Applications

「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
Products and Applications

文鼎DC陳森田MORITA

文鼎DC陳森田MORITA是文鼎字型與插畫家_陳森田合作開發的手寫字型,所有字體的內容包含中文、英歐文、符號等,都是陳森田手寫繪製,再由文鼎字型作數位化產品設計,產品同時涵蓋繁體中文、簡體中文。

陳森田MORITA_B體將漢字定距字與調和字整合在一個字型檔案裡,讓,森田手寫字的手感、Q感及溫度可以呈現出來。使用者透過字型選單選擇適合情境的字型做應用。

 

本影片透過Adobe Illustrator來呈現文鼎DC陳森田體的使用方式,演示漢字定距與漢字調合設計排版上視覺的不同。

應用設計