新手福利！一份詳盡全面的UI設(shè)計字體與排版指南

無論你是做網(wǎng)頁還是App設(shè)計，文字內(nèi)容總是能占到整個版面將近80%的區(qū)域。因此理解字體與排版對UI設(shè)計師來說非常關(guān)鍵。你需要始終把內(nèi)容的可讀性放在首位去考慮和權(quán)衡你對字體與排版的選擇。

字體的基礎(chǔ)術(shù)語

了解字體設(shè)計的基礎(chǔ)術(shù)語非常重要，這些術(shù)語在介紹字體設(shè)計的相關(guān)文章中經(jīng)常出現(xiàn)。比如 x-height（X字高）指的是從字母的基準線開始往上到最矮字母的頂端的距離，當X字高的比例相對大一些的話就能增加易讀性。

漢字字形

在大多數(shù)情況下我們都選擇使用系統(tǒng)自帶的字體，比如微軟雅黑、宋體、黑體等來定義標題和內(nèi)容，但有時，我們在做Logo，banner設(shè)計時也需要通過對字體進行改造，來達到更加理想的效果。這時我們就需要掌握漢字的字形結(jié)構(gòu)以及一些最基本的設(shè)計原則。

襯線字與非襯線字

在西方國家的字母體系，分成兩大字族：serif（襯線字體）及sans serif（無襯線字體）。襯線字（下圖中的宋體、Times New Roman）是指在字的筆畫開始及結(jié)束的地方有額外的裝飾，而且筆畫的粗細會因直橫的不同而有所不同。 相反的，無襯線字（下圖中的思源黑體、Helvetica）就沒有這些額外裝飾，而且筆畫粗細大致上是差不多。

襯線字的字體較易辨識，也因此具有較高的易讀性。 反之無襯線字則較醒目。通常來說，需要強調(diào)、突出的小篇幅文字一般使用無襯線字,而在長篇正文中，為了閱讀的便利，一般使用襯線字。在實際應用中，因為中文的宋體和西文的襯線體，中文的黑體和西文的無襯線體，在風格和應用場景上相似，所以通常搭配使用。

字體排版建議

在你對字體排版技巧了如指掌之前，首先需要保證你的內(nèi)容能夠簡單且清晰地展現(xiàn)出來。優(yōu)秀的文字與排版使我們更愿意去閱讀，所以最好先關(guān)注你所設(shè)定的字體和排版是否便于閱讀，然后再考慮為了美觀改進行修飾。我們可以參考這篇英文指南：優(yōu)秀字體排版的5條原則?并且將文中的這些原則應用到我們的App和Web設(shè)計中去。

iOS中的系統(tǒng)字體

隨著iOS 9系統(tǒng)以及EI Capitan系統(tǒng)的發(fā)布，現(xiàn)在的系統(tǒng)字體變?yōu)榱薃pple自己設(shè)計的 [San Francisco]。iOS仍然在其他地方使用SF UI，而在Apple Watch中使用SF Compact。

San Francisco 有兩類尺寸: 文本模式（SF UI Text）和展示模式（SF UI Display）。 文本模式適用于小于20 points的尺寸，展示模式則適用于大于20 points的尺寸。當你在你的app中使用San Francisco時，iOS會自動在適當?shù)臅r機在文本模式和展示模式中切換。

注：如果你使用諸如Sketch或Photoshop的工具來進行設(shè)計，那么當你設(shè)置的字體大于等于20 points的時候，你需要切換到展示模式。iOS會根據(jù)字體大小為San Francisco自動調(diào)整字間距。

選擇Body字體

為body text挑選合適的字體是最重要的。務(wù)必選擇那些可讀性強的，看上去干凈易讀的字體。我推薦的常用英文字體有：San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。中文字體則有，華文細黑，思源黑體。

字體的大小

在iPhone,iPad,iWatch 中設(shè)置的Body字體不應該小于11pt，這樣才能被正常閱讀。我們推薦的Body文本大小應該在15-18pt。

字體的字重

當我們設(shè)置更大的字體來獲得更好的易讀性的同時，我們也應相應地減小字體的字重（粗細），考慮Light，Thin或者Ultra Thin。過重的字體會太過醒目，從而影響其他內(nèi)容的顯示效果。

當字體大小為12-18pt時，使用Regular，18-24pt時，使用Light，24-32pt,使用Thin，當字體大小超過32pt時，建議使用Ultralight。以上都是建議值，你應該根據(jù)不同字體的顯示效果進行設(shè)定使文字內(nèi)容看上去清晰和精致，從而保持良好閱讀體驗。

