Typography Glossary

Essential typography terms explained. From letterform anatomy to CSS properties, everything you need to speak the language of type.

Anatomy

基线

Anatomy

字母排列所依托的隐形参考线,下伸部分延伸至基线以下。

x字高

Anatomy

从基线到小写字母(如"x")顶部的高度,是衡量字体视觉大小与可读性的关键指标。

上伸部

Anatomy

小写字母中延伸至x字高以上的笔画部分,如"b"、"d"、"h"、"k"、"l"中的竖笔。

下伸部

Anatomy

字母中延伸至基线以下的笔画部分,如"g"、"j"、"p"、"q"、"y"中的下垂笔画。

大写字高

Anatomy

从基线到"H"或"I"等平顶大写字母顶部的高度。

笔画对比(排版)

Anatomy

字母笔画最粗与最细部分之间的差异,高对比度字体(如 Didot)具有显著的粗细变化。

连字

Anatomy

两个或多个字母合并为单一字形的设计,如"fi"或"fl",常见于衬线字体和编程字体(如 Fira Code)。

字形

Anatomy

字符的单一视觉表现形式,同一字符可拥有多个字形(如正体与斜体的"a")。

字腔

Anatomy

字母内部封闭或半封闭的空间,如"o"、"e"、"p"中的内部空间,半开放的字腔(如"c"中)称为开口。

字碗

Anatomy

构成字母封闭字腔的曲线笔画,见于"b"、"d"、"p"、"q"等字母,不同字体的字碗形态差异显著。

主干

Anatomy

字母的主要垂直笔画,如"l"、"b"、"d"中的竖笔,通常是字体设计中最重的笔画。

笔画

Anatomy

构成字母的任意线条,包括垂直、水平、对角线或曲线,笔画对比是字体风格的核心特征。

笔端

Anatomy

笔画末端没有衬线的收笔形式,可呈现为圆球、喙状、泪滴或平切等样式,是字体分类的重要标识。

横画

Anatomy

字母"A"、"H"、"e"、"f"等中的水平笔画,其相对于x字高的位置影响可读性。

花饰笔画

Anatomy

字母上延伸的装饰性笔画,常见于斜体和展示字体,为标题增添优雅气质。

开口

Anatomy

"c"、"e"、"s"等字母中半封闭字腔的开口部分,较宽的开口通常在小字号时可读性更佳。

Classification

衬线

Classification

添加在字母主笔画末端的小装饰笔画,衬线字体(如 Times New Roman)具有这种特征,无衬线字体则没有。

无衬线

Classification

没有衬线的字体,"sans"在法语中意为"没有",风格简洁现代,广泛应用于数字设计。

等宽字体

Classification

每个字符占据相同水平宽度的字体,是代码编辑器和表格数据的必选字体。

字体族

Classification

一套字符的整体设计方案,是字体设计的艺术创作,常与"字体"混淆,后者特指某一特定字重、大小和样式的具体字体。

字体

Classification

字体族在特定字重、大小和样式下的具体实例,例如"Inter Bold 16px"是一种字体,而"Inter"是字体族。

展示字体

Classification

专为大尺寸使用而设计的字体,适用于标题、海报、Logo,不适合小字号正文排版。

手写字体

Classification

基于流畅手写笔迹的字体,从正式书法风格到随意毛笔风格均有涵盖。

粗衬线字体

Classification

具有厚重方块状矩形衬线的字体类别,视觉冲击力强,适用于标题、界面元素和品牌设计。

比例字体

Classification

每个字符根据形状具有不同宽度的字体,"w"比"i"更宽,是大多数字体的默认方式。

新怪诞体

Classification

20世纪50年代发展而来的精致无衬线风格,笔画均匀、风格中性,是现代界面设计的主流字体风格。

几何无衬线

Classification

以几何形状——圆形、矩形、三角形——为构建基础的无衬线字体,风格简洁现代,但小字号时可能显得生硬。

人文无衬线

Classification

受文艺复兴时期手写风格启发、具有有机笔画变化的无衬线字体,比几何无衬线更温润易读。

Spacing & Metrics

Technology

font-family

Technology

在 CSS 中,font-family 属性用于指定一组共享基础设计但在字重、宽度或样式上有所不同的相关字体,并提供后备字体列表。

