DesignSchool爆文:文字怎麼搭配才吸睛?10個排版秘訣搞定你的設計!

2021-02-25 PPT精選

PPT精選(微信號:www80pptcom),微博微信最受歡迎的PPT學習資源分享,與18萬粉絲一起PPT,歡迎加精選君微信交流:bonystore。

精選君說:Design School 的一篇爆文,列出 10 個能幫你增進文字排版的訣竅和密技,很值得一看。

文字排版(Typography)不只是從下拉選單選擇字型和點數而已,文字排版是一項流傳數世紀的技藝,自木製和金屬的活版印刷便開始,而且它不只歷史悠久,還很實用,大部分的人只要掌握一些實用的訣竅,就可以將之活用在諸如履歷表、電子報或名片等日常設計項目上。

資深視覺設計師 Janie Kliever 在 Design School 發表了一篇文章,列出 10 個能幫你增進文字排版的訣竅和密技,雖然介紹的是英文字型,不過還是相當實用,讓我們一起來看看吧!

1. 將要表達的訊息配上適當的感覺

用了兩種差不多的字型?或是你總是用最喜歡的那一種字型?以上都是沒有妥善選擇字型的情形。

每種字型都散發獨特的情感或個性,也許是友善、新潮、嚴肅或傻裡傻氣,但大部分的字型並不是萬用的,所以你要判斷一個字型對你來說是怎麼樣的感覺,還有它適不適合放在這個設計裡面。方法之一就是列出你希望設計呈現哪些特質,如果能先確定內容更好,這樣就能直接挑選字型來配合建立好的內文調性。

字型設計師 Eben Sorkin 曾經說過:每種字體都有自己的聲音,這種聲音將影響我們閱讀文字的感受,也影響我們吸收和處理信息的過程。

它的力量強大,能讓任何形式的文字溝通更加有效且更有說服力。當文字符合字型的個性,大家閱讀起來會更快更容易;若兩者不合,文字就會變得混亂,拖慢讀者的速度。訪客讀起來越容易,就越容易找到他們要的內容並點擊購買或返回(或達成其它設計的目的)。

讓我們快速看幾個範例:

一個遵循「傳統配方」的護髮產品,融合了復古和現代的字型。

(Design by Device Creative Collaborative)

主打回到本質的產品,包裝走極簡瑞士風設計美學和字型搭配。

(Design by Salih Kucukaga)

傳達歷史和工藝精神的字型選擇,字型和整體事業的品牌形象相當搭配。

(Mike Casebolt and Sergey Grigoryan)

古典的襯線字體,看起來相當適合 1925 年就開幕的出版商的部落格,不過這個字型易讀、簡明而且平易近人,帶來一種現代感,而且更適合用在網頁上。

(Random House Books)

2. 配合讀者的心情

現在你已經替你的設計配了完美的字型,但有個小問題,並非所有人對同一種字型都有一樣的感覺,選擇了適合的字型後,你也要確定它適合你的觀眾。

可能有一群人覺得這字型很新潮,另一群就覺得它過時,因為我們看字型的方式受到文化連結的影響,而文化又和年齡及地區有相當大的關係,所以要對你的目標群眾有敏感度,如果你對選擇的字型有所遲疑,問問那個團體的人,徵詢他們的意見,能讓你的文字排版效果更好。

(Designs by Peetie Design and Kelly Schmidt)

如果你的觀眾範圍很廣,並非特定族群呢?那你可能就得選擇較為中性的字體,不強調鮮明特色而能融入其他對象。這種字型經常稱為「Workhorse」字體,通常是基本的襯線或無襯線字型,而且因為不引人注意而用途廣泛。

▲Google 字型中一些多用途字型。

最有用的多用途字型通常還會提供各種粗細和類型。

3. 讓字型的尺寸搭配設計內容

選擇和安排設計的字型時,閱讀難易度應該是首要考慮之一。字太小難以閱讀,字太大又很煩人,因此一般而言,印刷用段落文字應該落在 10 — 12 點之間,而網頁則是 15 — 20 之間,大部分的瀏覽器默認值是 16 點。

你可以用 Type Scale 這個免費工具來檢查 Google 字型庫的字型,各個尺寸在網頁上看起來如何。

▲Type Scale

