SuperAPI AI 工具集

readable-measure

设计与创作

查看项目

更新于 10-16 07:46

技能介绍

Readable Measure 是一个排版设计技能,主题是“行长(measure)”——即一行文本的长度——以及它对阅读舒适度和理解力的影响。它帮助设计者和开发者确保文本列在不同设备和字号体系下都适合舒适、不中断的阅读。

核心原则

行长指一行文本的长度。最佳区间是每行 45–75 个字符(含空格),其中 66 个字符常被视为理想值。

  • 低于 45 个字符:过短,视线需要频繁换行,破坏阅读节奏。
  • 高于 75 个字符:过长,视线在返回下一行开头时容易丢失位置。
  • 45–75 是正文的目标区间;更窄的区间(50–60)适合文章、文档等需要持续阅读的内容。

实践中的测量方法

  • 使用 CSS 的 ch 单位(字符 0 的字形宽度)作为粗略近似:max-width: 65ch。
  • 通过统计代表性段落中的实际字符数来验证——ch 只是近似值。
  • 根据字体调整:宽字形字体(如 Georgia)需要更窄的列;窄体/压缩字体可以稍宽。
  • 展示型文字和短 UI 字符串不受此限制——该原则适用于正文和阅读场景。

响应式行为

  • 移动端单列:在 16px 及以上时通常全宽即可(小屏幕上很少超过 70 个字符)。
  • 平板和桌面:应显式约束列宽,不要让文本拉伸到容器边缘。
  • 多列布局:每一列都应独立满足 45–75 规则。

按场景的目标值

场景 目标
长篇文章、文档 55–70 个字符
UI 正文、描述 45–65 个字符
图注、辅助文字 40–60 个字符
引文、提示框 30–45 个字符

最佳实践

  • 对文本容器设置 max-width,而不仅仅是调整字号。
  • 随着列宽增加,适当增大行高(更宽的行长需要更多行距)。
  • 用真实内容测试——占位用的 lorem 文本会掩盖行长问题。
  • 每当字体或字号变化时,重新检查行长。

适用范围与限制

该技能仅覆盖行长(measure)这一维度,不涉及完整的字号与排版体系。资料中未提供关于收费、价格、平台支持或具体安装步骤的信息。