New Knowledge

[文鼎 IN-HOUSE]父親節篇-❤感謝爸爸的字體應用海報

2024-08-07 00:00:00.0

分類: Products and Applications Members Only 文鼎IN-HOUSE



用字體訴說情感，於字裡行間刻畫父愛。

在這重要的日子裡，讓我們應用字體打造父親節主題海報，融合創意排版與現代元素，為節慶增添一抹獨特的感動。


Products and Applications如何將可變式字體使用於網頁上
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

 

VF Variable font 可變式字型
Products and Applications長體
Products and Applications

長體

長久以來，大多數中文漢字數位字體的設計規格都侷限在正方形的方框中，從而產品化出結構方正的字體，然而，當遇到字元寬度無法在有限的寬度空間中做文字排版時，即延伸出「長體」的字體產品，用以縮減排版時整體的字元寬度。早期長體的設計，相對於正方形標準產品的設計規格，保持相同的字體高度，但縮小左右的水平空間，所形成長型的字體即稱為長體，相對於未變形前水平、垂直100%的比例，縮小左右10%比例的字體，稱為長一，縮小左右20%比例的字體，稱為長二…。

為什麼要使用長體字？
長體數位中文字型的數量相對來的少，在早期，由於軟、硬體環境的不成熟，長體字被設計在正方形的方框中，縮小後的左右水平空間以留白的樣貌呈現，在水平橫向排排版應用時，會形成字元間距過大的情況。隨著外部軟硬體技術的提升，新技術、新應用情境的發生，字體設計的彈性更加的廣泛，讓字體設計師的創意可以盡情的發揮。

如前述，規格上，長體是縮小左右比例後的字型產品，在應用上存在經濟效益，此經濟效益說明的是節省版面的空間，具有較窄字寬的長體字，能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中，具有在有限的排版空間上呈現較多字元數的特性，反之，在同樣的版面空間上，可以有較多的字元數來呈現內容。 但是，長體字也不是沒有缺點，畢竟在漢字，尤其是筆畫數多的漢字，在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳，以字元數少的情境，當字體家族具有標準與長體字的設計時，如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版，除了可以凸顯要點外，還可以維持整體風格的一致性；當長體字被獨立使用時，其長形字的特色容易被凸顯出來，用在獨立的標題更顯特色。



長體字型產品的開發，豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發，相對於拉丁字的字體家族設計，除了字重以外，還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計，對應上就顯的單薄。在應用上，若設計案件選擇到具有condensed/ narrow設計的拉丁字，這時，往往找不到合適的中文字型產品做匹配。



自2017年開始，文鼎字型著手設計並發行具有規格化的長體字型產品，在字型設計時，即考量使用行為，為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型，我們在字體名稱上做區隔，透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示，代碼後的數字表示在EM1000的規格下，字寬的比例，如「C80」表示為長體、字寬80%的字型。




目前，文鼎字型具有長體設計的字體家族有：文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體，詳細如下：（Variable Font：表示變數軸支援長體的變化）

長久以來，大多數中文漢字數位字體的設計規格都侷限在正方形的方框中，從而產品化出結構方正的字體，然而，當遇到字元寬度無法在有限的寬度空間中做文字排版時，即延伸出「長體」的字體產品，用以縮減排版時整體的字元寬度。早期長體的設計，相對於正方形標準產品的設計規格，保持相同的字體高度，但縮小左右的水平空間，所形成長型的字體即稱為長體，相對於未變形前水平、垂直100%的比例，縮小左右10%比例的字體，稱為長一，縮小左右20%比例的字體，稱為長二…。

為什麼要使用長體字？
長體數位中文字型的數量相對來的少，在早期，由於軟、硬體環境的不成熟，長體字被設計在正方形的方框中，縮小後的左右水平空間以留白的樣貌呈現，在水平橫向排排版應用時，會形成字元間距過大的情況。隨著外部軟硬體技術的提升，新技術、新應用情境的發生，字體設計的彈性更加的廣泛，讓字體設計師的創意可以盡情的發揮。

如前述，規格上，長體是縮小左右比例後的字型產品，在應用上存在經濟效益，此經濟效益說明的是節省版面的空間，具有較窄字寬的長體字，能夠將更多的字元呈現在一行、標題、段落、區塊文字甚至是頁面中，具有在有限的排版空間上呈現較多字元數的特性，反之，在同樣的版面空間上，可以有較多的字元數來呈現內容。 但是，長體字也不是沒有缺點，畢竟在漢字，尤其是筆畫數多的漢字，在縮小字寬後的辨視度、易讀性會比標準字寬的字體來的低。


