字體作為基本語言，是設(shè)計師需要掌握的基本技能之一。這篇文章里面的案例花了作者大量時間進行繪制&收集，希望能對各位讀者有所幫助。

一、 漢字使用的前世今生

在人類發(fā)展歷史過程中，文字作為信息傳播的載體，有著承上啟下的重要意義。而漢字，是世界上使用時間最久、空間最廣、人數(shù)最多的文字。從距今大約六千年前，就開始誕生了具有整齊規(guī)范、初步具有文字特征的圖形符號。

而到了后期，漢字分別經(jīng)歷了篆體、隸書、楷書等多元化的發(fā)展，百花齊放。而自從雕版印刷術(shù)的盛行之后，刻字用的雕刻刀所雕出來的字體因為橫細豎粗，醒目易讀，得到了廣泛的運用，由于活字印刷的時候首尾會有墨殘留，所以故意會留一部分裝飾來溢墨。

而到了后期，這個裝飾也得以保留下來，對這個字體進行優(yōu)化過后，就是至今我們?nèi)栽趶V泛使用的宋體。在當今，特別是在Windows系統(tǒng)中，宋體仍占有很大的一席之地。

后來人們又通過模仿宋體字體結(jié)構(gòu)，對字體進行了調(diào)整，改成了筆畫粗細一致，纖細狹長的印刷字體，也就是今天我們稱之為“仿宋體”的字體。

與此同時，“黑體”誕生了，因為字體醒目大方，粗細一致，結(jié)構(gòu)醒目嚴密，字形端正，容易閱讀，所以也就是我們今天，在界面設(shè)計中，所用到的最多的字體?，F(xiàn)代漢字的黑體是在現(xiàn)代印刷術(shù)傳入東方后依據(jù)西文無襯線體中的黑體所創(chuàng)造的，所以按照西文的說法，也可以把黑體稱作為無襯線體，把宋體叫做為有襯線體。

到了現(xiàn)代，隨著互聯(lián)網(wǎng)的興起，LED屏幕中的字體也得到了較大的發(fā)展。

在早期時代中，顯示屏效果較差，分辨率低，屏幕顏色較少，而漢字筆畫較多，黑體小字體的清晰度較差，所以一般主要用于文章重要標題。而宋體在為了匹配低分辨率下的像素柵格，對字體進行了調(diào)整，調(diào)整后的字體能在低分辨率下的小點陣中得以良好的顯示，辨識度較高，在開啟了ClearType之后，字體的被識別性能得到良好的保證，所以在互聯(lián)網(wǎng)初期階段中，有襯線體在互聯(lián)網(wǎng)中一直處于霸主地位。

直到后面屏幕顯示效果的進步，黑體才慢慢得以盛行，在屏幕分辨率較高的情況下，黑體已經(jīng)能得到較好的識別效果，因此已經(jīng)不需要原襯線體的功能，襯線體反而由于裝飾性元素過多，閱讀起來容易造成視覺疲勞。因此在屏幕密度較高的移動端載體中，無襯線黑體成功替代有襯線體成為霸主地位。

修改后的黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達，從而在屏幕中起著主導地位。幾大互聯(lián)網(wǎng)巨頭微軟雅黑及蘋果在此之后分別花重金打造了微軟雅黑及蘋方，用于自身的OS系統(tǒng)中。所以通過分析，可以看來，在將來界面設(shè)計中，字體樣式還是會以無襯線體為主，甚至可能會更進一步簡化字體的形狀。

?二、Android與iOS系統(tǒng)字體詳解

1.Android默認字體-思源黑體/Robot

在Android設(shè)備中，Android始祖Google為了更好的追求視覺效果，提高用戶體驗，所以聯(lián)合了Adobe設(shè)計發(fā)布了思源黑體(Noto)來作為中文字體。

