TYPEFACE OR FONT

如何區分TYPEFACE OR FONT,希望本指南將幫助您提高設計質量。


TYPEFACE OR FONT |你分得清楚嗎?


你能說出這個gif上繪製的字體嗎?


TYPEFACE OR FONT |你分得清楚嗎?


Q:Hey, Jeremy, 你怎麼看待這種Font呢?

A:你說的是Typeface,不是Font。

TYPEFACE OR FONT |你分得清楚嗎?

Typeface 代表一種概念。 而 Font 只是在這個概念體制下形成的一種格式。

比如 (Helvetica 是一款 typeface,而 Helvetica Regular 就是其中一個 font)


舉個例子。 The Typeface 代表一首歌曲。 Font 只代表這首歌曲其中的一種數字格式。



TYPEFACE OR FONT |你分得清楚嗎?


這些還重要嗎?

字體不再受到鉛字的限制了; 現在你可以在數字文件中獲得字型所有的大小和變體。

TYPEFACE OR FONT |你分得清楚嗎?


早在2014年,我就是一名平面設計師,剛剛準備搬到舊金山成為一名UX設計師。 在此之前,我曾與不同的跨國企業集團合作。我準備通過在灣區的創業公司工作來改變一切。


我知道如何在藝術海報中佈置元素並將字體組合得天衣無縫 - 但當我在Web應用程序上工作時,我發現它們是如此不同? 我很快就意識到,我需要從新開始了。


在瞭解UX設計的同時,我發現自己對排版特別感興趣。 我愛上了幾何無襯線字體和新古典襯線字體。 我開發了以下一系列指南,這些指南一直幫助我進行排版設計。 希望您可以應用這些技巧來開始改進你自己的排版設計過程。


排版的六個技巧


1.首先為正文選擇字體。

2.避免使用兩種以上的字體。

3.平衡線間距和字體大小。

4.保持您的線長約45-90個字符。

5.使用模塊。

6.要特別注意正確的標點符號。

TYPEFACE OR FONT |你分得清楚嗎?

1.首先為正文選擇字體


始終首先為正文選擇字體。它將影響任何其他字體的決定,如標題。您的正文文本的外觀和感覺將對您的設計的印刷質量產生最大的影響。


有四種主要類型的字體可供選擇:襯線字體,無襯線字體,手寫體和花式字體。為了更好地閱讀產品設計,最好簡單地在正文上使用serif或sans-serif字體; 謹慎使用花式或手寫字體,例如標題和短文。


TYPEFACE OR FONT |你分得清楚嗎?

大多數傳統出版物如書籍,報紙和雜誌都使用襯線字體作為正文。無襯線字體是缺乏襯線細節的字體。它們通常看起來比襯線更現代。Sans-serifs曾經是網頁設計的首選,因為它們在低分辨率屏幕上呈現得更好。今天,屏幕具有更高的分辨率,襯線字體看起來同樣好。

TYPEFACE OR FONT |你分得清楚嗎?

選擇行程對比度低的字體


筆畫對比度是字體中筆畫寬度的變化。像Didot這樣的一些字體具有更高的對比度,這意味著字母的某些部分的寬度比其他字體寬。具有較高筆劃對比度的字體可以很好地用於標題,但通常不適用於較小的正文文本,其中細線消失並且文本不可讀。對於正文,請使用寬度更一致的字體 - 低筆畫對比度。

TYPEFACE OR FONT |你分得清楚嗎?

選擇具有平衡X高度的字體。

X高度由字母X的高度決定,通常用於指代小寫字符的高度。您希望您的正文文本使用具有平衡X高度的字體在屏幕上清晰可辨。如果X高度太低,則大寫字母看起來太大。如果它太高,那麼你將無法區分大寫和小寫。

2.避免使用兩種以上的字體


既然您已經為你的正文選擇了一款單一的字體,那麼你已經準備好了所有的創意並將它與不同的字體結合起來,對嗎?下面這是我的建議。

TYPEFACE OR FONT |你分得清楚嗎?


玩風格


