界面設(shè)計中的字體-英文與數(shù)字字體

英?字體相對中?來說,字體包更?窖梁,所以選擇性更??些,今天主要推薦?些谷歌免費開源字體夹囚,谷歌字體真的?常棒纵刘,搭配好了, 能帶來很多不一樣視覺效果!

字體的骨架

結(jié)構(gòu)部分

那么在研究數(shù)字之前荸哟,我們先來了了解下?個字體名稱:

頂部:字體中最?字形的基線上方的最?距離

上升:單個字母的基線上?方的建議距

下降:單個?幕的建議距離低于基線假哎。

底部:?字?中最低字形的基線以下的最?距離?

行距:指代字體連行的基線間的距離 基本我們的英?字體都是由這些單位組成的,所以在了解這些基礎(chǔ)后鞍历,才更更加?便我們設(shè)計中如何選擇字體!

身體部分

前?那張圖是字體的上下結(jié)構(gòu)關(guān)系舵抹,那么這張圖更多是字體本身由那些元素組成:

軀?:也就是數(shù)字本身的橫豎,?較筆直的筆畫

字碗:顧明思議劣砍,帶弧形的筆劃

字環(huán):字體被包裹的空間

字距部分

在字距上惧蛹,業(yè)內(nèi)兩種做法,?種是每個字體相同的??刑枝,?如我們熟悉的lato香嗓,也有?一種做法是根據(jù)每個字母本身?個?小,?如1會小一些装畅,9會?一些靠娱,這兩種布局?式有好有壞,我個?更推薦前者掠兄,每個字母間距采?一樣的!

需要注意的點

通常我們很多時候像云,?上去免費找?些數(shù)字字體,或者選擇?款熱?字體時候蚂夕,一定需要注意檢查“$”和“%”“¥”符號苫费,如果不經(jīng)常上線會經(jīng)常出一些問題

另外在選擇字體時候,?一定需要仔細檢查每個字符双抽, ?比如數(shù)字中最容易易混淆的就是1和7百框,0和O

1.Playfair Display

受很多設(shè)計師喜歡的襯線字體,整體搭配出來雜志感牍汹,大牌特別強铐维,在很多高品質(zhì)的產(chǎn)品頁?柬泽,或者H5 頁面中有應(yīng)?到


這個字體我最喜歡字體前10,常和一些非創(chuàng)線字體搭配起來嫁蛇,用作大標題或者主題非常優(yōu)雅和藝術(shù)雜志 美感!字體非常優(yōu)雅和經(jīng)典


在UI設(shè)計中也是?受熱愛锨并,在?些PC?面,或者閱讀類產(chǎn)品中睬棚,配合優(yōu)美的排版第煮,整體?常現(xiàn)代

2.Nunito Sans

英?界?常?的字體抑党,老外設(shè)計師?的?比較多包警,字形很現(xiàn)代,?凈底靠,字?之間添加?些字間距害晦,看起來更加?凈


Nunito Sans?論在平?設(shè)計中,或者UI設(shè)計中都非常干凈暑中,現(xiàn)代壹瘟,有利于閱讀,所以老外在做設(shè)計時候?常喜歡?鳄逾,有個?竅?稻轨,在做英?時候,字?之間加一個字間距雕凹,可以讓設(shè)計看起來更舒服

3. Montserrat

這種字體很獨特澄者,不不像nunito sans那樣干凈。但每個字母上的?個小裝飾请琳,使的UI看起來?常有吸引?粱挡。


可以看出Montserrat字體深受?些?廠喜愛,?論是小寫組合俄精,還是正?文閱讀询筏,都很獨特

在UI界?中也是如此,讓整體設(shè)計更更加獨一?二竖慧,充滿著細節(jié)

4.Roboto

?歌產(chǎn)品界?默認字體嫌套,PC和?線上默認字體,可?在谷歌的重視程度圾旨,如果你做一個英?頁?踱讨,不知選什么字體,那么選擇這個是最安全的

這個字體通?性很強砍的,字重也很豐富痹筛,無論是粗體還是細體,用在各類產(chǎn)品網(wǎng)站和移動界面中非常簡潔優(yōu)雅

5.Open Sans

Open Sans是一種無襯線字體,移動設(shè)計中也是運?比較多的一個字體帚稠,比較現(xiàn)代和簡潔視覺感受

