立場新聞 Stand News

justfont x Re-lab 設計師給問嗎? 關於字體與資訊圖表設計

2019/1/15 — 11:32

【文:Ruby】

就快考試了。你打開課本第一頁,看著白底黑字、字級超小、整面排得密密麻麻的表格,瞬間覺得頭昏眼花,一陣眩暈。「夠了、夠了。」管他什麼年表和單字,你直接闔上書本,睡覺!

相信很多人都有這樣的經驗,因此錯失吸收新知的機會。但你可曾想過,只要妥善規劃字體與顏色,替標題、內文、輔助資料區分出輕重,巧妙地引導你的視覺,一切將會有完全不同的結果嗎?讓資訊的理解和傳遞有更好的成效,創造全然不同的閱讀體驗,這就是 Re-lab 在做的事情。

廣告

Re-lab 最近出品的一系列資訊圖表,除了一貫的清晰、美觀之外,字體也使用了金萱全系列。妥善運用不同粗細,創造層次更分明的資訊流。我們很好奇他們設計背後的過程,所以派出 BBC、霞姐、國榕與 Re-lab 的專案經理雁萍、資訊圖表設計師佳媛,一起聊資訊圖表設計與字體設計,以下是我們的對談紀錄:

Q1. 第一眼看見 Re-lab 所設計的茶葉海報時,腦中想的是什麼呢?

廣告

看到茶葉海報,你腦中浮現的是什麼呢?

看到茶葉海報,你腦中浮現的是什麼呢?

BBC :這張海報標示出不同茶款、適合溫度、以及發酵程度等等,搭配得很適合,有顧慮到閱讀性。

霞姐:海報包覆著台灣,有很強烈的主題,選金萱字型很對!但無意間…還是會想看看字做得好不好耶。

Re-lab 佳媛:海報中央是台灣,主題是台灣茶,用的又是台灣茶金萱字型,覺得這張海報很融合~~

Q2. 字體總監平常都在做什麼?

霞姐:字體總監的任務,是要從頭顧到尾。最難的是初始發想和筆型設計,而中間因為在 run 的大多是漢字,所以最重要的是保持團隊合作的齊整化和一致性,畢竟每個人都是不同的,需要克服團隊中的個人差異。

最後是最精彩的「整合」,漢字很多(金萱每個字重都有 13,607 個漢字!),無論是重心和灰度的調整,以及漢字與歐文、符號的字間調整,都需要很大的心力。

霞姐和大家分享製作金萱的三年,雖然只用短短幾句話描述,卻能感受到背後字字細鑿的用心。

霞姐和大家分享製作金萱的三年,雖然只用短短幾句話描述,卻能感受到背後字字細鑿的用心。

Re-lab 雁萍:其實很想知道字型要如何結合財務報表,以財報上的資訊來說,歐文、符號和數字超重要!

Re-lab 在 2014 年為臺電設計的財務報表揭露。符號、數字的排版正是呈現財務資訊的關鍵!

Re-lab 在 2014 年為臺電設計的財務報表揭露。符號、數字的排版正是呈現財務資訊的關鍵!

霞姐:歐文主要是用書寫的方式呈現,而且是用平頭筆的書寫規律。金萱的歐文為了配合中文明、黑二體混合的特質,所以必須添入漢字韻味。

其實設計歐文真的蠻難的,很多眉角,比方說 O ,上下錨點應該要錯開,這樣才能呈現手感。有時候光是一個 O 可能要拉一整天,更何況每天看、每天的感覺可能也不一樣。另外也要注意排版,歐文因為筆劃比較少,所以要弄得比漢字粗一點,這樣比例才會平衡。至於符號的話,像注音符號就是我們特別花時間的地方,整套都有設計過。

金萱 O 的錨點不僅上下錯開,面對不同的字重,錯開的角度也會不同喔!

金萱 O 的錨點不僅上下錯開,面對不同的字重,錯開的角度也會不同喔!

Re-lab 雁萍:符號真的很重要!!!