現代網絡字體通常具有許多不同的樣式,這意味著它們具有不同的重量,或者甚至可能具有用於主體和顯示副本的獨特樣式。一個很好的例子是Apple的 San Francisco。具有更大範圍的樣式和權重的字體可以幫助您以恰當的方式區分特殊上下文中的文本,它們還可以幫助您平衡文本不同大小的顏色(感知強度)(例如,正常體重設置的正文和重量較輕的標題)。


混合同一個超級字族。


哦,你還想結合字體嗎?幸運的是一些字型的家庭有serif和sans-serif面孔。因此它們的設計可以很好地結合在一起,當你混合它們時,它們最終看起來很奇怪的可能性很小。這裡有些推薦:


Source Serif Pro和Source Sans Pro(免費!

PT Serif和PT Sans(也免費!

Droid Serif和Droid Sans(OMG,免費!


如果你決定組合不同的字體,那麼你可以考慮通過相似性或對比度將它們配對。當x高度,對比度,寬度或情緒之間存在明顯的關係時,配對往往效果最佳。我建議不要混合兩種以上的字體,除非你真的有信心。最後,相信你的直覺並打破規則。


3.平衡行間距和字體大小


影響產品可讀性的主要因素是字體大小和行間距之間的良好平衡。行間距是行之間的垂直距離。從正文文本的字體開始。對於屏幕設計,合理的尺寸將在14到25像素之間,具體取決於您選擇的字體。行間距將相對於您的正文文本大小。通常,最佳行間距在字體大小的120-155%之間。



TYPEFACE OR FONT |你分得清楚嗎?


4.保持線長約45-90個字符


行長度是文本塊的水平距離。線長可能是網絡上最常見的設計問題之一。良好的線長應在45到90個字符之間,包括空格。較短的線條會使設計的易讀性產生很大的差異,因為它們比較長的線更舒適。隨著線條長度的增加,人們的眼睛必須從一條線的末端進一步移動到下一條線的開始,這使得跟蹤它們的進展變得更加困難並且可能會疲勞(儘管它可以促進頸部鍛鍊)。


“66個字符線被廣泛認為是理想的。對於多列工作,更好的平均值是40到50個字符。“

TYPEFACE OR FONT |你分得清楚嗎?

5.使用模塊


好的,你選擇了一個漂亮的字體,並努力使你的文字更容易閱讀。現在您可能想知道您應該設置的字型的大小。嗯,模塊化比例是確定您的印刷尺寸甚至整個佈局比例的最佳方式。


模塊化比例是一系列值,可用於以和諧的方式確定文本樣式的大小。應用它可能令人生畏,但它非常簡單。你首先選擇一個比例,例如,黃金均值1:1.618。然後選擇文本的基本大小,例如16px。之後,您乘以值得到的序列為:16px,26px,42px,68px,110px。

TYPEFACE OR FONT |你分得清楚嗎?

6.正確的使用標點符號

這部分聽起來更像是語法而不是排版,但除非你想被視為業餘愛好者,否則你需要知道如何以及何時正確地使用撇號和破折號 。

TYPEFACE OR FONT |你分得清楚嗎?

智能引號和撇號

智能引號和撇號是彎曲的 - 它們具有“6”或“9”的形狀。這些不要與直引號相混淆,它們看起來是垂直的,通常位於鍵盤上的返回鍵旁邊。

TYPEFACE OR FONT |你分得清楚嗎?

連字符和破折號

不要混淆連字符和破折號。它們看起來很相似,但它們不一樣。


Hyphen,是這些字符中最小的一個。他們習慣於將斷行的單詞組合成一個單詞。


En dash,比連字符寬,比短劃線更窄。它用於日期或數字以顯示一系列值。例如1981-2017,Aisles C-F,或第12-69頁


Em dash,是這些標記中最大的。他們習慣於在句子中停頓並引起人們的注意 。它們可以替換逗號,括號或冒號。


希望本指南將幫助您提高設計的質量。


所有內容版權歸Pablo Stanley所有

未經許可,不得商業用途

©2019 Pablo Stanley


Pablo Stanley

——

InVision的設計師

Carbon Health聯合創始人

作家

本文未經允許


分享到:


相關文章: