字体与外部环境改变的交互调整

2021-12-22 10:41:00.0

分類: 字体产品与应用

 

80年代开始的计算机数字字体,在特性上,相较于铅字,有更容易开发多字重字体家族的特性,但是,在物理限制上,同一个字重若要使用在不同字号大小上,排版出来的显示效果就需要设计师稍微的留意一下字符间灰度的一致性。

 

我们一直提到字体的使用与外部环境、载体有着绝对的关系,时间拉回到活版印刷铅字的时代,初接触活版印刷铅字的朋友,看到铅字的规格有着初号、一号、二号、三号、四号、五号、六号等规格,一时间除了看到铅字大小的差异外,并不理解当中的用途以及铅字的设计。

 

概略来说,在铅字印刷的时代,铅字的设计在同一个造型不同字号的大小上,字符设计的结构布局具有细微的差异,这可算是近来optical size(视觉大小优化)概念的前身了,简单来说,就是为了让不同字号的字体可以有最佳的呈现,如:不同的应用情境、更清晰的显示或具有个性…而做的细微调整设计,以达到文字最佳的显示效果。

 

传统上,字体由细到粗的字重变化是字体这个素材在应用时最常用到的属性,但随着科技持续的研发创新,字体使用的载体早已不限于纸张材质的媒介,更透过不同印刷方式、油墨特性呈现多元的样貌,甚至在屏幕上的使用,也进化到肉眼分辨不出屏幕画素的是网膜等级。

 

我们整理几个字体应用在外部环境比较常受到影响的因子:

1.     光线明、暗

2.     直射光、反射光

3.     载体的不同:纸本、数字屏幕、纸张材质、屏幕分辨率

4.     数字屏幕:白底黑字、黑底白字

 

 

计算机数字字体相较于铅字印刷时代,在载体、使用环境上都复杂许多,以下,我们以文鼎方新书做为范例,来看看在不同的情境上,遇到汉字笔画数差异高的字符并列时,不加思索的直接使用字体,以及了解字体规格与特性后,微调后的排版效果,希望透过比较后,让用户更加的体认到字体使用上细腻、独到之处。

 

范例:文鼎方新书

文鼎方新书是一款保留着黑体的简练、稳重,也融合着明体的舒适、清雅的一款字体。这个使用情境的范例,上方的白底黑字或下方的黑底白字,都是模拟广告灯箱的直射光用字情境,方新书这个范例,是挑选已经默认好的字体设定来使用,当用字的载体环境都相同时(直射光),变量在于浅色底及深色底,我们会建议浅色底使用标准版的「文鼎方新书H7C95_H」,而深色底我们会建议使用有对汉字笔画数较多的字符进行笔画减细的「文鼎方新书H7C95D_H」,追求的都是降低视觉上光晕的现象发生,进一步的提升阅读的舒适度。

不同变量下使用不同规格、不同设定的字体,甚至是加以细节的微调,如字符间距、字符高度等,以达到最佳的视觉效果,这是我们在本篇文章希望读者可以学习到的地方。


Products and Applications

長體

長久以來,大多數中文漢字數位字體的設計規格都侷限在正方形的方框中,從而產品化出結構方正的字體,然而,當遇到字元寬度無法在有限的寬度空間中做文字排版時,即延伸出「長體」的字體產品,用以縮減排版時整體的字元寬度。早期長體的設計,相對於正方形標準產品的設計規格,保持相同的字體高度,但縮小左右的水平空間,所形成長型的字體即稱為長體,相對於未變形前水平、垂直100%的比例,縮小左右10%比例的字體,稱為長一,縮小左右20%比例的字體,稱為長二…。

為什麼要使用長體字?
長體數位中文字型的數量相對來的少,在早期,由於軟、硬體環境的不成熟,長體字被設計在正方形的方框中,縮小後的左右水平空間以留白的樣貌呈現,在水平橫向排排版應用時,會形成字元間距過大的情況。隨著外部軟硬體技術的提升,新技術、新應用情境的發生,字體設計的彈性更加的廣泛,讓字體設計師的創意可以盡情的發揮。

如前述,規格上,長體是縮小左右比例後的字型產品,在應用上存在經濟效益,此經濟效益說明的是節省版面的空間,具有較窄字寬的長體字,能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中,具有在有限的排版空間上呈現較多字元數的特性,反之,在同樣的版面空間上,可以有較多的字元數來呈現內容。 但是,長體字也不是沒有缺點,畢竟在漢字,尤其是筆畫數多的漢字,在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳,以字元數少的情境,當字體家族具有標準與長體字的設計時,如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版,除了可以凸顯要點外,還可以維持整體風格的一致性;當長體字被獨立使用時,其長形字的特色容易被凸顯出來,用在獨立的標題更顯特色。



長體字型產品的開發,豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發,相對於拉丁字的字體家族設計,除了字重以外,還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計,對應上就顯的單薄。在應用上,若設計案件選擇到具有condensed/ narrow設計的拉丁字,這時,往往找不到合適的中文字型產品做匹配。



自2017年開始,文鼎字型著手設計並發行具有規格化的長體字型產品,在字型設計時,即考量使用行為,為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型,我們在字體名稱上做區隔,透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示,代碼後的數字表示在EM1000的規格下,字寬的比例,如「C80」表示為長體、字寬80%的字型。




目前,文鼎字型具有長體設計的字體家族有:文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體,詳細如下:(Variable Font:表示變數軸支援長體的變化)

