这两年移动化已至尾声,字体重新得到了大家的重视。去年微软、Adobe、苹果、Google 合作建立了一套增强版的 OpenType 字体,今年先是 Google 携手 Adobe 推出思源宋体,后是苹果悄悄更新了 SF Pro 字体。在界面中字体该如何选取,这当中又有怎样的门道,让我们听听方正设计师智疯的分享。

现在有不少产品为了凸现自身品牌气质,脱离对系统字体的依赖,转了使用其他字体。比如「网易新闻」选用汉仪旗黑给用户清晰圆润的观感;「澎湃新闻」大胆选用方正准雅宋体现其严肃性;「词Ci」选择方正清刻本悦宋体现其特有的书香气质;「我的天气」选择蒙纳秀明体和方正苏新诗柳楷简体给用户大气利落之感……

界面字体的选取首先要保证辨识度,这方面最有名的例子就是苹果在 iOS9 中将 Helvetica 换成了 SF 字体。虽然 Helvetica 运用极其普遍,但出身印刷的原因导致他延续到了屏幕上后并不理想,大写的 i 和小写的 L 难以区分,对于 UI 设计来说是非常不好的体验。

此外,在 SF 中苹果注重了单个字符的区分度,加入了动态调整字母间距的功能,字母与单词的间距根据字号动态调整,让阅读变得更加轻松。

在汉字中首先要了解字面。汉字的外框称字身框,内框称字面框。字面字身比就是两者之间的百分比值。比值大,字就大;比值小,字就小。

用方正兰亭黑小米兰亭进行对比,方正兰亭黑字面大,排版更工整。但是由于字面过大,导致字间距太小,在界面中不利于阅读。小米兰亭在兰亭黑基础上缩小了字面,加大了字间距。排版上不会像兰亭黑那样拥挤,在文字的阅读识别度上优于兰亭黑。

除了字面,另一个常被提及的概念就是中宫。字体设计的中宫和书法的中宫概念基本相同,指的是文字中间的部分。

对比方正新书宋和方正标雅宋,新书宋的中宫紧凑,留白大,字间距宽松;方正标雅宋正是由于笔划撑的较满,使得字间距较拥挤,在文字阅读体验方面不如方正新书宋。

还需要注意的是字体的重心。做字时把字的重心把握准了,做出的字才不会上歪下斜,左偏右倒,而显得平正。一般字库字体重心高于中心。重心低,沉稳,
重心高,会显得有气质。

对于整款字来讲,每个字只能确立一个重心,所有字都要以它为规矩,来调节字的高低和左右偏向,统一的重心更加利于阅读。


此外,字体的笔画也很重要。在屏显时,“喇叭头”能在笔划两头多出一块,字体在小屏幕上显示轻微发虚,如果两笔离得较近,头就有可能连上,使笔划交代不清,使识别度变差。

之前智疯都是围绕黑字体讲述,推荐了汉仪旗黑、思源黑体、苹方字体供大家参考。近些年白体字日趋重要,智疯同样推荐了几款。






除了这些推荐字体,还有一些很棒的字体工具可以极大的提升我们的工作效率。
RightFont
一款非常轻巧的应用,打开后将会看到一个非常简洁的字体列表窗口。通过搜索你可以找到你所安装过的字体进行预览,可以通过字体样式、字重、字宽三个维度来筛选字体。

WhatFont
这是一个书签栏工具,采用鼠标悬浮特性,点击后就可以告诉你所指字体的属性,字体名称、字体大小、字体颜色等,非常方便,目前有 chrome 和 safari 扩展,firefox 的用户可以使用书签栏工具。

字由
设计师可以通过收藏,搜索,标签,案例等快速找到心仪的字体,并在设计软件中无缝的使用这些字体。精心为每款字体整理了介绍,设计师,优秀的应用案例。

Glyphs
字体修改,创建工具。专门为汉字设计的自身框和字面框的参数选项。加入公用部件、智能部件等功能。

手迹造字APP
方正打造个人专属字库,用指尖勾勒文字,6种创新笔形随心书写,打破纸墨与屏幕之间的桎梏,扫描上传。

