想強(qiáng)調(diào)重點(diǎn)該用粗體、下劃線還是斜體?

2015-11-20    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,請(qǐng)點(diǎn)這里

計(jì)算機(jī)輔助的設(shè)計(jì)中,一般人可以輕易的凸顯任何內(nèi)文。只要透過(guò) Word 等基本文書編輯軟件內(nèi)的 i, B, U 等按鈕,或任意改變文字顏色,就可以達(dá)到基本的強(qiáng)調(diào)。但是,這些設(shè)定對(duì)讀者而言,究竟是干擾還是幫助?過(guò)去數(shù)百年的排版慣例又可以告訴我們哪些實(shí)用而合理 的規(guī)則?

寫在前面:如果??????

強(qiáng)調(diào)最好是一個(gè)字、一組詞就好,非必要請(qǐng)勿使用。過(guò)多的強(qiáng)調(diào)法使用,其實(shí)等于沒(méi)有強(qiáng)調(diào)。認(rèn)識(shí)到這個(gè)最基本的前提我們?cè)僬務(wù)劜焕硐氲膹?qiáng)調(diào)法。

不理想的強(qiáng)調(diào)法:底線、假粗體與假斜體

除了要特別討論的上色之外,最常用的強(qiáng)調(diào)法不外乎「加粗」、「變斜」或是「加底線」。加粗、變斜是透過(guò)墨色濃度或形狀變化與正文對(duì)比,這發(fā)源自西方數(shù)百年的排版規(guī)則;加底線則是打字機(jī)盛行之后留下的遺產(chǎn)。

避免用底線強(qiáng)調(diào)

在中西方的排版規(guī)則里,從來(lái)沒(méi)有發(fā)生過(guò)加底線來(lái)強(qiáng)調(diào)的情況。底線是打字機(jī)留下的遺產(chǎn)。

打字機(jī)上并沒(méi)有其他變化,只能裝正文,無(wú)法變化成斜體、粗體。所以就產(chǎn)生了底線設(shè)計(jì),補(bǔ)足沒(méi)有強(qiáng)調(diào)法的缺陷。

但是我們可以來(lái)看一下,底線真的是有效的強(qiáng)調(diào)法嗎?底線加上去到底比較接近干擾還是強(qiáng)調(diào)呢?相信大家可以透過(guò)這段文字看出來(lái),底線強(qiáng)調(diào)法會(huì)讓底線搶走字本身的風(fēng)采,讓我們注意線多過(guò)于文字。

不論對(duì)中英文而言,底線都并非理想的強(qiáng)調(diào)法。專業(yè)的設(shè)計(jì)師或排版工匠還是會(huì)告訴你,最好使用正統(tǒng)的強(qiáng)調(diào)法:粗體 (bold)、斜體 (italic) 等等。(這里特別是就西文而言)

補(bǔ)充:但是就網(wǎng)頁(yè)而言,底線變成了標(biāo)示超鏈接的一種慣例,是可以接受的。

相較于底線,以西方字母里的粗體、斜體強(qiáng)調(diào),更能配合正文字體的設(shè)計(jì)。他們有相同的家族基因,例如相似的骨架、比例與風(fēng)格,只是加粗了或變斜了。這樣的特征讓他們可以達(dá)到強(qiáng)調(diào)效果,但又不會(huì)太突兀,與正文不協(xié)調(diào)。

但其實(shí)多數(shù)人使用的粗體、斜體,其實(shí)都是「假」的。

避免用假粗體、假斜體

在 Office 軟件的設(shè)定中,i, B 兩個(gè)按鈕可以把任意字體變成斜體或粗體。如果一套字體里真的有粗體、斜體那倒不會(huì)有問(wèn)題(例如微軟正黑體有粗體);但是如果缺乏粗體、斜體,就會(huì)用程序演算出來(lái)一個(gè)替代的版本。這其實(shí)不是一個(gè)字體最天然的設(shè)計(jì)。

false-1new

△ 假的粗體都糊在一起;假的斜體則破壞了字體的結(jié)構(gòu)與美感。

這些假的斜體、粗體,看上去極不自然。因?yàn)槿搜塾性S多細(xì)微的錯(cuò)視,每個(gè)字的形狀也不同,若字的比例、粗細(xì)、曲線沒(méi)有經(jīng)過(guò)特殊調(diào)整,只是依照數(shù)學(xué)公式統(tǒng)一變形,看起來(lái)就會(huì)很不協(xié)調(diào),甚至糊成一團(tuán),難以辨認(rèn)。

計(jì)算機(jī)的方便常讓人以為加粗或變斜只是一種。但在西文排版的歷史中,斜體與粗體并不是,而是一種特殊字體。