花了一番工夫,終於在希臘文、符號中融入漢字韻味了!排成顏文字很好看喔! by justfont 設計師國榕真心推薦

花了一番工夫,終於在希臘文、符號中融入漢字韻味了!排成顏文字很好看喔! by justfont 設計師國榕真心推薦

justfont 國榕:真的,尤其是希臘文,有時候根本也不知道自己在做什麼東西。另外像是驚嘆號、小老鼠這些標點符號,也要做出優雅的感覺…後來是靠可愛的表情符號,排成顏文字來調劑,同時也能確保排顏文字很好看。

試著用不同字重的金萱排列符號吧!顔文字最高!

試著用不同字重的金萱排列符號吧!顔文字最高!

Re-lab 雁萍:你們做一組字之前,會先決定它的性格嗎?

霞姐:會啊!心裡會先有藍圖。比方說金萱是明、黑混合。一開始就要想哪一筆用明體、哪一筆用黑體,所有的字都要先定義好筆劃才能開始做,而且也會想說大概要呈現什麼樣式。

Re-lab 佳媛:風格和氛圍也會想嗎?

BBC :會喔!而且這個會影響到筆劃造型的設定。

Q3. 資訊圖表設計師平常都在做什麼?

 

Re-lab 佳媛:做的時候其實會先想最需要呈現什麼資訊。負責處理資訊的人可能會用一張表格,但設計師必須重新詮釋,並且和文案討論,最後才重新歸納成圖。

Re-lab 設計師佳媛和大家分享資訊圖表設計師的日常。

Re-lab 設計師佳媛和大家分享資訊圖表設計師的日常。

Re-lab 雁萍:資訊圖表設計分成美感(設計)、內容(資訊)、整體感包裝(故事)三個部分。一開始會先想一個主題,像是台灣茶、台灣小吃之類的。以台灣茶為例,在找了一堆茶的相關資料以後,會慢慢把溫度、濕度等重要資訊整理出來,然後交給設計師。

資訊搜集與整理,是製作圖表前不可或缺的一環! by Re-lab 專案管理雁萍

資訊搜集與整理,是製作圖表前不可或缺的一環! by Re-lab 專案管理雁萍

Re-lab 佳媛:其實剛開始發想圓形的時候,靈感來源是茶杯。而環繞著茶的相關資訊,有色澤、沖泡溫度、香氣、樹種、茶葉名稱等等,我希望讀者可以從這些方向去找到想要的資訊,所以除了字體外,也另外用顏色去引導視覺。像茶葉海報,一定會先看到台灣,然後從比較大的字跡往內去尋找,如果想知道更多的人會再往下去補充資訊。原則上是讓讀者第一眼、認真看、深入探索都能找到不同的訊息。

看到茶葉海報,是否也令你想起圓形的茶杯了呢?

看到茶葉海報,是否也令你想起圓形的茶杯了呢?

justfont 珮妏:不知道你們如何確認資訊的正確性?

Re-lab 雁萍:我們提供的是資訊,正確性絕對是最重要的。每次有新的合作專案,我們一定會去找相關的專家,像這次是去茶葉改良場找茶專家來協助確認資訊的正確性。

Q4. 設計了那麼多字以後,對 justfont 來說,「文字」的意義是否有轉變呢?

霞姐:有啊!以前做一套字的時候其實比較沒有使命感,只希望它趕快結束,期待有新鮮的東西來刺激。但做了金萱三年,在快要做完的時候,卻有依依不捨的感覺,像之前金萱的分享會就在後面哽咽,但心裡知道還是要讓它飛。我最大的期待,其實是提供好的文字讓大家去用。

Re-lab 雁萍:那平常閱讀的時候,看著字會有不同的感覺嗎?

霞姐:會喔!開始造字以後,閱讀時看的重點真的和一般人不一樣,會想要去研究那套字型做得好不好。

BBC:認知框架改變以後,就會一直去注意那些事情。像我閱讀的時候,會一直在意字的點劃分配得好不好。翻開一本書,如果它的字型真的用得很不好,乾脆就買電子書。

