字體與外部環境改變的交互調整

2021-12-22 10:41:00.0

分類: Products and Applications

 

80年代開始的電腦數位字體,在特性上,相較於鉛字,有更容易開發多字重字體家族的特性,但是,在物理限制上,同一個字重若要使用在不同字號大小上,排版出來的顯示效果就需要設計師稍微的留意一下字元間灰度的一致性。

 

我們一直提到字體的使用與外部環境、載體有著絕對的關係,時間拉回到活版印刷鉛字的時代,初接觸活版印刷鉛字的朋友,看到鉛字的規格有著初號、一號、二號、三號、四號、五號、六號等規格,一時間除了看到鉛字大小的差異外,並不理解當中的用途以及鉛字的設計。

 

概略來說,在鉛字印刷的時代,鉛字的設計在同一個造型不同字號的大小上,字元設計的結構佈局具有細微的差異,這可算是近來optical size(視覺大小最佳化)概念的前身了,簡單來說,就是為了讓不同字號的字體可以有最佳的呈現,如:不同的應用情境、更清晰的顯示或具有個性…而做的細微調整設計,以達到文字最佳的顯示效果。

 

傳統上,字體由細到粗的字重變化是字體這個素材在應用時最常用到的屬性,但隨著科技持續的研發創新,字體使用的載體早已不限於紙張材質的媒介,更透過不同印刷方式、油墨特性呈現多元的樣貌,甚至在螢幕上的使用,也進化到肉眼分辨不出螢幕畫素的是網膜等級。

 

我們整理幾個字體應用在外部環境比較常受到影響的因子:

1.     光線明、暗

2.     直射光、反射光

3.     載體的不同:紙本、數位螢幕、紙張材質、螢幕解析度

4.     數位螢幕:白底黑字、黑底白字

 

 

電腦數位字體相較於鉛字印刷時代,在載體、使用環境上都複雜許多,以下,我們舉幾個例子來看看,在不同的情境上,遇到漢字筆畫數差異高的字元並列時,不加思索的直接使用字體,以及瞭解字體規格與特性後,微調後的排版效果,希望透過比較後,讓使用者更加的體認到字體使用上細膩、獨到之處。

 

範例一,文鼎毛楷、文鼎顏楷

文鼎毛楷是一款擁有Bold、Extrabold、Heavy三個字重的書法字體,簡潔有勁的筆型線條變化及長形字構設計,呈現秀麗的書法的風格,適合於小標題、大標題使用。

 

下圖白底黑字為反射光用字情境,黑底白字為直射光用字情境

在左上區塊,我們可以看到「蝦」這個字元的灰度弱於其他兩字,這時候,如果我們將「蝦」單獨這個字元的字重換成Heavy(右上區塊),視覺上,三個字元的灰度是不是就平衡了許多呢?

 

 

左下區塊黑底白字為類似廣告燈箱的直射光用字情境,這時候我們看字的光線會從背板直接射入我們的眼球,筆畫多的字,散發出來的光線量會比較多,因此適當的將筆畫多的字元粗度減細,可以降低視覺上光暈的現象發生,進一步的提升閱讀的舒適度。

同樣的,下方文鼎顏楷的使用也類似文鼎毛楷的原理,由此,我們可以知道,瞭解一款字體的特性、觀察不同的用字情境,適當的選用、挑選是必要的。

 

範例二,文鼎方新書

文鼎方新書是一款保留著黑體的簡練、穩重,也融合著明體的舒適、清雅的一款字體。這個使用情境無論是上方的白底黑字或下方的黑底白字,都是模擬廣告燈箱的直射光用字情境,與範例一不同。

 

範例一我們透過對字元進行字重的挑選,達到視覺上字元灰度的平衡,而方新書這個範例情情境,則是挑選已經預設好的字體設定來使用。當用字的載體環境都相同時(直射光),變數在於淺色底及深色底,我們會建議淺色底使用標準版的「文鼎方新書H7C95_H」,而深色底我們會建議使用有對漢字筆畫數較多的字元進行筆畫減細的「文鼎方新書H7C95D_H」,追求的都是降低視覺上光暈的現象發生,進一步的提升閱讀的舒適度。

 

 

 