若不是用在長文的字呢?你可以參酌設計本身,包括整個版面的大小或呈現方式,加上一點基本常識幫助判斷。一些像名片之類的小型項目或是長段文章會需要小一點的字,但這些字也要清晰易讀,而非充滿裝飾。

大型項目如海報,因為空間更多而且大家通常會從遠一點的距離觀看,就可以容納大字,若選擇相對小的字體,則有更多空間發揮創意和選擇更有型的文字。


4. 安排層次

如果一個設計層次分得好,看起來就整齊,容易定位,可以更容易找到你要的信息。文字排版的層次對於像是電子報、雜誌、書和其他傳統印刷物,及某些網站等文字很多的設計特別重要。

基本的層次設計,可以利用以下幾點:

用字的大小來依重要性排序信息。

用充足的空間來創造一個容易檢視的架構

把相關的對象分成一組

在適當的情況下,用標題、副標等清楚地分類

5. 別忽略了留白和對齊方式

設計成也細節,敗也細節,其中留白和對齊影響很大,這兩者可以讓版面又擠又混亂,也可以帶來乾淨和秩序。

讓我們一起來看看幾種常見的留白:

字距(Tracking):文字間距,又稱字間,這是在一段或一句文字中,每個文字的固定間距,調整這選項會讓整體文字看起來更擠或更松,縮小間距常用來節省空間,但太過緊密會讓文字難以閱讀,配合所選字型,找到適合的文字間距,是讓文章好讀的最佳方法之一。

行距(Leading):每行間距,這是行與行間的垂直距離,就像字距一樣,過多過少都會讓文字難以閱讀或格格不入。

邊界:這是設計周邊的空白空間,除非有特殊需求,不然通常你不會想讓內容看起來像要掉出頁面一樣,在頁面周圍大方地留點空間,讀起來會更舒服。

留白:用來指設計中所有空白、白色、空無一物的空間,如果你要放很多內容,留白看似很浪費,但要讓畫面平衡、有條理,這是不可或缺的。他讓觀眾的視線在畫面中移動,同時讓眼睛有地方可以休息。

至於對齊方式,「保持一致」是增進文字排版最好的方法,在同一設計中無意義地切換各種對齊方式(靠左、靠右、置中、分散),只會看起來很隨便。

一些小訣竅:

(Design by Bryan Kidd)

6. 學會字距微調

有一種留白是大家常常忽略的:字距微調(字間)。字句微調常和字距搞混,但兩者是不同的,字句微調是單指兩個文字間的距離。

字句微調通常是用來檢查文字排版是不是完美且專業的最後一個步驟,每種字型都有默認的字句微調,但有些文字組合起來間距就是不理想,尤其又大又顯眼的文字排版,比如說標題,最好多檢查一下有沒有哪兩字間隔過大或過小,必要的話再手動調整。

7. 限制你的字體、粗細和樣式數量

我們熱愛各種字型,但好東西太多也不好,一個設計用過多不同的字體看起來會混亂又不專業。

基本上,一份設計別用超過三種字體,如果是好的設計搭配對的內容,也是可以打破這項規則,製造電子、復古的效果,比如以下這份設計。

如果你剛開始混合使用字型,基本的襯線搭配無襯線字體,幾乎都能搭配,或者找一種有各種粗細和樣式的字體或字體系列來搭配,這樣你的文字排版看起來就互相呼應,同時還保留一些變化空間。

▲免費字體系列 Alegreya Sans

粗細和樣式很容易被濫用,這些樣式可以強調文字的重要性,在視覺上更突出,或是模擬說話語氣,但別在一段文章內用上一堆樣式,這樣會看起來強調得太用力,而且會讓讀者感到不禮貌。實際上,就算只用超過一種以上樣式的機會都不多。

8. 避免常見的「排版病」

設計程序當著我們完成很多了不起的事,但若不夠小心,有時候也讓人容易犯下一些顯而易見的錯誤。〈Thinking with Type〉 的作者 Ellen Lupton 在書的官方網站上,舉了幾個壞習慣作為例子: 不要為了填滿版面任意拉長文字,若你只拉長一個方向,會讓文字及間距嚴重變形,如果要重設大小,請固定長寬比例。

別用錯誤的引號。在英文字句中有的人會用直線引號代替逗號型引號,或者在中文使用英文引號,大部分的程序可以設定自動取代功能,或是打字的時候善用快捷鍵。

