在界面設(shè)計(jì)中，字體應(yīng)該是最被忽略的一個(gè)點(diǎn)，我們有圖標(biāo)規(guī)范，設(shè)計(jì)規(guī)范，表單，顏色規(guī)范等等，但是對于字體規(guī)范少之又少，除了規(guī)范蘋果和安卓設(shè)計(jì)默認(rèn)那些字體，關(guān)于字體研究少之又少，很多人會(huì)說UI中用的字體就那么幾個(gè)，我們又不是做運(yùn)營活動(dòng)和營銷，不需要了解那么多字體，其實(shí)不是，今天和大家分享下UI中字體。

字體的價(jià)值

網(wǎng)易考拉品牌升級明確規(guī)定中英文字體運(yùn)用

▲字體在設(shè)計(jì)中重要程度越來越高，文字不僅是閱讀形式一種，不同的字體不僅能影響排版，同時(shí)也能反應(yīng)出產(chǎn)品的性格！越來越多的品牌把字體設(shè)計(jì)融于品牌DNA中，在網(wǎng)易考拉改版設(shè)計(jì)中，針對中英文字體和整體品牌的融合 。

▲韓國知名電商11街的視覺升級中，對于中英文字體，有著明確的規(guī)范。

▲UBER的設(shè)計(jì)規(guī)范中，同樣也對字體有著明確的要求，英文字體，印刷字體，以及詳細(xì)使用規(guī)則。

越來越多的公司慢慢對字體在設(shè)計(jì)中運(yùn)用進(jìn)行規(guī)范，今天我們一起來聊聊界面設(shè)計(jì)中如何去定義我們的字體，以及UI中字體一些運(yùn)用規(guī)則。

字體的情感

▲字體是影響品牌的很關(guān)鍵詞元素，如果了解色彩心理學(xué)的同學(xué)，應(yīng)該知道不同的顏色其實(shí)有對應(yīng)的色彩情感，那么同樣的不同字形，筆畫等等都也是有品牌情感的。

▲比如我們常用的西文常見字體之一，Helvetica作為一種無襯線字體，整體字體筆畫安全，專業(yè)，嚴(yán)謹(jǐn)廣泛適用于各種場合，尤其受品牌商標(biāo)的偏愛, 包括3M，寶馬，雀巢, 曾經(jīng)的蘋果等等。另外，該字體很受政府青睞，美國稅單上用的字體就是 Helvetica。

圖片來源：
https://www.behance.net/gallery/41054815/Typography-Google-Fonts-Combinations-Volume-2

▲Roboto是為Android操作系統(tǒng)設(shè)計(jì)的一個(gè)無襯線字體家族。該字型特點(diǎn)為“現(xiàn)代的、平易近人”也一直是安卓系統(tǒng)默認(rèn)英文字體。

▲《機(jī)械姬》這個(gè)電影大家應(yīng)該很熟悉，作者使用幾何版型襯線字體，整體呈現(xiàn)科技感。

▲《鋼鐵俠》電影中，整套設(shè)計(jì)來源Territorystudio團(tuán)隊(duì)設(shè)計(jì)的虛擬界面。里面一整套虛擬界面，包括圖形，字體等，整體風(fēng)格高度一致，整體字體呈現(xiàn)未來和科技感。

所以一套字體一定是和整個(gè)品牌DNA是相延續(xù)的，它們之前有整體品牌調(diào)性，而不是單獨(dú)存在，就像我們內(nèi)衣，看不見但是很重要，字體也是如此。

中文字體

iOS和安卓都有官方推薦默認(rèn)字體，見上圖，但是很多時(shí)候我們的品牌，整體設(shè)計(jì)語言都有自己獨(dú)特個(gè)性化，所以有時(shí)候也需要去重新制定一套新的字體，那么對于這些字體，我們要如何去選擇呢？

在選擇字體時(shí)候，一定要根據(jù)整體品牌調(diào)性去選擇最合適的字體，下面是一些界面中常用的中文字體，而且版權(quán)也比較容易買到。