現(xiàn)代字體都有多種字重設(shè)置：Regular，Light，Thin和Ultralight

合理設(shè)置行高，讓文字也能夠呼吸

行間距（leading）應該設(shè)置為字體大小的120%到145%之間。

在右邊的例子中，行高設(shè)為了與字體高度相同的100%，而在左邊的例子中，我將它設(shè)為145%。它們的顯示效果有著非常明顯差異。當字數(shù)進一步增加時，你更會發(fā)現(xiàn)閱讀行距設(shè)置過小的大段文字會非常累。合理設(shè)置行高，也是一種留白的技巧，能夠增強用戶的閱讀體驗。

每行45-90個字

行長指單行文字的長度，如果一行中包含的字數(shù)太多，文本內(nèi)容將會很難閱讀。英文字符一般在45-90字比較適宜，而中文35-60字為宜。合理的行長使用戶在行間跳轉(zhuǎn)時非常感到輕快和愉悅，反之則會使閱讀成為一種負擔。

字體樣式

字體樣式對易讀性和快速瀏覽非常重要，一般的原則是，被修飾的文本不應超過整個文本的10%，如果所有文本都都通過修飾被強調(diào)的話，那反而就不是強調(diào)了。當然，一次不應該同時使超過三種的強調(diào)樣式。換句話說，不要在同一段文本中同時使用，顏色，字體改變，大小，下劃線，斜體，粗體。

尋找合適的字體

大部分商用字體都很貴，但也有很多優(yōu)秀的字體是免費的。你只需要從中挑選你最喜歡的字體，并應用到你的設(shè)計中就可以了。下面就介紹幾個非常優(yōu)秀的字體網(wǎng)站。

Google Fonts （需梯子）

在Google Fonts，你可以免費下載你喜歡的字體，并且按照你的需要在項目中使用。由于在iOS中使用其他字體的唯一方法就是將字體文件導入到系統(tǒng)中，因此Google Fonts的下載功能非常有用。Google Fonts包含超過1400種不同的字體，其中包含最著名的：Open Sans和Roboto字體，他們是Android系統(tǒng)使用的默認字體。

你可以使用Mac上的SkyFonts來自動同步字體到你的桌面。

如果你需要在你的網(wǎng)站中直接使用Google Web Fonts，你可以選擇360的代理來訪問Google的免費字體庫。下面是使用說明，非常簡單。

Typekit

有非常多優(yōu)秀的字體。這對于那些剛剛起步的人來說，非常有用。這其中就有我非常喜歡的Proxima Nova和Museo字體。它還將思源黑體等中文字體也收入其中了。

有字庫

對于在需要大量使用中文字體的用戶來說，有字庫是一個不錯的選擇。它是國內(nèi)目前比較優(yōu)秀的Web Font服務(wù)平臺，包含了大量優(yōu)秀的中文字體。

其他資源

字體和排版是一門值得深入探索的藝術(shù)。每個字體的形成和發(fā)展過程都有著深遠的歷史可以追溯。當你設(shè)計的作品也能被稱作藝術(shù)品時，那就是對你最大的肯定。

文字排版指南

這是一篇英文文字排版指南，但提到的內(nèi)容和大部分意見對中文字體的選擇和排版同樣具有意義。非常值得閱讀。

字體設(shè)計基礎(chǔ)：字由心生

漢字怎么樣發(fā)展而來的？我們現(xiàn)在用到 字體是通過什么字體演變過來的？當今字體又是沿用了先人的那些字體基礎(chǔ)？… … 通過這篇文章，能夠?qū)h字的這些基礎(chǔ)知識有所了解。

哪種字體最適合快速閱讀

這篇文章詳細介紹了中英文字體的搭配建議，很有參考價值。

Type is Beautiful

是一個非常有名的關(guān)于字體的博客網(wǎng)站，提供了大量字體研究的文章，適合從初學者到資深設(shè)計師閱讀。同時它還提供了一個播客，名叫“字談字暢”

歡迎關(guān)注作者的微信公眾號：技匠

【優(yōu)設(shè)四月人氣過萬的好文】

使用素材站：
《實用干貨！11個人氣超高的設(shè)計素材匯總網(wǎng)站》

自學UI設(shè)計的正確姿勢：
《別著急學軟件！先掌握科學有效的UI設(shè)計自學姿勢（超全面）》

幽默有趣的前端小課堂：
《零基礎(chǔ)也能看懂！寫給設(shè)計師的前端小知識之網(wǎng)頁排版（附實戰(zhàn)）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com