社区新闻

字母形态的解剖学

查看官方原文 ↗ 发布于

这是六部分系列文章的第二部分:让您网站的排版发声。

让您网站的排版发声:系列六篇文章
  1. 字体的视觉声音:基本字体术语,以便我们开始讨论
  2. 本文:字母形态的解剖学。 字母的各个部分如何赋予字体其声音?是什么让一个字体家族适合汽车或时尚、科技或消费品领域?
  3. 一篇好文:四步打造最佳正文排版 从裸HTML到格式优美的段落和副标题的进阶过程
  4. 为网站选择字体,以建立品牌:一个简单的公式(经过40多年持续使用的实战检验!),每次遵循都能获得截然不同的外观,这些外观似乎从网站本身的性质中自然产生。
  5. 超越Google Fonts:在哪里可以找到优秀的字体家族? 有些网站充斥着所谓的免费字体,其中满是学生实验品和知名品牌的仿制品。有些大型网站提供构建我们日常所见字体的铸字厂的全部库。然后是我常去的地方,寻找捆绑包、订阅和优惠。
  6. 让字体发挥作用: 跨浏览器。在区块主题中。 在theme.json中(但主要是在编辑器中)。借助一点PHP和CSS,您就可以使用当今在线销售的全部字体。

在第一部分中,您了解了字体的语言——关于组织字体、家族和字型的基本术语。您还具体了解了间距、倾斜、大小和宽度。

但字母究竟是什么?在代码中,它是字符串的一部分。在机器语言中,它承载着一位的重量。

字母也是一个字符。(但字符也可以是标点符号、空格或符号。有些字体比其他字体有更多的字符。)

最重要的是,字母的形态赋予了字体个性——响亮、柔和、精致、俏皮、优雅、粗犷、诡异等等——也称为其声音。字符与声音的这种结合称为字母形态

字母形态是其各部分的总和。

让我们看看这些部分如何在一个无衬线字体、一个相当标准的衬线字体和一个具有额外特征的衬线字体中组合在一起。

名为 Wright Funk 的几何无衬线字体

无衬线字体的部分也出现在衬线字体中。所以从这里开始是合理的:

  1. 几乎每个字母至少有一个笔画。这个W有四个。
  2. 曲线内部的区域是字怀
  3. 弯曲的部分是
  4. 字母的主要笔画——可以把它看作是承重柱——是主干
  5. 主干上升到中线以上的部分是升部
  6. 字母内部封闭的水平笔画是横杆
  7. S的主要笔画是脊柱
  8. 从主干延伸出来的任何曲线,在任何字母中,都是肩部。这个小写r有一个。小写n也有。小写m有两个。
  9. 小写e的字怀是字眼
  10. 这个小写k、大写K和大写R中向右下方延伸的笔画是

名为 Otama 的过渡衬线字体

衬线字体当然增加了衬线,此外还有:

  1. 大的水平笔画是。这个大写E有三个。
  2. 笔画的锥形末端,如小写e上的,是末梢。小写s上未装饰的终端也是。
  3. 小写r上的这个终端,带有大的圆形末端,是球状终端。小写y上也有一个。
  4. 任何字母从基线向下悬挂的部分,如这里的y和p,是降部
  5. 是任何字母坐落在基线上的部分。
  6. 任何碗没有完全闭合的字怀称为开口。这里是在小写e上(实际上两个都是),但也出现在大写和小写C上,以及碗上有缺口的任何其他地方。

嘿——那些线是什么?

您是否注意到我们的样本位于一对平行线上?底部的是基线。顶部的是中线,其位置因字体而异。

两者之间的距离是x高度,以小写x的高度命名。弯曲的形态,如碗和肩部,会略微超出基线和中线。

名为 Magiona Display 的花饰衬线字体

具有许多装饰特征的字体也有这些特征的名称。以下是这些名称,加上一些纯粹晦涩的名称:

  1. 衬线连接延伸部分与笔画的部分是支架
  2. 顺便说一下,这里是Magiona上的一些衬线。支架从笔画到衬线的逐渐锥形将字体归类为雕刻体
  3. 任何字母部分的装饰性延伸是花饰
  4. 这个小写u和b底部的额外突出部分分别是刺突
  5. i上的点?那是。真的。
  6. 即使这个特定的s和h(绿色,蓝色轮廓)没有接触,字体设计师也将组合绘制为一个单一单元,称为连字
  7. 小写r的这个部分有很多名字!它是从主干延伸出来的曲线,所以是肩部。它是一个末端笔画,所以是终端。它未装饰且锥形,所以也是末梢

就是这样——快速浏览了赋予字体风格的线条和形状。总有更多需要了解。

这些部分如何组合赋予字体个性——其声音?个性的另一个术语是情绪。

这种声音如何延续到非字母的字符——数字、标点、符号、重音符号等?

让我们再看一下那三种字体。

一句话,三种方式

Wright Funk

Otama

Magiona

同一句话不仅看起来不同。感觉也不同。记得在第一部分中,我们谈到字体有声音吗?嗯,这三种字体(typefaces的简称)甚至听起来也不同。

字体图像:Wright Funk。图像包含下面句子的前两个单词。

是一种几何无衬线字体。如果你想在派对上听起来很酷,可以简称它为几何无衬线体。

它全是直线、锐角和近乎完美的圆形。它散发出酷炫、建筑般的简约感。其低x高度以及对大写F和小写k等字母形态的特殊处理赋予其装饰艺术风格的感觉。因此,它同样适用于推广高端生活方式品牌、银行或爵士乐场所。

需要更多分量?Wright拥有一个庞大的家族,包含多种字重和真正的斜体,横跨四种独立的样式,每种样式都是对独特字母形态的微妙不同诠释,因此您也可以在非常传统的环境中使用它。

字体图像,内容为“Otama's”,这是下一句话的第一个词。

的曲线和衬线(以及那些球状终端!)使这种过渡衬线字体更加友好。

而且它可能更容易长文阅读。当前的研究对长期持有的观点——衬线使阅读更容易——提出了质疑。相反,文献(以及WCEU演讲者Giulia Laco,通过WP Tavern)表明,高x高度和开放的开口能提高可读性。

Otama有多种字重,就像许多来自成熟铸字厂的常用字体家族一样。

值得一提的是,在过去的五十年里,大型食品公司使用了大量过渡衬线字体来吸引食客。Otama也适合推广各种消费品和零售品牌。如果你想接触到一家之主,使用过渡衬线字体不会错。

也是一种过渡衬线字体。但看看所有这些花饰!该字体还有许多其他替代形态——字母表中每个小写字母大约有六到八种,许多大写字母有两到四种。

而这种粗体字重让它几乎在大喊大叫,就像一只想玩耍的友好大狗。

想要更轻的字重?您需要购买不同的套餐。就目前(2023年)而言,相对较少的大型字体家族(例如,八个或更多字重)提供大量替代字形和连字。更常见的是,一个连字衬线字体可能以二重奏或三重奏的形式出现,附带一个手写体。

想了解更多关于字体的知识?

这两页作为所有部分名称的参考非常宝贵:

如果您想了解更多关于字体分类的细节,这里是Google的总结。

如果您想参与WordPress字体库的开发,该库计划在6.4版本发布第一阶段,这里是跟踪问题