?背景?
上周我們一起聊了，界面常用的中文字體和英文字體，本期聊聊數(shù)字字體，數(shù)字在設(shè)計(jì)中其實(shí)占比還是很大，特別是在金融和電商設(shè)計(jì)中，數(shù)字字體，一直是情感的傳遞，設(shè)計(jì)細(xì)節(jié)的體現(xiàn)！那么今天和大家分享下在電商設(shè)計(jì)和金融設(shè)計(jì)中，常用的數(shù)字字體有哪些！
?字體的骨架?
結(jié)構(gòu)部分
分享前我們先要了解下字體結(jié)構(gòu)：
頂部：字體中最高字形的基線(xiàn)上方的最大距離
上升：?jiǎn)蝹€(gè)字母的基線(xiàn)上方的建議距
下降：?jiǎn)蝹€(gè)字母的建議距離低于基線(xiàn)
底部?:? 字母中最低字形的基線(xiàn)以下的最大距離
行距：指代字體連行的基線(xiàn)間的距離
基本的英文字體都是由這些單位組成的，所以在了解這些基礎(chǔ)后，才更加方便我們?cè)O(shè)計(jì)中如何選擇字體。
?
身體部分
前面那張圖是字體的上下結(jié)構(gòu)關(guān)系，那么這張圖更多是字體本身由那些元素組成：
軀干：也就是數(shù)字本身的橫豎，比較筆直的筆畫(huà)
字碗：顧名思議，帶弧形的筆劃
字環(huán)：字體被包裹的空間
?
字距部分
在字距上，業(yè)內(nèi)兩種做法，一種是每個(gè)字體相同的大小，比如我們熟悉的lato，也有一種做法是根據(jù)每個(gè)字母本身一個(gè)大小，比如1會(huì)小一些，9會(huì)大一些，這兩種布局方式有好有壞，我個(gè)人更推薦前者，每個(gè)字母間距采用一樣的！
?
? 需要注意的點(diǎn)??
▲ 通常我們很多時(shí)候，網(wǎng)上去免費(fèi)找一些數(shù)字字體，或者選擇幾款熱門(mén)字體時(shí)候，一定需要注意檢查“$”和“％”“￥”符號(hào)。
▲ 另外在選擇字體時(shí)候，一定需要仔細(xì)檢查每個(gè)字符，比如數(shù)字中最容易混淆的就是1和7，0和O。
?
?常用數(shù)字字體?
?
那么我們做金融設(shè)計(jì)或者電商設(shè)計(jì)，數(shù)字字體到底用哪幾個(gè)呢？在選擇之前，先來(lái)看看互聯(lián)網(wǎng)公司都在使用哪些字體。
▲ 蘋(píng)果系統(tǒng)：使用的舊金山字體SanFrancisco，微信：DIN的字體基礎(chǔ)上微調(diào)
?
▲ 招商銀行：DIN字體；京東金融：DIN的字體，重新進(jìn)行了設(shè)計(jì)
?
▲ 百度金融：DIN字體基礎(chǔ)上調(diào)整6.9，支付寶：蘋(píng)果原生Helvetica Neue
?
▲ 富途：蘋(píng)果原生Helvetica Neue，韓國(guó)SSG：蘋(píng)果原生Helvetica Neue
所以通過(guò)以上簡(jiǎn)單調(diào)研，我們不難發(fā)現(xiàn)，現(xiàn)在國(guó)內(nèi)外大多數(shù)金融產(chǎn)品數(shù)字字體都是運(yùn)用蘋(píng)果自帶數(shù)字字體，以及Din這個(gè)字體基礎(chǔ)上調(diào)整，那么為什么Din這個(gè)字體這么受設(shè)計(jì)師喜愛(ài)呢？
?Din故事?
DIN 是德國(guó)標(biāo)準(zhǔn)協(xié)會(huì)，Deutsches Institut für Normung 的首字母縮寫(xiě)。1975年起，德國(guó)政府把DIN作為國(guó)家標(biāo)準(zhǔn)體系，DIN 標(biāo)準(zhǔn)在國(guó)際和歐洲范圍內(nèi)被廣泛使用。DIN 字體繼承了嚴(yán)謹(jǐn)可識(shí)別度高，被廣泛運(yùn)用。
?
▲ 在德國(guó)公路指示牌，以及機(jī)場(chǎng)，地圖里面，大多數(shù)運(yùn)用Din字體作為引導(dǎo)字體。
?
▲ 在很多雜志包裝中，也可見(jiàn)大量Din字體的運(yùn)用，德國(guó)人的嚴(yán)謹(jǐn)在這個(gè)字體中體現(xiàn)的淋漓極致。
▲ 缺陷：前面我們說(shuō)了DIN在公路以及雜志，平面設(shè)計(jì)中用的很多，但是直接拿到互聯(lián)網(wǎng)APP設(shè)計(jì)中各種復(fù)雜的場(chǎng)景，DIN就沒(méi)有那么的完美，如圖中，4的開(kāi)頭較大，以及5，6字體的圓形不夠一致，7縮小后識(shí)別度問(wèn)題，所以很多公司都會(huì)基于這些問(wèn)題進(jìn)行二次設(shè)計(jì)，這也是前面競(jìng)品分析里面提到，為什么微信，京東，百度會(huì)這個(gè)基礎(chǔ)上再設(shè)計(jì)的原因。
?
?常用數(shù)字字體?
如果只推薦一個(gè)數(shù)字字體，我肯定會(huì)推薦Din，但是Din并不免費(fèi)，價(jià)格不便宜，如果需要運(yùn)用每年會(huì)有一筆不小的費(fèi)用，所以如果公司不愿意購(gòu)買(mǎi)，你可以Din基礎(chǔ)再重新設(shè)計(jì)一版本，也可以使用一些其他不錯(cuò)的數(shù)字字體，接下來(lái)給大家推薦一些免費(fèi)版權(quán)使用的！
?
1.Gaoel
如果都是用Din其實(shí)也容易看膩歪，首先推薦的這個(gè)我特別喜歡，整體字體設(shè)計(jì)很圓潤(rùn)，年輕化，可愛(ài)非常適合一些偏年輕化的產(chǎn)品，同時(shí)字重非常適合金融產(chǎn)品的字重效果！
?
▲ 在支付寶備用金頁(yè)面中，就運(yùn)用了類(lèi)似這種比較圓潤(rùn)有活潑感數(shù)字字體！大家可以嘗試下這個(gè)字體在你界面中效果，保證不會(huì)失望。
?
2.Montserrat
谷歌免費(fèi)字體中很優(yōu)雅的一個(gè)字體，用在數(shù)字上或者界面中都非常的優(yōu)雅。
3.Poppins
谷歌免費(fèi)字體中經(jīng)常被用到的一個(gè)字體，除了9稍微顯得有點(diǎn)笨拙以外其他都挺現(xiàn)代的。
4.Bitter
谷歌旗下的同樣廣泛運(yùn)用到各種設(shè)計(jì)中，字體和英文字體都很好用。
5.Fjalla One
Din字體的替代品，很多人一直在尋找的，如果公司不愿意購(gòu)買(mǎi)Din字體，那么谷歌旗下這個(gè)字體非常完美的替代品，使用出來(lái)的效果和Din也不會(huì)相差很多。
6.Graduate
谷歌旗下免費(fèi)的，非常英倫風(fēng)格和學(xué)院風(fēng)的一款數(shù)字字體，用在海報(bào)或者一些個(gè)人化活動(dòng)頁(yè)面效果非常好，當(dāng)然作為英文排版也是很高級(jí)。
?
7.Futura
谷歌旗下免費(fèi)的，這個(gè)字體無(wú)論英文還是數(shù)字都非常現(xiàn)代化，非常干凈利索的一款字體，做到PPT里面效果非常好。
?
8.Proxima Nova
這款不免費(fèi)，當(dāng)然收費(fèi)也非常對(duì)得起他這個(gè)價(jià)格，效果大家可以自己看，非常優(yōu)雅，現(xiàn)代。
9.Gotham
非常適合發(fā)布會(huì)，極簡(jiǎn)的網(wǎng)站設(shè)計(jì)，或者海報(bào)，非常現(xiàn)代干凈的一款字體，效果如圖，dribbble上各種好看的設(shè)計(jì)里面都跑不了這款字體。
10.Lato
非常現(xiàn)代科技感的一款字體，無(wú)數(shù)知名app在用的字體，同樣出自谷歌旗下，保證你不會(huì)出錯(cuò)的一款字體，之前天貓用過(guò)，效果非常好。
?
?襯線(xiàn)字體?
Playfair Display
如果只讓我推薦一款襯線(xiàn)英文字體，那么必須是Playfair Display莫屬，心頭大愛(ài)的字體，古典，現(xiàn)代優(yōu)雅于一體，不知道多少大牌一直用這個(gè)字體做設(shè)計(jì)。
如果你一直在尋找一款襯線(xiàn)英文字體，那么這個(gè)必須首先，效果直接看圖！
關(guān)于界面中字體系列就到這里，基本這些字體覆蓋我們常用的中英文，掌握這兩個(gè)就夠了。
?
?最后?
希望通過(guò)這兩篇的分享，能夠幫助大家在UI設(shè)計(jì)中提升字體的運(yùn)用，以及如何去定義一個(gè)界面的字體！
?
原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）
作者：sky
