金萱那提的歐文、符號設計:別再叫人家不要使用中文字型的內建英數

那提主視覺

金萱那提正式推出

那提漢字可愛又優雅,兼具明、圓二體特色,並維持筆順邏輯。為求風格整體性,這些特色當然得延續到歐文,與數字、注音等各式符號。然而,這件事情說來容易做來難。脫去了漢字的框架和筆畫,設計師們又得重回手繪來磨練基本功,並且需要面對無數次的混合排版測試。

在異域中添入漢字美感:精心揣摩的歐文、數字設計

設計師從字體書籍、網站中尋找靈感。他們翻閱《文字とタイポグラフィの地平》品味經典歐文設計,細讀《手寫英文書法聖經》重探書寫邏輯,也到 Myfonts、日本字型公司等網站中觀察十多家歐文圓體風格。在觀看的同時,動手做的工夫當然也不可省,得時時藉著手繪來推想那提的表情。

歐文手稿

發想得差不多後,就進入實際製作啦!由於歐文筆畫少,為了在與漢字混排時保持視覺平衡,設計師以漢字最粗豎筆的寬度作為歐文主要骨幹的參考,之後再以此為基礎擬定其他數值。


製作當然有方法和步驟,通常小寫字母 o、n 會先做,再來才做 u、r 等。這是因為 o 可以變成 p、d、q、b 等字母,n 倒過來就變成 u、少一撇則變成 r。等小寫字母都完成後,再開始製作大寫字母。


設計過程總是跌跌撞撞。為了呈現圓潤感,設計師起初刻意將字腔放大,而且做成橢圓形。但在與漢字混排後,馬上發現這樣不但視覺不均,又缺乏筆順,因此把字腔調小,並調平 b、p等字的左弧,才有了現在的那提歐文。


這種對於歐文、漢字的混排考量,也反映在筆畫粗細安排上。那提歐文橫細直粗,不但具備中文明體的特性,更讓它有別於市面上大多數的圓體,是單獨排版也很美麗的設計。

另外像是內轉角的邏輯,以及弧度設定,那提歐文也採用與漢字相同的原則。如 E 中間凸出的副筆維持方角,其餘內轉角則做圓弧;全糖弧度也特別回壓,不做成半圓形,以保持與漢字如出一徹的鈍拙。


值得注意的是,那提歐文所引入的是漢字原則,絕不是直接挪用漢字造型。比方說 J 與丁,雖然都有勾起的筆畫,但設計師會做成完全不同的造型。要記得設計字型的指標之一,是維持閱讀流暢度。歐文基線比中文基線稍高,就是為了確保視覺平穩性。


至於如何權衡筆畫的手寫感,有兩個很好的例子:e 和 b。先來介紹 e 吧!下方排列出三個 e,左邊是最初的設計,採用充滿手感的造型。但考慮到這與漢字風格不一,因此設計師先將起頭改成橫筆(圖中),後來再加粗橫筆(圖右),讓 e 能維持那提的風格,不至於機械感太強。

手寫感設計_e

再來看看 b 。右側圓弧做由細入粗、再入細的變化;左側乍看是一般的豎畫,其實上、中、下三段粗度不一。這些細微調整,都是為了保持字母形狀穩定,讓它維持視覺平衡與清晰度,也更符合書寫筆順。


這種對書寫筆順與渾圓感的強調,也適用於那提的數字設計。可以看幾個比較特殊的數字,如 6、9、8。它們圓中帶硬,字腔並未採用幾何感強烈的橢圓形,更透過筆畫粗細變化與角度的設定,引入手寫軌跡。


有趣的是,那提的數字造型也具備提高辨識度的功能。相信大家看e-mail的時候,多少有過搞混大寫 I、小寫 l 和數字 1 的經驗吧!那提為小寫 l 引入書寫時常見的連筆線條,並為數字 1 設計了起頭的斜向筆畫,這樣就可以免除混淆的困擾啦!


符號也要圓潤感,遇到三角形該⋯⋯?

那提收入了 big 5(大五碼編碼)中的 441 個符號,包含幾何形狀、標點、注音等範疇。還另外增加台、羅拼音符號,目前數量總計 770 個。

設計幾何形狀的時候,視覺微調非常重要。就像漢字碰到的情形一樣,圓形、方形等高的時候,圓形看起來會略小,因此得讓它稍微高一些才行。星形則需要更多的調整,必須將兩側稍微加寬並調整重心,才能讓它與其他幾何形狀並排時,維持視覺上的量感一致。

幾何符號overshoot範例

製作那提的幾何形狀時,設計師還碰到另個好玩的問題。常見幾何造型中,有許多方、尖的基礎造型,比方說三角形必為尖角,那麼該如何為它們融入那提的圓潤感呢?答案在上圖中已經很明顯了,就是:「能轉圓的通通都轉圓!」

