版式設計中,選了字體,如何規範字號、粗細、字符間距和行距?

2020-12-12 circle圈圈circle

一切版式設計都是為閱讀而產生的,閱讀的基本前提是清晰的視覺效果。那麼在版式設計中,影響信息傳遞的基本因素不僅僅是前文(字體太多怎麼選?十幾年的設計總監最擅長用這七種字體)所說的字體問題,字號、粗細、字符間距和行距都是影響閱讀的基本要素。本文計劃將這幾個問題放在一起和各位設計師朋友聊一聊。

我們先看一個案例

在這段文字中,在字體選擇上,我們同意採用的是微軟雅黑,有所區別的是標題相比正文使用的是24pt的加粗體。在字符距、行距和段落距方面都沿用最原始參數,並未做任何調整。很明顯,這樣的排列方式是不便於閱讀的,密密麻麻地,讀起來很費力,讓人有一種並不想往下讀的感覺。那面對這種字數較多的段落,設計師在確定了字體之後,對於各方面距離應該如何考慮?如何規範呢?

字號相關「規範」

選擇什麼樣的字體是基於設計風格,而選擇什麼樣的字號則是基於閱讀距離,不同的閱讀距離,通常會有相對固定的字號範圍。設計師只有了解了這個基本原理,做出來的作品才更符合邏輯和閱讀習慣,也才有審美可言。根據閱讀距離,基本可以分為手持閱讀,站立閱讀和遠距離閱讀三種基本形式。如最常見的DM單、書籍、名片、畫冊、折頁、手持電子設備等都是手持閱讀範圍,這些場景下的版式設計,字號就會相對較小,通常在7—12pt之間,而8pt是使用最多的。

站立閱讀最常見是室內海報,店招、展架等形式。這些閱讀形式的視距比手持閱讀要遠,因此字號也會做相應放大。一般都會選擇48pt以上字號。更遠距離的閱讀,比如戶外大噴,地鐵站臺廣告等,其字號可以根據實際需求做恰當調整。

提示:這樣的規矩並不是一成不變的,設計師在不同的應用場景中,不見得一定要尊重這樣的「規定」。這只是在普遍場景中的普遍規律。但無論如何變化,滿足視覺要求都是第一。在常見的印刷物料中,標題通常比副標題大1—2倍字號,比正文內容大2—3倍。

相同字號的粗細對比

在閱讀中,我們無法否認無論是什麼樣的閱讀方式,其核心依舊是內容,在內容之上,影響閱讀的基本要素之一是相同字號的粗細問題。字號粗細往往能給人視覺上強烈的對比,引起重視或要表達強調。在字體中通常用「Light」「Regular」「Heavy」來表示,表示字體的粗細,也稱為字重。如下圖就是以思源黑體為例的,相同字號下不同粗細的對比:

很顯然,選擇不同粗細的字,在視覺感官上的區別還是很明顯的。在版式設計中,這些不同粗細的字,越粗的字通常是用來表達越重要的內容,比如一級標題通常都會選擇粗體字,副標題選擇低一級的字。正文內容則又比副標題降低一個粗度,如果一個頁面上需要出現比正文內容更小的字時,同樣會選擇相同字體中的最細字。

字符間距與行距

在版式設計中,字符間距和行距是每一名設計師都必須考慮的事情。如果一張海報中的內容很少,一行就能說完,那就只需要考慮字符間距,如果是文字很多,有涉及到標題、副標題、正文和分段時,就需要考慮行距的問題。

行距:我們的閱讀習慣都是從左向右,當一行讀完後轉行,上一行與下一行之間的距離就是行距。但是在版式設計中除了每一行之間的距離,還要考慮正副標題之間的距離,標題與正文之間的距離三個方面。下圖就是標題、副標題、正文及裝飾文字之間的字號和距離展示。

為什麼要使用這樣的行距,難道其中還有更玄妙的關係嗎?這個問題在本文姑且留給各位看官去思考,因為要回答這個問題不僅涉及到親疏的問題,也涉及到群化和層級的問題。我們打算在後面的文章中繼續為大家解答。

