字體在Adobe軟體字元面版中的呈現

2021-11-09 09:58:03.0

分類: Products and Applications

工欲善其事,必先利其器,在設計師的職涯裡,Adobe軟體的使用一定是佔有一席之地,Adobe在推出Adobe Creative Cloud雲端軟體服務後,設計師們可以透過合理的價格,使用到Creative Cloud 完整應用程式裡20多款軟體,當中最常被使用到的Phothshop、InDesign、illustrator這三款軟體,我們來看看「字體」在這三款軟體的「字元」面版中呈現出哪些雷同與不雷同。

這三款軟體中,若要使用到字體,普遍上都會使用「字元」面版來查找合適風格、語言的字體做使用,但有沒有覺得使用上的體驗好像沒有不一樣,但又好像有哪裡一樣的感受呢?

據我們的觀察,確實,三款軟體對於字體在字元面版內容的呈現有以下些微的不同:

1. 字體語言的排序

2. 字體名稱的呈現

3. 可變式字體(變數字體/Variable Font)的呈現位置

「最近使用的字體」是字元面版下拉出來第一個出現的區塊,如上圖,我們就可以看到上述第二兩點所描述的不同處。InDesign在字體名稱的呈現與其他兩者不同在於繁體中文以外語言的字體,皆以英文字體名稱呈現,也就是說,今天我們若是在繁體中文作業系統使用繁體中文介面的InDesign,若排版文件需要使用到如簡體中文、日文等語言的字體,那我們可能就會辛苦一點,要去判讀此兩個語言的英文字體名稱來做字體的選用,還好Adobe在面版中,預設有字體造型sample的呈現,可以降低從英文字體名稱辨視字體的難度。

在常用字體區塊之後,基本上是依語言做字體順序的排序:

Phothshop:Emoji→繁體中文→拉丁→日文→韓文→複雜語言(Arabic, Hebrew, Devannagri, Thai…)簡體中文

InDesign:繁體中文→簡體中文→拉丁→日文→韓文→複雜語言(Arabic, Hebrew, Devannagri, Thai…) 

Illustrator:Variable Font→繁體中文→拉丁→日文→簡體中文→韓文→複雜語言(Arabic, Hebrew, Devannagri, Thai…) 

我們可以看到上方整理的資訊,Emoji與Variable Font排在語言使用之前,而Illustrator特別將Variable Font獨立出一個區塊,排在「最近使用的字體」之後的第二個順序做呈現,而Phothshop、InDesign則是把Variable Font和語言視為一個整體,混合在一起做排序。

 

這些都是使用上觀察而來的紀錄,而我們在這裡單純討論字體在字元面版上的呈現,UI設計不在探討範圍。

 

 

 


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

文鼎DC香蕉人體

來自宇宙的香蕉人學寫字,慢慢地寫、緩緩地進步,他的字,有點呆、有點萌。這是文鼎字型與插畫家_香蕉人(林柏辰)合作開發的手寫字,所有字體的內容都是香蕉人手寫繪製,再由文鼎字型作數位化,產品同時涵蓋繁體中文、簡體中文。

 

手寫字體具有溫暖的感受,在數位化的過程中,我們思考傳統上數位字型的規格以及用戶的體驗,最終,將香蕉人體漢字定距字與調和字整合在一個字型檔案裡,使用者透過字型選單選擇適合情境的字型做應用。

 

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

應用設計

Products and Applications

認識文鼎字體的命名

文鼎公司成立滿三十年,回顧文鼎字型產品,主要投入在東亞的字型開發,包含繁體中文、簡體中文、日文這三個語言字型;另外,還有其他如泰文、阿拉伯文、印度文及歐文字型。在這些語文當中,又隨著各國資訊處理發展演變及國際標準化規範的潮流,衍生出不同技術規格的產品,如我們熟悉的繁體中文,在字集規格面,可分為Big5、Unicode 2.0、Unicode 3.0…等規格。因此,我們可以理出一個字體命名的大方向:先看語言、字集,再延伸其他字體屬性。

 

 

 

技術規格面主要包含字符集(也常稱為字集, Character set)、字型格式:

字符集以語言為基礎,在繁體中文、簡體中文、日文有以下常用的規格:

繁體中文:Big5、Unicode 2.0、Unicode 3.0

簡體中文:GB2312、GB18030

日文:JIS X 0208、JIS X 0213、A-J1-3

 