運?用在?站中很干凈谣旁,幾乎沒有多余的筆畫正式,字重對?強烈!

它配合這其他字體運?滋早,都很OK榄审,幾乎百搭,在國外很多經(jīng)典的官?網(wǎng)站都有運用到

6.PT Sans

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

PTSans在美食?面中的運用,和?物本身也融合很好

PTSans在雜志排版中運?也同樣很和諧

7.Futura PT

Futura PT是?種無襯線字體昔头,也是深受設(shè)計師喜歡的一款字體饼问,整體視覺感受現(xiàn)代時尚,我們?起來看它是視覺魅?

作為?標題的運?减细,簡單清晰干凈

作為設(shè)計公司?站的運?,配上?格的布局赢笨,?常的時尚

寶?御?字體之一未蝌,用在寶馬官?APP和網(wǎng)站上,可見尊貴感

時尚雜志的官?運?茧妒,?凈簡潔

今天推薦的這些英文字體在界?中完全可以?到萧吠,并且很容易下載,都fonts.google.com?站中,下班來說下數(shù)字字體桐筏。

說到數(shù)字字體可能很多?都沒有在意過纸型,數(shù)字在設(shè)計中其實占?還是很?,特別是在?金融設(shè)計中梅忌,數(shù)字字體狰腌,?直是情感的傳遞,設(shè)計細節(jié)的體現(xiàn)! 好的設(shè)計一定是從中文字體牧氮,英?字體琼腔,數(shù)字字體整體考驗的,那么今天和?家分享下在電商設(shè)計 和金融設(shè)計中踱葛,我們?的數(shù)字字體有那些!


常用數(shù)字字體

那么今天重點來了丹莲,那么我們做金融設(shè)計或者電商設(shè)計,數(shù)字字體到底?哪?個呢?在選擇之前尸诽,我們先來看看互聯(lián)?公司都在使用那些字體

蘋果系統(tǒng):使?的舊金山字體SanFrancisco 微信:DIN的字體基礎(chǔ)上微調(diào)


招商用戶:DIN字體 ?京東金融:DIN的字體甥材,重新進行了設(shè)計


百度?融:DIN字體基礎(chǔ)上調(diào)整 ?6.9支付寶:蘋果原生Helvetica Neue

所以通過以上簡單調(diào)研,我們不難發(fā)現(xiàn)性含,現(xiàn)在國內(nèi)外大多數(shù)金融產(chǎn)品數(shù)字字體都是運?用蘋果?帶數(shù)字字體洲赵,以及Din這個字體基礎(chǔ)上調(diào)整,那么為什么Din這 個字體這么受設(shè)計師喜愛呢

Din故事

DIN 是德國標準協(xié)會,Deutsches Institut für Normung 的?字母縮寫板鬓。1975年起悲敷,德國政府把DIN 作為國家標準體系,DIN 標準在國際和歐洲范圍內(nèi)被 廣泛使用俭令,并代表德國的利益后德。DIN字體算是??字體中的另類。它不僅是一款字體抄腔,更屬于一個龐大的國家標準體系瓢湃,代表了了一種把簡單的解決辦法標準化的思想。

在德國公路指示牌赫蛇,以及機場绵患,地圖??,上?多數(shù)運用Din字體作為引導(dǎo)字體

缺陷:前面我們說了了DIN在公路以及雜志悟耘,平面設(shè)計中?的很多落蝙,但是直接拿到互聯(lián)?APP設(shè)計中各種復(fù)雜的場景,DIN就沒有那么的完美暂幼,如圖中筏勒,4的開頭較?,以及5旺嬉,6字體的圓形不夠一致管行,7縮?后識別度問題,所以很多公司都會基于這些問題進?行?次設(shè) 計邪媳,這也是前?競品分析里面提到捐顷,為什么微信,京東雨效,百度會這個基礎(chǔ)上再設(shè)計的原因

如果只推薦?個數(shù)字字體迅涮,我肯定會推薦Din,但是 Din并不不免費徽龟,價格不便宜逗柴,如果需要運?每年?筆不小的費?,所以如果公司摳?門不愿意購買顿肺,你可以Din 基礎(chǔ)再重新設(shè)計?版本戏溺,也可以使用?些其他不不錯的 數(shù)字字體,接下來給?家推薦?些免費版權(quán)使?的!常用數(shù)字字體

1.Gaoel

