fbpx
logo
簡單弄懂英文字體之間的愛恨情仇關係
2020-10-07
字體跟字型不一樣嗎?字體家族又是什麼?字間、字距、行高又差在哪裡,一起簡單搞懂看似複雜的字體知識吧!

我是一位設計師,成立一間設計工作室,叫 BORING Design Lab專注於打造品牌與數位體驗,我們不只是一間設計研究室,同時開發自己的品牌與產品。同時,我會去咖啡廳&公園散步來整理思緒,並用文字的方式記錄在 LATTE & PARK ,分享設計、廣告與科技議題給有興趣的人。

字體重要嗎?

這是一個大家既熟悉又陌生的要素,從大學時期我們做報告時就會學到一點關於字體的知識,像是標準字體是 12pt 等等,但若要更深入討論我相信許多人都很難回答,頂多我們可能會知道某些字體好像比較常出現在海報上等等。大部分的設計像是各類廣告或是 Logo 都會搭配文字來傳達理念,更不用說八成都是文字的雜誌,隨著使用的字體不同能造成的結果也各有差異,比方說我們在設計在選舉中扮演的腳色?這篇文章中提到的歐巴馬總統如何利用字體建立他在選民心中的形象,或是我們用另一個更常見的例子,各式各樣的 Logo 都會採用不同的字體提升其辨識度,比方說可口可樂、 PUMA 、IKEA 等等,現在你是不是腦中已經浮現它們各自對應特殊的字體了呢?

字體在設計中扮演的角色

字體其實充斥在生活中,默不作聲的影響我們對事物的判斷,字體可能會影響觀眾對廣告的感覺、展覽中照片旁的說明也可能因為字體沒調整好而導致讀者無法順利將之讀完,或者在網頁設計上,錯誤的字體可能導致該網站的信任度不高而導致流失顧客,這些都是我們沒注意到但卻天天在發生的事情。今天就來介紹有關字體運用的基本知識以及一些我個人的看法。

字體、字型、字型家族 ?

首先我們來看看很容易造成混淆的幾個名詞「字體、字型、字體家族」,最基本的就是字體( Typeface ),在英文解釋為 “a particular design of type” 也就是具有某種設計理念的文字,是一個比較概括的概念,而所謂的字型 ( Font ) 的英文解釋為 “a set of type of one particular face and size” 。 簡單來說,字體是最初也是最基本設計的概念,而字型就是基於字體但做了部分程度上的修改後被實際應用在設計上的文字型態,而當字型逐漸衍生出許多種類時,它們集合而成的就是字體家族( Font Family )。我們拿 Noto Sans 為例子,Sans 是一種字體,Noto Sans 是ㄧ種字型,但其實點開就能發現有許多不一樣的字型 Thin, Light, Regular, Medium, Bold 等等同樣隸屬於 Noto Sans 字型家族 ( Font Family) 。

而字體衍生成字型的過程中除了調整各式間距、高度,通常都有三種不同型時的變化,我們將之分為襯線字體 ( Serif ) 、無襯線 ( San Serif ) 、 裝飾標題字型( Decorative or display typefaces ) ,其中對比最明顯的就是有無襯線的差異,襯線字體的特色就是每個字的構成有粗細之分,並且在下方都有突出的小腳,就像是我們看習慣的古早報紙字體,襯線字體的小腳、各種線條粗細能幫助讀者的視線流暢的移動,所以特別適合使用在雜誌、文章等等類型的作品上,此外因為襯線字體的模樣與古典的英文書寫體、中文毛筆體更為相像,所以襯線字體也會帶出更經典、正式的感覺,許多古典產品上方的裝飾也因此選用襯線字體。

與玲瓏有緻的襯線字體相反,無襯線字體整體線條統一粗細,看起來簡潔有力且富有現代感,常常是各類標題、流行服飾招牌喜愛選擇的字體,但也因為看起來太多統一,所以當大量的無襯線字體集合在一起時就容易讓讀者抓不到重點,所以並不適合用於文章或較多文字的作品中。


而最後一種裝飾標題字型又常被稱作手寫型或是創意型,這種字型往往擁有最獨特、最高辨識度的特性,像是可口可樂、迪士尼、樂高等等 Logo 都採用這種字型,雖然這類的字體辨識度、記憶性都高,但同時這類字體過多也更容易造成視覺疲勞,因此通常都只使用在標題、 Logo 上,但最近也掀起一陣手寫字體的流行風,完全仿手寫的字體運用得當的話放在文章中反而能使文章充滿溫度、更好的讓讀者融入故事中。

文字之間的關係

除了字體字型,文字的格式也會影響讀者的閱讀體驗。當然如果要詳細的討論文字格式的話那等於是要跳入另一個專門的領域之中,所以今天將只討論一些十分基礎、實用的規則幫助大家更了解如何將字體運用在設計中。

字距 Tracking & 調距 Kerning

