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"更宽,是大多数字体的默认方式。
新怪诞体
Classification20世纪50年代发展而来的精致无衬线风格,笔画均匀、风格中性,是现代界面设计的主流字体风格。
几何无衬线
Classification以几何形状——圆形、矩形、三角形——为构建基础的无衬线字体,风格简洁现代,但小字号时可能显得生硬。
人文无衬线
Classification受文艺复兴时期手写风格启发、具有有机笔画变化的无衬线字体,比几何无衬线更温润易读。
Spacing & Metrics
字距调整
Spacing & Metrics针对特定字母对之间的间距进行调整,以实现视觉上均匀一致的字符间距。
字符间距
Spacing & Metrics对整段文字中所有字符间距进行统一调整,区别于针对特定字母对的字距调整。
行距
Spacing & Metrics文字行与行之间的垂直距离,从基线到基线测量,得名于铅字排版中用于分隔行距的铅条。
全角(em)
Spacing & Metrics等于当前字体大小的排版单位,在 CSS 中 1em 等于父元素的字体大小,是相对尺寸的计算基础。
word-spacing
Spacing & Metrics控制单词之间距离的 CSS 属性,默认值由字体空格字符的宽度决定。
留白
Spacing & Metrics设计中有意留下的空白区域,为文字和元素提供呼吸空间,对可读性和视觉层次至关重要。
行宽
Spacing & Metrics一行文字的长度,最佳可读性通常为45至75个字符,过长或过短都会降低阅读舒适度。
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
字体搭配
Design在设计中选择两种或多种相互协调字体组合使用的实践,通常将标题字体与正文字体搭配。
字体比例
Design基于特定比率(如1.25、1.333、1.5)构建的字号递进序列,用于建立视觉层次感和一致性。
排版层级
Design通过大小、字重、颜色和间距的视觉组织,引导读者按重要性顺序阅读内容。
光学字号
Design根据预期显示尺寸调整字母细节,小字号需要更大间距和更粗笔画,大字号可以更加精细。
响应式排版
Design能够适应不同屏幕尺寸的排版方案,使用媒体查询、视口单位或 CSS clamp() 实现流体缩放。
垂直节奏
Design将文字基线和元素间距对齐到基线网格的一致间距规律,在页面上创造视觉和谐感。
模块化比例
Design基于特定比率(如1.25小三度、1.333纯四度、1.618黄金比例)生成的协调数值序列,用于设定字号层级。
排版色彩
Design页面上文字块整体的视觉密度或纹理感,受字重、字号、行高和字间距共同影响。
流体排版
Design使用 CSS clamp() 在最小值和最大值之间平滑缩放的排版方式,无需断点跳变。
Web Typography
line-height
Web Typography控制文字行间距的 CSS 属性,正文排版通常设置为1.5或150%以保证可读性。
letter-spacing
Web Typography调整所有字符之间间距的 CSS 属性,正值使字符间距增大,负值使字符间距缩小。
@font-face
Web Typography允许网页设计师为网页指定自定义字体的 CSS at 规则,是网络排版的基础。
字体栈
Web TypographyCSS 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
易认性
Readability单个字符相互区分的难易程度,是字体设计本身的内在特质。
可读性
Readability长文阅读的舒适程度,受字体选择、字号、行高、行宽和色彩对比度等因素共同影响。
无障碍排版
Readability确保内容对所有人可用的排版实践,包括足够的对比度、可缩放文字、清晰的层级和合适的字体选择。
WCAG 排版标准
Readability应用于文字的网络内容无障碍指南,规定最低对比度(AA 4.5:1,AAA 7:1)、可缩放文字及禁止文字图片化等要求。
阅读障碍友好字体
Readability为提升阅读障碍读者可读性而设计的字体,具有清晰明确的字形、宽松的间距和底部加重以固定字母的特点。
对比度比值
Readability前景文字颜色与背景颜色之间的亮度比值,WCAG 要求普通文字达到 AA 级 4.5:1,增强级 AAA 级 7:1。
History
古登堡
History约翰内斯·古登堡于1440年前后发明活字印刷术,实现了书籍的批量生产,使书面知识的获取大众化。
Helvetica
History由马克斯·米丁格于1957年设计的标志性新怪诞体,定义了现代平面设计风格,至今仍是全球最广为人知的字体。
Futura
History由保罗·雷纳于1927年设计的几何无衬线字体,体现了包豪斯现代主义精神,其影响延续至 Poppins、Montserrat 和 Raleway 等现代字体。
Garamond
History由克劳德·加拉蒙约1530年设计的经典旧式衬线字体,是至今仍在广泛使用的最古老字体设计之一,已近五百年历史。
包豪斯排版
History包豪斯学校(1919–1933)以几何形式、无衬线字体偏好和"形式服从功能"原则彻底革新了排版设计。
瑞士风格
History国际主义平面设计风格(20世纪50年代起)强调网格布局、不对称构图和无衬线字体,Helvetica 是其最典型代表。