不要使用假斜體。如果字型本身沒有提供斜體,在設計程序裡還是可以簡單地把它傾斜,做成斜體,但這種技術會讓字體變形,而且通常看起來很糟糕。真的斜體是另外設計來補充原本字型的不足,而且通常是比較好的選擇。

這兒的知識點可以參考:《專業乾貨!想強調重點該用粗體、下劃線還是斜體?》

9. 避免衝突的顏色或背景

文字排版很少獨立存在,它通常會和其他元素搭配,尤其是背景。文字和其他部分間有足夠的對比,可以讓文字更易讀,但有些小技巧可以幫忙調降一下對比:

顏色的衝突:如果要幫文字挑顏色,你可能會想要挑個能和其他元素搭配的顏色,包括背景,如果顏色太格格不入,像是很醜的彈出式廣告窗口,背景是紅色,字是鮮綠色,或者顏色太相近,像是白色的字搭淺色背景,眼睛負擔都很大,視覺效果很差。

試試用現有的色系組合,來創造和諧的畫面:

圖案或複雜的背景:一樣地,太複雜的背景也會讓字難以閱讀,而你應該不想觀眾找不到信息。

試試看把複雜的圖案放在邊框,或是不會干擾閱讀的地方:

(Design by Szende Brassai / Adline)

特殊效果:透明、環繞,還有許多文字特效這些都很好玩,在某些情形下也很實用,不過也很容易用錯。我們有時候會陷入「這個設計很好看,但一點都不實用」的陷阱裡。

試試在可以增進設計效果的時候才用特效,而不是看到特效就亂用。

(Design by David M. Smith)

總而言之,當你嘗試發揮創意的同時,記得保持文字排版的清晰易讀。

10.觀察與練習

增進文字排版技巧的最佳方式之一,就是觀察其他設計師的作品是如何運用文字排版,這需要不斷地練習並培養判斷的眼光。所以請時時注意優秀的文字排版,它可能是捷運告示,也有可能是雜貨的標籤。

所以現在就靠你自己了,請妥善利用這些訣竅增進你的文字排版技能吧!

原文地址:designschool.canva
譯文地址:inside.com.tw

微信、微博最受歡迎的PPT學習資源分享

長按二維碼,關注我

越用心,越美好!

據研究:長見識和點廣告的次數成正比



