如何讓你的報告「看」起來更專業?決定文件版面的 4 項要素 | TechOrange 科技報橘
Search
Close this search box.

如何讓你的報告「看」起來更專業?決定文件版面的 4 項要素

Elements of Typographic Style 內頁

電腦字型與文書處理軟體的發明是劃時代的。因為這賦予所有具基本使用電腦能力的人出版自己的印刷文件。然而,我們都忘記排印原本是一件非常專業的事情,需要靠大量實踐所累積的細微知識完成;大規模業餘化的結果雖然使知識、訊息加速傳遞,卻也使有缺陷的設計大量增加。但還好在印刷時代的工匠留下許多實驗成果,能在排印文件上給我們指引。

在探討排印之前,我們不得不追溯到西方字型學幾百年來經過不斷實驗累積的理論、通則。Elements of Typographic Style 就是一本專門系統化整理西方字型學理論的專注。作者 Robert Bringhurst 提到版面若要有視覺韻律感以及舒適的比例,其的重點在於「顏色」。這不是說紅墨水、綠墨水的顏色,而是黑字於白紙上所構成的明、暗程度。明暗的平衡或不平衡,通常是下列幾個度量影響的:

  • 字本身的設計、
  • 字母之間的距離、
  • 單字之間的距離,以及
  • 每一行之間的距離。

以上這些影響版面明亮平衡的因素,是除了視認性與編排邏輯性之外,字型學的基本重點之一。以下我們藉由這些變項討論怎麼排出一個美觀合宜的文件版面。

  • 字本身的設計

內文字的線條筆劃粗細、結構與佈局設計會影響版面整體的明暗度。舉中文來說,明體與黑體是兩種風格截然不同的設計。一般而言,中文字普遍而言是橫筆多,豎筆少,而明體設計是豎筆粗,橫筆細,所以就算細的橫筆模糊,還是可以藉由較粗的橫筆來辨識;這個特徵確立了明體較容易辨識的視覺功能。

宋體磨損效果模擬,由 But Ko 整理。

而黑體的特徵是線條等粗,不像明體有粗細變化。一般來說,用相同粗細等級的字體排列,黑體的視覺印象仍會比明體「亮」許多,畢竟其線條是等粗的,平面上黑色的空間較多。印刷書籍較常使用明體也是因為這個原因──中文字橫筆較多,由明體(橫筆細)構成的版面顏色不會太亮,對人眼負擔較小,又因豎筆稍粗而不犧牲辨識度,對長時間閱讀很有幫助。

採用同樣粗細的 Adobe 明體與信黑體 W3 比較明暗度。後者顯著比前者「亮」,或是一般中文傳統上說的較「黑」。

不過,螢幕顯示又是另一回事了。明體纖細的橫筆在某些高解析度螢幕上看起來可能更細,例如 retina 螢幕上,未經特殊設計的明體一般來說都纖細如針,看來頗刺眼;相較之下,黑體線條粗細均一,通常不會有部分筆劃過細的問題,亮度也比較高,是比較常被使用的電子螢幕字型,例如 justfont blog 內文使用的信黑體

(然而,Windows PC 因為螢幕解析度與字體渲染引擎的設計問題,有些地方還是比較適合使用具有特殊設計的新細明體。)

但是不論選用哪種字體,都還是建議觀察一番:字的筆劃會不會糊在一起?媒介是什麼?如果是紙本,不妨印出來讀讀,眼睛是否覺得舒服?這並沒有標準可以參考,唯一的標準就是自己的眼睛了。

  • 字之間的距離

西方字型學是一個重視測量的學問。在講距離之前,不妨先探討“em”的概念。 “em” 念為 “m” 或 “emma”,顧名思義就是一個 “m” 的寬度。他是彈性的單位,字號有多大,“em”就是多大。

撇開 Kerning 不談(太複雜,可能要另立專篇),英文在排版上有字距 (word-spacing) 與字元間距 (letter-spacing),差別很直觀:字距就是單字之間的距離,字元間距就是字母間的距離。

Elements of Typographic Style 中,作者指出,若內文設定為左右對齊 (justify) ,那麼一個合理的最小字距就是 M / 5,也就是該段落字號大小的 1 / 5,大約是同一字型中 “t”的寬度。例如當字號大小為 12 pt 時,合宜的最小字距是 12 除以 5,也就是佔 2.4 pt;如果太勉強,那麼取 M / 4 的 3 pt 也是可接受的。

理想的狀況下,字距在 M / 5,但因為左右對齊限制較多,所以理想範圍可以到 M / 4 或更寬一點。

但如果在更小的字號,例如 6 pt,那麼 M / 3 是理想的平均值,但若無法達成,也至少要有 M / 4。

特別值得注意的是,若海報中有使用全大寫字母排版,要採取適當的字元間距會理想些。就標題字來說,理想的大寫字母字元間距是字號大小的 20%–25% 之間,字距則取 M / 4 到 M / 5 之間比較理想;可是若標題大寫字母字元間距非常寬(沒有標準,是指一種感受)字距可能取 M / 2 較為合適;而若內文遇到大寫縮寫,如 CIA,則通常取字號大小的 5%–10% 作為字元間距較適當。

