精選字體

【字型介紹】文鼎書苑黑體的設計理念及應用介紹

設計沿革

文鼎的『書苑』字型商標,早於成立的第二年1991年就申請。

這是文鼎字型創立之初,計畫開發具原創特色的經典明黑字體,能與當時市場流行日本照打字型有所區隔,而特別創立的字體系列。

但這個創作計畫由於台灣市場盜版的嚴重打擊,轉而以日本為主要市場,發展嵌入式螢幕字型而擱置。

在日本市場發展逐漸穩定後,於1999年開始著手原創書苑黑的設計,設計過程斷續進行,直到2003年才較成熟,其特色為較扁形的字型,字面縱橫比為93.5:100。

當2003年完成調整設計的同時,日本C&G字型公司與文鼎合作,承接到微軟日文 Vista 作業系統字型「明瞭 (Meiryo, メイリオ)」的委託設計開發,很巧合的是,「明瞭」也是一個扁型的設計,字面縱橫比為95:100的設計,因此就停下原來書苑黑體開發。

完成日文明瞭字體開發後,再於2008~2011年陸續完成書苑黑Big5 /GB2312兩字集,Bold & Medium 字重開發。

設計原型

文鼎書苑黑體原型設計,字面飽滿,大字腔,於當時以小字面的長型傳統黑體設計市場中,獨樹一格。

而在文鼎字型團隊反覆精煉下,於2003年設計出字構寬扁、筆型簡潔、大字腔設計之書苑黑造型。

完成日文明瞭字體開發後,再於2008~2011年陸續完成書苑黑Big5 /GB2312兩字集,Bold & Medium 字重開發。

設計特色

文鼎書苑黑體,設計採簡潔、大字面、寬扁型、大字腔設計,同級字較清晰不易糊字,容易於螢幕顯示閱讀。







文鼎書苑黑體字級適用範圍

  Text Display
起(pt) 迄(pt) 起(pt) 迄(pt)
Medium 6 12 15 56
Bold 8 14 16 56

 

文鼎書苑黑體風味輪屬性

Medium 傳統、正式、安靜、纖細、剛毅
Bold 傳統、正式、安靜、力量
字體產品與應用

文鼎UD晶熙黑體 TTC格式產品說明

TrueType Collections (TTC)允許將多個性質相近的字型合併為一個檔案,其目的是為了節省字型檔的資料量。以繁體中 文UD晶熙黑為例,針對43個常用全角符號做調和(Proporitional)設計,分別放在兩個不同的字體名稱上,使用者可以依 自己的喜好及需求,選擇常規的全角符號字型或是有標示P的常用全角符號調和設計產品。這兩套不同名稱的字體可以 合併成TTC,漢字和部分符號可共用,只要增加39個調和符號的資料量。合併後的TTC字檔和分開成兩個TTF字檔效果一 樣,卻可節省95%以上的資料量。

在我們對設計師的訪談中,我們聽到一個聲音,有設計師認為在進行長文排版時,全角位符號的字寬常常出現一些尷尬 的排版問題,如川流(river)、凸排等,影響著整體的閱讀感受。在理解設計師的困擾後,我們挑選了39個中文常用全角符 號,進行字寬調和(Proporitional)的設計,有此設計特點的產品,在字體名稱上都會多一個「P」,代表Proporitional的代 號。

以文鼎UD晶熙黑體E1HK字體為例,使用者在安裝字體後,在字體選單中會看到「文鼎UD晶熙黑體E1HK」與「文鼎UD晶 熙黑體PE1HK」兩個字體名稱,這是因為文鼎UD晶熙黑體E1HK字體檔案使用了上方描述的TrueType Collections (TTC) 的機制而呈現出來的結果。

 

下圖為文鼎UD晶熙黑體E1HK 產品使用常用全角符號及常用全角符號調和設計的排版示意圖,選用經過符號調和設計 的字體,排版後漢字、符號呈現出較佳的字寬比例,將有助於段落文字訊息閱讀的舒適性。

字體產品與應用

文鼎字重應用分類與建議

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

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

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

字體產品與應用