了解了这么多,大家是不是字体设计充满了兴趣。不妨报名且慢周末班的字体设计课程,听大侄子老师讲述字体设计的秘密,名额不多哟~
详情请移步http://www.uigreat.com官网查看

现在有不少产品为了凸现自身品牌气质,脱离对系统字体的依赖,转了使用其他字体。比如「网易新闻」选用汉仪旗黑给用户清晰圆润的观感;「澎湃新闻」大胆选用方正准雅宋体现其严肃性;「词Ci」选择方正清刻本悦宋体现其特有的书香气质;「我的天气」选择蒙纳秀明体和方正苏新诗柳楷简体给用户大气利落之感……

界面字体的选取首先要保证辨识度,这方面最有名的例子就是苹果在 iOS9 中将 Helvetica 换成了 SF 字体。虽然 Helvetica 运用极其普遍,但出身印刷的原因导致他延续到了屏幕上后并不理想,大写的 i 和小写的 L 难以区分,对于 UI 设计来说是非常不好的体验。

此外,在 SF 中苹果注重了单个字符的区分度,加入了动态调整字母间距的功能,字母与单词的间距根据字号动态调整,让阅读变得更加轻松。

在汉字中首先要了解字面。汉字的外框称字身框,内框称字面框。字面字身比就是两者之间的百分比值。比值大,字就大;比值小,字就小。

用方正兰亭黑小米兰亭进行对比,方正兰亭黑字面大,排版更工整。但是由于字面过大,导致字间距太小,在界面中不利于阅读。小米兰亭在兰亭黑基础上缩小了字面,加大了字间距。排版上不会像兰亭黑那样拥挤,在文字的阅读识别度上优于兰亭黑。

除了字面,另一个常被提及的概念就是中宫。字体设计的中宫和书法的中宫概念基本相同,指的是文字中间的部分。

对比方正新书宋和方正标雅宋,新书宋的中宫紧凑,留白大,字间距宽松;方正标雅宋正是由于笔划撑的较满,使得字间距较拥挤,在文字阅读体验方面不如方正新书宋。

还需要注意的是字体的重心。做字时把字的重心把握准了,做出的字才不会上歪下斜,左偏右倒,而显得平正。一般字库字体重心高于中心。重心低,沉稳,
重心高,会显得有气质。

对于整款字来讲,每个字只能确立一个重心,所有字都要以它为规矩,来调节字的高低和左右偏向,统一的重心更加利于阅读。


此外,字体的笔画也很重要。在屏显时,“喇叭头”能在笔划两头多出一块,字体在小屏幕上显示轻微发虚,如果两笔离得较近,头就有可能连上,使笔划交代不清,使识别度变差。

之前智疯都是围绕黑字体讲述,推荐了汉仪旗黑、思源黑体、苹方字体供大家参考。近些年白体字日趋重要,智疯同样推荐了几款。






除了这些推荐字体,还有一些很棒的字体工具可以极大的提升我们的工作效率。
RightFont
一款非常轻巧的应用,打开后将会看到一个非常简洁的字体列表窗口。通过搜索你可以找到你所安装过的字体进行预览,可以通过字体样式、字重、字宽三个维度来筛选字体。

WhatFont
这是一个书签栏工具,采用鼠标悬浮特性,点击后就可以告诉你所指字体的属性,字体名称、字体大小、字体颜色等,非常方便,目前有 chrome 和 safari 扩展,firefox 的用户可以使用书签栏工具。

字由
设计师可以通过收藏,搜索,标签,案例等快速找到心仪的字体,并在设计软件中无缝的使用这些字体。精心为每款字体整理了介绍,设计师,优秀的应用案例。

Glyphs
字体修改,创建工具。专门为汉字设计的自身框和字面框的参数选项。加入公用部件、智能部件等功能。

手迹造字APP
方正打造个人专属字库,用指尖勾勒文字,6种创新笔形随心书写,打破纸墨与屏幕之间的桎梏,扫描上传。

了解了这么多,大家是不是字体设计充满了兴趣。不妨报名且慢周末班的字体设计课程,听大侄子老师讲述字体设计的秘密,名额不多哟~
详情请移步http://www.uigreat.com官网查看