界面设计中的字体-英文与数字字体

英⽂字体相对中⽂来说,字体包更⼩,所以选择性更⼤⼀些,今天主要推荐⼀些谷歌免费开源字体,谷歌字体真的⾮常棒,搭配好了, 能带来很多不一样视觉效果!

字体的骨架

结构部分

那么在研究数字之前,我们先来了了解下⼏个字体名称:

顶部:字体中最⾼字形的基线上方的最⼤距离

上升:单个字母的基线上⽅方的建议距

下降:单个⼦幕的建议距离低于基线。

底部: 字⺟中最低字形的基线以下的最⼤距离⾏

行距:指代字体连行的基线间的距离 基本我们的英⽂字体都是由这些单位组成的,所以在了解这些基础后,才更更加⽅便我们设计中如何选择字体!

身体部分

前⾯那张图是字体的上下结构关系,那么这张图更多是字体本身由那些元素组成:

躯⼲:也就是数字本身的横竖,⽐较笔直的笔画

字碗:顾明思议,带弧形的笔划

字环:字体被包裹的空间

字距部分

在字距上,业内两种做法,⼀种是每个字体相同的⼤⼩,⽐如我们熟悉的lato,也有⼀一种做法是根据每个字母本身⼀个⼤小,⽐如1会小一些,9会⼤一些,这两种布局⽅式有好有坏,我个⼈更推荐前者,每个字母间距采⽤一样的!

需要注意的点

通常我们很多时候,⽹上去免费找⼀些数字字体,或者选择⼏款热⻔字体时候,一定需要注意检查“$”和“%”“¥”符号,如果不经常上线会经常出一些问题

另外在选择字体时候,⼀一定需要仔细检查每个字符, ⽐比如数字中最容易易混淆的就是1和7,0和O

1.Playfair Display

受很多设计师喜欢的衬线字体,整体搭配出来杂志感,大牌特别强,在很多高品质的产品页⾯,或者H5 页面中有应⽤到


这个字体我最喜欢字体前10,常和一些非创线字体搭配起来,用作大标题或者主题非常优雅和艺术杂志 美感!字体非常优雅和经典


在UI设计中也是⼴受热爱,在⼀些PC⻚面,或者阅读类产品中,配合优美的排版,整体⾮常现代

2.Nunito Sans

英⽂界⾯常⽤的字体,老外设计师⽤的⽐比较多,字形很现代,⼲净,字⺟之间添加⼀些字间距,看起来更加⼲净


Nunito Sans⽆论在平⾯设计中,或者UI设计中都非常干净,现代,有利于阅读,所以老外在做设计时候⾮常喜欢⽤,有个⼩窍⻔,在做英⽂时候,字⺟之间加一个字间距,可以让设计看起来更舒服

3. Montserrat

这种字体很独特,不不像nunito sans那样干净。但每个字母上的⼀个小装饰,使的UI看起来⾮常有吸引⼒。


可以看出Montserrat字体深受⼀些⼤厂喜爱,⽆论是小写组合,还是正⽂文阅读,都很独特

在UI界⾯中也是如此,让整体设计更更加独一⽆二,充满着细节

4.Roboto

⾕歌产品界⾯默认字体,PC和⽆线上默认字体,可⻅在谷歌的重视程度,如果你做一个英⽂页⾯,不知选什么字体,那么选择这个是最安全的

这个字体通⽤性很强,字重也很丰富,无论是粗体还是细体,用在各类产品网站和移动界面中非常简洁优雅

5.Open Sans

Open Sans是一种无衬线字体,移动设计中也是运⽤比较多的一个字体,比较现代和简洁视觉感受

运⽤用在⽹站中很干净,几乎没有多余的笔画正式,字重对⽐强烈!

它配合这其他字体运⽤,都很OK,几乎百搭,在国外很多经典的官⽅网站都有运用到

6.PT Sans

1998年年发布,基于俄罗斯的无衬线字体,一般常⽤于杂志,美食产品

PTSans在美食⻚面中的运用,和⻝物本身也融合很好

PTSans在杂志排版中运⽤也同样很和谐

7.Futura PT

Futura PT是⼀种无衬线字体,也是深受设计师喜欢的一款字体,整体视觉感受现代时尚,我们⼀起来看它是视觉魅⼒

作为⼤标题的运⽤,简单清晰干净

作为设计公司⽹站的运⽤,配上⽹格的布局,⾮常的时尚

宝⻢御⽤字体之一,用在宝马官⽅APP和网站上,可见尊贵感

时尚杂志的官⽹运⽤,⼲净简洁

