品牌行銷

不靠顏色強調重點排版:4 個技巧就能做到

一張黑白照片沒有任何顏色,畫面裡卻還是有明暗層次,還是有一眼就被看到的主角。靠的不是色相,而是光影本身的輕重堆疊,亮的地方自然往前跳,暗的地方自然往後退。

這個道理搬到排版上也一樣成立。品牌限定色只能用兩三種、黑白列印、單色印刷,這類「拿掉顏色」的情境並不會讓版面跟著失去重點,只是強調重點的工具換了一批,變成字重、字級、留白、對齊。不靠顏色強調重點排版也不是退而求其次的克難做法,而是設計研究裡真實存在的做法,連國際無障礙標準都明講不能只靠顏色傳遞重點,代表顏色本來就不該是版面唯一能用的手段。

先從字重、字級、留白、對齊這四個因子,一項一項拆開來看。

拿掉顏色後,字重、字級、留白、對齊四個因子接手扛起版面的視覺強調
品牌限色或黑白列印時,強調重點靠的是字重、字級、留白、對齊這四個因子,不是顏色。

版面的視覺重量,其實跟顏色無關

設計研究裡有一個概念叫「視覺重量」(visual weight),講的是讀者看到一個版面,會不自覺判斷哪個元素比較重、比較該先被看到。這個判斷跟色相沒有直接關係,反而跟大小、粗細、位置、留白這幾件事更相關。

格式塔心理學(Gestalt psychology)的分組原則可以解釋為什麼會這樣:人眼本來就會靠形狀、位置、間距把畫面上的元素自動分組,彼此靠得近的東西會被當成同一群,排列整齊的東西會被當成有關聯。Nielsen Norman Group 針對鄰近原則(proximity)的研究就指出,距離本身就是一種分組訊號,讀者不需要顏色提示也能分辨哪些內容是同一組、哪些是各自獨立的元素。顏色只是眾多分組線索裡的其中一種,從來不是唯一一種。

這也是為什麼全球資訊網協會(W3C)制定的網頁內容無障礙指南(WCAG)2.1,清楚要求顏色不能是傳遞資訊的唯一視覺方式。色盲、色弱的讀者分辨不出某些顏色差異,用黑白顯示器或單色列印的情境下,顏色差異更是直接消失,如果重點只靠顏色標示,這群讀者就完全接收不到。這不是排版的限制,而是排版本來就該具備的功力,靠顏色以外的線索一樣能把重點做出來。

既然顏色可以被整個拿掉、重點還是傳得出去,代表一定還有別的東西在負責「強調」這件事。下面幾節就一項一項拆解字重、字級、留白、對齊,分別怎麼扮演這個角色。

字重怎麼決定誰先被看到?

字重指的是同一套字體裡,從細到粗的粗細階級,常見的排法大致是 Light、Regular、Medium、Bold、Black 這幾層。Nielsen Norman Group 在排版術語的整理裡,把字重(font weight)定義成「每個字母筆畫的粗細程度」,並把其中最常拿來強調重點的粗體(Bold)另外定義成比正文更粗、更暗,用來吸引讀者注意特定文字的一種風格,這兩個定義裡完全沒有出現顏色兩個字。

常見的誤區有兩個方向。一種是整篇文案只用同一種字重,沒有落差就沒有重點,讀者的眼睛無從判斷哪裡該先看;另一種恰好相反,想強調的地方全部加粗,結果每一段都在搶戲,等於沒有重點可言。

實務上一個版面抓兩到三個字重層級就夠用,重要的是落差要夠明顯才看得出來。Toptal 分析排版層級時也指出,把字重相近的兩種字重搭在一起,對比效果有限;反而是明顯偏細跟明顯偏粗的字重放在一起,才更容易做出看得出來的對比,例如把細字體跟粗體搭配使用,會比兩個字重相近的層級更容易讓人一眼認出重點。