字重

Technology

字符笔画的粗细程度,通常从100(极细)到900(极黑),常规为400,加粗为700。

网络字体

Technology

专为网站使用而设计或授权的字体,通过 CSS @font-face 或 Google Fonts 等服务加载。

可变字体

Technology

单一字体文件中包含完整字重、字宽或其他变化范围的字体格式,可减少 HTTP 请求次数和文件体积。

OpenType

Technology

由微软和 Adobe 共同开发的字体格式,支持连字、替代字形和可变轴等高级排版功能。

字形微调(Hinting)

Technology

嵌入字体中的指令,通过将轮廓对齐到像素网格来改善低分辨率屏幕上小字号的渲染效果。

抗锯齿

Technology

通过混合边缘像素来平滑渲染文字锯齿边缘的技术,CSS 中可通过 -webkit-font-smoothing: antialiased 设置。

OFL(SIL开源字体许可证)

Technology

最常用的开源字体许可协议,允许免费使用、修改和再发布,所有 Google Fonts 均采用 OFL 或 Apache 2.0 许可。

WOFF2

Technology

网络开放字体格式第2版,采用 Brotli 压缩,是网络上最高效的字体格式,比 WOFF 小约30%,所有现代浏览器均支持。

字体子集化

Technology

从字体文件中删除未使用字符以减小下载体积,例如只加载拉丁字符而非完整 Unicode 字符集。

unicode-range

Technology

@font-face 中的 CSS 描述符,用于指定从字体文件下载哪些 Unicode 字符,使浏览器能够自动进行子集化处理。

font-feature-settings

Technology

用于控制 OpenType 功能的 CSS 属性,包括连字、小型大写字母、表格数字和风格替代字形,简单场景建议使用 font-variant。

字体加载 API

Technology

用于以编程方式控制字体加载的 JavaScript API(document.fonts),可检查字体是否已加载、预加载特定字体并响应加载事件。

font-variation-settings

Technology

直接控制可变字体轴参数的 CSS 属性,包括字重、字宽、倾斜及自定义轴,比 font-weight/font-stretch 更底层。

Design

Web Typography

line-height

Web Typography

控制文字行间距的 CSS 属性,正文排版通常设置为1.5或150%以保证可读性。

letter-spacing

Web Typography

调整所有字符之间间距的 CSS 属性,正值使字符间距增大,负值使字符间距缩小。

@font-face

Web Typography

允许网页设计师为网页指定自定义字体的 CSS at 规则,是网络排版的基础。

字体栈

Web Typography

CSS font-family 中的有序字体列表,在首选字体不可用时提供备选方案,如 'Inter, system-ui, sans-serif'。

系统字体

Web Typography

预装在操作系统中的字体,使用系统字体(system-ui 字体栈)可省去下载时间,但会牺牲品牌一致性。

FOUT(无样式文字闪烁)

Web Typography

网络字体加载前备用字体短暂显示的现象,可通过 font-display: swap 缓解。

FOIT(不可见文字闪烁)

Web Typography

网络字体加载期间文字被隐藏的现象,用户体验比 FOUT 更差,可通过 font-display: swap 解决。

font-display

Web Typography

控制网络字体加载期间显示方式的 CSS 描述符,取值包括 auto、block、swap、fallback、optional。

rem

Web Typography

根元素 em,相对于根元素字体大小的 CSS 单位(通常为16px),比 em 更易预测,适合统一的尺寸设定。

Google Fonts

Web Typography

谷歌的免费开源字体库,拥有1,900余个字体族,是全球最大的自由授权网络字体集合,通过全球 CDN 分发。

字体预加载

Web Typography

使用 link rel="preload" as="font" 优先下载字体,减少 FOUT/FOIT 并改善最大内容绘制(LCP)性能。

CLS(字体相关)

Web Typography

字体加载导致的累积布局偏移——网络字体替换备用字体时因尺寸差异引起文字回流,是核心网页指标(Core Web Vitals)问题之一。

text-rendering

Web Typography

控制文字渲染质量的 CSS 属性,取值包括 auto、optimizeSpeed、optimizeLegibility、geometricPrecision,影响字距调整和连字显示。

Readability

History