該字體字形較為平穩(wěn)，利于閱讀，且有個7個不同的字重，充分滿足了不同場景下的設(shè)計需求，7個字重分別為：Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文，則使用Robot來作為基礎(chǔ)字體，只有6個字重：分別為Thin、Light、Regular、Medium、Bold 和 Black，視覺語言與思源黑體Noto保持一致。

另外在Google的Material Design手冊中，官方還給出了標準的字號大小。在安卓的字體單位中，不再以px，pt作為單位而是統(tǒng)一的使用了sp，換算方式：

px = sp*ppi/160? ，sp = px / (ppi / 160)?

按照iPhone7的尺寸1334×750.密度326ppi 來換算，那么Android的1dp = 1 * 326/160 ≈ 2px

2.iOS默認字體-蘋方/San Francisco

在iOS系統(tǒng)中，中文方面蘋果則加入了全新的蘋方字體，字形纖細中宮飽滿，利于閱讀，并且還提供6個字重供設(shè)計開發(fā)者使用。所以后面的設(shè)計趨勢中，字重的使用變的開始多元化了起來，使用Semibold中粗體、大字號作為界面的標題變的更為流行起來，較為明顯的有 iOS 11 中的一些原生界面及一些知名APP。

而在英文方面，則使用了San Francisco 的字體，除了在iOS和Mac OS上，還單獨為Watch OS單獨對字體進行了調(diào)整，命名為 San Francisco Compact。而每套字體下面又分為Text與Display兩種屬性，Text只有6個字重，而Display則有9個字重。

3.總結(jié)&結(jié)論

通過對比，我們可以發(fā)現(xiàn)：其實Android與iOS字體字形方面差異化明顯不大，不用特意下載所有字體進行單獨配置。那么在平常工作中，我們只需要按照一套標準的iOS設(shè)計稿輸出即可，在Android方面進行自動延展，最后走查確認一下效果即可。

如果涉及到使用除Regular標準體之外的字體，那么除了顏色，還應(yīng)當標注相應(yīng)的字重字高等信息(如Font：Pingfang SC-Semibold，line:52px) ，而不應(yīng)當只標注一個加粗或者加細。當然如果人力允許的情況下，我們也可以單獨為Android做一套界面及字體適配，提高Android端的視覺顯示效果。

三 、字體的基本屬性詳解

在平時項目中，為了讓頁面中的字體更加貼合業(yè)務(wù)場景，需要對字體的字距字高進行調(diào)整。但很多同學在最后輸出標注的時候，往往只標注了字號及顏色，而其它參數(shù)都沒有進行標注或者標注的不正確，在最后視覺還原審核的時候，字體往往偏差較大，花費很多不必要的工作量去浪費在了視覺走查上。

那么這里就給大家詳細介紹一些字體屬性及標注方法，節(jié)約開發(fā)走查工作量，更好的還原視覺稿。

1.字體基礎(chǔ)結(jié)構(gòu)詳解

一般來說，為了保持字體的完整展示，字體設(shè)計師都會給字體預留一定的安全距離，設(shè)定合適的升部線及降部線距離，讓字體展示的更為平衡。這里我標注了一個相應(yīng)的線稿：

所以由此圖可以看出：平時我們在設(shè)計的時候，可能字體使用的28px，在使用工具量的時候，也確實是28px，但其實字體本身占用的距離是包含了升部及降部區(qū)域的，這樣就導致其占用空間大于28px，而變成了40px。所以我們在標注的時候，應(yīng)當按照包含升部降部的實際大小進行標注，這樣所還原的視覺效果，也是極為接近設(shè)計稿的。

所以我們在設(shè)計輸出的時候，如果沒有調(diào)整line值，是可以直接借助sketch的標注插件sketch measure，來實時導出相應(yīng)的參數(shù)，這樣的參數(shù)是最接近開發(fā)效果的。如果沒有Mac的同學，可以利用PS選中文字，那么選中的深色底就是字體本身的間距了。

