排版是几乎每种数字体验中的关键组件。然而,它的复杂性和特定于行业的语言使其成为未对准和混乱的共识源。您不必成为设计数字接口的排版专家,但了解这些术语中的一些是很重要的,以便与团队中的其他人进行有意义的对话。用关于排版的团队成员清楚地沟通可以帮助团队:

  • 增加界面的易读性(和因此可用性),
  • 改善视觉波兰和专业外观,
  • 创造更一致的品牌标识,和
  • 减少昂贵的修订和迭代。

以下是我们根据常用于UX设计中使用的术语列表,或者它们多久与其他术语误解或混淆频率。

字体(也称为字体系列):一系列字母和字符,旨在一起呈现,以形成单词和数字

字体是特定字体所属的组。Arial,Calibri和Helvetica是字体的示例。“字体”一词是指物理字母块的面部,用于将用于打印压力机的打印机用于创建出版物。打印机将在每个字体中具有广泛的字母块,以及从中挑选的字体内的字体子集。

Typecases中的字体 - 印刷机
印刷机容纳了许多字体字母块的抽屉,从中打印机可以选择特定字体(抽屉)。(照片:Stefan Schweihofer,Pixabay)
在抽屉中的字母块 - 印刷机中的字体
每个字体(抽屉)都有一系列对应于特定大小和形状的字符的字母块。打印机将这些打印到打印出版物的纸张上的文本线上。(照片:Stefan Schweihofer,Pixabay)

某些字体必须从铸造型购买,而其他字体必须在公共领域中使用。在确定设计的字体上时,重要的是要考虑它是否是网络安全的。如果字体不是网上安全的,则文本可能不会根据需要加载,这通常会导致设计人员使用所需的字体创建图像(如果没有进行优势),以便正确显示字体。这种解决方案可以接受徽标的内容,但否则,屏幕读取器无法读取图像上的文本,由搜索引擎索引,或用于Ctrl + F功能,进一步阻碍可访问性,SEO和可用性。网络安全字体另一方面,使这些事情成为可能。

字体:一个字体内的特定拼写,风格化字母,如:

  • garamond常规,大胆,12px
  • Arial,Italic,6px

字体不应与字体或字体系列混淆(见下文)。虽然这些术语通常互换地使用,但从技术上讲,这些术语不一样。字体描述了设计人员可以使用的特定大小,样式和重量。字体是特定字体所属的组。

字体名称解构
What’s in a (font) name? If we deconstruct the font富兰克林哥特式书,大胆,44px我们看到了富兰克林哥特式是字体(或字体家族),is the style (as opposed to常规的),大胆的is the font weight, and44px.是字体大小。

字体装饰(也称为文字装饰):给文本行的点缀,包括过度强调, 和 滴塞文本

字体装饰与字体效果不同(例如阴影),字体样式(例如斜体,大写),字体重量(例如薄,粗体文本)和字体宽度(例如窄,扩展)。

字体效果:可以对文本的字母或线条进行修改,以增加他们的突出

常见的修改包括斜面,内部(边缘线)里面每个字母的边界),轮廓(边界线外部每个字母的边界)和阴影。这些通常应用于单词艺术或具有非常大的显示尺寸(如标题或标题)的文本。

字体样式字体外观的特定变体(例如,字体“纪念新罗马”的“罗马”)

一些例子包括:案例(大写,小写,小帽子)和偏斜(罗马,斜体)。这通常与字体重量,字体宽度和字体大小分开(见下文)。字体样式通常在字体名称中标识。

系列:类似于一只脚的小钩状元素,在某些字体中的线条结束时发现
一种Serif字体is a font in which the letters have serifs on the ends of the lines on each letter.

无衬线字体:没有Seri​​f或信件底部的任何额外元素
一种无衬线字体字体的字母没有Seri​​fs。

在数字时代之前,Serif字体被视为更清晰,更容易读取而不是SANS-Serif的字体,但在现代时,SAN-Serif字体具有可比性,有时更好的易读性,特别是在数字屏幕上。(问题是Serifs没有在低分辨率屏幕上呈现出很好的渲染,但在现代计算机和手机上,我们幸福地落后于我们。)

这两种类型的字体也会对此产生影响网站。SANS Serif字体通常可以承载以下内涵:现代,髋关节,冷,耐受性;虽然Serif字体可能带有以下内涵:传统,温暖,昂贵和古老的形式。也就是说,这可能会有所不同,具体取决于字体。

