字体排印是Web设计中的无声英雄。网页内容的95%由文字组成;因此,字体选择和排版布局是决定用户体验最重要的因素之一。正确的字体排印能提升可读性、强化品牌形象并建立情感连接。
字体分类
| 字体类型 | 特征 | 用途 | 示例 |
|---|---|---|---|
| 衬线体 | 有衬线、经典、权威 | 长文本、编辑内容 | Georgia, Merriweather, Lora |
| 无衬线体 | 无衬线、现代、简洁 | 数字界面、正文 | Inter, Roboto, Open Sans |
| 等宽体 | 等宽、技术感 | 代码、数据、表格 | JetBrains Mono, Fira Code |
| 展示体 | 装饰性、引人注目 | 标题、Logo、主视觉 | Playfair Display, Poppins |
字体排印比例(Type Scale)
一致的字体排印比例提供视觉层次和和谐感。模块化比例通过将基础尺寸乘以特定比率来创建:
- 基础尺寸:16px(1rem)——正文
- 比率:大三度(1.25)或纯四度(1.333)
- H1:2.488rem(39.8px)
- H2:2.074rem(33.2px)
- H3:1.728rem(27.6px)
- H4:1.44rem(23px)
- 正文:1rem(16px)
- 小字:0.833rem(13.3px)
可读性原则
行宽
理想的行宽在45-75个字符之间。过短的行会打断阅读节奏,过长的行则增加视线追踪的难度。
行高(Line Height)
正文的理想行高为1.5-1.75。标题1.1-1.3即可。
字体搭配(Font Pairing)
组合使用两种字体时,注意对比与和谐的平衡:
- 衬线 + 无衬线:经典组合(标题用衬线,正文用无衬线)
- 同一字体家族:使用字体家族的不同字重(安全选择)
- 字符相似性:x-height和比例匹配的字体
font-display: swap先显示系统字体,Web字体加载后再切换。可变字体用单一文件提供多种字重,减少HTTP请求。TAGUM项目特别重视字体优化。
Web内容为文字的比例
来源:Oliver Reichenstein, iA
中文字体排印注意事项
中文排版有其独特要求:方块字结构需要更大的行高(推荐1.8-2.0),段落间距也应相应增大。常用中文Web字体包括思源黑体(Noto Sans SC)、思源宋体(Noto Serif SC)和苹方体。
总结
字体排印是设计中最精妙也最具影响力的工具。通过正确的字体选择、适当的比例和精心的层次结构,您可以将文字转化为视觉体验。TAGUM团队确保数字产品中的字体排印达到卓越水准。