理想強(qiáng)調(diào)法:粗體字型與斜體字型

在活版印刷時(shí)代,粗體(bold)、斜體(italic),與正文字體(romans)其實(shí)是三種不同的字型(fonts)。這些不同的字型,其實(shí)都是基于不同的需求而設(shè)計(jì)出來(lái)的形態(tài),而不是「加上去的特殊效果」。而且,這些概念都是西方來(lái)的,傳統(tǒng)中文排版沒(méi)有這三種字體的區(qū)別。

false-2new2

△ 正確的粗體、斜體使用法

一點(diǎn)歷史:為什么粗體、斜體不是一種

在西方的印刷中,一開始是古騰堡的 blackletter,視覺樣貌很粗,跟現(xiàn)在的正文不一樣。(現(xiàn)在 blackletter 變成一種裝飾字體)后來(lái)到文藝復(fù)興時(shí)期,才基于當(dāng)時(shí)文人的手書字跡創(chuàng)造正文字體,也就是學(xué)名為羅馬體(roman)的字體,目前存留最早的羅馬印刷體是 1530 年在巴黎刻的 garamond。
11979005004_885b05b58a_b

△ Garamond 羅馬體。

西文排版一開始只有羅馬正文字體,而沒(méi)有斜體。斜體是后來(lái)才發(fā)明的。斜體的英文學(xué)名是 italic,顧名思義,就是一個(gè)在意大利誕生的字體。比起正文羅馬體,italic 比較接近草寫、手書。手書所帶來(lái)的天然歪斜是斜體的來(lái)源。

zt20151119

△ italic 是基于西方書法基礎(chǔ)的字體,原圖來(lái)自 wikimedia commons

一開始,斜體其實(shí)也當(dāng)作正文字體。它不僅比羅馬體更有人文氣息,也更省印刷空間。只是久了以后人們開始發(fā)現(xiàn)斜體沒(méi)有比羅馬體好讀,到了文藝復(fù)興晚期,斜體就被用來(lái)與羅馬體混搭,做特殊用途排版,例如強(qiáng)調(diào)。這個(gè)規(guī)則一直延續(xù)使用到現(xiàn)在。而粗體出現(xiàn)的時(shí)間更晚,是十九世紀(jì)的發(fā)明,也是設(shè)計(jì)來(lái)與正文對(duì)比的。

回到主題,拆開歷史脈絡(luò)后我們就可以了解,粗體與斜體也是一種字體樣貌,不是按鈕產(chǎn)生的的。

補(bǔ)充:在麥金塔計(jì)算機(jī)的 iWork 系列中,若計(jì)算機(jī)里缺乏字體的粗體字型或斜體字型,按 i 與 B 都不會(huì)產(chǎn)生任何效果。亦即,我們很難在用 iWork 生產(chǎn)的文件中看到斜體中文與幾何加粗的中文內(nèi)文。

附注:其實(shí),西文排版里還有其他強(qiáng)調(diào)法的細(xì)節(jié)與歷史,包含使用全部大寫(allcaps)的強(qiáng)調(diào)法;italics、oblique 在中文都翻成斜體,但是有什么不一樣呢?這些會(huì)寫在稍后刊出的進(jìn)階版。

如果你想強(qiáng)調(diào)的是一整段

 

使用了真正的斜體、粗體,但是卻沒(méi)有善用它,那也是很可惜的。因?yàn)檫^(guò)度的強(qiáng)調(diào)等于沒(méi)有強(qiáng)調(diào),還會(huì)變成一種干擾。我們可以試舉以下例子:

false-3new

△ 太多強(qiáng)調(diào),其實(shí)就是沒(méi)有強(qiáng)調(diào)

以上圖片就是一個(gè)太多強(qiáng)調(diào),等于沒(méi)有強(qiáng)調(diào)的好例子。但也看得出來(lái),想這么做的原因是希望告訴讀者「這一段很重要喔」。傳統(tǒng)的西文排版會(huì)用以下這種方式凸顯一個(gè)重要的段落:

怎么強(qiáng)調(diào)一整個(gè)段落:

借由底色、邊框與不同字體的變化,告訴讀者這一段很重要,也幫助快速瀏覽掌握重點(diǎn)。

若使用顏色強(qiáng)調(diào)

對(duì)文字上顏色在活版印刷時(shí)代成本很高,因?yàn)橐變蓚€(gè)顏色下去印。但是這個(gè)限制在噴墨打印機(jī)、激光打印機(jī),甚至屏幕閱讀大行其道的現(xiàn)代就消失了,上色變成一種非常容易的事情。