出於風格整體性的考量,無論星形、三角形、菱形,設計師一律將那提做成圓角。唯一例外的是製表符號,因為它們是為了排列表格而存在的,使用時必須相互接合,如果全部都轉圓就接不起來了。

表格符號設計

在製作標點符號時,設計師也融入了對圓潤感的追求。那提逗號的凹陷處和收尾處都做成圓形,而且針對每個字重個別調整弧度,半糖的弧直接往上提,全糖的弧則稍微下垂才上提。


就連難以做出變化的句號,那提也在設計時作了微調。比較全糖的金萱與那提,可見那提的句號比金萱大一些。如此調整是因為那提的框架變大了,橫筆也加粗,長篇排版時看起來比金萱滿。唯有將句號放大,它才不會在整體版面中顯得弱小。

標點符號設計_句號

除了幾何形狀、標點符號外,設計師們也花了很多心思設計注音符號。在中文的世界裡,注音的功用有如日文中的假名,它們通常會比漢字小一點,一方便表達它們的附屬性,另方面也有避免使用者誤用的目的。但字一小,在整體排版時就不免看起來較細,所以注音的橫、豎值反而會設定得比漢字大,這樣才不會導致視覺不均。

漢字注音尺寸比較

製作順序當然也有技巧。設計師不會從ㄅ一路做到ㄦ,而是會先製作ㄙ、ㄖ、ㄨ等幾何造型的注音。這樣的做法有兩項好處,一個是協助調整注音符號的大小,讓它們近於幾何造型。另一則是提升製作效率,因為這些符號做完後,將有助於延伸至其他符號,比如ㄙ就可以作為ㄊ、ㄥ的母型。

注音製作順序

前面多次提到的筆順、手寫感,也是那提注音的重要特色。之前設計金萱時,許多注音符號都沿用漢字筆形。但在與美感教科書合作後,設計團隊意識到注音符號多為學童所用,因此製作那提時便改變了注音的寫法,讓它們更符合書寫邏輯。


比方說同樣是漢字「叫」與注音「ㄐ」,將金萱、那提並列比較,可見那提的注音有別於其他字。這正是因為那提注音是針對童書、出版社需求量身打造的設計。其他像是ㄞ、ㄢ等,也都可以看到那提的設計與金萱不同。


就和其他符號一樣,設計注音也要留意視覺調整。不像漢字可以隨使用者需求排列,注音分成聲母、介音、韻母三種,也讓它們在排版時佔據「固定位置」,即聲母通常在上、韻母則在下。這就會影響到符號的樣貌,像是韻母ㄚ,即便單看沒什麼問題,但在排成ㄅㄚ的時候,不僅量感不夠,第一筆略為上凸的造型也顯得相當不協調。

注音協調

講完了歐文和符號,最後要和大家分享另個設計上的巧妙問題,那就是該如何兼顧一套字的風格一致性與單字識別度。其實歐文和符號之間經常有血緣關係,比方說 S、B,加了一豎再稍微縮小,就會變成金錢符號。


這聽起來好像很直觀、也很簡單。但神奇的是,加上去的一豎在字重小的時候沒問題,在字重大的時候卻會影響識別度。因此雖然是同一個符號,那提半糖 ฿ 的設計有別於七分糖與全糖,前者豎畫貫穿,後者僅作上下突出的設計。


識別度的議題也發生在常見符號上,比方說「ㄨ、X、×」,三個在硬筆書寫時都是兩斜畫交叉,不易區分差異。但製作字型卻會強化個別的辨識度,三者分別做「輕重弧筆、內凹錯位、直線打斜」的設計,以免使用者混淆不清。


都過去了⋯⋯美麗的作品誕生了

設計過程中碰到的狀況很多,但問起設計師製作那提最困難的地方,還是無所不在的「圓弧」!比方說全糖追求「矬矬」的表情,這件事每個設計師都知道,卻因為對曲線體悟不同而各自表述。即便有了數值的輔助,大家的感覺還是不一樣,只能努力揣摩,於最後統整階段再逐一細修。

調整弧度這種重複性高且大量的工作,傷眼又傷身可想而知。眼睛痠就算了,手部還得蒙受腕隧道症之苦。不像作金萱只要調骨架,作那提還得拉圓弧、照顧許多細節,製作難度其實比金萱更高。

金萱那提

為了改善這種狀況,設計師當然要想辦法讓自己感到舒服、自在。於是有人買了直立式滑鼠和軌跡球,並計劃換椅子,以緩解手部、腰部痠痛;有人爆吃、也有人狂瘦;還有更新奇的紓壓法,比方說開始養小狗、瘋狂買植物等,都是為了替緊湊的時程壓力帶來一線出口。

但痛苦會過去,美會留下!金萱那提已經正式登場了。現在就到官方網站欣賞他們努力的成果吧