如果都是?用Din其實也容易易看膩歪屠尊,?先推薦的這個我喜歡旷祸,整體字體設(shè)計很圓潤,年輕化讼昆,可愛?常適合?些偏年輕化的產(chǎn)品托享,同時字重?常適合金融產(chǎn)品的字重效果!

在?付寶備用金頁?中,就運?了類似這種?較圓潤有活潑感數(shù)字體!?家可以嘗試下這個字體在界?中效果,保證不會失望

2.Montserrat

谷歌免費字體中很優(yōu)雅的?個字體闰围,用在數(shù)字上或者界面中都?常的優(yōu)雅赃绊,前面英文字體中我們也有介紹。

3.Poppins

?歌免費字體中經(jīng)常被?到的一個字體羡榴,除了了9稍微顯得有點笨拙意外其他都挺現(xiàn)代的

4.Bitter

谷歌旗下的同樣廣泛運用到各種設(shè)計中碧查,數(shù)字字體和英?字體都很好用!

5.Fjalla One

Din字體的替代品,很多人?直在尋找的校仑,如果公司不愿意購買Din字體忠售,那么?歌旗下這個字體?常完美的替代品,使?出來的效果和Din也不會相差很多

6.Graduate

?歌旗下免費的迄沫,?常英倫?格和學院?的?款數(shù)字字體稻扬,?在海報或者?些個人化活動??效果非常好。

7.Lato

非逞虼瘢現(xiàn)代科技感的?款字體泰佳,無數(shù)知名app在用的字體,同樣出?谷歌旗下!保證不會出錯的?款字 體尘吗,之前天貓?過逝她,效果非常好

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市摇予,隨后出現(xiàn)的幾起案子汽绢,更是在濱河造成了極大的恐慌吗跋,老刑警劉巖侧戴,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異跌宛,居然都是意外死亡酗宋,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門疆拘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蜕猫,“玉大人,你說我怎么就攤上這事哎迄』赜遥” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵漱挚,是天一觀的道長翔烁。 經(jīng)常有香客問我,道長旨涝,這世上最難降的妖魔是什么蹬屹? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上慨默,老公的妹妹穿的比我還像新娘贩耐。我一直安慰自己,他們只是感情好厦取,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布潮太。 她就那樣靜靜地躺著骨杂,像睡著了一般尿赚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上低淡,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天台谢,我揣著相機與錄音寻狂,去河邊找鬼。 笑死朋沮,一個胖子當著我的面吹牛蛇券,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播樊拓,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼纠亚,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了筋夏?” 一聲冷哼從身側(cè)響起蒂胞,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎条篷,沒想到半個月后骗随,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡赴叹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年鸿染,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乞巧。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡涨椒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出绽媒,到底是詐尸還是另有隱情蚕冬,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布是辕,位于F島的核電站囤热,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏免糕。R本人自食惡果不足惜赢乓,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一忧侧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧牌芋,春花似錦蚓炬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至犀暑,卻和暖如春驯击,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背耐亏。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工徊都, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人广辰。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓暇矫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親择吊。 傳聞我的和親對象是個殘疾皇子李根,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 文字是界面設(shè)計中最基本的構(gòu)成之一,如何定義網(wǎng)頁設(shè)計中的文字系統(tǒng)几睛?可大體分為三步: 系統(tǒng)全面地了解文字的基礎(chǔ)知識房轿、顯...
    設(shè)計師的奇幻之旅閱讀 2,296評論 0 15
  • 字體是界面設(shè)計中重要的構(gòu)成要素之一,它能輔助信息的傳遞所森,是文字的外在表現(xiàn)形式囱持;字體還可以通過其獨有的藝術(shù)魅力,表達...
    Neil彭彭閱讀 2,724評論 1 21
  • 一必峰、概念 參考網(wǎng)頁字體Serif和Sans-serif的區(qū)別及瀏覽器字體的設(shè)置CSS Font知識整理總結(jié) 1.F...
    合肥黑閱讀 6,088評論 0 12
  • 能量場弱的時候容易招小人洪唐。防不勝防钻蹬。 回憶一件事及我被騙的過程吼蚁。 春天暖了,剛好想買兩床被子问欠。商場停車時候肝匆,遇到一...
    飛天Mami豬閱讀 185評論 0 0
  • 一 題目: Quiz 7 Randomly fills a grid with True and False, w...
    viger777閱讀 964評論 0 3