但是就傳統(tǒng)的排版規(guī)則來(lái)看,或是以正式文件的性質(zhì)考慮,上顏色是一件比較不合乎慣例的事情。不過(guò)除了正式的紙本文件以外,舉凡網(wǎng)頁(yè)、名片、賀卡或書籍,都可以合理地使用顏色強(qiáng)調(diào)。

中文部分:強(qiáng)調(diào)法稀少

接下來(lái)我們要談一些中文排版的強(qiáng)調(diào)問(wèn)題。

其實(shí)翻開古書刊本就可以發(fā)現(xiàn),中文里沒(méi)有顯著的強(qiáng)調(diào)方式。最傳統(tǒng)的,而且?guī)缀跄艽_定是唯一一種強(qiáng)調(diào)方式,是在文句旁邊加上小圈圈。這個(gè)被稱為「強(qiáng)調(diào)點(diǎn)」。也就是說(shuō),目前也常用的粗體、斜體設(shè)計(jì),其實(shí)從是西方學(xué)來(lái)的排版規(guī)則。但是就使用上而言,并沒(méi)有確立一套規(guī)矩。

ym201511191

△ 傳統(tǒng)的中文強(qiáng)調(diào)點(diǎn)(當(dāng)然,中文強(qiáng)調(diào)點(diǎn)是直排的產(chǎn)物)

中文部分可行方案:使用不同字體強(qiáng)調(diào)

使用不同字體強(qiáng)調(diào)似乎是目前比較常見的方案。例如:

明體為主的內(nèi)文中,使用黑體凸顯差異。

但是這種做法很奇怪,黑體與明體其實(shí)很難搭配在內(nèi)文,最好還是使用同一種樣式的粗體。

目前中文字體越來(lái)越注重字體家族,就是基于這種需要。例如信黑體、冬青黑體、蘭亭黑,都有不同粗細(xì)可以用作內(nèi)文、批注與強(qiáng)調(diào)使用。日本 typeproject 公司研發(fā)的 adjustable font,則讓字體可以合理的調(diào)整粗細(xì),用在適合的地方;而且不僅黑體,也包含了明朝體。越來(lái)越多同一風(fēng)格、不同字重的「字體家族」是中日韓漢字圈未來(lái)數(shù) 年發(fā)展的重要方向。

另外,中文也缺乏斜體造型。Word 或 HTML 程序生成的中文斜體其實(shí)完全破壞了中文的結(jié)構(gòu)。除了建議大家盡量避免使用假斜體以外,我們也發(fā)現(xiàn)其實(shí)在中文歷史脈絡(luò)中,有跟斜體很相近的使用法。

依照歷史脈絡(luò)來(lái)看,在中文古書上,正文與批注使用的就是兩種不同樣貌的字體。用在批注的字體比較瘦長(zhǎng)、纖細(xì),樣貌上接近仿宋體。

ym201511192

△ 中文古籍排版:正文與批注是兩種不同字體。圖片來(lái)自 wikimedia commons

而且仿宋、楷體體因?yàn)楣P畫走勢(shì)關(guān)系,在視覺上與明體相較,會(huì)有差異顯著的歪斜感,如此則可能產(chǎn)生區(qū)隔效果。

最后,目前也有人著手研究開發(fā)真正的中文斜體。上次我們?cè)诮艹鋈A文漢字設(shè)計(jì)作品展中看到了香港理工大學(xué)郭家榮所實(shí)驗(yàn)的中文斜體,可以供大家參考。

11644065276_f180bdbbdd_b

△ 從傳統(tǒng)中文書法理汲取靈感所創(chuàng)造的中文斜體

本文重點(diǎn):

  • 避免使用底線強(qiáng)調(diào)。(除了超鏈接)
  • 避免使用假粗體、假斜體強(qiáng)調(diào)。
  • 斜體、粗體是另一種字體,而不是。
  • 顏色除了正式文件,在許多狀況下都可以用在強(qiáng)調(diào)。
  • 想強(qiáng)調(diào)一個(gè)段落可以用區(qū)塊式強(qiáng)調(diào)。
  • 中文沒(méi)有斜體,但可以利用有字體家族的字體豐富排版。

參考資料:

  • bold or italic–butterick’s practical typography
  • rules & borders–butterick’s practical typography
  • color–butterick’s practical typography
  • underlining–butterick’s practical typography
  • Rober Bringhurst(2008) Historical Interlude, Elements of typographic style p 123–124

原文地址:blog.justfont

文章地址:優(yōu)設(shè)

日歷

鏈接

個(gè)人資料

存檔