中文字体排版设计干货：UI设计可读性核心技巧

不管你是从事网页设计, 亦或是进行App设计, 文字内容往往会占据整个版面差不多80%的区域。所以呢, 对于UI设计师而言, 理解字体与排版是极为关键的一环。你必须一直将内容的可读性置于首要位置, 以此来考量并权衡你对于字体与排版的选择。

字体的基础术语

知晓字体设计的基础术语颇为关键, 这些术语于阐述字体设计的相关文章里时常现身。举例而言, x - height（X字根大小）所讲的是自字母的基准线起始, 朝着上方抵达最矮字母的顶端的那段距离, 要是X字根大小的比例相对大一点的话便能够增添易读性。

汉字字形

多数情形下, 我们挑选运用系统自带的字体, 像微软雅黑、宋体、黑体等, 以此来界定标题与内容, 然而 occasionally, 我们在开展 Logo、banner 设计之际就得借助对字体予以改造, 进而达成更为理想的成效。此刻我们就必须把控汉字的字形结构以及某些最基础的设计原则。

衬线字与非衬线字

于西方国家的字母体系来讲呵, 划分成了两大类字族, 分别是serif（衬线字体）以及sans serif（无衬线字体）。所谓衬线字呀 , 像下图中的宋体还有Times New Roman 就是那种，在字的笔画起始之处以及结束的地方是有额外专门装饰的, 并且笔画的粗细会由直横的不同情况而出现不一样的状况。与之相反的是, 无衬线字, 也就是下图中的思源黑体和Helvetica, 它们是不存在这些额外装饰, 再者笔画粗细大体上是差不多的。

衬线字字体, 较易于辨识, 所以有着较高的易读性, 反之, 无衬线字则比较醒目, 通常来讲, 需要强调突出的小篇幅文字, 一般会使用无衬线字, 然而在用长篇正文中, 为了有阅读的便利情况, 一般地话, 也就使用村线字, 在实际应用方面, 因为中文中的宋体, 以及西文的衬线体, 中文的黑体, 和西文的无衬线体, 在风格以及应用场景上较为相似, 所以通常是搭配着使用。

字体排版建议

在你对字体排版技巧全然熟知于心之前, 需先确保你的那内容能够以简单且清晰的方式展现起来, 优秀的文字与之结合排版会让我们更倾向于去阅读, 故而最好先着重留意你所设定的字体以及其排版是否利于阅读, 之后再思索为美化而进行修饰, 我们能够去参考这篇英文指南, 该指南名为优秀字体排版的5条原则, 并且要把文中的这些原则应用到我们的App以及Web设计当中去。

iOS中的系统字体

当iOS 9系统发布了, 同时EI Capitan系统也发布了, 此时现在系统的字体变成了Apple自行所设计的了！

San Francisco

iOS在别的地方依旧使用SF UI, 然而在Apple Watch里使用的却是SF Compact。

旧金山有两类尺寸, 一类是文本模式, 也就是旧金山用户界面文本, 另一类是展示模式, 即旧金山用户界面展示, 文本模式适用于小于20个点的尺寸, 展示模式适用于大于20个点的尺寸, 此外, 当你在自己的应用程序中使用旧金山时, 苹果操作系统会在适当的时候自动在文本模式和展示模式之间进行切换。注意, 要是你运用像Sketch或者Photoshop这类工具去开展设计, 那么在你所设置的字体达到大于或等于20 points这个程度时, 你就得切换至展示模式了。iOS会依据字体大小, 对San Francisco自动实施字间距调整的行为。

选择Body字体

选合适字体给body text是最重要之关键所在。得选那些可读性强的, 看上去洁净分明、易于阅读的字体才行。我所推荐的常用英文类字体有, San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。而中文字体呢, 有华文细黑, 思源黑体。

字体的大小

对于在iPhone、iPad、iWatch里所设置的Body字体, 是不应当小于11pt的, 只有如此才能够被正常地阅读。而我们所进行推荐的Body文本大小, 应当是在15至18pt以内。

字体的字重

在将字体设置得更大进而达到更好易读性之际, 我们需要相应减小字体的字重（粗细程度）, 比如考虑Light , Thin或者Ultra Thin这些选项。特别要注意, 过重的字体醒目程度过高, 会对其他内容的显示效果产生不好的影响。