字型格式主要分為兩大類:TrueType、OpenType,其中,TrueType又包含了TrueType Collections(TTC),這是一種允許將多個字型合併為一個字型檔案的格式。TrueType格式的字型產品,在產品名稱後面大多加上B5、 HK、U30字符集的縮寫來傳達產品語言的支援情況,但在OpenType格式的字型產品,我們以字元數量的多寡為基礎,分為Std、Pro兩個系列,以繁體中文為例,標準的Big5字符集產品在OpenType格式的字體名稱後會加有Std標示,而Big5+HKSCS(香港增補字符集)則有Pro的標示,如:文鼎UD晶熙黑體 B5Pro。

 

接著,我們就可以來細看一些字體名稱上的代號概述:

表示語言/字符集

G30:簡體中文GB18030字符集,如:文鼎UD晶熙黑体XG30 (若簡體字集沒有標示G30則為GB2312字集)

U30:繁體中文Unicode 3.0字符集,如:(若繁體中文沒有標示U30則為Big5字集) ,如:文鼎UD晶熙黑體U30

HK:字集中含有香港字符集,如:文鼎UD晶熙黑體HK

JP:日文JIS X 0208字符集,如:AR UDJingXiHeiJP

KR:韓文 _KSX1001字符集(Hangul Only) ,如:AR UDJingXiHeiE1KR 

 

表示字型屬性

C:長體(Condensed)字體設計,EM 1000下的字體設計規格,提供C80、C90、C95等3種字寬變化,C80表示字面框的寬度為高度的80%,如文鼎方新書H7C80。

X:EM 1000下的字體設計規格,字體字面寬縮小成95%的版本,形成長型字的字體感受,如:文鼎UD晶熙黑体XG30

E:E (加一碼數字)產品中的英歐文符號為另一中種造型的設計,以文鼎UD晶熙黑體為例,標準產品搭配 AR Dori Sans造型的英歐文,而文鼎UD晶熙黑體E1搭配AR NewHebe Sans造型的英歐文。

 

P(適用於TTC格式):

繁體中文、簡體中文_字型中的常用全角符號為調和設計(Proportional),如:文鼎UD晶熙黑體PHK。若無標示P,則字型中的全角符號為定距設計(Fixed pitch),如文鼎UD晶熙黑體HK:

日文_除全角符號外,日文中的KANA符號也做調和設計(Proportional) ,如:ARマーカー体P。

 

F(適用於TTC格式):中文手寫字體漢字字寬維持定距全角的寬度設計,如:文鼎DC香蕉人體F。

 

Display:標題用字,字型設計特徵符合標題、大字的使用情境,如:文鼎書苑宋DisplayH16。

 

Text:內文用字,字型設計特徵符合內文、長文排版的使用情境,如:文鼎書苑宋TextH32。

 

H16、H32、H46、H62:絕對值,字型設計規格,描述在EM 1000的設計規格下,橫筆的粗度為上述數值單位的呈現,如:文鼎書苑宋TextH32。

H7:比例值,字型設計規格,表示字型設計上,橫向筆畫的粗度為直向筆畫粗度的70%,如文鼎方新書H7。

表示字重

HR: Hair 

TH: Thin

L / LT: Light 

M / MD: Medium 

D / DB: Demi Bold 

B / BD: Bold 

E/ EB: Extra Bold 

H / HV: Heavy 

EH: Extra Heavy 

DBL: Demi-Black 

BL: Black 

UBL: Ultra Black

 

表示產品設計分類

DC:Designer Collection,為文鼎與外部設計師、書法家、插畫家合作開發的字型產品,如:文鼎DC清圓體。

UD:UD Font (Universal Design Font)字型設計,就是延伸自Universal Design,設計精神包含:識別性、易讀性、設計簡潔,如:文鼎UD晶熙黑體。

 

表示可變式字型

Wl, Wr, Wu: 字重(weight)軸的極細段(light), 中間段(regular), 極粗段(ultra)

W: 字寬(width)軸

C: 對比(contrast)軸

G: 中宮(zhong gong)軸

H: 字高(height)軸

O: 光學尺寸視覺調整(optical size)軸(微字型, 標誌用字濃淡度調整)

S: 樣式(style)軸

 

多種字型名稱代號的定義,代表著產品設計因應著外部變化的腳步,讓字型產品輔助使用者,為設計帶來最佳的視覺效果。