下圖我做了兩個示例，來闡述正確的標注方法，雖然標注的時候會麻煩些，但往往在視覺還原的時候，往往能達到事半功倍的效果。

2.字體的行高行距參數(shù)詳解

那么在一些文字較多的頁面，為了讓閱讀更為順暢，我們往往需要對文字的字高字距進行調(diào)整，那么我們先來看一下sketch及動效編程軟件Origami中的可配置參數(shù)。

我們可以發(fā)現(xiàn)，對于更改字距、字寬及端高，那么我沒只需要配置好Charater、line、paragraph三個值即可，那么我們先來理解一下這三個值的含義：

（1）Character：字間距

所謂的字間距，則是在兩個文字中間的距離，一般加在一個字符的后段。如字符『AK』，默認Character為0，那么兩個字符中間的間距，則是為字體默認所設(shè)定的安全距離。如果給Character設(shè)定一個值50，那么會自動在A的后段加上50px，那么顯示效果則變成了『A K』

（2）line：行高

即UI Lable 中字段所占用的高度實際大小，剛剛有提到默認字體會設(shè)定一個安全距離，那么在設(shè)備中字段所占用的line高度 = 字體像素大小+升降安全距離+擴高值。每個字體都有相應(yīng)設(shè)定的line Auto比例，可以通過sketch選中字體后聽過line值來進行查看。

另外剛剛提到，標注間距的時候，務(wù)必得把line值包含在內(nèi)，否則實現(xiàn)出來容易出現(xiàn)字體偏移位置不對等情況。

（3）Paragraph：行距

很多同學在調(diào)完這個參數(shù)，發(fā)現(xiàn)跟調(diào)整line值差不多。但其實 Paragraph 調(diào)整的是兩行中間的間距，不單獨調(diào)整單行字段的占用空間。

通過以上我們能了解字體在于實際設(shè)備中，是怎么樣的布局方式，所以我們標注的時候，一定需要標注的較為仔細。如果發(fā)現(xiàn)開發(fā)出來的字體樣式與設(shè)計稿不一致，那么我們只需要提供以上這幾個參數(shù)值即可。

如果在團隊中還是靠手動標注的同學，那么完整的標注應(yīng)該為：Font-name；Font-size ；Font-color ；Font-line ；Font-character ；Font- Paragraph 。

如果沒有設(shè)定，不填即可，如：

• Font-name：Pingfang SC -Semibold
• Font-size ：32px
• Font-color ：#333333
• Font-line：Auto
• Font-character：5
• Font- Paragraph :0

四、科學的字號大小如何設(shè)定

現(xiàn)在目前市場中手機屏幕越來越大，分辨率也越來越高。那么我們在做設(shè)計的時候，在字號運用方面，難免會感到迷茫，文字是不是又點小了？或者大了顯得不精致？標題跟正文沒啥區(qū)別？像這種問題可能經(jīng)常困擾著一些年輕的設(shè)計師。

其實在字號大小方面，確確實實有著一套計算法則及公式在內(nèi)，今天這里給大家進行一下科普。

當我們在查看一些物體時，測量視覺角度的方法為先量一下物體的的長寬以及眼睛距離物體的距離，得出相應(yīng)的數(shù)學計算公式，其中：

θ=(arctan·h/2d)2，通過換算h=2d·tan(θ/2)

• θ即視角度數(shù)
• d為眼睛離物體的距離
• h為物體高度

1.設(shè)計稿中最小的字號怎么來的？

關(guān)于人眼感光系統(tǒng)，人眼上的一個像素相當于0.3個角分。為何人的肉眼看不清遠處的物體細節(jié)？或者看不清月亮上的環(huán)形山，那么是因為在你的視網(wǎng)膜上，月亮形成的圖像其實不過就是一個100個像素左右的圖片而已，所以環(huán)形山無法被肉眼觀察得清。

而根據(jù)科學研究發(fā)現(xiàn)：