▲華文黑體視覺感受：字形方正，筆畫較粗，整體給人易識別，可讀性高。

▲思源黑體視覺感受：由adobe和Google 聯(lián)合推出的開源字體。字體家族龐大，涵蓋了中日韓用字。由日本設(shè)計(jì)師主導(dǎo)，與小冢黑體風(fēng)格上一脈相承，字體堅(jiān)固穩(wěn)定，字符空間均勻，整體給人專業(yè)，硬朗感受。

▲微軟黑體視覺感受：是方正第一代屏顯字體，也開創(chuàng)了中文屏顯字體設(shè)計(jì)先河，字形略呈扁方而飽滿，筆畫簡潔而舒展，易于閱讀，視覺感受清新和優(yōu)美。

▲冬青黑體視覺感受：字的結(jié)構(gòu)是日本的印刷字設(shè)計(jì)與中國用字習(xí)慣有諸多不一致的地方，盡管冬青黑體簡體針對中國大陸而設(shè)計(jì)，卻保留了原設(shè)計(jì)的風(fēng)格，這反倒讓字體顯得別具風(fēng)味，有個(gè)性，錘子系統(tǒng)貌似運(yùn)用的此款字體。

▲黑體-簡視覺感受：黑體字是現(xiàn)代漢字體系中最重要的字體之一，特點(diǎn)：非常突出，方正、粗獷、樸素、簡潔、無裝飾、橫豎筆形粗細(xì)視覺相等、筆形方頭方尾、黑白均勻，因此非常醒目，運(yùn)用廣泛。

▲蘋方-簡視覺感受：蘋方是蘋果新一代主題字，整體字體特點(diǎn)：專業(yè)，便捷，排版嚴(yán)謹(jǐn)，比較容易識別，是蘋果官方中文字體，也是大多數(shù)app首選字體。

▲方正蘭亭黑感受：方正蘭亭黑系列是微軟雅黑的延續(xù)設(shè)計(jì)，字面略為縮小，字重梯度多，獲得了更廣泛的適用性，其中用在品牌營銷中很多，它的特點(diǎn)：靈活多變，個(gè)性化營銷字體，排版嚴(yán)謹(jǐn)，識別性高，比如天貓?zhí)詫毢芏酄I銷banner規(guī)范都是運(yùn)用的蘭亭黑。

關(guān)于字重

字重：字體中很重要一個(gè)概念，不同字重傳遞出來視覺感受完全不一樣。

輕字重：傳遞出輕盈，放松視覺感受，常配合粗的字重使用，在一些引導(dǎo)頁面，閱讀頁面，說明文案時(shí)候使用。

重字重：視覺感受莊重，嚴(yán)謹(jǐn)，很重要，常用在重點(diǎn)強(qiáng)調(diào)的文字，數(shù)字，引導(dǎo)行動(dòng)操作點(diǎn)上，或者頁面中大的標(biāo)題，banner主標(biāo)題等等。

英文字體

英文字體相對中文來說，字體包更小，所以選擇性更大一些，今天主要推薦一些谷歌免費(fèi)開源字體，谷歌字體真的非常棒，搭配好了，能帶來很多不一樣視覺效果！

1.Playfair Display

受很多設(shè)計(jì)師喜歡的襯線字體，整體搭配出來雜志感，大牌特別強(qiáng)，在很多高品質(zhì)的產(chǎn)品頁面，或者H5頁面中有應(yīng)用到。

界面來源于網(wǎng)絡(luò)

▲這個(gè)字體是我喜歡字體排前10，常常和一些非襯線字體搭配起來，用作大標(biāo)題或者主題非常優(yōu)雅和藝術(shù)雜志美感！字體非常優(yōu)雅和經(jīng)典。

界面來源于網(wǎng)絡(luò)