看字看久以後,認知框架也隨之改變了,會注意到一般人不曾注意的細節。

看字看久以後,認知框架也隨之改變了,會注意到一般人不曾注意的細節。

Re-lab 佳媛:我們也會!如果看到別人用五張的版面來呈現一張就可以呈現的資訊,就會很納悶他為什麼要用五張,平常看東西的時候,也會挑惕別人的資訊呈現。

Q5. 金萱好用嗎?使用金萱時有沒有碰到什麼限制?

Re-lab 佳媛:以前市面上都是黑體或明體,所以看到金萱是明、黑混合的字型,就覺得很新鮮,想要使用!

BBC:可是金萱其實蠻可愛的,或許不適合用在訴求太強烈的地方,之前婚姻平權用來強調人數爆衝、達標,就已經算是極限了。

標題用金萱九分糖,強調之外又有可愛的效果。來源:平權前夕.彩虹起義

標題用金萱九分糖,強調之外又有可愛的效果。來源:平權前夕.彩虹起義

Re-lab 佳媛:其實第一次看到金萱的時候,覺得它看起來非常柔和,所以衝突感比較強烈的題材應該不太行。可是事實上金萱已經蠻好用了,它融合明、黑二體的特質,讓它在很多場合都適用。

BBC、字體設計師國榕:其實九分糖就很夠用了,字體粗度夠,就會有強烈、強調的感覺,但當然還是「有點可愛」的強調。

霞姐:金萱已經很好用了。之前只有出到半糖,所以很多人都把半糖用在標題,現在出更多,應該會更好用!但事實上,金萱出品後的好壞,和消費者很有關係,要消費者用得好才可以。

Q6. 私心! justfont 有沒有特別想讓金萱被運用的主題?

霞姐:有!有一次的交響樂影片用得超級優美、高雅,那是在國家音樂廳的演出,當時一看到影片就美到截圖,感覺字體被昇華了!尤其影片又放在網路上,我覺得是另一種呈現方式。

金萱用在國家音樂廳的影片上,超級優美、高雅!

金萱用在國家音樂廳的影片上,超級優美、高雅!

justfont 國榕:金萱可以排元素表!

Re-lab 雁萍:顏文字!

BBC:我們之前有同事提到 ACG (日本動漫),或許做起來還不錯。我最想做的題材其實就是茶葉,這次 Re-lab 的海報已滿足私心~~

Q7. Re-lab 設計資訊圖表時,對字型有什麼樣的要求?

Re-lab 佳媛:字級(大小)和字重(粗度)是標記層級的關鍵,金萱可以滿足字重的需求,另外標點符號的混排也是。

BBC:不知道資訊圖表設計時,是否也有預設觀眾是哪些人?我之前做社群圖文的時候,其實會很擔心別人手機一滑就過去了,所以會很留意要怎麼抓住讀者的視覺。

不只字級和字重,文案內容及位置也會影響資訊圖表呈現。

不只字級和字重,文案內容及位置也會影響資訊圖表呈現。

Re-lab 佳媛:標題醒目很重要啊!這樣才能吸引讀者閱讀下文。另外內文的文案內容、以及呈現的位置也很重要,像海報和社群的呈現就不同。

BBC:那你們會在意一套字型裡面的單一個字好不好看嗎?

Re-lab 佳媛:其實還好耶!我更重視資訊呈現。字型的選用只要符合氛圍就好。

BBC:那你們有希望這世界上能夠存在什麼樣的字型,卻還沒存在的嗎?很多人在說為什麼沒有窄體,不知道資訊圖表設計需不需要這樣的字?

Re-lab 佳媛:其實呈現茶葉海報下方的資訊時,有曾經想過要用窄體。本來想要行數想要控制在四行內,後來「萎凋」的部分一直失敗,所以就放棄了。

BBC:明、黑體是大家熟知的基本字體,你們覺得市場真的飽和了嗎?