舉個實際情境:一張只能單色印刷的邀請卡,姓名用中等字重、頭銜用粗體、聯絡資訊用細體,三種字重各自負責一層資訊。讀者不需要靠顏色分色塊,也能馬上分辨出這張卡片上誰的名字最重要、誰的頭銜其次、聯絡方式屬於補充資訊。

同一張單色邀請卡全部用同一種字重時分不出主從,改用中等、粗體、細體三種字重就一眼看出層次
同一個顏色、同一個字級,只靠三種字重落差,就能讓姓名、頭銜、聯絡資訊各自分層。

字級怎麼拉出真正有效的對比?

字級的直覺是「越大越顯眼」,但真正決定顯眼程度的其實是落差夠不夠大,不是字級本身的絕對值。字體設計師羅伯特‧布林赫斯特(Robert Bringhurst)在《The Elements of Typographic Style》一書中,整理過一套流傳很廣的字級尺度:6、7、8、9、10、11、12、14、16、18、21、24、30、36、48、60、72 這幾個級數(單位是 pt),現在多數排版軟體字級選單的預設值,用的大致還是這套序列。

這套尺度可以拿來當抓落差的參考基準,如果內文設定 12pt,主標題至少要跳到 24pt 以上,落差才會被讀者感受到;只差一到兩個 pt,讀者根本看不出主標跟內文有什麼不同,等於白白浪費了一層本來可以強調的空間。

主標與內文只差 2pt 時幾乎看不出對比,主標跳到 24pt 以上落差才被讀者感受到
字級對比看的是落差夠不夠大:主標跳到 24pt 以上,主從關係才會一眼成立。

Toptal 分析排版層級時也提到,落差要夠大才有效,字級、字重、位置三者疊加起來的對比感,遠比只調整其中一個因子更容易被讀者一眼認出來。

字級分層還有一個常見誤區:一個版面同時出現五、六種不同大小,看起來像是想把每個層級都照顧到,結果反而讓版面更亂,讀者要花更多力氣分辨這麼多層級各自代表什麼意思。字級對比要的是少而明顯,不是多而細碎——挑出兩三個真正需要拉開的層級,把落差做足,比硬是切出六七層更有效。

留白不是留空,是把重點單獨圈出來

留白常被誤會成「讓版面呼吸」的裝飾用途,但它其實是一種分組訊號。Nielsen Norman Group 針對鄰近原則的研究指出,讀者會把靠得近的元素當成同一組,把離得遠的元素當成彼此無關的獨立內容,距離本身就在告訴讀者這些東西是不是同一件事。

這個原則搬到強調重點上,做法很直接:想強調的那句話、那個數字,四周刻意留出比其他段落更大的空白,跟前後內容明顯拉開距離。讀者看到這塊被空白包圍的內容,會自動把它讀成一個獨立、重要的區塊,效果其實跟畫底色、加外框很接近,只是完全不需要用到顏色。

常見的誤用剛好相反,想強調一個重點,卻把它塞進版面本來就擁擠的角落,即使把字級放大、字重加粗,四周留白不夠,強調的效果還是會被周圍雜訊吃掉。字級加大只解決了大小,沒有解決距離——重點旁邊沒有留出空間,讀者的視線就抓不到「這是被單獨圈出來的內容」這個訊號。

重點句塞在擁擠版面會被周圍文字淹沒,四周留出空白就自成一塊獨立內容
留白是一種分組訊號:四周刻意留空,就能把重點圈成獨立區塊,效果接近加了外框卻不用顏色。

對齊怎麼建立秩序感?

版面裡同一條基準線上的元素,讀者會直接理解成同一組,不需要另外解釋;版面越工整,讀者掃視內容的速度就越快、越省力,這背後靠的正是格線系統先幫忙鋪好一套可預期的秩序。

Nielsen Norman Group 早年一份透過眼動追蹤做的研究就發現,讀者瀏覽網頁內容時,視線大致會沿著一條類似英文字母 F 的固定路徑移動,先橫向掃過最上面幾行,再往下逐漸縮短掃視範圍。版面對齊得越工整,這條掃視路徑就越接近讀者原本的預期,讀起來自然更順。