相關焦點

  • 【寫給設計師】10 個排版秘訣搞定你的設計
    資深視覺設計師 Janie Kliever 在 Design School 發表了一篇文章,列出 10 個能幫你增進文字排版的訣竅和密技,雖然介紹的是英文字型,不過還是相當實用,讓我們一起來看看吧!1. 將要表達的訊息配上適當的感覺用了兩種差不多的字型?或是你總是用最喜歡的那一種字型?以上都是沒有妥善選擇字型的情形。
  • 10字體設置及10個排版技巧教你搞定設計!
    資深視覺設計師 Janie Kliever 在 Design School 發表了一篇文章,列出 10 個能幫你增進文字排版的訣竅和密技,雖然介紹的是英文字型,不過還是相當實用,讓我們一起來看看吧!1.
  • 文字排版對頁面設計的重要性
    文字信息往往是展示網站內容的主要表達方式,它是否具有很好的辨識度以及易讀性有效性由文字排版來決定,進而影響用戶對網站的瀏覽效果。下面小編就從不同的文字排版來談談對網站建設的影響。文字排版行距字間距影響網站閱讀性如果網頁設計中文字使用不同的間距,不僅會影響美觀,也會影響閱讀性。在大段文字情況下,文字間距、長度有極高的要求,用戶都是喜歡看清晰文字,如果間距小,每行文字很擁擠就會顯著亂七八糟的,讓用戶提不起興趣來再看。
  • 「文字排版」資深視覺設計師對於文字排版的十點建議
    資深視覺設計師 Janie Kliever 在 Design School 發表了一篇文章,列出 10 個能幫你增進文字排版的訣竅和密技,雖然介紹的是英文字型,不過還是相當實用,讓我們一起來看看吧!1. 將要表達的訊息配上適當的感覺用了兩種差不多的字型?或是你總是用最喜歡的那一種字型?以上都是沒有妥善選擇字型的情形。
  • 大學生怎麼搭配才吸睛?凸出獨特風格魅力,就能收穫更多回頭率
    步入大學之後,自詡自己是成年人的妹紙,認為稚氣滿滿的學院風搭配,已經不適合自己。而想要穿出新潮又時尚,卻有種無從下手之感?如果你擁有這樣的搭配煩惱,今天這份大學生搭配指南,可以給你帶來更多的搭配靈感!大學生怎麼穿才吸睛?
  • 電商視覺設計之文字排版!
    文/張梅 在電商設計中,主要還是以營銷為主,而主要又是通過文案傳達一些利益點給客戶,在詳情頁裡面通過文案告訴買家這個產品有什麼優點,這些都是通過文字的排版,合理的使用去體現它的特點。對於電商視覺設計而言,文字、圖像、色彩以及版式是最基本的要素,在電商視覺設計當中,掌握好文字排版是電商視覺設的關鍵環節,也是傳遞信息最直接的方式,文字在電商視覺設計中是最基礎的交互元素,文字本身的傳遞意義是最為準確的。①簡潔性。
  • 如何設計一張色彩繽紛的吸睛海報?
    使用可愛的粉色要設計多色彩,除了高飽和度顏色或明亮的螢光色。你可以嘗試使用一些可愛的粉色調,例如粉紅色、粉藍色,搭配在一起仍然是一張非常吸引眼球的優質海報,就像上面那樣。明暗色調要搭配你使用明亮的顏色的時候,要拿捏明亮色和灰暗色的組合。下面這個海報明亮的綠色和芥末黃非常協調協調。當需要第三種顏色時,就可以把萬能黑色搭配進去。
  • 學會這五個技巧你就是多圖排版大師!
    版式設計很簡單(ID: fomat_design)多圖排版對很多人來說是一大難題,不知道圖片怎樣編排、文字放哪裡合適?那麼如何快速高效地搞定多圖編排?所以今天的這篇文章就是要來分享,在不同情況下有哪些多圖排版技巧。01《統一尺寸編排》這種編排在很多設計中較為常用的方法,版面視覺整齊清晰,但容易缺少變化。這裡不建議多個頁面都使用這一種方法,會顯得更加單調。
  • 看過500份作品集,為你總結出最強作品集排版乾貨!
    Deadline尾聲,SIA捷報頻發,小編偷偷採訪了獲得名校offer的小夥伴們,他們透露了成功申請的秘訣:作品集很重要!作品集很重要!作品集很重要!重要的事情說三遍!!!作品集是藝術留學申請的必備材料甚至對於申請起到關鍵作用,那麼怎麼樣的作品集會讓招生官「驚喜」呢?今天小編就給大家聊聊怎麼製作令人驚喜的作品集排版呢?1.
  • 一件白T恤,加這4款「清爽下裝」,三分鐘搞定吸睛打扮
    因為白色的T恤是可以很洋氣,很高級的,關鍵之處就在於你自己的搭配,以及選擇什麼樣的夏裝。要知道白T恤是可以凹造型出多種風格的。所以看看一件白T恤,加這4款「清爽下裝」,三分鐘搞定吸睛打扮!所以搭配夏裝可以多講究,首先就是配上露背的吊帶裙,這是很經典的穿法,清爽利落,再穿上一雙高跟鞋,妥妥的吸睛打扮,讓人覺得很洋氣!
  • 服裝畢業設計文本/企劃【排版指南】!
    看上去像是對齊的,但事實上只對齊了文本框,文本框裡面的文字並沒有對齊,這也是不可取的。這種圖片左右兩側直接接文本的版式,是因為兩者中間有一個欄間距。我們應該讓圖與文是左右的關係或者讓圖與文是前後的關係。有些學生,意識到前面三種排版問題,圖與文之間的距離也規範的拉開了,但是卻又遺忘了組與組之間的距離……其實,組與組之間的間距可以大一些,這樣才可以看出來文字是跟著左邊的圖,還是右邊的圖,一目了然。
  • 三伏天到了,如何搭配才時髦吸睛又顯高
    三伏天是一年中最熱的時候,往往在這個時候大家都不想出去,窩在家裡吹著空調吃著冰果才是最愜意的時候,那麼有時候又不得不出去的時候怎麼辦呢?這時候大家是不是都想穿一件簡簡單單的短袖T恤就出門呢?那麼今天小編就告訴大家如何搭配才時髦吸睛又顯瘦!1.牛仔上衣+開叉長裙復古牛仔方領短袖牛仔襯衫,設計感小眾。
  • 素雅吸睛的荷蘭風格家居用品設計
    BPNLab Design|Fashion|Art Ideën從荷蘭現代設計中汲取靈感,採用簡約極簡的風格設計。
  • 微胖女生如何吸睛?8套顯瘦的夏日穿搭,「要你好看」
    那麼微胖女生在夏季要如何吸睛呢?別著急,這8套顯瘦的夏日穿搭,「要你好看」,輕鬆解決你的穿搭煩惱。夏季最需要這一抹綠色,不經意間就沁人心脾。火爆時尚圈的牛油果綠半身裙,這個酷夏,你怎麼可以輕易錯過呢?而且上衣還搭配綠色T恤,相互呼應,詮釋出最高級的穿衣法則。小仙女可以直接配小白鞋,上班逛街穿都很適合。
  • 平面設計高大上排版技巧分享
    但對於絕大部分的新手來說,設計的第一步從找模板開始,就最正常不過了。今天青藤醬帶來分享的是平面設計當中應用於排版設計的幾個使用技巧和案例,希望能夠對你們有所幫助哦。1、平鋪大法畫面感巨強烈的懶人實用大法,把主素材鋪滿整個版面,豐滿了設計整體的同時又能免去顏色搭配的苦惱,經常在封面設計和主視覺設計看到這種用法。
  • 聚焦哥:論文式多文字排版怎麼才好看
    「我朋友說他的論文排版太多字了,怎麼也排不了」小何對著聚焦哥說「噢?那你給我看看」聚焦哥「好吧,我來亮瞎你的狗眼,不,gold眼」小何奸詐的說!傳送門——聚焦哥:PPT如何將一堆文字快速排版二、圖標形象法圖標,類型也要一致。圖標居然還分那麼多種類、線性的、面型的、扁平、手繪的、簡約的、精美的。
  • 氣質吸睛的街頭搭配,簡約設計也能時髦出眾,適合秋季穿著
    畢竟看到美好的事物都喜歡多看幾眼,路人看到都要多瞅幾眼,抱著欣賞的態度為你打分。所以美好的搭配可以氣質加分,做到滿滿的回頭率不成問題。那麼言歸正傳,如何才能獲得一個最近的時尚搭配呢?下面我們就來一睹為快。
  • 如何在APP界面設計中把文字排版做到極致?
    做ui設計的朋友們,你們一定在設計中碰到排版的吧,根據我的經驗,排版是UI設計中最難的部分。它們存在於各種形式並與我們相處了很長的時間。還好我們有許多規則、實踐方式與理論可以幫助那些比較難跟上的人。在這篇文章中,我將給你幾個實用的提示和技巧讓你可以在項目設計中使用。超越理論的實際案例雖然排版是一個非常吸引人的主題,但我不會用太理論的東西來煩你。
  • 那是因為你沒學會這10個設計法則…
    視覺化的東西可以幫助你更快地表達內心想法,這與我們每天從網上吸收的一堆雜亂無章的文字內容形成了鮮明對比。但是,當你要和成千上萬個品牌一起競爭時,怎樣才能脫穎而出?答案是——採用好的設計。 如果你使用社交媒體的目的,是想吸收更多的粉絲,那麼好的設計能加速這一進程。想要發布高效、漂亮的社交媒體推文,需遵守以下10個原則。1.
  • 如何打造自媒體爆文?新手寫好自媒體文章?自媒體爆文採集平臺?
    因為只有你寫的東西別越多的人看到,你的文章才有瀏覽量,從而獲得最終的文章收益,無論你是寫哪個領域方面的自媒體文章,下面這些自媒體爆文技巧一定要知道。一、如何打造自媒體爆文?1、文章領域垂直,文章題目、文章內容一定要相吻合2、不要犯違規和扣分錯誤,提前了解發文平臺的規範3、原創,平臺發現你的文章有抄襲,那肯定會影響你文章的推薦,也會影響你的帳號信用評分4、選題新穎、獨特。