第一個我們來討論十分容易搞混的兩個元素,字距 ( Tracking )、調距 ( Kerning ),其實嚴格上來說兩個中文翻譯都是字距,但我為了方便區分會刻意分成這兩個講法。先來談談 Tracking,它指的是整體文章之中每一個字之間的距離, 適當的文字距離才能幫助讀者更順利地接收到我們想傳遞的訊息,過寬的話可能導致看起來呆版,太密集的話可能導致讀者感覺煩躁、沒耐心讀完。有興趣的朋友可以試著用 perfect paragraph 這個小遊戲去進行練習與體驗。


在以下的範例也可以發現 Tracking -100 是完全不能夠閱讀,同時 Tracking 100 如果放在較長的文章中也會比較難閱讀,但是如果使用 Tracking 100 在海報標題上,就可以帶給閱讀者非常大的空間感,而 Tracking -100可以呈現一種很緊張,即時的感覺。

而相較於 Tracking ,Kerning 基本上不會出現在中文,Kerning 指的是「單字」中每個字母間的距離,通常這種程度的調整較常出現在英文的標題或者廣告、宣傳標語上。有些字母太靠近的時候我們就會使用Kerning來進行非常細微的調整,這邊我們也提供一個可以練習 Kerning 的小遊戲 kerntype 給大家練習。

行高 Leading 

Leading 在中文有時也稱為行距,簡單來說就是行與行之間的距離, Leading 的數值越大行的間隔就越大,反之就越緊密。如果上面提到的 Tracking 是讓讀者閱讀得更順暢,那 Leading 就是讓讀者閱讀文章時能適時地喘口氣,在閱讀時如果行與行之間距離過近,導致一次要看兩到三行的內容,容易讓讀者無法好好吸收、感到疲勞。

在下面的範例,我們可以發現 Leading 太大,或是太小都會導致讀者非常難閱讀,所以這非常考驗對於設計師對於字型的了解與如何達到平衡。

對齊 Alignment 

在我們普遍看到的文章中總共有四種段落對齊方式,分別是靠左 ( Align Left )、靠右 ( Align Right )、置中 ( Align Center )、左右對齊 ( Align Justified ),現代一般的文章、文案都是採用靠左對齊的方式,因為這樣最符合讀者的閱讀習慣,至於靠右對齊雖然很少出現在文章,但如果是要搭配圖案呈現的作品就很適合,圖片左邊文字右邊的配置能讓讀者自然地先觀察圖片,再去看文字描述。置中對齊則是最能夠吸引注意力的方式,所以特別適合用於標題或是想強調的部分,比方說當我們在敘述中想引用某位偉人曾說過的話,我們就會將它以置中的方式呈現在下一行。

最後一種就是 Align Justified 左右對齊,會加長文字之間的空間讓一行文字填滿紙張不留下左右空白,這也是在較傳統的報章雜誌上常見的對齊方式。

起伏邊 Rag

Rag 也是在英文排版中較容易出現的問題,由於英文單字並非一個完整的正方形單位,當單字組成非常攏長時就會導致軟體自動幫我們跳行的問題,那這時就會在上一行出現一小塊留白,這個留白的部分就是 Rag ,如果看看下面的例子,我們可以發現為什麼在中文的書籍與雜誌排版中,比較沒有 Rag 的問題,因為每一個中文字都是一個正方形的單位,不會導致上述的問題。從下方中間那個圖,我們可以發現許多空隙穿插在段落中,這會讓讀者非常難以閱讀,所以這時就必須適時的調整 tracking 或是刪減一些內容去作出調和。此外雖然中文沒有 Rag 的問題,但中文的閱讀比英文更重視語感,如果讓讀者在閱讀時感覺好像詞句被切斷了就會導致思緒也被打斷,進而影響閱讀體驗,比方說下方第一行「畢業於舊金山藝術大學—廣告&新科技媒體研究所。」這一句話,因為切斷的部分都是完整的單詞「新科技媒體/研究所」所以並不影響閱讀,如果切在不適當的地方變成「新科技媒/體研究所」,那就有可能打斷讀者的思緒。

選擇字體時容易遇到的迷思

一次使用多種字體更好被閱讀?

在剛開始還不熟悉字體排版前,常常都會在設計中應用大量不同的字體。文章的標題、段落小標、內文、引用段落、重點部分等等都使用了不同的字體,原本以為凸顯重點但其實使用過多的字體反而會讓讀者搞混。就像我們前面所提到的,每個字體都有不同的個性,一次使用太多的字體反而讓讀者無法輕易暸解內容的重點在哪?如果要讓內容更好閱讀以及有層次,我們可以在選定好一個適合的字體後,用字的大小來區分重要程度,大的通常代表標題,也是最要先注意的資訊,而小的尺寸通常是細節與延伸內容,透過大小區分也是個創造內容層次跟掌握讀者閱讀視線。

好看的字體一定好用嗎?