長久以來,大多數中文漢字數位字體的設計規格都侷限在正方形的方框中,從而產品化出結構方正的字體,然而,當遇到字元寬度無法在有限的寬度空間中做文字排版時,即延伸出「長體」的字體產品,用以縮減排版時整體的字元寬度。早期長體的設計,相對於正方形標準產品的設計規格,保持相同的字體高度,但縮小左右的水平空間,所形成長型的字體即稱為長體,相對於未變形前水平、垂直100%的比例,縮小左右10%比例的字體,稱為長一,縮小左右20%比例的字體,稱為長二…。

為什麼要使用長體字?
長體數位中文字型的數量相對來的少,在早期,由於軟、硬體環境的不成熟,長體字被設計在正方形的方框中,縮小後的左右水平空間以留白的樣貌呈現,在水平橫向排排版應用時,會形成字元間距過大的情況。隨著外部軟硬體技術的提升,新技術、新應用情境的發生,字體設計的彈性更加的廣泛,讓字體設計師的創意可以盡情的發揮。

如前述,規格上,長體是縮小左右比例後的字型產品,在應用上存在經濟效益,此經濟效益說明的是節省版面的空間,具有較窄字寬的長體字,能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中,具有在有限的排版空間上呈現較多字元數的特性,反之,在同樣的版面空間上,可以有較多的字元數來呈現內容。 但是,長體字也不是沒有缺點,畢竟在漢字,尤其是筆畫數多的漢字,在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳,以字元數少的情境,當字體家族具有標準與長體字的設計時,如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版,除了可以凸顯要點外,還可以維持整體風格的一致性;當長體字被獨立使用時,其長形字的特色容易被凸顯出來,用在獨立的標題更顯特色。



長體字型產品的開發,豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發,相對於拉丁字的字體家族設計,除了字重以外,還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計,對應上就顯的單薄。在應用上,若設計案件選擇到具有condensed/ narrow設計的拉丁字,這時,往往找不到合適的中文字型產品做匹配。



自2017年開始,文鼎字型著手設計並發行具有規格化的長體字型產品,在字型設計時,即考量使用行為,為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型,我們在字體名稱上做區隔,透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示,代碼後的數字表示在EM1000的規格下,字寬的比例,如「C80」表示為長體、字寬80%的字型。




目前,文鼎字型具有長體設計的字體家族有:文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體,詳細如下:(Variable Font:表示變數軸支援長體的變化)

字型名稱 字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD
DB
BD
EB
HV
文鼎方新書 H7 MD
DB
BD
EB
HV
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46
MD
DB
BD
EB
HV
文鼎白玉書體 H16 LT
MD
DB
BD
EB
HV
EH
DBL
BL
文鼎白玉書體 H32 MD
DB
BD

*○:可透過可變式字型(Variable Font)使用


長體字型產品圖例:






字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD
DB
BD
EB
HV
文鼎方新書 H7 MD
DB
BD
EB
HV
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46
MD
DB
BD
EB
HV
文鼎白玉書體 H16 LT
MD
DB
BD
EB
HV
EH
DBL
BL
文鼎白玉書體 H32 MD
DB
BD

 


長體字型產品圖例:






Products and Applications

如何呈現國字〇

在使用輸入法輸出中文字時,你的零是以怎樣的面貌呈現呢?是寫成國字「零」,還是「〇」、「O」、「○」、「0」或是寫「0」?在windows作業系統的環境裡,「零」、「O」或「0」使用任何輸入法都可以打出來,但是「〇」用一般系統內建的輸入法像是注音、新注音、倉頡是找不到的,如果您有額外安裝的輸入法,如自然輸入法,鍵入零這個字,則可以透過選單找到「〇」。

上面舉例的這些字元造型都長的很相近,每一個字元在Unicode字碼的定義裡都有一組數字來代表自己,這組數字一般通稱為字碼,這幾個字碼及其代表的意思分別如下:

零:U+96F6,中文漢字零。

0:U+FF10,全形數字零。

○:U+25CB,空心圓圈,幾何圖形。

〇:U+3007,國字零,中日韓符號和標點。

0:U+0030,數字零,屬於基本拉丁字母。

O:U+004F,拉丁大寫字母O,屬於基本拉丁字母。

 

這些造型相似的字元在使用上會有怎樣的差異,下圖我們以微軟正黑以及文鼎UD晶熙黑體做舉例,在使用國字顯示西元年時,我們可以看到使用 U+3007「〇」字元有最佳的排版效果,除了U+3007這個字元本身就是為了與國字一起使用外,以晶熙黑體為例,還會因應字體造型、字重做最佳化的設計。

字碼對於大部份人來說很陌生,而且並不是每個軟體都支援字碼輸入,在word使用微軟注音輸入法時,透過輸入鍵盤上左上位置的「`」這個符號,就可以輸入字碼,輸入「~」會產生一個黃色的小視窗,此時輸入「U3007」按空格就可產出「〇」,要特別注意的是數字不能用鍵盤右方的小鍵盤輸入,一定要用英文上方的數字輸入才行。

如果在繪圖軟體,如Adobe illustrator裡,我們可以透過「字符」工具面版來找到「U+3007,〇」這個字元,或者是用前面word輸入的教學方式,在word中將「〇」呼叫出來,再複製到Adobe illustrator中做使用。

 

分享一個可以快速打出「〇」的方法,讓你不用再花時間找方法要怎麼打出這個字。

1. 開啟瀏覽器到google翻譯的頁面:https://translate.google.com/?hl=zh-TW

2. 選擇中文,會看到右下角顯示「注」,點選下拉選單,選擇「簡體中文(中國)-手寫」

3. 選好後就會出現手寫的輸入框,直接用滑鼠在上面寫「〇」

4. 寫好後就會顯示和「〇」相似的字,選擇紅框即會產出「〇」 

這個方法是不是很簡單,快來試試看吧!

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的書苑宋字型包、繁中旗艦包標準版、繁中旗艦包進階版等方案中。