文鼎DC陳森田MORITA

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

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

 

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

應用設計

字體產品與應用

文鼎DC香蕉人體

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

 

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

 

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

應用設計

字體產品與應用

文鼎方新書

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

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

 

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

 

應用設計

字體產品與應用

文鼎DC黃陽尖魏

文鼎DC黃陽尖魏體是知名書法家_黃智陽教授,與文鼎合作開發的真跡書法字型;黃陽的字體是書法的專業技術與現代造形特質的新媒合,長時間逐字用心書寫與設計,使尖魏體突顯了瘦金體的利落美,結合了魏碑體的方折感,使字體的使用更具有文化意義與時尚氛圍!黃陽尖魏在設計時,加入中文排版裡「疊字」效果的巧思,黃智陽教授在書寫時,特意創作「相同字的不同寫法」,以展現書法中「不雷同」「不重複」的美感,讓黃陽尖魏更能呈現書法藝術的美感。

 

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

應用設計

字體產品與應用

文鼎DC云康行楷

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

 

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

應用設計

名詞解析 / 設計

字寬/Width

字元的寬度,包含字元左右的空間。數位中文字體裡的漢字,基本上字元寬度是等距固定的,但依字體的風格,如擬人化的手寫字,在漢字上也可以設計成調和(Proportional)的樣貌,讓字體排版更具有溫度感。

名詞解析 / 設計

字腔/Counter

所謂字腔,乃是指筆劃所包圍之留白空間,如「口」字之中間留白,「包」、「勾」中間之留白。 字腔之擴張或緊縮風格,會直接影響字面、重心、清晰度、造型之視覺感覺,為一相當重要之設計要素。

名詞解析 / 產品

微字型

針對極小字5-8pt顯示環境設計的產品,對字元做視覺灰度的調教,降低文字閱讀視覺上灰度的跳躍感,通常不建議在大字號上使用。針對極小字5-8pt顯示環境設計的產品,對字元做視覺灰度的調教,降低文字閱讀視覺上灰度的跳躍感,通常不建議在大字號上使用。

名詞解析 / 技術

OpenType

OpenType 是由 Adobe 和Microsoft聯合開發的字體格式,可以支援替代字、連字及各種文體集。OpenType的字形(glyph)輪廓資料格式有兩種:一個是TrueType格式輪廓,另一個是基於PostScript語言的CFF(壓縮字型格式,Compact Font Format)格式輪廓。前者的字型副檔名為 .ttf、.ttc,而採CFF格式的字型副檔名通常為 .otf。

字體產品與應用

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

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

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








字體設計與發展

Word、Illustrator中有引號該怎麼排版?

您在Word、Illustrator、InDesign中選擇中文字型編輯文字時,是否在輸入英文雙引號(”)或是單引號(’)時會被強制替換成全角引號,造成排版上的困擾(設計師表示頭很痛)。其實這個功能原本是好意可以自動將英文引號取代為中文全角引號,但似乎太過"智慧",有時反而造成麻煩。

讓文鼎小編教你如何解決問題吧!

Word

1.點選「word選項」

2.點選「校訂」→「自動校正選項」→「輸入時自動套用格式」,取消勾選「將一般引號取代為智慧引號」

Illustrator

點選「檔案」→「文件設定」,選擇「文字」,取消勾選「使用印刷體引號」

InDesign

1.選擇要匯入的word檔案時,勾選「顯示讀入選項」

2.取消勾選「使用印刷體引號」

 

字體產品與應用

文鼎4套免費商用字型介紹

文鼎推出4套免費商用字型,提供iFontCloud會員免費使用,無論是個人或商業使用,都可以在文鼎iFontCloud雲字庫免費取得使用,包含2套繁中字型,及2套簡中字型。

文鼎上海宋體_L   AR ShangHaiSongB5 LT
文鼎楷體_M         AR KaiB5 MD
文鼎上海宋_L       AR ShangHaiSongGB LT
文鼎中楷体           AR KaiGB MD

