網頁排版終極指南:規則、詞彙、想法和最佳實踐

已發表: 2018-05-16

'一張圖片勝過千言萬語。'

大多數情況下,圖片傳達了他們要說的內容。 但是,帶有文本的圖像會產生更大的影響。

排版作為圖形的伴侶。 排版不僅僅是從編輯軟件的下拉菜單中選擇隨機字體和磅值。 它是平面設計的專業領域。 它是排版的藝術和技術。 如果您知道如何使用它,這是可以將您與其他設計師區分開來的重要技能之一。

什麼是排版?

在進入排版的藝術和技術之前,首先要了解排版是什麼。 排版是文本的視覺片段(書面文字)。 文本是一系列單詞。 你看到的每一個視覺顯示的文本基本上都是排版。 文本可以按視覺、聽覺和數字三種方式進行分類。

What is Typography?

排版不僅僅是字母和字符的設計。 它包括點大小、間距和線長的選擇。 早在約翰內斯·古騰堡(Johannes Gutenberg)推出印刷機的時候,排字員必須在物理空間中排列字母和字符。 現在在計算機時代,這項工作要容易得多。 你只需要找到開源字體,排列字母和字符,就完成了。

排版的重要性

排版是您絕對可以在任何地方找到的東西。 比如說,它可以是您的智能手機、咖啡杯、廣告牌、布料等等。 排版無處不在。 字體、字母和字符排列的選擇決定了您的信息將如何傳達。

即使在您看來這似乎是一個小因素,但肯定不是。 即使是單一類型的調整也可以改變您作品的整體外觀和感覺。 如果你注意到 Facebook 在 2016 年 6 月測試了一種名為 Geneva 的新字體。它比原來的 Helvetica 字體更薄更輕。 但是,這兩種字體之間的差異是顯而易見的。

排版規則

在排版中,您必鬚根據您的佈局、網格、設計主題、配色方案等選擇字體。 以下是您在工作時應牢記的一些排版規則。

Rules of Typography

選擇正確的字體

如果您在互聯網上花費幾分鐘,您會發現大量可供免費和付費使用的字體。 但這並不意味著您必須花費數小時搜索您在腦海中想像的確切字體。 即使使用有限的調色板,您也可以開始繪畫。 有一些像 Helvetica 這樣久經考驗的字體在任何項目中都不會出錯。

字體是一種設計形式,由工匠在相當長的一段時間內貢獻了他所有的努力和技能。 專業設計的字體在重量和样式方面提供各種定制,以創建一個完整的系列。 此外,它們提供了相當多的字距調整,支持多語言、排版定制。

以下是考慮的最重要的印刷術語:

尺寸

並非每種字體都是平等創建的。 有些人使用胖而寬的方面,而另一些人則使用瘦而窄的方面。 不同類型的字體可以在頁面上獲得不同數量的空間。

字符的高度表示為 X 高度。 當您配對不同的字體時,最好只使用那些具有相似 x 高度的字體。 另一方面,字符的寬度稱為“設置寬度”,它決定了字母將佔用多少空間並與其他字母緩衝。

點系統是自 18 世紀以來用於測量類型的方法。 一個點可以測量為1/72英寸,12個點可以形成一個皮卡。 Pica 是衡量列寬的單位。 此外,尺寸可以以像素、英寸或毫米為單位。 這取決於項目的要求。

領導

每行文字之間的垂直間距稱為行距。 之所以稱其為行距,是因為在使用金屬排版的時候,鉛字就被用來劃分字體的行數。 獲得可讀正文文本的經驗法則是使用高於字體大小的前導值。 您可以使用 1.25 到 1.5 倍的領先值。

跟踪和字距調整

字距調整是涉及調整字符之間的空間的行為。 它有助於產生和諧的配對。

例如,當您使用大寫字母“A”和大寫字母“V”時,“V”字母左上角的對角線筆劃與“A”右下角部分對齊。

另一方面,跟踪是與均勻應用的所有字符的間距有關的術語。 Kerning 與 track 類似,但兩者並不相同。

措施

度量是解釋文本塊寬度的術語。 為了獲得最佳的閱讀體驗,您應該將度量視為排版的一個重要方面。

層次結構和規模

所有類型不能以相同的大小使用,您必須為類型設置層次結構。 否則,讀者將難以理解哪些信息比其他信息最重要。

通常,標題較大,子標題較小,正文類型略小於子標題,以幫助讀者理解其層次結構。

不僅僅是尺寸,使用不同的顏色、重量和間距也可以幫助您在工作中設置層次結構。

詞彙表

我們在這裡涵蓋了幾乎所有涉及排版的基本概念和術語。