Serif与Sans Serif Capital“A”
The letter “A” from PT Sans (a sans-serif typeface) and PT Serif (a serif typeface), side by side

字体重量:每个字母中的线的厚度

一些例子包括:薄,超薄,光,常规,中等,半粗体,粗体,额外的大胆,黑色和Ultrablack。

字体宽度:每个字母的宽度,由该字母最外线的最宽点确定(不与字体重量混淆,见上文)或Kerning - 见下文)
例子包括:浓缩,额外的浓缩,窄,延伸,超伸展,扩大。

字体宽度可能在指定字体的不结盟运动e, but not always. For example, Helvetica Neue Thin is more condensed by nature than Helvetica Neue Regular, however, the word “condensed” is not in the name. On the other hand, type foundries may purposefully condense a font for stylistic purposes. For example, Helvetica Neue Condensed Bold has the same font weight as Helvetica Neue Bold, but is explicitly and noticeably condensed.

字体权重Vs.字体宽度比较
虽然字体重量与字母(左)中的厚度或薄度或线相关,但字体宽度涉及每个字母的宽度,无论字母线的厚度如何。

悬挂缩进:当段落中的第一行文本具有左侧的最左边的余量时,它比下列段落中的线条进一步

悬挂缩进通常用于帮助使关键短语或术语突出,有时可以帮助扫描列表。这些定义是悬挂凹痕的例子。

字母间距(也称为追踪):每个角色的最广播点之间的空间,不与Kerning(见下文)混淆,这通常应用于整个单词,行或段落。

Kerning:连续字符之间的负水平空间通常应用于特定的字母组。

有时,它可能被称为字母之间的“呼吸室”。通常存在与每个字体相关的自动或标准间隔,然而,这可能会改变以实现a视觉平衡的外观

kerning与字母间距
Cherning指的是每个字母的行之间的空间,而字母间距是指每个字母最宽点之间的空间。

领导(也称为线高度或者行间距):文本线之间的负垂直空间,测量到基线的基线

基线是每个字母的基础,不包括下行(例如以小写'P'和'Q'看到的那些)。

领先的例子
引导是指从每个文本线之间测量的每个文本线之间的空间(例如在小写p中所见)。

结扎:两个或多个字母触摸形成一个字符;

一个结扎可能是品牌或美学目的的装饰选择或语言学目的的提示。

Gadzook:连接连同的两个字母的装饰或装饰品

FedEx Logo Ligature和Gadzook
在FedEx徽标,字母D.E.形成一个结尾(如徽标中的其他字母)和连接的线D.E.E.到了X都是gadzooks。
装饰和语言韧带
在这个法国句子中(翻译为“哦,我的心!”),是装饰性结扎和œ是一个语言提示的结扎。连接'a'和'h'的线以及连接o和e的线,都将被认为是每个连字的加氮ook。

孤儿:一行后,在其自己的线上出现在一条非常短的文本(通常是单个单词)

孤儿示例
孤儿可以造成不舒服的阅读和视觉不平衡。

为避免孤儿,考虑插入换行符,而不是句子早期的段落中断(见下文),以便在线上没有“独自生活”,以便说话。在最后一行中有两个以上的单词更好,如果可能的话,更舒适,视觉平衡的外观

越线:a point in a block of text which designates the end of one line of text and the beginning of the next line; not to be confused with paragraph break (see below)

在HTML中通常会在HTML中找到换行符
在键盘上的“软”输入/返回。

段落休息:文本块中的一个点,它指定一个段落结束和另一个段落的开始,通常包括两个段落之间的较大垂直空间,而不是段落中的文本行之间的较大空间

段落中断通常用HTML编写为标签

,以指示键盘上的“硬”输入/返回。

排队与段休息
排行部分导致第一和第二行之间的空间较小,而段落中断经常导致两条线之间的空间更大。

结论

排版术语似乎模糊不清,但他们不必是。分享此备忘单(以及我们的其他备忘单视觉设计条款)与您的团队帮助揭开这些条款并实现明确和明智的讨论。更好的沟通导致更好地讨论,迭代,最终整体更好地设计。

资源

FAST公司:字体和字体之间有什么区别?(关联

Canva:您应该知道的印刷术语的精美插图词汇表(关联