設計師在挑選要應用字體的過程中,有時可能會看到一些時尚又好看的字體,它們可能外觀很漂亮,也能夠讓受眾很直覺的感受到字體的個性與風格,但這些字體卻不一定適合用在所有的作品上,字體的選擇除了美觀之外,更要注重讀者的閱讀體驗。就像有時候我們可能會設計到一些財經雜誌或是歷史相關的書籍,而會閱讀這些書籍的讀者,大部分都是年齡比較大的讀者,如果我們使用比較小的尺寸以及主打時尚美觀的字體,可能會讓這些讀者讀的很吃力,做設計是為了解決問題,我們在設計時除了要考慮美感,更要思考怎麼樣設計才更適合讀者。

結論

對於剛接觸字體的讀者而言,我們可能還不曉得怎麽樣去使用字體。雖然挑選字體要注意字體風格是否符合專案以及該字體在專案中要達成的作用及目的,但是有時挑選字體更像是一個猜謎與常識的遊戲,也看重自己的直覺,我們可以使用以下的練習方式,去培養我們的字體直覺。自己動手做是最快的,我在一開始練習時,會先試著使用自己覺得合適的字體,並反覆嘗試不同樣的字體在同樣的媒材上,去看看哪個字體比較合適,當我們練習完成時,可以在 Adobe Font網頁對照看看在相同的風格或是網頁上,其他人都是使用什麼樣的字體?我們使用的字體,效果跟這些建議相比是好還是壞?這樣至少就可以提供一個方向來做練習了,但是每個專案畢竟都不相同,因此當我們隨著練習越多,也對字體的使用越熟悉時,我們就要自己跳脫這些建議以及規則,找到自己的字體的使用方法。

共同選書

Editor Recommend

行銷 5.0

本書以實用易懂的細節,說明市場、商業和科技三大轉變。全球企業面對疫情蔓延之下,迫使企業在把產品服務推向市場的過程中,還得克服全新的艱鉅挑戰,並且利用科技來滿足顧客的非物質需求。本書共分為三部分,首先分析世代變遷何以造就了全新的顧客行為。第二部分詳細介紹全球企業逐漸採行的新策略方向。第三部分探討了不同領域科技高速發展的現況,包括AI及物聯網等。無論組織規模大小,《行銷5.0》都極適合行銷長、行銷部門經理、主管與員工閱讀;對於身處中小企業、意欲提升行銷能力的人來說,更是不可或缺的參考書。

Editor Recommend

一流的人讀書,都在哪裡畫線?

本書引導讀者學會畫出那翻轉人生的一條線,從「選書」開始傳授獨門訣竅,緊接著是分門別類的「部分閱讀」,勇敢挑戰自己不熟悉、不擅長的領域,由淺入深擴充自己的商業知識,接著才能抓對重點、讀出門道。不論是輕薄近人的暢銷書、還是艱澀厚重的磚頭教科書,每個優秀的讀書人,都能從中抓住有助提升自己的靈感。書末更親自示範作者自己如何「畫線」,精選四十四本商業好書,畫出土井英司獲益匪淺的文句,與讀者分享他獨特的深思考技術。你也可以從中選一本書,拿起紅筆想一想,如果整本書只能選一個重點,能夠改變你人生的文字,是哪一句?

Editor Pick

你拿時間做什麼?一位設計師的高效時間管理訣竅

你拿時間做什麼?一位設計師的高效時間管理訣竅

有一天同事走過來我旁邊說,為什麼你做很「快」 — — 什麼意思?什麼叫快?是做事很快?還是想事情很快? 我們就互相分享自己的workflow,也因此有這個機會分享我的workflow給各位thinker or designer。

more articles

voyage 002 – Personal’s Goal & Lab’s Goal

voyage 002 – Personal’s Goal & Lab’s Goal

前陣子開始,每個禮拜我與每一個在 BORING design lab 的夥伴花半小時的時間來進行一對一談話 ,而這個 one on one 主要是聊聊對方的生活,或者是未來職涯有什麼規劃,甚至是工作上遇到什麼困難等等,而我這邊是否可以調整與修改來協助夥伴。 基本上,目前設計工作室人少,工作流程也很單純,很慶幸沒有太多工作上的問題。但是經過幾次的談話,我也慢慢了解夥伴心中的規劃與想要嘗試的方向,像是有一個夥伴對於插畫非常有興趣,另一個夥伴接觸大量數據分析的專案等等。當然,對於 BORING...

voyage 001 – FFF

voyage 001 – FFF

前陣子在美國時,在 Netflix 看了一部韓劇叫做 Start – Up ,裡面其中講述到 FFF – Friend & Fool & Family 的一個概念,當初沒有什麼共鳴,直到最近特別有感觸。

每一個選擇,都有原因與後果。

每一個選擇,都有原因與後果。

身為人,為什麼要一直做決定? 生命的意義以及為什麼我們想要繼續前進的原因不僅僅是一個想法,身為人類了解自己的時間有限,今天的世界明天將不存在,所以我們在當下做出選擇,有些選擇帶來的後果,需要經過時間的歷練,才會了解這些選擇的意義何在?

如何建立品牌核心

如何建立品牌核心

為什麼每一間公司都會特別放一筆預算去經營品牌形象?對這些商業人士來說,一定是有價值才會願意投資對吧?畢竟都是資本主義的代言者…