中文長體字的使用在直排、字元數少的情境下效果最佳，以字元數少的情境，當字體家族具有標準與長體字的設計時，如標題、引言等都是長體適合發揮的舞台。使用同一種字體風格的長體字做排版，除了可以凸顯要點外，還可以維持整體風格的一致性；當長體字被獨立使用時，其長形字的特色容易被凸顯出來，用在獨立的標題更顯特色。



長體字型產品的開發，豐富且擴展了字體家族。
中文字型產品的字體家族(font family)大多以字重的粗細為基礎做字型產品的開發，相對於拉丁字的字體家族設計，除了字重以外，還有斜體(italic)、長體/窄體(condensed/ narrow)、寬體(extended)等設計，對應上就顯的單薄。在應用上，若設計案件選擇到具有condensed/ narrow設計的拉丁字，這時，往往找不到合適的中文字型產品做匹配。



自2017年開始，文鼎字型著手設計並發行具有規格化的長體字型產品，在字型設計時，即考量使用行為，為了讓設計師/使用者快速的從軟體的字型清單中找到長體字型，我們在字體名稱上做區隔，透過代碼即可辨視該字型是否為長體字。長體字型以代碼C做為表示，代碼後的數字表示在EM1000的規格下，字寬的比例，如「C80」表示為長體、字寬80%的字型。




目前，文鼎字型具有長體設計的字體家族有：文鼎UD晶熙黑體E1、文鼎方新書、文鼎書苑宋、文鼎白玉書體，詳細如下：（Variable Font：表示變數軸支援長體的變化）

字型名稱 字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD ● ○ ○ ● ●
DB ● ○ ○ ●
BD ● ○ ○ ●
EB ● ○ ○ ●
HV ● ○ ○ ●
文鼎方新書 H7 MD ● ● ● ● ●
DB ● ● ● ●
BD ● ● ● ●
EB ● ● ● ●
HV ● ● ● ●
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46		 MD ● ○ ○ ● ●
DB ● ○ ○ ●
BD ● ○ ○ ●
EB ● ○ ○ ●
HV ● ○ ○ ●
文鼎白玉書體 H16 LT ✖ ✖ ● ✖ ●
MD ●
DB ●
BD ●
EB ●
HV ●
EH ●
DBL ●
BL ●
文鼎白玉書體 H32 MD ✖ ✖ ● ✖ ●
DB ●
BD ●

*○:可透過可變式字型(Variable Font)使用


長體字型產品圖例：






 字重 標準 C95 C90 C80 Variable Font
文鼎UD晶熙黑體 E1 MD ● ✖ ✖ ● ●
DB ● ●
BD ● ●
EB ● ●
HV ● ●
文鼎方新書 H7 MD ● ● ● ● ●
DB ● ● ● ●
BD ● ● ● ●
EB ● ● ● ●
HV ● ● ● ●
文鼎書苑宋 HKH32
文鼎書苑宋 HKH46		 MD ● ● ● ● ●
DB ● ● ● ●
BD ● ● ● ●
EB ● ● ● ●
HV ● ● ● ●
文鼎白玉書體 H16 LT ✖ ✖ ● ✖ ●
MD ●
DB ●
BD ●
EB ●
HV ●
EH ●
DBL ●
BL ●
文鼎白玉書體 H32 MD ✖ ✖ ● ✖ ●
DB ●
BD ●

 


長體字型產品圖例：






condensed 長體
Products and Applications文鼎DC云康行楷
Products and Applications

文鼎DC云康行楷

由施隆民教授書寫的文鼎DC云康行楷，字型書寫旨在掌握書法的美感，筆法上以流暢、生動為原則；結構上為了排版印刷的美觀，盡量保持「端莊」的體態。云康行楷在設計時，加入中文排版裡「疊字」效果的巧思，施隆民教授在書寫時，特意創作「相同字的不同寫法」，以展現書法中「不雷同」「不重複」的美感，讓云康行楷更能呈現書法藝術的精神。此外，云康行楷提供了兩種不同書法風格作選擇，其中云康行楷碑帖版，藉由部首共用、改變寫法、增減筆畫等多方式，保留傳統書法運筆藝術之美。

 

本影片透過Adobe Illustrator來呈現云康行楷TrueType(TTF)與OpenType(OTF)兩個字型格式的使用方式，分別示範疊字的選用，以及中文常用全型符號調和設計(Proportional)。

應用設計

人文 行楷 書法 疊字