人眼對于信息物體的識別，在眼睛內(nèi)視角度數(shù)＞0.3°，才能保文字信息體投射到視網(wǎng)膜中的分辨率足夠大，能夠被大腦所識別。

那么我們將數(shù)據(jù)可以套入進公式計算，人眼距離手機的具體通常是30cm左右，那么也就是說，正常情況下，在手機距離眼睛30cm左右，使用視角計算公式，我們能識別到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，因為我們經(jīng)常使用iPhone8的尺寸1334×750作為設(shè)計稿。iPhone8的dpi為324，也就是一英寸上顯示324個像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px

所以也就是正常情況下我們在設(shè)計稿中使用最小號的字號時，一定不能低于20px。

2.字號使用原子理論

而我們在做設(shè)計時，字號的單位需遵循原子理論，也就是使用一個基數(shù)作為倍增，如2、4、6、8、10? 或者3、6、9、12。但其實我們在做移動端設(shè)計時，單位需要遵循偶數(shù)原則，因為開發(fā)中的單位是以一倍圖的基數(shù)來進行計算。那么其實在制定字體規(guī)范中，使用2為單位會導致字號過多，不易管理，且2號字體的差異化不大。

所以在字號方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。那么我們則可以制定相應(yīng)的字體單位：

3.使用大字號作為標題

隨著設(shè)計行業(yè)的發(fā)展，對于視覺的理解進步，現(xiàn)在更多設(shè)計師更愿意使用大號字體，大間距，來區(qū)分頁面層級的信息。因為大號的字體閱讀起來更為舒適，能精準快速的傳達信息，提升閱讀效率，降低視覺疲勞。

所以大家在平時項目中，也不妨大膽的使用一下大字號字體來作為主標題，拉大頁面不同信息的層級關(guān)系。

五、合理配置字體拉開層級關(guān)系

在移動端的界面設(shè)計中，除了前幾篇文章講的使用間距網(wǎng)格來拉開不同內(nèi)容的層級外，對字體樣式進行適當?shù)恼{(diào)整也是個很不錯的選擇。通過調(diào)整字重、字色，能讓頁面的視覺邏輯變?yōu)楦拥那逦髁?，主次分明，降低因視覺給用戶帶來的干擾，提升頁面的可操作性。

那么我們?nèi)绾蝸碓O(shè)定這兩塊呢？

1.盡量減少頁面中的不同色相的顏色數(shù)量

在日常界面設(shè)計的需求中，有些較為重要的字段，可能業(yè)務(wù)方為了突出，第一時間，想到的就是把字體標紅處理，或者添加各類各樣，五花八門的顏色。但其實往往這樣的設(shè)計，在最后上線后的效果，反而容易適得其反，因為顏色過多，而導致頁面缺乏重點，視覺疲勞，反而增加了頁面的跳出率，難以取得想要的效果。

經(jīng)過調(diào)研顯示：頁面越干凈，越整潔，頁面的跳出率越低，而這套規(guī)則幾乎適用于所有的界面設(shè)計。

所以字體顏色這塊，顏色種類不宜過多。可以考慮通過使用同色系中的不同明度，來對不同層級字段進行差異化處理。我們可以通過先確認主色，再對主色進行名都延展，來適配多場景的文字顏色。配置好相應(yīng)的色板之后，可以再根據(jù)頁面層級關(guān)系對文字顏色進行合適的填充。

2.使用不同的字重來區(qū)分內(nèi)容

為了更好的拉開不同信息之間的層級關(guān)系，除了配置顏色外，通過配合，使用不同字重的字體來對內(nèi)容進行區(qū)分也是個很好的選擇。

使用較粗的字重來作為主標題使用，細字重作為輔助信息，能更好的在單色環(huán)境中增加內(nèi)容的呼應(yīng)及對比，減少頁面中字體過度色的使用，從而能夠讓頁面更加的整潔，內(nèi)容清晰明了，降低頁面的跳出率。