当字体大小处于12至18pt这个范围之时, 使用Regular, 当字体大小处于18至24pt的区间之际, 使用Light, 当字体大小在24至32pt段落之时, 使用Thin, 当字体大小超出32pt这个数值的时候, 建议使用Ultralight。以上所有均为建议值, 你应当照不同字体的呈现效果予以设定, 以使文字内容看起来清晰且精致, 籍此维持良好的阅读体验。

当下的字体存在着多种字重设定, 有Regular, 有Light, 有Thin, 还有Ultralight。

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

行间距, 也就是leading, 须被设置于字体大小百分之百二十至百分之百四十五之间 , 这样一来此范围内是恰当的。

于右边之例中, 行高被设为与字体高度等同的百分之一百, 而在左边的事例里, 我将其设为百分之一百四十五。它们之间的显示成效存在极为显著的差别。当字数进一步增多时, 你更会发觉阅读行距设置过小的大量文字会非常令人疲累。合理地设置行高, 亦是一种留白的技艺, 能够提升用户的阅读感受。

每行45-90个字

行长所指的是单行文字的长度, 要是一行之中所包含的字数过多, 那么文本内容将会成为难度颇高的阅读对象。英文的字符一般在45到90字这个范围比较容易让人接受适宜, 与此同时, 中文方面35到60字被认为是比较合适的范围。合理的行长能够让使用方在其进行行间跳转时期非常强烈深感一种轻快和愉悦无比的别样的感受, 相反而言, 如果不是这样的情况, 便则会使得阅读转化成为一种沉重压力负担的阅读行为情形。

字体样式

字体样式对于易读性以及快速浏览而言是相当重要的, 通常的原则是, 被修饰的文本不应当超出整个文本的百分之十, 要是所有文本都借由修饰而被予以强调的话, 那么反倒就并非是强调了。当然了, 一次不应该同时使得超过三种的强调样式。也就是说, 不要在同一段文本当中同时运用, 颜色, 字体发生改变, 大小, 下划线, 斜体, 粗体。

寻找合适的字体

在众多商用字体里, 多数价格高昂, 然而, 存在不少出色的免费字体。你只需于其中选出你最为心仪喜欢的字体, 将其运用到你的设计当中即可。接下来, 便介绍几个极其出色优秀的有关字体的专门网站。

Google Fonts (需梯子)

在Google Fonts里, 你能够免费去下载你所心仪的字体, 还能依据你的需求在项目当中加以使用。鉴于在iOS之中使用别的字体的仅有途径是把字体文件导入至系统里, 所以Google Fonts的下载功能颇为有用。Google Fonts涵盖了超过1400种不一样的字体, 当中包括了最为著名的: Open Sans以及Roboto字体, 它们属于Android系统正在使用的默认字体。

mac上的SkyFonts呀, 你能够借助它, 把字体自动同步到你的桌面那儿去。

要是你在自己的网站里打算直接运用Google Web Fonts, 那你能够挑选360的代理商去访问Google的免费的字体库。下面是使用的说明内容, 十分简单。

Typekit存有超多优秀字体, 这对刚起步的人来讲, 极为有用, 其中有我超爱的Proxima Nova和Museo字体, 它还纳入了思源黑体等中文字体。

有字库, 对于那些在使用中文字体方面有着大量需求的用户而言, 是一个不错的选择, 它是国内当前较为优秀的Web Font服务平台, 包含着大量出色的中文字体。

其他资源

值得深入探索有关字体和排版的艺术, 每个字体的形成过程具有深远历史可追溯, 当你设计的作品被称艺术品, 那便是对你最大的肯定。

文字排版指南

这是一份英文文字排版指南, 然而其中所提及的内容, 以及大部分的意见, 对于中文字体的选择而言, 同样是具备意义的, 对于中文字体的排版来说, 同样呈现出意义。它是极为值得去阅读的。

字的构成方式基础, 是关于字因何从心生发而来的汉字, 其是怎样发展而成的? 我们当下所运用的字体, 通过何种字体演变而来的? 现今的字体, 又是沿袭了前人的哪些字体基础? 经由这篇文章, 能够对汉字的这些基础内容有所认识知晓。

哪种字体, 它是最适合快速阅读的呢, 这篇文章对中英文字体的搭配建议进行了超详细的介绍, 其具备着相当大的参考价值。

Type is Beautiful

这是个相当知名的、跟字体相关的博客网站, 其给出了诸多字体研究方面的文章, 适合从刚开始学习的人一直到经验丰富的设计师去阅读。与此同时, 它还设有一个播客, 这个播客的名字叫做“字谈字畅”。

继续浏览有关 UI设计字体排版 的文章