新手福利!一份详尽全面的UI设计字体与排版指南 - 优设网 - UISDC

新手福利!一份详尽全面的UI设计字体与排版指南

2016/04/13 81995评论区

ui-design-font-typesetting-1

无论你是做网页还是App设计,文字内容总是能占到整个版面将近80%的区域。因此理解字体与排版对UI设计师来说非常关键。你需要始终把内容的可读性放在首位去考虑和权衡你对字体与排版的选择。

15xl20160413

字体的基础术语

了解字体设计的基础术语非常重要,这些术语在介绍字体设计的相关文章中经常出现。比如 x-height(X字高)指的是从字母的基准线开始往上到最矮字母的顶端的距离,当X字高的比例相对大一些的话就能增加易读性。

20xl20160413

汉字字形

在大多数情况下我们都选择使用系统自带的字体,比如微软雅黑、宋体、黑体等来定义标题和内容,但有时,我们在做Logo,banner设计时也需要通过对字体进行改造,来达到更加理想的效果。这时我们就需要掌握汉字的字形结构以及一些最基本的设计原则。

22xl20160413

衬线字与非衬线字

在西方国家的字母体系,分成两大字族:serif(衬线字体)及sans serif(无衬线字体)。衬线字(下图中的宋体、Times New Roman)是指在字的笔画开始及结束的地方有额外的装饰,而且笔画的粗细会因直横的不同而有所不同。 相反的,无衬线字(下图中的思源黑体、Helvetica)就没有这些额外装饰,而且笔画粗细大致上是差不多。

衬线字的字体较易辨识,也因此具有较高的易读性。 反之无衬线字则较醒目。通常来说,需要强调、突出的小篇幅文字一般使用无衬线字,而在长篇正文中,为了阅读的便利,一般使用衬线字。在实际应用中,因为中文的宋体和西文的衬线体,中文的黑体和西文的无衬线体,在风格和应用场景上相似,所以通常搭配使用。

5xl20160413

字体排版建议

在你对字体排版技巧了如指掌之前,首先需要保证你的内容能够简单且清晰地展现出来。优秀的文字与排版使我们更愿意去阅读,所以最好先关注你所设定的字体和排版是否便于阅读,然后再考虑为了美观改进行修饰。我们可以参考这篇英文指南:优秀字体排版的5条原则 并且将文中的这些原则应用到我们的App和Web设计中去。

iOS中的系统字体

随着iOS 9系统以及EI Capitan系统的发布,现在的系统字体变为了Apple自己设计的 [San Francisco]。iOS仍然在其他地方使用SF UI,而在Apple Watch中使用SF Compact。

11xl20160413

San Francisco 有两类尺寸: 文本模式(SF UI Text)和展示模式(SF UI Display)。 文本模式适用于小于20 points的尺寸,展示模式则适用于大于20 points的尺寸。当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换。

注:如果你使用诸如Sketch或Photoshop的工具来进行设计,那么当你设置的字体大于等于20 points的时候,你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。

19xl20160413

选择Body字体

为body text挑选合适的字体是最重要的。务必选择那些可读性强的,看上去干净易读的字体。我推荐的常用英文字体有:San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。中文字体则有,华文细黑,思源黑体。

18xl20160413

字体的大小

在iPhone,iPad,iWatch 中设置的Body字体不应该小于11pt,这样才能被正常阅读。我们推荐的Body文本大小应该在15-18pt。

4xl20160413

9xl20160413

字体的字重

当我们设置更大的字体来获得更好的易读性的同时,我们也应相应地减小字体的字重(粗细),考虑Light,Thin或者Ultra Thin。过重的字体会太过醒目,从而影响其他内容的显示效果。

当字体大小为12-18pt时,使用Regular,18-24pt时,使用Light,24-32pt,使用Thin,当字体大小超过32pt时,建议使用Ultralight。以上都是建议值,你应该根据不同字体的显示效果进行设定使文字内容看上去清晰和精致,从而保持良好阅读体验。

7xl20160413

现代字体都有多种字重设置:Regular,Light,Thin和Ultralight

合理设置行高,让文字也能够呼吸

行间距(leading)应该设置为字体大小的120%到145%之间。

3xl20160413

在右边的例子中,行高设为了与字体高度相同的100%,而在左边的例子中,我将它设为145%。它们的显示效果有着非常明显差异。当字数进一步增加时,你更会发现阅读行距设置过小的大段文字会非常累。合理设置行高,也是一种留白的技巧,能够增强用户的阅读体验。

每行45-90个字

行长指单行文字的长度,如果一行中包含的字数太多,文本内容将会很难阅读。英文字符一般在45-90字比较适宜,而中文35-60字为宜。合理的行长使用户在行间跳转时非常感到轻快和愉悦,反之则会使阅读成为一种负担。

8xl20160413

字体样式

字体样式对易读性和快速浏览非常重要,一般的原则是,被修饰的文本不应超过整个文本的10%,如果所有文本都都通过修饰被强调的话,那反而就不是强调了。当然,一次不应该同时使超过三种的强调样式。换句话说,不要在同一段文本中同时使用,颜色,字体改变,大小,下划线,斜体,粗体。

12xl20160413

寻找合适的字体

大部分商用字体都很贵,但也有很多优秀的字体是免费的。你只需要从中挑选你最喜欢的字体,并应用到你的设计中就可以了。下面就介绍几个非常优秀的字体网站。

Google Fonts (需梯子)

在Google Fonts,你可以免费下载你喜欢的字体,并且按照你的需要在项目中使用。由于在iOS中使用其他字体的唯一方法就是将字体文件导入到系统中,因此Google Fonts的下载功能非常有用。Google Fonts包含超过1400种不同的字体,其中包含最著名的:Open SansRoboto字体,他们是Android系统使用的默认字体。
1xl20160413

你可以使用Mac上的SkyFonts来自动同步字体到你的桌面。

2xl20160413

如果你需要在你的网站中直接使用Google Web Fonts,你可以选择360的代理来访问Google的免费字体库。下面是使用说明,非常简单。

6xl20160413

Typekit

有非常多优秀的字体。这对于那些刚刚起步的人来说,非常有用。这其中就有我非常喜欢的Proxima Nova和Museo字体。它还将思源黑体等中文字体也收入其中了。

17xl20160413

有字库

对于在需要大量使用中文字体的用户来说,有字库是一个不错的选择。它是国内目前比较优秀的Web Font服务平台,包含了大量优秀的中文字体。

10xl20160413

其他资源

字体和排版是一门值得深入探索的艺术。每个字体的形成和发展过程都有着深远的历史可以追溯。当你设计的作品也能被称作艺术品时,那就是对你最大的肯定。

文字排版指南

这是一篇英文文字排版指南,但提到的内容和大部分意见对中文字体的选择和排版同样具有意义。非常值得阅读。

16xl20160413

字体设计基础:字由心生

汉字怎么样发展而来的?我们现在用到 字体是通过什么字体演变过来的?当今字体又是沿用了先人的那些字体基础?… … 通过这篇文章,能够对汉字的这些基础知识有所了解。

21xl20160413

哪种字体最适合快速阅读

这篇文章详细介绍了中英文字体的搭配建议,很有参考价值。

13xl20160413

Type is Beautiful

是一个非常有名的关于字体的博客网站,提供了大量字体研究的文章,适合从初学者到资深设计师阅读。同时它还提供了一个播客,名叫“字谈字畅”

14xl20160413

欢迎关注作者的微信公众号:技匠

jjqr

【优设四月人气过万的好文】

使用素材站:
《实用干货!11个人气超高的设计素材汇总网站》

自学UI设计的正确姿势:
《别着急学软件!先掌握科学有效的UI设计自学姿势(超全面)》

幽默有趣的前端小课堂:
《零基础也能看懂!写给设计师的前端小知识之网页排版(附实战)》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ui-design-font-typesetting

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里