文鼎在2001年及2010年曾提供多套公眾授權字型,給社會大眾作公眾授權使用;2019年文鼎再提供4套免費商用字型,只要你加入iFontCloud雲字庫成為會員,就可以使用iFontCloud Font Manager免費下載這4套字型,可以製作個人文件,或製作商業廣告、文宣品...等,授權使用範圍與旗艦包進階版的授權範圍相同。
 

取得文鼎4套免費商用字型的步驟
1.成為iFontCloud雲字庫會員
2.下載安裝iFontCloud Font Manager工具
3.在iFontCloud 雲字庫即可使用4套免費商用字型



字體產品與應用

如果IG限時動態可以換中文的話?

「2018年10月24日,派傑投資公司最新調查顯示,美國85%青少年每月登入一次 Instagram,首度超越Snapchat的84%」 ─摘自Wikipedia

社群網絡早已滲透在你我的生活中,如同精神食糧般紮根在生活日常。相信大家對Instagram的現實動態功能一點都不陌生吧?24小時就會消失,要是喜歡的人發文沒看到就會覺得搥心肝😢(小心肝~。

 

英文字有多個選擇,中文字選擇好像不多?

發圖不附文,此風不可長!拍了美美圖片再點綴幾句金玉良言,圖文並茂就是好棒棒!不過大家有沒有發現,IG裡面的英文字型有多達五款字型可以選擇,但...中文字型除了系統字之外,就沒有別的選擇了...😱。

 

如果有不同中文字型選擇

由於我們都知道目前中文字的選擇只有一種,那如果選項變多了?可以帶來什麼樣的視覺感受呢?(圖例用字為文鼎字型)

是不是覺得有換有差😁?(在此感謝辦公室夥伴圖片支援),中文字不同帶來的視覺感受也不一樣,如果可以有更多不同的造型搭配更能豐富貼文給人的印象!

 

中文英文配一配

IG提供了5款不同造型英文字,如果說搭配時可以搭配上類似風格的中文字,在視覺上會不會更順眼呢?

以這款IG顯示「現代感」的英文字為例,最大的兩個特色為:筆畫收尾處導圓角;整體視覺比例瘦長。因此搭配中文字時就要考量到這兩個特色,文鼎公司現有字體產品裡,沒有完全符合的中文造型可以搭配。不過現在有了「Variable Font」這項新技術,小編巧手一弄,將晶熙黑體轉了圓角、瘦身一下....

一款可以搭配現代感的新字型就誕生了!可能很多人還沒聽過Variable Font,沒關係,下一篇我們就介紹Variable Font給大家認識!!

其他字型可以怎麼搭配:

字型搭配是一門學問,上面四款IG的現有英文字,小編先用文鼎現有的字型產品或Variable Font搭配,大致做到60分的標準,但仔細下去評估,例如:字體傾斜的角度在視覺上有沒有一致?手寫字筆畫有沒有更接近的筆感特徵?等...,要做到特徵完全吻合,必須要字體設計師評估,特別為這款字量身打造一套搭配的中文字型。不過這樣的搭配是非常費工一件事,除了評估、造型搭配外,設計師還要一字一筆慢慢製作等...,細節很多一項大工程,之後也會寫一篇字型搭配的文章,到時候我們再好好介紹字體搭配的流程吧!

 

上述總結

不管什麼原因,每天都要滑個手機看看IG。如果在中文字型可以增加新的中文字型,想必是可以帶來嶄新的視覺感受!最後就讓我們像IG許願,大神大神!造福廣大中文語系用戶吧!有什麼想法想要討論,都可以在下方留言回覆我們。那我們就期待下篇文章吧!

字體技術

我的網頁為什麼會眨眼

一招教你搞定WebFont網頁瞬閃問題

如果你的網頁使用了Web Font,你可能或多或少會收到網站的使用者告訴你:欸,為什麼你的網頁字會閃一下?這時,你可能納悶什麼叫做閃一下,開了網頁後,卻又沒看到使用者描述的狀況。這其實是CSS加上網路速度的問題:在還未將Web Font字型下載完成前,會先以系統預設字型顯示頁面,等到下載完成才套用到已顯示在瀏覽器的字型上。也因為如此,如果瀏覽網頁的電腦網路不夠快,可能會發生已經頁面載入完畢了,Web Font的內容隔了1~2秒才接著載完並套用,此時,就會發生所謂的「眨眼」現象了。

這樣的問題,我們可以透過加入以下CSS的方式,告訴網頁在確認Web Font狀態前,就算頁面內容載入完畢,也先將文字隱藏起來,直到確認了Web Font的狀態後,再將文字顯示,這樣就可以避免瀏覽網頁時出現文字瞬閃了!

 

code
.arwf-loading body { /*Web Font正在載入中,不顯示文字*/

          opacity: 0;
          visibility: hidden;
}
.arwf-active body { /*Web Font處理成功,直接顯示文字*/
          opacity: 1;
          visibility: visible;
}
.arwf-inactive body {/*如果Web Font處理失敗,直接顯示文字*/
         opacity: 1;
         visibility: visible;
}

字體設計與發展

從UD Font設計談起(下)

UD Font設計概念

UD Font字型產品共有的特徵為容易辨識、容易閱讀、簡約設計等,換言之,就是讓字型在標準規範下,使用者可以直覺的進行識別,毋需耗費時間在視覺的辨視。在閱讀上,眼球的視覺觀感習慣於明體(宋體)、黑體、圓體、楷體等傳統經典風格的字體造型,我們由街坊的招牌、書報、雜誌中使用的字型,即可窺見這四類字體造型的運用最廣泛,最為大多數人接受,其原因就在於這四類字體的筆劃、造型曲度的可讀性與易讀性較高,因此UD Font大多為這四種造型的字體。

UD Font設計概念是近幾年字型設計界在字型設計時所考量一個要點,尤其在日本地區,許多字型廠商都會推出具有UD設計概念的字型;在台灣,除了文鼎科技大力推展UD Font字型設計,推出UD晶熙黑體系列的經典字型之外,其他字型廠商如威鋒數位、justfont等,也在開發及推廣UD Font的設計概念,這對使用者及設計界都是有正面幫助的。

UD Font字型的設計,就是延伸自Universal Design,設計精神包含:識別性、易讀性、設計簡潔。UD Font 字型設計的四個要素:

1. Visibility:文字構成要素易於視認。適度的加大文字的字腔會讓文字更容易視認,尤其是在遠距離或是要在眼睛一瞥間閱讀文字時,效果會更顯著。

2. Legibility:具有高辨識度,不容易誤認(不容易與其他字搞混),這一點對視力不好的人尤其重要。

3. Display adequacy:設計簡約,以減少在低解析度螢幕顯示時產生不平順的曲線。UD Font設計的筆畫造型簡潔化,移除筆頭和筆尾的華麗裝飾造型,以降低在螢幕顯示時產生會干擾視覺的灰階凸點發生機會。

4. Readability:容易閱讀。中文、日文假名及英數文字排在一起時,呈現的字面大小分布之協調性對閱讀的流暢度也是有很大的影響。

UD Font四要素:Visibility, Legibility, Display adequacy, Readability

UD Font 字型設計除了上述的設計四要素,還要考慮字體的空間分佈、筆寬設計、中英文字造型搭配及字面比例等不同要素;無論是經典的黑體、書法風格的隸書體、俏皮風格的美術字體、手寫風格的個性化字體,每套字體的設計背後都有他的設計理念。對設計師而言,在選擇字型時,除考量字體顯示效果外,選擇高可讀性與易讀性的UD Font字型,讓使用者得到最佳的視覺體驗及感受,是字型廠商與設計師共同努力的目標。

字體設計與發展

從UD Font設計談起(上)

何謂UD(Universal Design)

UD (Universal Design)通用設計,又稱為全方位設計,是指不需要經過任何的調整與特別的設計,就能為所有人使用的產品、環境的設計。1950年代,在日本及歐美開始提倡「無障礙空間設計」,為身體障礙者除去了存在環境中的各種障礙。1987年美國設計師Ronald L. Mace,開始使用「Universal Design」一詞,就是說在設計時要從對需求的認知,以清楚易懂的方法,讓我們設計及生產的產品或環境都能在最大的程度上讓每個人使用,不論其年齡或能力。

Universal Design在現代社會中已受到普遍的重視,例如:無障礙低底盤公車,讓老弱婦孺上下公車特別方便;斜取式滾筒洗衣機,讓老人、小孩、身障者都能方便拿取洗衣機的衣服。在台灣「自由空間教育基金會」為了將通用設計的理念向下紮根,已舉辦多次的通用設計獎(Universal Design Award),讓學生藉參與通用設計競賽發想過程中,體會不同類型的人各種不同的需求,導入通用設計,創造出真正能為人帶來幸福的設計。

設計讓產品在最大程度上讓每個人使用,無論其年齡或能力。

 

 

20~30年前,字型大部分都是被列印在紙張等媒體上,無論是鉛字印刷、照相打字或電腦排版印刷,只要字型在紙張上呈現清晰,就已經足夠。但是2000年以後智慧型手機、平板電腦等3C電子產品盛行,人們大量使用3C電子產品來閱讀各種文字訊息,之前使用於紙張媒體的字型,顯然無法完全適用於3C電子產品上,而且電子產品的螢幕解析度越來越高,多年前為了320x240 2英吋QVGA螢幕設計的字型,要使用在2K/4K高解析度的不同大小螢幕上,一定無法直接適用;另外,高齡化社會的來臨,如何讓視力退化的老人,很容易辨識及閱讀,不同媒體上的文字訊息,字型設計就是一個重要因素。

如何讓一套字型符合上面這些需求,在字型設計時,就要導入Universal Design的概念及精神。

 

UD 字型產品共有的特徵為容易辨識、容易閱讀、簡約設計等。

字體產品與應用

關於響應式網頁設計(RWD)

RWD淺談

先前我們在介紹Web Font時曾經提過:「RWD網頁可以針對不同的載具選擇不同粗細的字型,讓小螢幕上顯示的字不會糊成一團」,除了道出了Web Font的優點,也點出了一個好的RWD網站,應該要將載具適合的字級大小考慮進去,而今天我們就繼續介紹,什麼是RWD(Responsive Web Design)式的網頁。

根據Google Developers對於RWD的介紹中解釋:「任何解析度的裝置,伺服器傳的都是同一份的HTML,透過CSS來判定裝置的解析度後,生成適合該裝置大小的畫面顯示。」,因此一個網站可以用電腦、平板、手機來瀏覽,且都會得到最適合的畫面與內容。

任何解析度的裝置,伺服器傳的都是同一份的HTML。

 

早在RWD概念盛行前,就已經有許多購物與行動網站注意到,根據電腦螢幕所顯示的內容架構,可能不適合在手機上,因此他們購買了第二個網域,建立專給手機的頁面,以COSTCO網站為例,如果你看到的網域包含了特殊的前贅字(http://m.costco.com),可能就是這樣的方式。但早先HTML與CSS並未發展到目前的階段,因此這樣形式的網頁多採WML(Wireless Makeup Language)語法所編寫,然而該語法是以XML為基礎,有點類似簡易版的HTML,因此在許多功能的撰寫上都會受限。

在智慧型手機流行後,各家瀏覽器廠商如Chrome, Firefox, Safari, Opera等,也都有針對手機版本所開發的瀏覽器,這時,開始有了以偵測瀏覽器是哪種版本來決定對應內容的方式,而這種方式由於各廠商與各版本間有太多不同的組合,因此在會需要針對許多的版本做設定,甚至要定義不同的手機解析度就是個大議題。

因此在HTML5和CSS3出現之後,許多可以自動偵測螢幕大小與根據大小調整內容比例的語法,就成為了RWD概念的核心技術:簡單的說就是取得裝置的螢幕大小,設定每個標籤的內容該出現的比例與位置。這樣的方式,讓網站工程師只需要針對一個網站開發,就可以讓拜訪者(Visitor)根據其裝置得到最佳的畫面呈現,除了畫面美觀外也更有效的吸收網站資訊,因此成為了近年來製作網頁的熱門詞彙。

HTML5和CSS3是RWD概念的核心技術。

 

Load More ▼