排版是几乎所有数字体验的关键组成部分。然而,它的复杂性和特定于行业的语言使其成为错误和混乱的常见来源。你不必是排版专家来设计数字界面,但是为了与团队中的其他人进行有意义的对话,了解这些术语是很重要的。与团队成员清楚地沟通排版可以帮助团队:

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

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

字体(也称为字体系列):一组字母和字符,被设计用来组成单词和数字

字体是特定字体所属的组。Arial, Calibri和Helvetica都是字体的例子。“字体”一词指的是印刷工人用来在印刷机上打印出版物的物理字母块的表面。打印机会有大量的字母块在每一种字体,和子集的字体从该字体中选择。

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

有些字体必须从铸造厂购买,而其他可在公共领域。在为你的设计选择不同的字体时,重要的是要考虑它是否对网页安全。如果一种字体不是web安全的,文本可能不会按预期加载,这通常会导致设计师使用预期的字体(如果没有让步)来创建一个图像,以使字体正确显示。这种解决方案对于像logo这样的东西是可以接受的,但是除此之外,图像上的文本不能被屏幕阅读器读取,不能被搜索引擎索引,也不能在CTRL+F函数中使用,这进一步阻碍了可访问性、SEO和可用性。网络安全字体另一方面,要让这些事情成为可能。

字体:字体内的一组独特的、程式化的字母,如:

  • Garamond常规,粗体,12px
  • Arial斜体6 px

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

字体名称解构
什么是(字体)的名字?如果我们解构字体富兰克林哥特书,黑体,44px我们可以看到,富兰克林哥特式是字体(或字体家族),是风格(而不是定期),胆大是字体重量,和44px.是字体大小。

字体装饰(也称为文本装饰):对文本行的修饰,包括上划线强调,和 加删除线文本

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

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

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

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

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

衬线:在一些字体的行尾发现的小钩状的元素,它像一只脚
一种Serif字体是一个字体,其中字母在每个字母上的线条的末尾都有serifs。

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

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

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

Serif与Sans Serif Capital“A”
来自Pt Sans(SANS-Serif字体)和PT Serif(Serif字体),并排的字母“a”

字体重量:每个字母的线条粗细

例如:薄型、超薄型、浅色型、普通型、中等型、半厚型、bold型、extra bold型、black型和ultrablack型。

字体宽度:每个字母的宽度,由该字母最外层的最宽点决定(不要和字体的粗细混淆,见上),或者字距——见下)
例子包括:浓缩,额外的浓缩,窄,延伸,超伸展,扩大。

字体宽度可以在字体的名称中指定,但并非总是如此。例如,Helvetica Neue Shent的性质比Helvetica Neue常规更加浓缩,但是,“凝聚”这个词不是名称。另一方面,型铸造型可能有目的地凝结为风格目的的字体。例如,Helvetica Neue Constened Bold具有与Helvetica Neue Bold的相同的字体重量,但明确且明显凝聚。

字体重量和字体宽度的比较
字体的重量与字母的粗细或线条(左)有关,而字体的宽度与每个字母的宽度有关,而与字母线条的粗细无关。

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

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

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

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

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

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

领先的(也称为行高要么行间距):文本线之间的负垂直空间,测量到基线的基线

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

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

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

系带可能是商标或美学目的的装饰选择,也可能是语言学目的的暗示。

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

联邦快递的标志连接和Gadzook
在联邦快递的标志上,字母D.E.形成结扎(像其他字母在标志)和线连接D.E.E.X都是诅咒。
装饰和语言韧带
在这个法国句子中(翻译为“哦,我的心!”),是装饰性结扎和œ是一个语言提示的结扎。连接'a'和'h'的线以及连接o和e的线,都将被认为是每个连字的加氮ook。

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

孤儿的例子
孤儿会导致不舒服的阅读和视觉失衡。

为了避免孤僻,可以考虑在句子的前面插入一个断行符,而不是一个段落断行符(见下文),这样的话,这个词就不会在一行上“单独存在”了。如果可能的话,最好在最后一行写上两个以上的单词,这样会更舒服,视觉平衡的外观

换行符:一块文本块中的一个点,它指定一行文本的结尾和下一行的开头;不要与段落休息(见下文)

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

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

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

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

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

结论

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

资源

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

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