例如我們較重要的信息，可使用較粗的字重，弱信息則細字重。比如以下的余額寶及京東小金庫界面，雖然兩個界面在留白方面都留有較大余地，但京東金融在于對字重的設(shè)定更為嚴謹，所以在于對層級關(guān)系的處理上京東要更勝一籌。

而不同的字重，給予用戶的感受也是截然不同的：較粗的字重往往傳達的感受比細體要更為莊重、踏實嚴謹，而細體則顯的更為活潑、有趣，給人愉快的感覺。

剛剛提到了字重的使用必要性，那么我們?nèi)绾味x字重呢？

如果字重沒有進行規(guī)范使用，那么整個頁面的視覺邏輯則會變的更為混亂，所以往往這個時候，我們需要設(shè)計一個文字規(guī)范，例如主標題使用什么樣的字重，正文字重樣式。仔細敲定整個文字的使用規(guī)則，并將規(guī)范延展到整個產(chǎn)品的頁面設(shè)計中來，也是統(tǒng)一產(chǎn)品視覺語言的重要部分。

比如京東在價格字體方面，使用了獨立設(shè)計的一套品牌專有字體，而價格在電商中是一個極為重要的信息，通過統(tǒng)一字體，能很好的提升品牌歸屬感。

3.Sketch-Text Style提高協(xié)作效率

sketch在于對文字管理這塊，做了一個 Text Style 樣式，通過Text Style，能很好的提高效率，規(guī)范頁面字號的大小。如果設(shè)計團隊成員均使用Sketch作為主力使用工具，那么不妨嘗試配置一下這塊，提高團隊協(xié)作效率。一方面可以統(tǒng)一規(guī)范頁面的字體樣式，另一方面免去了調(diào)整字體的時間，減少不必要的工作量。

六、字體運用發(fā)展趨勢&總結(jié)

從iOS 11 更新就不難看出，目前界面風格的趨勢都是偏向于更為簡潔化，在一屏的內(nèi)容里做減法，這樣有利于降低閱讀負擔，將重要的信息更好的展示。在這里，我分別對字體進行了梳理，分析下來，近期的字體使用特征主要有如下三點：

1.更大、更粗的標題

大標題能很好的吸引視線，第一時間抓住眼球，傳遞信息。拉大頁面空間的張力，降低視覺閱讀疲勞。

2.字重層級更為明顯

通過字重的差異化顯示，能更好的在單色環(huán)境中增加內(nèi)容的呼應(yīng)及對比，減少頁面中字體過度色的使用，從而能夠讓頁面更加的整潔，內(nèi)容清晰明了，降低頁面跳出率。

3.用字體明度做內(nèi)容上的信息區(qū)分

使用單一色相的不同明度作為字體及圖標的顏色，能夠在區(qū)分信息層級的基礎(chǔ)上，能讓頁面顯得更為整潔，降低視覺干擾。

七、字體使用總結(jié)

互聯(lián)網(wǎng)在進步，所以設(shè)計趨勢也是有著各種各樣不同的形式，而字體作為基本語言，是設(shè)計師需要掌握的基本技能之一。這篇文章里面的案例花了作者大量時間進行繪制&收集，希望能對各位讀者有所幫助。

另外其實在工作中，也建議大家對自己的經(jīng)驗進行總結(jié)，對關(guān)鍵信息進行提煉加以沉淀，一方面能讓自己的知識更加牢固，另一方面也可以幫助后來者進行成長。

————–

第一次嘗試在人人都是產(chǎn)品經(jīng)理上發(fā)表專欄，內(nèi)心表示很忐忑。

閱文雖易，寫作不易！文章較長，非常感謝您的耐心閱讀。如果對文章感興趣，也可以在這里通過留下一個小贊或者留言來支持作者！后面會經(jīng)常給大家?guī)硪黄恼?，也可以通過訂閱作者的專欄，來獲得知識的傳遞，謝謝大家！

本文由 @A.kun阿坤 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 pexels，基于CCO協(xié)議