Re-lab 雁萍:其實看金萱一路走來,有發現 justfont 確實提高了民眾的字體意識。這種意識成長以後,在這幾年間市場已經慢慢擴大,我會蠻期待還有新的字型。

Q8. 關於造字, justfont 覺得什麼最重要呢?

霞姐:造字就像在雕琢,最重要的是細節。至於後面的階段,更重要是最後呈現出的整體畫面,因為字體一定會整批排版,不會單一被使用。

造字就像在雕琢,細節真的很重要!一點點差異就會影響整個字的感覺。

造字就像在雕琢,細節真的很重要!一點點差異就會影響整個字的感覺。

BBC:要如何掌握整體排版的氛圍?

霞姐:就是看字的重心和灰度。如果重心高低不一,看起來一定很不舒服。筆畫特別粗或特別細也會影響視覺,所以如何保持視覺平均很重要,這也是剛剛所說的整體呈現。不同的字一定要讓它看起來是同一字重,不能亂增減粗細,差一點就很恐怖。

Re-lab 雁萍:最後的調整會調多久啊?

霞姐:像金萱全糖其實六月就做完了,但後來調了三、四個月,製作時程大概有三分之一都是在調整(四個月/十二個月)。這種畫面檢視要靠很多文章的排版,無論直排、橫排都要,像直排就要讓整篇看起來很穩,不能左左右右、影響閱讀。這需要很大的功力和耐力。

BBC:其實不止重心和灰度。像做金萱微糖的時候,就很強調曲線。

霞姐:金萱柔美的特質來自明體。但因為它又混合了黑體的剛毅,所以要透過一些小設計維持住黑體的精神。比方說透過弧度的設計,讓它維持整體感、一致性,不會軟到沒有精神。在培訓設計師的時候,我就會充分和設計師溝通,這樣才能維持整體性。

金萱的勾,不僅有明體的漢字韻味,也藉由弧度設計保持住黑體的精神。

金萱的勾,不僅有明體的漢字韻味,也藉由弧度設計保持住黑體的精神。

霞姐:很好玩的是,做到九分糖的時候,和微糖完全不同。九分糖的問題在於太粗,不知道該怎麼調整筆劃,我只能慢慢地溝通,告訴設計師我想要的形狀,比方說提醒他們要保持住書法特色的點,不能讓點變成炸開的三角形。我必須先告訴設計師理想中的筆型,不然他們會覺得很凌亂。

即便做到粗度極粗的九分糖,心中還是要有書法,千萬不能讓「點」變成炸開的三角形!

即便做到粗度極粗的九分糖,心中還是要有書法,千萬不能讓「點」變成炸開的三角形!

Re-lab 佳媛:恩恩,就像同一件作品,很多人一起做的時候,也會擔心這個情形。

Q9. 關於資訊圖表設計, Re-lab 覺得什麼最重要呢?

Re-lab 佳媛:身為資訊圖表設計師的要點,是不怕處理複雜的資訊,並且能在理解邏輯後,把資訊轉化為想要的形式,而且最好是第一次接觸這個領域的新鮮人也可以立刻懂的形式。我平常接觸到的案子很多,有些甚至是不熟的領域,這個轉換的過程就會是資訊呈現的挑戰所在。

霞姐:其實就像做字一樣,要達到粗細的平衡。你們更辛苦,要在有限的時間和空間做出來。

Re-lab 佳媛:其實不同領域會有不同的辛苦。

霞姐:是啊!而且熟悉情況的時候,通常就結束了,然後必須再次面對新挑戰。不過,這個過程其實也蠻愉悅的,看到消費者的使用就會有成就感,當然也會順便看看自己字有沒有做好就是了。

Re-lab 佳媛:在路上看到自己的字應該很開心~感覺金萱會越用越廣,因為現在有更多的字重了!

BBC 為 justfont 共同創辦人,負責品牌行銷
霞姐為 justfont 共同創辦人暨字體總監
國榕為 justfont 字體課講師、字體設計師

發表意見