今天推荐的这些英文字体在界⾯中完全可以⽤到,并且很容易下载,都fonts.google.com⽹站中,下班来说下数字字体。

说到数字字体可能很多⼈都没有在意过,数字在设计中其实占⽐还是很⼤,特别是在⾦金融设计中,数字字体,⼀直是情感的传递,设计细节的体现! 好的设计一定是从中文字体,英⽂字体,数字字体整体考验的,那么今天和⼤家分享下在电商设计 和金融设计中,我们⽤的数字字体有那些!


常用数字字体

那么今天重点来了,那么我们做金融设计或者电商设计,数字字体到底⽤哪⼏个呢?在选择之前,我们先来看看互联⽹公司都在使用那些字体

苹果系统:使⽤的旧金山字体SanFrancisco 微信:DIN的字体基础上微调


招商用户:DIN字体  京东金融:DIN的字体,重新进行了设计


百度⾦融:DIN字体基础上调整  6.9支付宝:苹果原生Helvetica Neue

所以通过以上简单调研,我们不难发现,现在国内外大多数金融产品数字字体都是运⽤用苹果⾃带数字字体,以及Din这个字体基础上调整,那么为什么Din这 个字体这么受设计师喜爱呢

Din故事

DIN 是德国标准协会,Deutsches Institut für Normung 的⾸字母缩写。1975年起,德国政府把DIN 作为国家标准体系,DIN 标准在国际和欧洲范围内被 广泛使用,并代表德国的利益。DIN字体算是⻄⽂字体中的另类。它不仅是一款字体,更属于一个庞大的国家标准体系,代表了了一种把简单的解决办法标准化的思想。

在德国公路指示牌,以及机场,地图⾥⾯,上⼤多数运用Din字体作为引导字体

缺陷:前面我们说了了DIN在公路以及杂志,平面设计中⽤的很多,但是直接拿到互联⽹APP设计中各种复杂的场景,DIN就没有那么的完美,如图中,4的开头较⼤,以及5,6字体的圆形不够一致,7缩⼩后识别度问题,所以很多公司都会基于这些问题进⾏行⼆次设 计,这也是前⾯竞品分析里面提到,为什么微信,京东,百度会这个基础上再设计的原因

如果只推荐⼀个数字字体,我肯定会推荐Din,但是 Din并不不免费,价格不便宜,如果需要运⽤每年⼀笔不小的费⽤,所以如果公司抠⻔门不愿意购买,你可以Din 基础再重新设计⼀版本,也可以使用⼀些其他不不错的 数字字体,接下来给⼤家推荐⼀些免费版权使⽤的!常用数字字体

1.Gaoel

如果都是⽤用Din其实也容易易看腻歪,⾸先推荐的这个我喜欢,整体字体设计很圆润,年轻化,可爱⾮常适合⼀些偏年轻化的产品,同时字重⾮常适合金融产品的字重效果!

在⽀付宝备用金页⾯中,就运⽤了类似这种⽐较圆润有活泼感数字体!⼤家可以尝试下这个字体在界⾯中效果,保证不会失望

2.Montserrat

谷歌免费字体中很优雅的⼀个字体,用在数字上或者界面中都⾮常的优雅,前面英文字体中我们也有介绍。

3.Poppins

⾕歌免费字体中经常被⽤到的一个字体,除了了9稍微显得有点笨拙意外其他都挺现代的

4.Bitter

谷歌旗下的同样广泛运用到各种设计中,数字字体和英⽂字体都很好用!

5.Fjalla One

Din字体的替代品,很多人⼀直在寻找的,如果公司不愿意购买Din字体,那么⾕歌旗下这个字体⾮常完美的替代品,使⽤出来的效果和Din也不会相差很多

6.Graduate

⾕歌旗下免费的,⾮常英伦⻛格和学院⻛的⼀款数字字体,⽤在海报或者⼀些个人化活动⻚⾯效果非常好。

7.Lato

非常现代科技感的⼀款字体,无数知名app在用的字体,同样出⾃谷歌旗下!保证不会出错的⼀款字 体,之前天猫⽤过,效果非常好

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • 文字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为三步: 系统全面地了解文字的基础知识、显...
    设计师的奇幻之旅阅读 2,291评论 0 15
  • 字体是界面设计中重要的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达...
    Neil彭彭阅读 2,717评论 1 21
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 6,077评论 0 12
  • 能量场弱的时候容易招小人。防不胜防。 回忆一件事及我被骗的过程。 春天暖了,刚好想买两床被子。商场停车时候,遇到一...
    飞天Mami猪阅读 182评论 0 0
  • 一 题目: Quiz 7 Randomly fills a grid with True and False, w...
    viger777阅读 964评论 0 3