本書書腰設計也注意到大寫字母之間的 letterspacing 與 word spacing 的設計

另外,通常不需要特別針對小寫字母內文作 letterspacing,如同 Goudy 所提醒的,“A man would letterspace lower case would steal sheep”(「一個會 letterspace 小寫字母的男人也會偷牽羊」,Robert Bringhurst 打趣的說,如果這句話到這時代有什麼不一樣,那就是「會 letterspace 小寫字母的女人也會偷牽羊」)。原因是因為特意在內文小寫字母裡取字元間距,會影響閱讀韻律,是一件困擾的事。

但當然這些也都不是準則,有些標題大寫字之間緊到無法透氣的設計也是很酷炫,有些標題則用距離很大的小寫粗體字母呈現也很潮。結論還是看設計需要。

不過,以上討論不完全適用於中文設計。一方面中文沒有 letterspacing 的問題,另一方面,中文剛好都呈現整齊排列的方塊狀,我們也不習慣在內文取明顯的間距(標題則是看情況,但也沒有規範),只要不黏在一起應該都還可以接受。

  • 每一行之間的距離

西方字型學理論化的結果就是可以用數學公式描述合適的版面設計。有一種非常實用的排版方式,叫做「垂直韻律 (vertical rhythm)」,可以用很簡單的計算方法設計一個舒服的版面。

首先,韻律其實就是格線。例如這個筆記本的內頁就體現一種韻律:每一行的距離相等,就好像有節奏的音樂裡,每個音符所隔的時間是相等的。

這種規律的圖樣被稱為韻律感。而人眼喜歡韻律感,具有韻律感的行距、段落距離設定可以有效吸引眼睛。平面上的「垂直韻律」其實就是平面各元素在垂直空間 3 的固定距離上出現而產生的視覺韻律感。

而說穿了,垂直韻律就是版面上各區塊的分布是「基本行高」的比例。

要計算垂直韻律,必先決定內文的基本字型大小。就中文來說,台灣約定俗成的內文大小為 12 pt,而 1.5 倍行距也被認為是理想的設定。在這種設定下,這份文件的基本行高就是 12 * 1.5,也就是說,每一行都是 18 pt 高。

另外,若遇到副標題或註解等與內文大小不一的文字,也還是回歸到 18 pt 的比例關係。例如文字大小只有 10 pt 的註解,應採取 1.8 倍行距才能符合垂直韻律;而 14 pt 的副標題字則應採取 1.28 倍行高;

而符合「垂直韻律」的段落間距是一個行高,以這份文件而言,就是 18 pt。這個對應到平面上各元素都相同,垂直元素之間要採取 18 的整數比才會有垂直韻律。

  • 其他考量與小結

另外,我們也不時遇到究竟一行裡面該放多少字的問題。Robert Bringhurst 指出,若只有單欄,理想的行長是 45–75 個字母之間,而平均來說 66 個字母是最廣泛被接受的;至於雙欄位或多欄位,則要特別注意,因為有時欄位的分割會造成所能容納的字母變少。而當字母少時,則非常不建議使用左右對齊,因為單字間的距離會變得相當混亂,不如靠左對齊的理想。

但是,上述規則同樣在中文是有待探索的。我們發現中文字一行裡有 30–40 個文字是較理想的距離,比較不會發生太短需要頻繁換行,或者太長容易跳行的情況。但是這也沒有定論。而中文直排規則也是需要重新探索的,在直排中,哪樣的行高、段落距離比較合理呢?畢竟西方字型學只有考量橫排、由左到右的方向。就這一點我們還會繼續探索。

最後,雖然本文充斥算式,看似這些規則都可公式化,但其實還是要問問自己的眼睛。畢竟這些規矩也是經由工匠實驗出來的,不一定是放諸四海皆準的道理。

  • 參考資料

大眾字型學 (1):英文履歷表要用哪套字型-justfont blog

網頁排版──湯品:垂直的韻律-justfont blog

科技始終來自於人性,字體始終取決於載體(上)-justfont blog

Rhythm and Proportion, Elements of Typographic Style Version 3.2. Robert Bringhurst(2008) p.25—31

9/13 TO x Justfont 字型設計工作坊,我們邀請到台灣最頂尖的字型設計 Justfont 團隊來 TO 開設一天 6 小時的 Workshop,從理論出發,再到親自動手設計,你會發現原來字型設計一點也不難!小班制實作教學,名額有限,額滿即止哦!

tp_600x100

  • 延伸閱讀

BMW 設計師的第一堂課:請先學會設計完美的字型!

速成!一個月學會設計師的基礎技能:字型設計

書都賣不出去了,編輯你怎麼還能容忍它這麼醜?

成為設計大師的第一堂課:20 個你不該打破的設計法則

(本文轉載自 Justfont,原標題《大眾字型學(2):怎麼製作美觀的文件版面?》 ,未經 Justfont 授權,不得轉載)

閱讀更多專業人士大推的字體研究文章:justfont blog

以台灣生活議題為中心的字型科普頻道:字戀