- 圖文教程 >
- 設(shè)計(jì)教程 >
- 平面設(shè)計(jì) >
- 10條能夠讓你擁有完美字體設(shè)計(jì)的規(guī)則
10條能夠讓你擁有完美字體設(shè)計(jì)的規(guī)則
?
作者：深圳Clh來源：部落窩教育發(fā)布時(shí)間：2017-11-20 10:03:23點(diǎn)擊：2345
版權(quán)說明： 網(wǎng)絡(luò)作品，轉(zhuǎn)載請注明原作者和出處。
編按：
一個(gè)完美的設(shè)計(jì)需要一個(gè)完美的排版，而排版最難的應(yīng)該是如何用好字體了。本教程詳細(xì)解析了設(shè)計(jì)師需要注意到的問題，包括字體形狀，字體大小，文字間距還有對齊方式等。
1.為項(xiàng)目設(shè)定目標(biāo)
一個(gè)好的排版首先需要你對你的項(xiàng)目在實(shí)際中的作用或目標(biāo)有一個(gè)堅(jiān)實(shí)的了解。在你開始瀏覽谷歌字體或Typekit字體庫之前，先記下幾個(gè)幾個(gè)問題的答案：
· 你想通過這個(gè)項(xiàng)目與誰建立聯(lián)系？
· 用戶在實(shí)際使用過程中應(yīng)該如何處理這個(gè)設(shè)計(jì)？
· 轉(zhuǎn)換點(diǎn)是什么？
· 項(xiàng)目建立的氣氛是怎樣的？
· 你是否需要與其他設(shè)計(jì)或品牌進(jìn)行匹配或協(xié)調(diào)？
這些問題的答案將幫助你開始構(gòu)思你要找什么樣類型的版式。
2.尋找類似的形狀
如何在你的設(shè)計(jì)中匹配多個(gè)字體在視覺上不會(huì)給人一種混亂感？其實(shí)這就像選擇字體的形狀一樣簡單，同時(shí)，這對字體組合的產(chǎn)生或打破也是很重要的一個(gè)技巧。
那么如何確保你做到了呢？
尋找具有相似形狀的字體。想想每一種字體是圓形的還是橢圓形的，厚的還是薄的，有一個(gè)短的或高的x高度，或者是傾斜更適合還是不需要任何傾斜。
選擇一個(gè)你喜歡的主要的或作為整體基礎(chǔ)的字體，然后匹配具有相似形狀的補(bǔ)充字體，你可以通過以下幾點(diǎn)來判斷適合的補(bǔ)充字體：
· 看看每個(gè)字體類型家族的小寫“o”。里面的“碗”是圓的還是橢圓的？匹配“o”類型相同或相似的字體。
· 字體厚或薄的搭配都是可行的。最好是搭配厚或薄的常規(guī)字體。
· 尋找在x高度上類似的字體(也就是在垂直高度上的x)。
· 不要害怕混合搭配不同類型的風(fēng)格。嘗試一個(gè)serif和sans serif組合，只要確保在復(fù)雜字體的旁邊搭配一個(gè)簡單的字體即可。使用最廣泛的簡單類型，如正文。
· 注意傾斜和斜體（你可以把“o”的中心看作一個(gè)測試的標(biāo)準(zhǔn)），不要使用超過一種傾斜的字體，避免字體的反方向“沖突”，它們對用戶來說可能是難以接受的。
3.設(shè)置字體的比例和大小
字體的大小可以決定一個(gè)項(xiàng)目的成敗。如果文本太大，它會(huì)導(dǎo)致不自然的閱讀模式，產(chǎn)生太多的停頓。如果文本太小，它會(huì)使眼睛緊張，導(dǎo)致用戶最終放棄而選擇離開。
當(dāng)文本的樣式正確時(shí)，用戶可以更容易和自由地閱讀和了解文字的內(nèi)容。
大小適中的文本在項(xiàng)目中也有不同大小的比例。主體文本是一個(gè)大小，標(biāo)題是另一個(gè)大小，而子標(biāo)題則是另一個(gè)大小。所有的尺寸和使用在整個(gè)設(shè)計(jì)過程中都應(yīng)該是一致的。
在這個(gè)技巧上，它對用戶的作用是讓一切都更容易閱讀。
· 文本大小按重要性排列信息。更大的類型更重要，更有可能被大多數(shù)用戶瀏覽。
· 比例增加了文本的可掃描性，這樣用戶就可以快速地查看它。
· 相關(guān)項(xiàng)目外觀相同。
· 更大的文本元素，如子標(biāo)題，有助于分解長文本塊，使其更易于閱讀。
4.注意間距
這個(gè)問題就不再是字體本身，而是在類型間距的問題了。
字距調(diào)整，引導(dǎo)，跟蹤和填充可以使你的字體類型更漂亮，但是，也可能把它變成得混亂。
關(guān)于保持正確的間隔，這是一個(gè)創(chuàng)建“藝術(shù)”的過程。很多都取決于實(shí)際的字母組合使用，大小和字體。沒有任何已經(jīng)限定或規(guī)范的字距調(diào)整規(guī)則，而且對于文本和其他元素沒有完美的填充量。
你得盯著它看。
在這方面，更多的是依靠你的感覺。如果設(shè)計(jì)以一種你不能精確定位的方式感到“壓抑”的話，很大原因歸咎于間距問題。它需要不斷的練習(xí)才能把它做好。
5.左對齊
在英語和其他語言中，用戶的閱讀習(xí)慣是從左到右的，這也是在文本塊中優(yōu)化可讀性的理想對齊方式。
小文本（如菜單欄的文本元素或Banner圖的主標(biāo)題）不需要對齊到左邊，因?yàn)樗麄兒芸炀涂梢蚤喿x。對于有大量字符的文本（不僅僅是一個(gè)句子），應(yīng)該采取的最適合的對齊方式就是左對齊的（理由目前還有爭議，盡管如果你不小心的話，它可能會(huì)引起一些間隔問題）。
6.選擇兩種字體類型的家族
這個(gè)規(guī)則很可能已經(jīng)深深的植根于你的意識中了：只需要兩種字體就可以完成一個(gè)項(xiàng)目。
這里再次提一下這個(gè)觀點(diǎn)，因?yàn)楹苌儆性O(shè)計(jì)師真正關(guān)注這個(gè)規(guī)則。瀏覽網(wǎng)站設(shè)計(jì)或一個(gè)作品集網(wǎng)站時(shí)，你會(huì)很經(jīng)?？吹胶芏唷氨┳叩淖煮w”的項(xiàng)目。
如果你打算打破這個(gè)規(guī)則，再想想吧。你想要通過添加另一個(gè)類型的字體來獲得什么？相反，看看你選擇的字體，嘗試另一種風(fēng)格——粗體或薄或斜體——可能是更好的解決方案。
7.不改變字體
永遠(yuǎn)不要通過伸展、扭曲或傾斜一種字體來獲得“另一種”字體。如果你需要不同于你所擁有的東西，選擇一個(gè)不同的字體選擇。
字體設(shè)計(jì)師花了大量的時(shí)間來創(chuàng)作出的字體不是通過一些改動(dòng)就可以完事的。改變字母的形式會(huì)傷害可讀性，并會(huì)導(dǎo)致字體在使用大于原始尺寸時(shí)會(huì)以像素化的方式“崩潰”。
8.大量運(yùn)用對比
讓設(shè)計(jì)師陷入麻煩的情況之一是直接把字體類型放在圖像或背景元素上。只有當(dāng)你在元素之間有足夠的對比以創(chuàng)建分離和確?？勺x性時(shí)，它才會(huì)起作用。
如果必要的話，你可以通過添加投影到字母已創(chuàng)建對比和分離，如果文字層和背景層確實(shí)沒有足夠的對比的話。
光線在黑暗或深色背景中可以確?？勺x性。這也有助于使用一個(gè)更規(guī)則或更寬的字體。
但事實(shí)并非總是如此。一張照片可能包括明亮和暗的空間，或者可能包括粗細(xì)的筆畫。
優(yōu)化的選擇可以包括在“盒子”中展示文本、選擇較重的字體或在圖像上添加顏色疊加。所有這些技術(shù)可以幫助創(chuàng)建更多的對比，使文本更具可讀性（此外，當(dāng)文本和圖像移動(dòng)時(shí)，它們往往會(huì)被使用在多個(gè)響應(yīng)式斷點(diǎn)中）。
9.記得為移動(dòng)端調(diào)整字體
說到排版，移動(dòng)端的可讀性應(yīng)該是一個(gè)首要考慮的問題。像在字母上添加圖案或紋理等有趣的技巧可以在打印和一些桌面屏幕上工作，但在較小的設(shè)備上卻會(huì)不會(huì)有什么的效果的。
你需要考慮字體如何在所有使用終端中的呈現(xiàn)形式（回到你的排字標(biāo)尺，記住要在大屏幕和小屏幕上添加類型的規(guī)格）。
移動(dòng)端的排版通常比較大，而且比臺式機(jī)上的字體間距要大一些。如果段落更短，這樣你就不會(huì)有大量的文本來讀取，這也會(huì)對用戶造成困擾。
10.堅(jiān)持一種風(fēng)格分標(biāo)準(zhǔn)
一旦你針對網(wǎng)頁設(shè)計(jì)項(xiàng)目有了一個(gè)明確的想法，創(chuàng)建一個(gè)風(fēng)格指南或者將你的使用規(guī)則規(guī)范化。
復(fù)印并把它放在一個(gè)你更容易獲得或看到的地方，當(dāng)你對設(shè)計(jì)做出改變時(shí)，使用它。
一致性是完美字體設(shè)計(jì)的關(guān)鍵組成部分。
總結(jié):
大多數(shù)用戶可能對比如像壞的排版設(shè)計(jì)這樣的較專業(yè)的問題并不了解，他們只知道設(shè)計(jì)在整體的感覺上不太對。
在創(chuàng)造完美字體的時(shí)候，關(guān)鍵在于可讀性。字體類型必須易于閱讀和理解。它應(yīng)該與文本所表現(xiàn)的情緒相匹配，用戶幾乎看不到它，但你需要做到他們不需要任何思考就可以輕松閱讀了。
原文：10條能夠讓你每次都擁有完美字體設(shè)計(jì)的規(guī)則
譯者：深圳Clh
圖文來自：design shack
出處：http://www.clhweb.com/news/tech/20171110/rules_for_perfect_type_design.html
英文鏈接：https://designshack.net/articles/typography/rules-for-perfect-type-design/
一個(gè)完美的設(shè)計(jì)需要一個(gè)完美的排版，而排版最難的應(yīng)該是如何用好字體了。本教程詳細(xì)解析了設(shè)計(jì)師需要注意到的問題，包括字體形狀，字體大小，文字間距還有對齊方式等。
1.為項(xiàng)目設(shè)定目標(biāo)
一個(gè)好的排版首先需要你對你的項(xiàng)目在實(shí)際中的作用或目標(biāo)有一個(gè)堅(jiān)實(shí)的了解。在你開始瀏覽谷歌字體或Typekit字體庫之前，先記下幾個(gè)幾個(gè)問題的答案：
· 你想通過這個(gè)項(xiàng)目與誰建立聯(lián)系？
· 用戶在實(shí)際使用過程中應(yīng)該如何處理這個(gè)設(shè)計(jì)？
· 轉(zhuǎn)換點(diǎn)是什么？
· 項(xiàng)目建立的氣氛是怎樣的？
· 你是否需要與其他設(shè)計(jì)或品牌進(jìn)行匹配或協(xié)調(diào)？
這些問題的答案將幫助你開始構(gòu)思你要找什么樣類型的版式。
2.尋找類似的形狀
如何在你的設(shè)計(jì)中匹配多個(gè)字體在視覺上不會(huì)給人一種混亂感？其實(shí)這就像選擇字體的形狀一樣簡單，同時(shí)，這對字體組合的產(chǎn)生或打破也是很重要的一個(gè)技巧。
那么如何確保你做到了呢？
尋找具有相似形狀的字體。想想每一種字體是圓形的還是橢圓形的，厚的還是薄的，有一個(gè)短的或高的x高度，或者是傾斜更適合還是不需要任何傾斜。
選擇一個(gè)你喜歡的主要的或作為整體基礎(chǔ)的字體，然后匹配具有相似形狀的補(bǔ)充字體，你可以通過以下幾點(diǎn)來判斷適合的補(bǔ)充字體：
· 看看每個(gè)字體類型家族的小寫“o”。里面的“碗”是圓的還是橢圓的？匹配“o”類型相同或相似的字體。
· 字體厚或薄的搭配都是可行的。最好是搭配厚或薄的常規(guī)字體。
· 尋找在x高度上類似的字體(也就是在垂直高度上的x)。
· 不要害怕混合搭配不同類型的風(fēng)格。嘗試一個(gè)serif和sans serif組合，只要確保在復(fù)雜字體的旁邊搭配一個(gè)簡單的字體即可。使用最廣泛的簡單類型，如正文。
· 注意傾斜和斜體（你可以把“o”的中心看作一個(gè)測試的標(biāo)準(zhǔn)），不要使用超過一種傾斜的字體，避免字體的反方向“沖突”，它們對用戶來說可能是難以接受的。
3.設(shè)置字體的比例和大小
字體的大小可以決定一個(gè)項(xiàng)目的成敗。如果文本太大，它會(huì)導(dǎo)致不自然的閱讀模式，產(chǎn)生太多的停頓。如果文本太小，它會(huì)使眼睛緊張，導(dǎo)致用戶最終放棄而選擇離開。
當(dāng)文本的樣式正確時(shí)，用戶可以更容易和自由地閱讀和了解文字的內(nèi)容。
大小適中的文本在項(xiàng)目中也有不同大小的比例。主體文本是一個(gè)大小，標(biāo)題是另一個(gè)大小，而子標(biāo)題則是另一個(gè)大小。所有的尺寸和使用在整個(gè)設(shè)計(jì)過程中都應(yīng)該是一致的。
在這個(gè)技巧上，它對用戶的作用是讓一切都更容易閱讀。
· 文本大小按重要性排列信息。更大的類型更重要，更有可能被大多數(shù)用戶瀏覽。
· 比例增加了文本的可掃描性，這樣用戶就可以快速地查看它。
· 相關(guān)項(xiàng)目外觀相同。
· 更大的文本元素，如子標(biāo)題，有助于分解長文本塊，使其更易于閱讀。
4.注意間距
這個(gè)問題就不再是字體本身，而是在類型間距的問題了。
字距調(diào)整，引導(dǎo)，跟蹤和填充可以使你的字體類型更漂亮，但是，也可能把它變成得混亂。
關(guān)于保持正確的間隔，這是一個(gè)創(chuàng)建“藝術(shù)”的過程。很多都取決于實(shí)際的字母組合使用，大小和字體。沒有任何已經(jīng)限定或規(guī)范的字距調(diào)整規(guī)則，而且對于文本和其他元素沒有完美的填充量。
你得盯著它看。
在這方面，更多的是依靠你的感覺。如果設(shè)計(jì)以一種你不能精確定位的方式感到“壓抑”的話，很大原因歸咎于間距問題。它需要不斷的練習(xí)才能把它做好。
5.左對齊
在英語和其他語言中，用戶的閱讀習(xí)慣是從左到右的，這也是在文本塊中優(yōu)化可讀性的理想對齊方式。
小文本（如菜單欄的文本元素或Banner圖的主標(biāo)題）不需要對齊到左邊，因?yàn)樗麄兒芸炀涂梢蚤喿x。對于有大量字符的文本（不僅僅是一個(gè)句子），應(yīng)該采取的最適合的對齊方式就是左對齊的（理由目前還有爭議，盡管如果你不小心的話，它可能會(huì)引起一些間隔問題）。
6.選擇兩種字體類型的家族
這個(gè)規(guī)則很可能已經(jīng)深深的植根于你的意識中了：只需要兩種字體就可以完成一個(gè)項(xiàng)目。
這里再次提一下這個(gè)觀點(diǎn)，因?yàn)楹苌儆性O(shè)計(jì)師真正關(guān)注這個(gè)規(guī)則。瀏覽網(wǎng)站設(shè)計(jì)或一個(gè)作品集網(wǎng)站時(shí)，你會(huì)很經(jīng)?？吹胶芏唷氨┳叩淖煮w”的項(xiàng)目。
如果你打算打破這個(gè)規(guī)則，再想想吧。你想要通過添加另一個(gè)類型的字體來獲得什么？相反，看看你選擇的字體，嘗試另一種風(fēng)格——粗體或薄或斜體——可能是更好的解決方案。
7.不改變字體
永遠(yuǎn)不要通過伸展、扭曲或傾斜一種字體來獲得“另一種”字體。如果你需要不同于你所擁有的東西，選擇一個(gè)不同的字體選擇。
字體設(shè)計(jì)師花了大量的時(shí)間來創(chuàng)作出的字體不是通過一些改動(dòng)就可以完事的。改變字母的形式會(huì)傷害可讀性，并會(huì)導(dǎo)致字體在使用大于原始尺寸時(shí)會(huì)以像素化的方式“崩潰”。
8.大量運(yùn)用對比
讓設(shè)計(jì)師陷入麻煩的情況之一是直接把字體類型放在圖像或背景元素上。只有當(dāng)你在元素之間有足夠的對比以創(chuàng)建分離和確?？勺x性時(shí)，它才會(huì)起作用。
如果必要的話，你可以通過添加投影到字母已創(chuàng)建對比和分離，如果文字層和背景層確實(shí)沒有足夠的對比的話。
光線在黑暗或深色背景中可以確?？勺x性。這也有助于使用一個(gè)更規(guī)則或更寬的字體。
但事實(shí)并非總是如此。一張照片可能包括明亮和暗的空間，或者可能包括粗細(xì)的筆畫。
優(yōu)化的選擇可以包括在“盒子”中展示文本、選擇較重的字體或在圖像上添加顏色疊加。所有這些技術(shù)可以幫助創(chuàng)建更多的對比，使文本更具可讀性（此外，當(dāng)文本和圖像移動(dòng)時(shí)，它們往往會(huì)被使用在多個(gè)響應(yīng)式斷點(diǎn)中）。
9.記得為移動(dòng)端調(diào)整字體
說到排版，移動(dòng)端的可讀性應(yīng)該是一個(gè)首要考慮的問題。像在字母上添加圖案或紋理等有趣的技巧可以在打印和一些桌面屏幕上工作，但在較小的設(shè)備上卻會(huì)不會(huì)有什么的效果的。
你需要考慮字體如何在所有使用終端中的呈現(xiàn)形式（回到你的排字標(biāo)尺，記住要在大屏幕和小屏幕上添加類型的規(guī)格）。
移動(dòng)端的排版通常比較大，而且比臺式機(jī)上的字體間距要大一些。如果段落更短，這樣你就不會(huì)有大量的文本來讀取，這也會(huì)對用戶造成困擾。
10.堅(jiān)持一種風(fēng)格分標(biāo)準(zhǔn)
一旦你針對網(wǎng)頁設(shè)計(jì)項(xiàng)目有了一個(gè)明確的想法，創(chuàng)建一個(gè)風(fēng)格指南或者將你的使用規(guī)則規(guī)范化。
復(fù)印并把它放在一個(gè)你更容易獲得或看到的地方，當(dāng)你對設(shè)計(jì)做出改變時(shí)，使用它。
一致性是完美字體設(shè)計(jì)的關(guān)鍵組成部分。
總結(jié):
大多數(shù)用戶可能對比如像壞的排版設(shè)計(jì)這樣的較專業(yè)的問題并不了解，他們只知道設(shè)計(jì)在整體的感覺上不太對。
在創(chuàng)造完美字體的時(shí)候，關(guān)鍵在于可讀性。字體類型必須易于閱讀和理解。它應(yīng)該與文本所表現(xiàn)的情緒相匹配，用戶幾乎看不到它，但你需要做到他們不需要任何思考就可以輕松閱讀了。
原文：10條能夠讓你每次都擁有完美字體設(shè)計(jì)的規(guī)則
譯者：深圳Clh
圖文來自：design shack
出處：http://www.clhweb.com/news/tech/20171110/rules_for_perfect_type_design.html
英文鏈接：https://designshack.net/articles/typography/rules-for-perfect-type-design/