提升可讀性的字距調整

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

文鼎DC陳森田MORITA

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

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

 

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

應用設計

Products and Applications

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

工欲善其事,必先利其器,在設計師的職涯裡,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

在使用win10無法輸入文字要怎麼辦?

是不是有很多人最近升級到Windows10 20H1與20H2都會覺得輸入法哪裡怪怪的,時而閃退、部分候選字出不來或是直接當機呢!!!這真的是擾民,但又沒辦法不使用,這不是字型的問題,但在微軟還沒針對此問題做修改前,我們可以嘗試幾個步驟,讓你的輸入法起死回生。

 

目前微軟還在研究IME模式問題的解方案,如果使用者發現自己電腦上的輸入法發生異常的情況,不妨先嘗試透過 Windows Update 安裝更新,看看情況是否得到改善,如果沒有的話話,我可以先IME本,暫時決問題如何切換舊版,可以照以下步及可暫時目前的擾。

 

Step1. 左下始功能列點選

 

 

Step2. 點選時間與語

 

Step3. 點選中文() 

 

Step4. 選擇使用中的法,點擊選項

Step5. 選擇一般

Step6. 一般選擇使用舊版的微注音開關開啟

 

 

 

以上的步驟可暫時目前所遇到IME入法問題當務之急,在微軟尚未對此問題更新前,大家不妨試試。