▲在UI設(shè)計(jì)中也是廣受熱愛，在一些PC頁面，或者閱讀類產(chǎn)品中，配合優(yōu)美的排版，整體非?，F(xiàn)代。

2.Nunito Sans

英文界面常用的字體，國外設(shè)計(jì)師用的比較多，字形很現(xiàn)代，干凈，字母之間添加一些字間距，看起來更加干凈。

界面來源于網(wǎng)絡(luò)

▲Nunito Sans無論在平面設(shè)計(jì)中，或者UI設(shè)計(jì)中都非常干凈，現(xiàn)代，有利于閱讀，所以另外在做設(shè)計(jì)時(shí)候非常喜歡用，有個(gè)小竅門，在做英文時(shí)候，字母之間加一個(gè)字間距，可以讓設(shè)計(jì)看起來更舒服。

3. Montserrat

這種字體很獨(dú)特，不像nunito sans那樣干凈。但每個(gè)字母上的一個(gè)小裝飾，使得UI看起來非常有吸引力。

界面來源于網(wǎng)絡(luò)

▲可以看出Montserrat字體深受一些大廠喜愛，無論是大小寫組合，還是正文閱讀，都很獨(dú)特。

在UI界面中也是如此，讓整體設(shè)計(jì)更加獨(dú)一無二，充滿著細(xì)節(jié)。

4.Roboto

谷歌產(chǎn)品界面默認(rèn)字體，PC和無線上默認(rèn)字體，可見在谷歌的重視程度，如果你做一個(gè)英文頁面，不知道選什么字體，那么選擇這個(gè)是最安全的。

界面來源于網(wǎng)絡(luò)

▲這個(gè)字體通用性很強(qiáng)，字重也很豐富，無論是粗體還是細(xì)體，用在各類產(chǎn)品網(wǎng)站和移動(dòng)界面中非常簡潔優(yōu)雅。

5.Open Sans

Open Sans是一種無襯線字體，移動(dòng)設(shè)計(jì)中也是運(yùn)用比較多的一個(gè)字體，比較現(xiàn)代和簡潔視覺感受。

▲運(yùn)用在網(wǎng)站中很干凈，幾乎沒有多余的筆畫正式，字重對比強(qiáng)烈！

▲它配合這其他字體運(yùn)用，都很OK，幾乎百搭，在國外很多經(jīng)典的官方網(wǎng)站都有運(yùn)用到。

6.PT Sans

1998年發(fā)布，基于俄羅斯的無襯線字體,一般常用于雜志，美食產(chǎn)品。

▲PTSans在美食頁面中的運(yùn)用，和食物本身也融合的很好。

▲PTSans在雜志排版中運(yùn)用也同樣很和諧。

7.Futura PT

Futura PT是一種無襯線字體，也是深受設(shè)計(jì)師喜歡的一款字體，整體視覺感受現(xiàn)代時(shí)尚，我們一起來看看它是視覺魅力。

▲作為大標(biāo)題的運(yùn)用，簡單清晰干凈。

▲作為設(shè)計(jì)公司網(wǎng)站的運(yùn)用，配上網(wǎng)格的布局，非常的時(shí)尚。

▲寶馬御用字體之一，用在寶馬官方APP和網(wǎng)站上，可見尊貴感。

▲時(shí)尚雜志的官網(wǎng)運(yùn)用，干凈簡潔。

英文系列字體還有很多，后續(xù)有機(jī)會(huì)再和大家推薦，今天推薦的這些英文字體在界面中完全可以用到，并且很容易下載，都在 fonts.google.com 網(wǎng)站中。

最后

正如前面開頭所說，字體是設(shè)計(jì)中體現(xiàn)品牌很重要一點(diǎn)，字體選擇非常重要，字體也是設(shè)計(jì)中最大量的內(nèi)容，所以我們一定要掌握起來，下一篇我將會(huì)圍繞數(shù)字字體運(yùn)用分享給大家，下周見！

原文地址：我們的設(shè)計(jì)日記（公眾號）

作者：sky