相關焦點

  • APP界面的字體規範!
    文字設計是界面設計中最細節的部分,也是最不可忽視的基礎部分。在界面設計過程中要考慮兩大因素:文字辨識度和界面的易讀性。在任何一個有效的界面裡,具有層次的設計可以將界面上重要的部分與次要的部分區分開來,可以從對齊、間距、顏色、縮進和字體等方面做文章。當所有這些都調整運用得適當時,可以提高整個界面的可讀性。很多剛做APP界面的設計師,經常會因為字號、字體顏色、間距而困擾。
  • vivo瀏覽器新聞閱讀的優化設計
    幹擾閱讀的因素上圖中我們對幹擾閱讀的因素進行了細分,一共三個大模塊:外界,自我,和文章本身,我們設計師能加以優化的點都和文章本身相關(文字字號,字體,字間距,真實感,行距,段落間距,頁面材質等)。正文:大部分閱讀器APP字號比新聞資訊類APP大一些,資訊類字號選在51最為合適,54也可以考慮。標題:大部分新聞類主標題文字選用69,72px,但69號字在版式中稍微偏離規範。
  • 版式設計的文字層級!增加層次感
    設計的對象是圖片和文字,設計的目的是傳遞信息和滿足審美需求,對於一個合格的設計師來說,良好的版面設計體現了設計師對各種視覺信息極精準把握能力。版式設計主體簡單來說就是在版面中最重要的元素,好比點、線、面中的面,而其他元素的存在只起到了襯託或輔助作用。
  • 先來看看這些「間距」?
    首先我們選中文本,然後點擊字體的顯示器,在高級中找到間距,將其設置為標準即可。 具體操作如下: 4、編號和文字之間距離太大 在設置編號時,有時會發現編號和文字的距離太大了,這時我們就可以選中文本部分,然後選中標尺上的懸掛縮進,直接拉動即可
  • 巧用版式技巧提升設計高級感
    巧用版式技巧提升設計高級感,在設計的過程中,許多新人設計師總是無法很好地掌握排版技巧,今天優行者小編就和大家簡單說說。一、無襯線字體與手寫英文搭配設計師在做排版設計的時候,可以給英文或者中文標題選擇一個筆畫比較粗的無襯線字體,然後在它的上面加上一個或者幾個比較潦草,筆畫較細的手寫英文單詞,這樣的設計方法能夠起到非常不錯的裝飾作用。二、將英文排成一個圓圈設計中總是覺得自己的版面設計過於規矩,沒有特點可言?那麼一個用英文排成的圓圈就可以解決很多類似的問題。
  • 如何調整幻燈片中文本的字符間距?
    在PowerPoint 2010中如何調整字符間距以改善顯示效果。圖3-82  字符間距過於緊湊使用功能區中的「字符間距」命令調整文字之間的距離。使用「字符間距」預置選項單擊佔位符邊框以選中整個佔位符中的所有文字,然後單擊功能區中的「開始」→「字體」→「字符間距」按鈕,在彈出菜單中選擇一種預置的間距效果,比如「常規」,設置後的結果如圖3-83所示。
  • 如何快速調整PDF文檔的字符間距?
    目前PDF文檔可能是我們日常工作中最常接觸的文檔格式,但對於它的內容或段落修改可能很多人都不太熟悉。比如PDF文檔中的字符間距如何快速進行修改呢?對於PDF的編輯必須使用相關的PDF編輯器,首先我們下載並安裝極速PDF編輯器後,打開需要修改行距的PDF文檔。
  • 中國設計之窗帶你重新認識一下電腦裡面用的那些字體(一)
    、中文字體常見的分類方式,另外簡單介紹一下各平臺下字體渲染的相關的問題,還有標點使用和排版規範。Roman 羅馬同一字體(Adobe Garamond)的 Italic(義大利斜體)與 Oblique(單斜體)字體結構字間距、字偶間距與等寬字體字間距(Spacing)顧名思義是字符間的距離,在實現上就是字符圖形外邊界框的尺寸和字符在方框中的位置。
  • 字體太多怎麼選?十幾年的設計總監最擅長用這七種字體
    關注「百家號」的設計師朋友們如果讀了我們發的《版式設計系列課程2:版式設計中的「三定一執行」是什麼意思?》這篇文章,那一定會留意到在文中的海報和文末留出的問題。沒錯,就是關於字體選擇的問題。那麼今天就來聊聊版式設計中的「字體選擇」這個話題。
  • word之設置文本的字體格式
    1.設置字體和字號如果在編輯文本的過程中通篇採用相同的字體和字號,那麼文檔就會變得毫無特色。下面就來介紹如何通過設置文本的字體和字號,以使文檔變得美觀大方、層次鮮明,操作步驟如下:①首先,在Word文檔中選中要設置字體和字號的文本②在「開始」選項卡的「字體」選項組中,單擊「字體」下拉列表框右側的向下三角按鈕③在隨後彈出的列表框中,選擇需要的字體,例如「微軟雅黑」,如圖所示
  • 永中移動Office如何完美匹配辦公文檔格式?
    特別是字體、字號要求一般都按照Office辦公文檔格式標準(如三號、四號、五號字號)進行操作(如下圖),這個時候通過永中Office App就能在「掌上」快速實現,下面介紹具體操作。在永中Office App中打開報告模板,以網上隨機查找的一份無格式的調查報告為例,填入格式文檔中。
  • 那些爆款版式背後,都離不開這些原則
    本文轉載自:BranD的好奇心在這個時代,無論是紙媒還是網際網路,信息的傳播都離不開版式設計,好的版式設計可以在有限的頁面內,以最快速、直接、有效的方式傳遞出核心的信息內容,並讓受眾建立深刻而良好的印象。所以,今天帶大家學習一些版式設計知識,希望可以助你早日做出爆款的版式!
  • 中小學試卷字號怎麼用?人大代表好細心!校園印製試卷將有規範了
    老師們只考慮節約紙張,只考慮擠在一張試卷上,從來沒有考慮過一一字號應該設計成什麼樣子?行距應該設計成什麼樣子?學生們需要什麼樣的字號?什麼樣的字號對學生身體健康有好處呢?大家總是憑著自己的習慣,自主的設計者。從來還沒有考慮過字號和行距的問題。從來沒有考慮過字號和行距影響中小學生視力、影響著生中小學身體健康的問題。
  • 設計|世界排名第一的設計院校的師生們如何實驗字體設計?
    字體排印從側面影響著生活的方方面面,從書籍到社交媒體、從貼在燈柱上的尋貓啟事到數字屏幕上的動態信息,它們無處不在地發揮著隱藏的作用。各大設計院校的視覺傳達設計專業也將字體排印作為一門重要的選修課程教學,那麼QS排名世界第一的藝術設計學院的視覺傳達系,又是如何進行字體實踐的呢?
  • word怎樣調整字間距?
    在word的操作中,為了排版的美觀,常常需要調整字間距,然而很多人遇到調整字間距時卻一臉茫然,忘記了這個最基本的操作。不同間距的字我們都知道行距的調整在段落裡面進行,那麼字間距的調整肯定在字體裡面進行。方法簡單,一學就會。選定需要調整字間距的文本。
  • word行間距怎麼調?word行距調小調大固定值怎麼調?
    奇點來臨和大家一樣,在大家平常工作中,往往都是用的word辦公軟體或者wps辦公軟體,兩個軟體操作是類似的。而在使用word辦公軟體的過程中又會遇到各種各樣的問題。今天小編就和大家分享下word行間距怎麼調。在講解前大家要知道,什麼是行間距。行間距簡稱行距,就是指行與行之間的距離。一般是針對一個段落來說的,也就是兩個段落標記,回車符之間的句子。
  • 當你的PPT不得不塞進大篇文字的時候,該如何才能讓它變得好看?
    設計中國風 PPT 時,常用豎排文字。 「兩端對齊」的效果和左對齊類似,只是當各行字數不相等時,「兩端對齊」會強制將段落各行(除最後一行外)右側對齊,以使段落看起來更美觀。
  • 如何設計規範的原型圖?
    首先需要了解交互稿和原型圖的聯繫與區別:按照常規的工作流程,互動設計師最終交付的產物包括任務流程圖、信息架構圖、頁面原型圖、頁面交互說明、頁面流程圖,這些都可以歸納到互動設計文檔中。因此原型圖只是交互稿的一部分,本文將鋪開闡述設計規範的原型圖應該注意哪些。
  • PS-文字+版式=創意字體概念
    PS-文字+版式=創意字體概念文字體系文字演變過程文字空間結構造字方法為什麼要文字變形:常規的字體顯得越來越呆板,所以我們打破常規,從靈活多變的角度出發將字體變形,賦予它新的含義與活力,也就是使字體變得更富表現力和感染力。