我们谈到了界面中常用的中文字体和英文字体。这一期我们讲了数字字体。事实上,数字在设计中仍然占很大比例,尤其是金融和电子商务设计。数字字体一直是情感的传递,是设计细节的体现!所以今天,我想和大家分享一下电子商务设计和金融设计中常用的数字字体。
字体框架
1.结构零件
分享之前,首先要了解字体结构:
顶部:字体中最高字形的基线上方的最大距离;上升:单个字母的基线上方的建议距;下降:单个字母的建议距离低于基线;底部 :字母中最低字形的基线以下的最大距离;行距:指代字体连行的基线间的距离。基本的英文字体就是由这些单位组成的,所以我们在了解了这些基础之后,在设计中选择字体就更方便了。
2.身体部位
上图是字体的上下结构,所以这张图更多的是字体本身是由哪些元素组成的:
躯干:也就是数字本身的横竖,比较笔直的笔画;字碗:顾名思议,带弧形的笔划;字环:字体被包裹的空间。3.单词间距部分
在字间距方面,业界有两种做法,一种是每种字体大小相同,比如我们熟悉的lato,另一种是每个字母都有自己的大小,比如1会小,9会大。这两种排版方式各有利弊,我个人推荐前者,每个字母使用相同的间距!
需要注意的几点:
▲通常我们上网免费找一些数字字体或者选择一些流行字体的时候,一定要注意检查符号“$”和“%”和“$”。
▲另外,在选择字体时,一定要仔细检查每个字符。比如最容易混淆的数字是1和7,0和o。
常见数字字体
那么我们做金融设计或者电子商务设计的时候,用的是哪些数字字体呢?在选择之前,我们先来看看互联网公司用的是哪些字体。
▲苹果系统:使用旧金山字体旧金山,微信:DIN字体基于微调
▲招商银行:DIN字体;京东金融:DIN字体,重新设计
▲百度金融:基于DIN字体调整6.9,支付宝:苹果本土Helvetica Neue
▲富图:苹果本土Helvetica诺伊,韩国SSG:苹果本土Helvetica诺伊
所以,通过以上简单的调查,不难发现,现在国内外大部分金融产品的数字字体都是在苹果自己的数字字体和Din字体的基础上进行调整的,那么为什么Din字体如此受设计师欢迎呢?
晚餐故事
德国工业标准是德国标准协会的缩写。从1975年开始,德国政府就把DIN作为国家标准体系,DIN标准在国际上和欧洲得到广泛应用。DIN字体继承了严谨性和高识别性,应用广泛。
▲在德国路标、机场、地图中,大多使用Din字体作为引导字体。
▲在很多杂志包装中,大量使用Din字体,德国人的严谨在这种字体中体现到了极致。
缺点
前面说过,DIN广泛应用于公路、杂志、平面设计,但如果直接在互联网APP的设计中得到各种复杂的场景,就没有那么完美了。
如图,4开头大,5和6字体的圆圈不够一致,7后识别度降低,所以很多公司会针对这些问题进行二次设计,这也是之前的竞争产品分析中提到的微信、JD.COM、百度会在此基础上重新设计的原因。
常见数字字体
如果只推荐一种数字字体,我肯定会推荐Din,但是Din不免费,价格也不便宜。如果需要使用,每年都会有一笔小额费用。所以如果公司不愿意买,你可以在Din的基础上重新设计一个版本,或者用一些其他好的数字字体。接下来我推荐一些免费的版权使用!
1.Gaoel
如果都用Din的话,很容易看出来。特别喜欢先推荐的那个。整体字体设计圆润、年轻、可爱,非常适合一些比较年轻的产品。同时,词权重非常适合金融产品的词权重效果!
▲在支付宝的零用现金页面,使用的就是这种圆润活泼的数字字体!你可以在你的界面上试试这个字体的效果,确定你没有失望。
2.蒙特塞拉特岛
Google的免费字体之一非常优雅,用在数字或者界面上非常优雅。
3.波普斯
谷歌经常使用的免费字体之一,除了9有点笨拙之外,相当现代。
4.苦的
Google的也广泛用于各种设计,字体和英文字体都非常好用。
5.Fjalla One
Din字体的替代品是很多人一直在寻找的。如果公司不愿意购买Din字体,那么谷歌字体的完美替代品和Din也不会有太大区别。
6.毕业
Google的免费、英文风格、学术风格的数字字体在海报或者一些个性化的活动页面上效果非常好,作为英文排版也非常先进。
7.Futura
Google的免费,这个字体很现代,无论是英文还是数字。是很干净的字体,在PPT里效果很好。
8.比邻星新星
这款当然不是免费的,收费很对得起他的价格,效果自己也能看到,很优雅,很现代。
9.哥谭市
非常适合发布会,极简网站设计,或者海报。这是一种非常现代和干净的字体。效果如图。dribbble上各种漂亮的设计都跑不了这个字体。
10.拉托
非常现代科技感的字体,无数知名应用使用的字体,Google拥有的字体,保证你不会出错。天猫之前用过,效果很好。
衬线字体
游乐场展示
如果我只推荐一种衬线英文字体的话,那一定是Playfair Display,这是我最喜欢的字体,古典,现代,优雅。不知道有多少大牌一直在用这种字体设计。
如果你一直在找衬线英文字体,一定要先直接看图!
界面字体系列就这些了。基本上这些字体涵盖了我们常见的中文和英文。掌握这两种字体就够了。
最后的
希望这两篇文章的分享能帮助你提高UI设计中字体的使用,以及如何定义一个界面的字体!
“界面美观,界面中的字体不能耽误。”
这篇文章最初是@我们的设计日记发表的,大家都是产品经理。未经允许禁止复制。
标题图来自Unsplash,基于CC0协议。
1.《din字体 让你的设计更好看:10款常用的数字字体推荐》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。
2.《din字体 让你的设计更好看:10款常用的数字字体推荐》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/guoji/1758096.html