Steam's Notes

主题

排版设计 ​

字体分类 ​

衬线体（Serif） ​

笔画末端有装饰性小横线。传达传统、正式、可信赖的感觉。

代表字体：Times New Roman、Georgia、Playfair Display、宋体

适用场景：长篇阅读、报纸杂志、学术论文、高端品牌

无衬线体（Sans-serif） ​

笔画末端干净利落，没有装饰。传达现代、简洁、友好的感觉。

代表字体：Helvetica、Inter、DM Sans、思源黑体、苹方

适用场景：UI 界面、屏幕阅读、科技产品、现代品牌

等宽字体（Monospace） ​

每个字符占据相同宽度。传达技术、精确的感觉。

代表字体：Consolas、Fira Code、JetBrains Mono、Space Mono

适用场景：代码展示、数据表格、终端界面

字体层级 ​

通过大小、粗细、颜色建立清晰的信息层级：

层级用途参考大小字重
H1页面标题32~48pxBold (700)
H2段落标题24~32pxSemi-bold (600)
H3子标题20~24pxMedium (500)
Body正文16~18pxRegular (400)
Caption辅助文字12~14pxRegular (400)
Overline标签/分类10~12pxMedium (500)

建议 ​

  • 一个页面中字号层级不超过 4~5 种
  • 使用 type scale 系统保持一致性（如 Major Third 1.25 倍递增）
  • 标题用衬线体或粗体无衬线体，正文用无衬线体

行距与间距 ​

行高（Line Height） ​

  • 正文推荐 1.5~1.75 倍行高
  • 标题推荐 1.1~1.3 倍行高
  • 行高过小导致阅读拥挤，过大导致段落松散

字间距（Letter Spacing） ​

  • 正文通常保持默认（0）
  • 大写标题/标签可增加 0.05~0.1em 的字间距
  • 大号标题可轻微减少字间距（-0.01~-0.02em）使视觉更紧凑

段落间距 ​

段落之间的间距通常为 行高的 0.5~1 倍，既有呼吸感又不至于过于分散。

行宽（Measure） ​

每行文字的理想字符数：

场景推荐字符数
桌面端正文45~75 个字符
移动端正文30~40 个字符
宽屏展示不超过 80 字符，居中或分栏

行宽过长导致换行时眼睛容易丢失位置，过短则频繁换行打断阅读节奏。

对齐方式 ​

方式适用场景注意事项
左对齐大多数正文最自然的阅读方式
居中对齐标题、短文案、CTA不适用于长段落
右对齐数字表格、日期仅用于特殊场景
两端对齐印刷排版屏幕上容易产生不均匀的词间距

字体搭配原则 ​

对比原则 ​

搭配的字体之间要有足够的视觉差异，否则会显得不伦不类：

  • 衬线体 + 无衬线体（经典组合）
  • 粗重标题字 + 轻盈正文字

一致性原则 ​

  • 整个项目字体不超过 2~3 种
  • 相同层级使用相同字体
  • 中英文分别选择一种字体

经典搭配参考 ​

标题正文风格
Playfair DisplayDM Sans优雅现代
InterInter极简统一
MontserratOpen Sans友好专业
Space GroteskIBM Plex Sans科技极客

中文排版注意事项 ​

中西文混排 ​

  • 中文与英文/数字之间加半角空格
  • 中文标点使用全角，英文标点使用半角
  • 英文字体声明在中文字体之前（CSS font-family）

字体选择 ​

平台推荐字体
macOS / iOS苹方（PingFang SC）
Windows微软雅黑（Microsoft YaHei）
Android思源黑体（Noto Sans SC）
跨平台 Websystem-ui 或 "PingFang SC", "Microsoft YaHei", sans-serif

避免的问题 ​

  • 不要对中文使用斜体（中文没有原生斜体设计）
  • 中文字体最小不低于 12px
  • 中文行高需要比英文略大（推荐 1.7~1.8）