提升可讀性的字距調整

2022-01-10 18:13:39.0

分類: Products and Applications

單音、獨體、結構方正的中文漢字,如明體、黑體、圓體等造型,在數位字體設計規格上,無論是應用在印刷或是螢幕顯示,筆畫數少還是多、字重細還是粗,大多將每個漢字字元設計在固定大小的方框內,在使用上,比較少注意到字元間距的排版。

 

我們先前在「定距字型與應用」的文章中題說明過符號/拉丁字具有定距設計(Monospace)與調和設計(Proportional)的設計規格,現在讓我們來看看當漢字與拉丁整合成我們使用的字體產品時,在使用上有沒有需要注意的地方。

 

下圖我們以Adobe 思源黑體與文鼎方新書做為範例,在圖的上方範例,是兩款字體在Illustrator上的排版顯示效果,對於視覺較為敏感的設計師可能會覺得「T」與「y」在字元距離的白空間好像比p, e來的大,下方是經過調整後的結果,整體上,提升了閱讀的舒適度與可讀性,視覺效果舒服多了。

形成「T」與「y」在字元距離白空間的問題,在於大多數中文開發廠商,對於漢字裡的拉丁字,僅對拉丁/符號字元做基本的調和設計(Proportional),缺少對字元做進階的字元間距調整kerning的緣故,以致形成預設的字距對於某些字元組合的不理想,需要手動調整讓所有字元間的空白看起來和諧一致。

 

不過在Adobe軟體上,設計師們可以透過字元面版中「兩個字元之間的特殊字距」功能裡的「視覺」選項,快速的達到類似kerning字元間距調整的效果,主要是Adobe在「視覺」這個功能中,做到可以依據字元的形狀,來調整相鄰字元之間的間距。

目前Adobe CC版本的產品中,設計師常用的PhotoshopIllustratorInDesign在字元面版都支援上述的功能,目前使用這個功能時,漢字與符號/拉丁字元都會起作用,若不希望漢字的字距受到調整,則選取符號/拉丁字元做調整即可,這點需特別留意。

不舒適的字距會讓設計失了分,適當的調整字距有助於閱讀的舒適度與可讀性,不過我們還是要提醒,瞭解所使用字型產品的特性,因應外部環境做最佳化的修正,才能讓字體的這設計元素為設計作品做加分。

 

 

 


Products and Applications

哪些系統、瀏覽器和軟體支援可變式字型(Variable Fonts)?

可變式字型(Variable Fonts)是OpenType字體格式的一種,從2016年發佈至今,與以往的字型檔案的使用經驗不同,只需安裝一個可變式字型(Variable Fonts)檔案,即可使用該字型定義的可變屬性,如字重(weight)、寬度(width)、傾斜(slant, italic)、光學尺寸視覺調整(Optical size)等,變化出一套完整系列字體,不再需要安裝10幾個字型檔案,大幅減少安裝字型套數且有效降低字型檔案大小。

 

可變式字型(Variable Fonts)讓設計師的設計帶來更多的變化,透過彈性的微調字型細部參數,打造出專屬的字型樣式,讓作品更具有視覺吸引力。

 

可變式字型(Variable Fonts)使用需要在支援可變式字型(Variable Fonts)的作業系統與軟體中使用。以下列出各作業系統、瀏覽器和軟體最低支援版本。

 

作業系統

作業系統顯示可變式字型(Variable Fonts)是用字重加樣式方式呈現

作業版本 最低支援版本
Windows 10 1709
macOS 10.13

 

瀏覽器

瀏覽器支援顯示可變式字型(Variable Fonts)的變軸設定(Weight、Width、Italic、Slant、Optical Size),如何將可變式字體使用於網頁上可參考下方應用新知連結中的文章https://ifontcloud.com/index/newknowledge_detail.jsp?id=89

瀏覽器 最低支援版本
Chrome 66
FireFox 62
Safari 11
Edge 17
Opera 53
IE 不支援

 

手機瀏覽器 最低支援版本
iOS Safari 11(需使用iOS11)
Android Chrome 93(需使用Android OreoAPI version 26)
Android Firefox 92(需使用Android OreoAPI version 26)

 

 

軟體

可以利用可變式字型檔案量小,但透過變數軸的調整,為您的作品提供更多的字體面貌。

軟體 最低支援版本
Adobe Illustrator CC 2018 (201710)
Adobe Photoshop CC 2018 (201710)
Adobe InDesign CC 2020(201911)
Sketch
59
Microsoft Word
Office 365
Apple Pages
11.1
Apple Keynote
11.1
Apple Numbers 11.1

 

部分軟體如MS Office 365 Word、Apple Keynote,未完全支援可變式字型的使用,但是使用者仍可使用到可變式字型預設的字型實例,如下圖

 

Windows Office 365 Word

 

Mac Office 365 Word

 

Apple Keynote

 

 

Products and Applications

文鼎字型關於字距的產品規格與應用

若是文鼎字型的鐵粉,有沒有發現近幾年文鼎的字型產品,在安裝後於軟體使用時,在字型選單列裡會出現另一組字體名稱幾乎一樣的字體,仔細一看,差別在於另一組字體名稱中多了「P」、「F」的代號。

 

幾年前,文鼎公司在與外部設計師交流的過程裡,不止一次聽過這樣的聲音,大致是這樣:在文章排版遇到中文全形符號的時後,常常需要花許多時間來調整個別符號的字間距,以免過大的白空間影響著版面閱讀的舒適度。

 

另一方面,真跡手寫數位字體的特色,除了字體造型外,每個字元的寬度、大小也不盡相同,我們將這樣的手感溫度帶入數位字體,讓每個字元在透過軟體排版後,仍然散發著人真人手寫的感受;然而,同時間字體也需要考量不同載體、軟體的相容度,這些都是在字體設計過程中字元規格的設計,連動到字體使用端文字間距調整的情境。

 

近幾年文鼎字型產品,如在印刷排版常會使用到的明、宋、仿宋、楷、黑、圓這幾類的字型產品,而且應用上,會在內文情境出現的字重規格,這些因素下,字型產品就會以TTC(TrueType Collections)的字體格是製作,裡面包含標準規格的漢字、符號以及有對常用39個中文全角符號進行調和(Proporitional)設計

的字型,這些有調整常用39個中文全角符號的字型,在字型選單列表裡,名稱中就會多了「P」這個代號,以下以文鼎書苑宋體為例。

 

而真跡數位化活潑風格的產品的情境剛好相反,通則上,以還原設計師寫字稿時字元的寬度為預設值,此時字元在排版上會呈現文字寬度擬真、有書寫韻律感的視覺效果;在兼容不同軟體對讀取字體的考量下,另外將真跡數位字型漢字的字寬,刻意的做等距的規格,在字型選單列表裡,名稱中就會多了「F」這個代號,以下以文鼎DC陳森田MORITA為例。

 

 

這些字型產品如果在Adobe軟體裡使用,要特別注意字元面版中「設定兩個字元之間的特殊字距」這個設定,若選到視覺,則文字會依Adobe的機制,根據字元的形狀自動調整選取字元間的間距。

Products and Applications

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

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

 

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

 

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

 

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

 

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

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

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

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