Glossary

  • Aesc :發音為“Ash”。 它是兩個字母的連字,即。 'a' 和 'e'。 aesc 的起源來自古英語,它表示為雙元音。 Aesc 已遷移到冰島語和丹麥語等字母。
  • 光圈:光圈是字形的打結開口,可以用“e”之類的字母看到,光圈的大小根據其實現而變化。 然而,當您改變光圈時,其效果將反映在字體的可讀性上。
  • 頂點:頂點是字符頂部的點。 是左右筆劃交彙的地方。
  • 基線:這是大寫字母的基礎所在的部分。
  • Bowl : Bowl 被認為是“b”和“p”等字母的封閉部分。
  • 括號:它是一個楔形的輪廓,對於在許多字體中保持襯線和形成字體的詞幹很有價值。
  • 大寫高度:大寫高度是基線上方大寫字母的高度。
  • 計數器:計數器被封閉或不完全封閉的字母形式的一部分。 計數器可以在字母“c”或“g”和“e”的下部看到。 這部分可以和碗混在一起。
  • Descender :它是低於基線的字母形式的一部分。 例如 - 像“p”、“y”和“q”這樣的字母。
  • :耳是從碗的右上方展開的小筆劃。
  • Glyph :它是構成字體的奇異部分。 任何有助於構建字體的單數部分,無論是標點符號、數字、字母,甚至是 dingbat,都包含在其中。 字形可以稱為排版的構建塊。
  • 裝訂線:它是您作品的兩頁之間提供的空間。 在文本列中通常可以看到排水溝。
  • Orphan :Orphan 是新段落的第一行,在頁面末尾穿線。 這不是您希望在項目中擁有的東西,因為它被認為是一種不好的做法。
  • Pica :Pica 是衡量列寬的單位。 一個 pica 中有 16 個像素或 12 個點。
  • 可讀性:它被稱為易於閱讀,包括使用可以通過眼睛輕鬆掃描的文本塊。
  • Serif :它是帶有襯線的字體。 這種字體中字母的筆劃結尾源於羅馬傾向。
  • 無襯線:沒有襯線的字體是無襯線或無襯線。
  • Spine :它是主要的彎曲筆劃,出現在大寫字母“S”的小寫字母中。
  • Spur :它是一個小凸起,出現在字母形狀的曲線上。 它也被稱為鬍鬚或喙。 例如 - 字母“G”。
  • 詞幹:全長筆劃在直立字中稱為詞幹。 它是垂直的。
  • X-height :給定字體中小寫字母“x”的高度是 x-height。

7 排版理念和最佳實踐

Typography Ideas and Best Practices

以下是您可以在工作中使用的最佳排版實踐。 在您的項目中使用這些技巧來創建您自己的傑作。

選擇正確字體的重要性

每個設計師都有一個他最喜歡的字體列表。 但是,這並不意味著您必須始終只從您最喜歡的列表中選擇一種字體。 每一種字體都有自己的風格、個性和情緒。 因此,您必須決定哪種字體最適合您的設計。 字體選擇很重要,因為它可以幫助您向觀眾傳達信息。

牢記你的聽眾

在選擇與您的設計理念相得益彰的字體後,您應該考慮它是否適合您的受眾。 一組目標受眾可能會覺得你的字體很時髦,而有些人會認為它們過時了。 因此,您必須了解您正在為誰設計項目。 在確定字體決定之前,應考慮受眾的年齡、性別、位置和其他因素。

設置層次結構

如前所述,層次結構在排版中起著重要作用。 您的圖形應該井井有條,並且應該易於導航給讀者。 排版層次結構對於製作大量文本的設計非常有用,例如書籍、通訊、雜誌和其他傳統印刷出版物。

注意間距和對齊

間距和對齊可能聽起來不那麼重要,但它肯定不是。 如果沒有適當的間距和對齊方式,您的設計會顯得混亂、雜亂和普通。 間距包括前導、邊距、跟踪和空白的使用。

在需要時使用 Kerning

許多設計師對跟踪和字距調整感到困惑。 但是,它們都是不同的術語。 字距調整使您的排版看起來專業而優美。

不要超過字體、粗細和样式的使用

我們都喜歡使用不同的字體並自定義它們以看起來優雅。 然而,在一個設計中使用不同的字體會讓你的作品看起來很業餘和凌亂。 您應該避免在一個設計中使用超過三種字體,以使其具有專業的外觀。

觀察與實踐

一種嘗試和測試提高您的排版技能的方法是研究其他設計師如何在他們的工作中使用排版。 這是一項需要練習和關注細節的技能,以了解某人如何在他們的項目中使用排版,以及您將如何在您的項目中使用它們。

這是排版的終極指南。 希望本指南可以幫助您了解不同的概念和實踐,從而提高您的排版技能。