不同變數下使用不同規格、不同設定的字體,甚至是加以細節的微調,如字元間距、字元高度等,以達到最佳的視覺效果,這是我們在本篇文章希望讀者可以學習到的地方。

 


Products and Applications

大師手寫、設計師創作的心動字體

看起來整齊、造型元素一致的美術字體,排版使用一段時間後,會不會覺得少了一分「人」的溫度呢?云康行楷、黃陽尖魏、清圓體、香蕉人體、陳森田MORITA、蔡燊軒行書體,有沒有驚訝到這些字體的名稱都是以人為名啊?

 

現行透過造字工具,以筆畫組字方式構成的字型產品,開發上,大多以嚴僅的製程在進行筆畫設計、造型元素、字間結構的統整,整合出具有個別特色的印刷、螢幕顯示字體。若我們往前探究,字體造型的根源會許會追溯到真人手寫的這條軌跡。文鼎公司自2015年開始,陸續與書法家、設計師、插畫家合作,引進具有特色的字體造型進行真跡數位字體的開發,每件產品皆以精品字的標準做產品化,在字體應用效果上,也開創手寫數位字體的先河,透過個別字元寬度最佳化的機制,將筆尖書寫的溫度展示在數位媒介中;目前為止,繁體中文、簡體中文合計共有26個字體產品,11位創作者的合作。

 

以下我們透過幾張圖例來讓大家認識文鼎DC (Designer Collection)系列,精品真跡、設計字型:

  1. 文鼎DC云康行楷,支援語言:繁體中文、簡體中文
  2. 文鼎DC黃陽尖魏,支援語言:繁體中文、簡體中文
  3. 文鼎DC黃陽男神體,支援語言:簡體中文
  4. 文鼎DC云康鋼筆行楷,支援語言:繁體中文、簡體中文
  5. 文鼎DC光璐硬筆楷書,支援語言:簡體中文
  6. 文鼎DC清圓體,支援語言:繁體中文、簡體中文
  7. 文鼎DC蔡燊軒行書體,支援語言:繁體中文、簡體中文
  8. 文鼎DC香蕉人體文鼎DC陳森田MORITA,支援語言:繁體中文、簡體中文

透過上方簡單排版的圖例,應該可以感受到每款字體有著自我獨特的個性,呈現出多種氛圍,如果厭倦的使用筆畫組字的字型,不妨試試文鼎DC系列字體產品: 文鼎DC繁中DC風格包文鼎簡中DC風格包
產品快速連結如下:

 

            

 

如果正在閱讀文章的您也想擁有一款具有個人風格的字體,歡迎您將一起加入心動字體的陣容,將您具有特色的書寫風格做投稿,詳細投稿辦法,煩請點選下方連結:字體合作辦法下載

或文鼎官網「字創」字體專區  

 

Products and Applications

文鼎字重應用分類與建議

一款字體如以家族的方式做呈現,大多是由細到粗以字重(Weight)的面貌呈現出來,這是字體的使用,除了造型的選擇 外最常使用到的情境。

字重的選用與字級的大小具有不可分割的相依性,我們以使用情境做字重應用字級大小的分類,共分成微字型/Micro、 內文/Text、標題/Display三大類,微字型/Micro指的是極小字的使用,內文/Text應用在長文排版的閱讀情境,標題/Display應用在標題、大字、有視覺距離的情境,三個類別字級大小的建議使用分別如下表:

以文鼎UD晶熙黑體為例,我們依據市場需求與開發規劃,將字重由極細到極粗共規劃出完整12個字重,讓用戶能依所處 的需求使用在各種不同情境上,文鼎UD晶熙黑體的字重應用建議如下:

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設計不在探討範圍。