【字型介紹】文鼎DC清圓體

2019-10-18 15:33:42.74

分類: Products and Applications

文鼎DC清圓體為知名設計師-蔡啟清教授設計的全新圓體字型。清圓體的設計,容易辨識、容易閱讀、設計簡約,表現比較圓、滑及柔和的個性,讓使用更具有彈性 。清圓體適當減小字面佔字身89%,讓字元間距不擁擠,字高稍減,字體更方正,行間也適當。

設計動機
目前過多風格獨特但不適於閱讀的字體,易閱讀的通用字體還是只有黑體字,需要增加更多通用字的設計。現代中文字體字面被加大,當字元間距預設值為0時,看來顯得太緊了。各國中文字體標準不同,但台灣的正體中文標準被質疑。









Products and Applications

文鼎UD晶熙黑體的拉丁造型搭配

中文字體與日文字體同樣都有漢字、拉丁與假名,如果有留意日文字型產品,會發現日文字型同樣的一個字體家族,但有著不同假名、拉丁的造型設計做搭配。

文鼎UD晶熙黑體開發之初也規劃有這樣的設計,亦即晶熙黑體在拉丁的造型上,共有三種造型可供設計師選用,以繁體中文為例,字體名稱分別是:

1. 文鼎UD晶熙黑體HK

2. 文鼎UD晶熙黑體E1HK

3. 文鼎UD晶熙黑體AktivBHK

這三款字型的拉丁造型可以追溯回到原始的拉丁字,分別是AR Dori Sans、AR NewHebe Sans、Aktiv Grotesk;AR Dori Sans、AR NewHebe Sans是文鼎字型近年來在拉丁字設計的代表作之一,除了文鼎內部的字體設計師參與設計開發外,也力邀位於美國波士頓Font Bureau字體公司的總監David Berlow協助設計指導、監修;兩款原生拉丁字皆有自 Light-Ultrablack 9個字重,在與晶熙黑體漢字12個字重搭配時,設計師重新給予字重的設定,細修曲線、調整架構再加入必要的視覺修正,字重擴充至極細的Hair到極粗的Ultrablack(E1版),再依據視覺灰度給予最佳的寬度比例,讓中文漢字、拉丁字搭配出最佳的整體視覺效果。

 

拉丁符號的設計通常會有因應造型、字重而做視覺校正的處理,目的是為了排版上的美觀、舒適性而做。以AR Dori Sans /文鼎UD晶熙黑體HK的符號為例,在數字1和4就有在不同的字重上做視覺校正,經過視覺校正的字型有字高(Font Height)的不同,但隨著字重(Weight)加粗,數字1、4、6將差距會縮小。

文鼎UD晶熙黑體,拉丁以AR Dori Sans做搭配,整體呈現出幾何、工程、現代的氛圍,具有Medium-Heavy共五個最常使用的字重,適合在數位顯示環境下使用,在中文顯示各分句之間停頓的逗號(U+FF0C),設計師簡化漢字逗號的造型,在這裡嘗試著做大膽的簡化設計,閱讀時營造出簡潔時尚的視覺感受。

    文鼎UD晶熙黑體HK排版展示

 

                                                                                       嘉義美術館以文鼎UD晶熙黑體HK做為指示標識用字/角白設計

 

文鼎UD晶熙黑體E1HK,拉丁以AR New Hebe Sans做搭配,整體呈現出經典、傳統、雋永的氛圍,適合使用在書籍排印完整產品共有12個字重可供選用。

                                                                                                                                      文鼎UD晶熙黑體E1HK排版展示

 

文鼎UD晶熙黑體AktivBHK,是晶熙黑體的漢字與英國合作夥伴Dalton Maag 公司的Aktiv Grotesk 進行搭配後的字型產品,共有繁體中文+香港字符集、簡體中文、日文三個語言,每個語言各四有個字重,旨在將晶熙黑體的簡潔與AktivGrotesk乾淨利落加以整合,感受上均勻平穩,視覺連貫而有當代感。文鼎UD晶熙黑體AktivBHK獲得國泰航空選用做企業字型。

                                                                                  TPOGRAPHY 字誌 選用文鼎UD晶熙黑體AktivBHK做為內文用字

 

搭配著不同拉丁造型的晶熙黑體產品,這樣的整合設計罕見於中文字體上,讓設計師們在字體使用時,多了不同設計情境字體選用上的彈性。

Products and Applications

文鼎方新書

