Typography 英文排版

Typography 英文排版_第1张图片

Leo 设计周刊将有更多的嘉宾和文章作者加入,品牌上设计了新的 Logo,识别性更强,旨在每周提供给大家优质设计文章,有任何疑问或感兴趣的设计话题可以在微信订阅号或知识星球给我们留言,阅读后分享订阅号文章是对我们的支持。

Typography 英文排版_第2张图片

相对于中文字体,英文字体的选择很多,主要的 Serifs 和 Sans Serifs 以及 Scripts 和 Decorative,还有专门强调屏幕显示的 Display 或手写 Handwritten 等

Typography 英文排版_第3张图片

Serifs 衬线体可以看到笔画开始或结束有额外的装饰,类似的还有 Slab Serifs,而 Sans Serifs 就是非衬线字体,笔画干练,看起来更加的现代,大体上目前的移动系统都使用了自己设计的字体,比如苹果的 San Francisco 或者谷歌的 Roboto 都是我们设计师首选的英文字体,但是随着设计多样性或产品需要,也会使用更多的字体,比如之前我谈到过的 Apple Books 在 iOS 12 采用了新的衬线字体,很符合阅读的氛围,有一种古典的感觉,但是细节上很精致,看起来不过时。

Typography 英文排版_第4张图片

目前的字体选择不论是 Web 还是 Mobile 12 都是过小的,建议在 14 - 25 这个区间区选择内容文字的大小,行高 1.2 倍,对于比较长的文字,为了更加适合阅读可以是 1.45 倍,Medium 的文章就是这个行高。由于 Web 的自适应,尽量保证一行在 45 - 90 个字符,内容多的情况下如果每一行特别长而不折行,阅读起来会很费劲,另外有人问我 SF 字体 Text 和 Display 在使用上的选择,如上图如果你选的字体为 19pt 及以下选择 Text,之上就用 Display。

Typography 英文排版_第5张图片

回到工作中使用,每一套字体都提供了不同的粗细变化,一般比较常用 Regular 和 Bold,我看了下 Sketch 的相关字体排版插件,可以设置各种常见比例的 Perfecter 和 Golden Ratio Line Height 以及 SFUI Font Fixer 自动调整设计稿中旧金山字体的行高和字符间距,这 3 个插件差不多 2 年没有更新了,看来大多数设计师并不喜欢依赖插件解决这个问题。AutoFixiOSTextLineHeight 是自动修复 Sketch 设计稿行高,让字体间距在程序开发中完美还原,最近国人开发,适合苹方,大家可以试试。

Typography 英文排版_第6张图片

学习更多新内容在知识星球「Leo 设计周刊」https://t.zsxq.com/RNrjqfu  或微信公众号关注「Sketch设计」,每周都有最新干货分享

你可能感兴趣的:(Typography 英文排版)