选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

Sketch里的文字排版

设计圣经说过:90%的网站靠排版!!然而文字又是排版的灵魂。那么Sketch处理文本的方式又是怎样的,要理解这些问题,就让我们先看看Sketch中文本图层的垂直指标:

单行文本图层的高度由文本大小的字体行高值决定。 此值不对应于文本大小,它在不同字体之间变化很大,有时它几乎与文本大小相同,有时它的大小是双倍的。 在该空间内绘制的字体由基线(红色)决定,基线也由字体指定。

由于字体之间的差异非常大,Sketch中的文本图层在字体之间切换时会发生很大的变化,尤其是在同一段落中混合使用多种字体和大小时。 另一个不希望的效果是,当您在字体之间切换时,画布上的文本经常上下移动。经常出现的问题 – 询问为什么Sketch渲染看似空白的区域(以蓝色突出显示),并且不将边界框修剪到图层中上升和下降的边缘。 这些也由字体的度量决定,但简单来说这个空间是一些字符,特别是那些包含变音符号的人需要的,可以出现在大写字母S(Š 在捷克语和其他斯拉夫语中找到)和小写字母c(用土耳其语和法语最常见的cedilla)的caron是许多示例中的两个。

在Sketch中对文本层的排版方式进行了一些更改,特别是对于具有固定行高的段落。 要了解它的工作原理,以及发生了什么变化,需要看看苹果的文本系统,如何制定的文本行,以及这一切如何适用于Sketch。

字符和字形

布局文本段落的第一步是将文本的字符和字体属性转换为字形,字形是给定字体的一个或多个字符的视觉表示,字符和字形之间的映射不是1:1。 例如,单个字形可以表示多个字符,这些字符称为连字;相同的字符排序不同可能产生不同的连字,因此不同数量的字形遇到的最极端的连字是“Zapfino”的Zapfino字体。 七个字符由单个字形表示:

文本容器和行片段

一行上可以容纳多少字形取决于文本容器的宽度。 在Sketch中,文本容器的大小由文本图层的宽度决定。 要使用字形填充文本容器,我们需要将它拆分成行。 包含适合单一行的所有字形的矩形称为“行片段矩形”,只要在段落中使用单个字体或大小,一切都会像预期的那样:

在正常排版中,线段的高度由该线上的最高字体(准确地说是字体在基线上方上升和下降的和)确定。 混合字体可以产生不同高度的线段,这是开始有趣的地方:

固定线高度

段落还可以指定最小和/或最大线条高度。 这限制了线段长方形的高度。 如果我们使用相同的最小值和最大值,我们得到一个固定的行高。 历史上,这是在Sketch中设置线高度,它适用于同一字体的段落。

具有混合字体的段落在Sketch中通常不正确。 我们设置一个固定的线高度,所以出了什么问题? 答案是找出排版员选择将基线放在线片段矩形内的位置。事实证明,对于每个行片段,Cocoa的排版器找到该行上最高的下降,并将其用作从线段片段矩形底部的基线偏移。 使用混合字体,这给了我们一个固定的行高,但不一致的基线分离。

当设计师说设置线高度为,例如20pt,他们的意思是他们想要20pt之间的基线,而不是20pt高度的线段碎片矩形。 这是有道理的,因为决定文本的视觉垂直节奏的是基线,这比这些抽象矩形更“可见”。 那么我们如何解决这个问题呢?

一致基线

在Sketch中引入了一个新的排版器,它为具有固定行高的段落生成一致的基线偏移量。 为了完成这项工作,我们正在看一个段落中的所有行片段,并选择一个适合它们的基线偏移。即使有不同的字体,段落之间也保持一致的基线偏移,只要它们具有固定的行高。 当没有设置固定的线高度时,我们使用指示的字体,如我们所看到的可以留下不同的结果。 当你将它设置为固定的,你会得到一个美丽可预测的垂直节奏:

它如何与现有文档一起使用? 默认情况下,新文本图层使用一致的基线排版,而在早期版本的Sketch中创建的文本图层可以通过更改行高来采用新的排版行为。

其他改进

对行高的改进也会对具有较低的行高的段落的编辑产生积极的影响,因为基线总是在行片段矩形内。 它还改进了文本图层的边界矩形。最后,当更改文本图层的字体时,Sketch已经使用了一些长度来保留第一个基线的位置,因此当在字体之间进行切换时,文本图层将不再垂直跳动。

最后一个注意

正如你可能已经注意到的,数字排版是一个非常复杂的问题。 我们生活在一个令人兴奋的时代,我们已经意识到几乎不可能使设计在每个设备和平台上完全相同。或我们也不可能创建一个系统来渲染类型完全像iOS、Android、Windows中的Chrome或Mac中的Safari。 所有这些之间的呈现差异是非常复杂和多样的。

TAG

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。