文鼎方新書立於黑體,保留黑體的簡練、穩重,融合明體的舒適、清雅,並以高規格審視標題用字之識別性、內文用字易讀性,期望帶給使用者最佳的使用體驗。文鼎方新書造型設計捨棄明體傳統點、捺造型,收筆如眉,清新盈盈,兼容字構的均衡平穩。

因橫直筆寬度的搭配及收筆縮減,文鼎方新書融合黑體和明體的優點,加上反覆雕琢視覺濃淡,排版視覺清晰不突兀。拓展Condensed 系列後,使方新書在排版的表現更為出色,提供使用者多元選擇。

 

本影片透過Adobe Illustrator來呈現方新書的使用方式,分別演示中文常用全型符號調和設計(Proportional)、長體Condensed家族、經過字元灰度調整後的方新書,使用在桃園機場第三航廈的介紹以及方新書的可變式字體(Variable Font)。

 

應用設計

Products and Applications

如何將可變式字體使用於網頁上

時間在2016 年底,Microsoft、Apple、Adobe、Google聯合發佈了OpenType 1.8 可變式字體Variable Font。

 

一個可變式字體檔案可以包含傳統靜態字體家族中的每一個字體。如果使用者端在字體有使用到兩個字重以上的情境,基於可變式字體技術的特性,字體的檔案資料量是可變式字體的一個優勢,我們以文鼎UD晶熙黑體G30字體為例,如果設計案件需要使用5個字重、4個字寬這樣龐大的字體家族,那麼總共20個字體檔案約有160MB,但若採用可變式字體,則僅需20MB,足足減少了87.5%的檔案資料量。

更好的是,設計師和工程師還可以幾乎不受限制的使用可變式字體中的變化。例如字重與字寬的變化,使用者可以在Medium、Heavy或與長體Condensed間透過變數軸或參數的調整自由穿插的使用字體。隨著可變式字體的推出與應用軟體的支援,我們可以預測到可變式字體使用上的好處:為網頁/UI工程師在多字重字體資料量提供更好的壓縮,為設計師在作品上提供更細膩的呈現,以及為讀者提供更精緻的閱讀體驗。

 

可變式字體在2016/11月發佈後,最早支援可變式字體的主要設計軟體是 Adobe Photoshop、Illustrator 和 InDesign。如今,這些軟體內建了多款英文可變式字體,因此,現在數百萬使用 Creative Cloud 的設計師都可以體驗到可變式字體這種新的排版潛力。

 

使用情境如果移轉到Web呢?我們先來體驗一下吧!將滑鼠經過下方文字,看看會有怎樣的效果~

 

這個效果都是可變式字體透過CSS的設定所設計出來的互動呈現,我們分解成5個步驟:

1. 設定Web Font

於網頁內嵌入Web Font JS

 

2. 準備好小篇幅文章,設定於網頁內

例如文字為『文鼎晶熙黑』,將文字用<span>分別組合起來並放入網頁內<span>今</span> <span>晚</span> <span>我</span> <span>想</span> <span>來</span><span>點</span>

 

3. 設定字型名稱\

span {

    font-family:'文鼎VF甜妞體_Wr';

}

 

4. 設定動畫呈現

預設文字字重為 300

span {

    font-variation-settings: 'wght' 300;

}

 

當滑鼠移到文字上時,將字重設定為 600

span:hover {

    font-variation-settings: 'wght' 600;

}

 

5. 加入一些進場、退場效果

設定3秒回到原始字重300

span {

    font-variation-settings: 'wght' 300;

    transition: 3s;

}

 

設定0.1秒字重設定到600

span:hover {

    font-variation-settings: 'wght' 600;

    transition: .1s;

}

 

透過以上五個步驟及CSS的設計,就可在網頁上以文字輕鬆、快速的呈現出動態效果來。在現在的桌機和移動設備上主要的瀏覽器大都已支援可變式字體的顯示,支援的瀏覽器版本整理如下表,因此,我們可以期待,透過更多可變式字體產品的推出,網頁的面貌將在互動設計師與網頁工程師攜手下,帶來許多的視覺觀感體驗。

 

Web browsers

   

Chrome

62+

Safari

11+ (requires macOS 10.13+)

iOS Safari

11+

Firefox

62+ (requires macOS 10.13+)

Edge

17+

Opera

49+

Samsung Internet

8.2+

 

如果對於可變字體在網頁CSS動態效果的設定有興趣的話,下方網址有更多中文可變式字體套用Web CSS設定的使用範例。

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

 

文鼎網頁字型方案

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