不過對齊本身建立的是秩序,不是重點。工整的版面像一塊乾淨的畫布,讓後面真正該被凸顯的內容有機會被看見,秩序感做的是背景,不是主角本身。

刻意打破對齊,就是最搶眼的重點

版面全部乖乖對齊,遵照同一套格線的時候,唯一一個跳出格線的元素反而最搶眼。可能是一張出血滿版的圖片,一個特別放大又刻意偏移的數字,或是一行故意置中、打斷整齊左對齊節奏的文案。讀者已經被前面的秩序訓練出固定的預期,一旦出現突兀的東西,反而會自動把它讀成「這裡特別重要」。

整個版面都對齊同一條格線時,唯一置中放大、跳出格線的元素反而變成最搶眼的重點
先建立嚴謹的格線秩序,再刻意讓一個元素破格置中,它就成了全版最搶眼的焦點;這招一個版面用一次就好。

這一招是例外,不是常態。一個版面用一次效果最好,用太多次等於每個元素都在搶著當主角,結果反而變成沒有重點。二十世紀的國際排版風格,也就是常說的瑞士風格,慣用的手法正是先建立一套嚴謹的格線系統,再有意識地打破一次,這個手法後來也一直延續到現代平面設計裡。

字重、字級、留白、對齊,這四個因子做的事情跟顏色其實一樣,都是把「對比」換了一個維度來呈現而已。下次遇到品牌限定色、單色印刷、黑白列印這類案子,先別急著要求加顏色才能凸顯重點,回頭檢查粗細落差夠不夠明顯、字級對比夠不夠大、重點四周的留白夠不夠、版面裡有沒有留一個可以刻意打破秩序的位置,這四招是不是都還有沒用滿的空間。把這幾件事做到位,即使完全拿掉顏色,版面照樣分得出誰是主角、誰是配角。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

版面的「視覺重量」主要跟哪些因素有關?

視覺重量指的是讀者判斷哪個元素該優先被看到的直覺,跟色相沒有直接關係,反而跟大小、粗細、位置、留白這幾個因子更相關;格式塔心理學的分組原則指出,人眼本來就會靠形狀、位置、間距自動分組,顏色只是眾多分組線索之一。

一個版面的字重層級抓幾種比較合適?

實務上一個版面抓兩到三個字重層級就夠用,重點是落差要夠明顯,把明顯偏細跟明顯偏粗的字重搭在一起,會比兩個相近的字重搭配更容易讓人一眼認出重點;層級抓太多,讀者反而要花更多力氣分辨哪裡才是重點。

決定字級是否顯眼的關鍵是什麼?

決定字級顯不顯眼的其實是字級落差夠不夠大,不是字級本身的絕對值;如果內文設定 12pt,主標題至少要跳到 24pt 以上,落差才會被讀者感受到,只差一到兩個 pt,讀者看不出主標跟內文有什麼不同。

想用留白強調重點,具體該怎麼做?

想強調的那句話、那個數字,四周要刻意留出比其他段落更大的空白,跟前後內容明顯拉開距離;讀者看到被空白包圍的內容,會自動把它讀成一個獨立、重要的區塊,效果跟畫底色、加外框很接近,只是不需要用到顏色。

刻意打破對齊為什麼反而最搶眼?

版面全部乖乖對齊、遵照同一套格線時,讀者已經被前面的秩序訓練出固定的預期,一旦出現跳出格線的元素,例如出血滿版的圖片、特別放大偏移的數字,反而會自動被讀成「這裡特別重要」;但這一招是例外,一個版面只適合用一次。

資料來源
  1. Understanding Success Criterion 1.4.1: Use of Color — W3C
  2. The Proximity Principle in Visual Design — Nielsen Norman Group
  3. Typography Terms: Glossary — Nielsen Norman Group
  4. F-Shaped Pattern For Reading Web Content — Nielsen Norman Group
  5. How to Structure an Effective Typographic Hierarchy — Toptal
  6. The Elements of Typographic Style — Robert Bringhurst