typeset

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type.

评估并改进通用化、不一致或结构混乱的排版——将默认样式的文本转变为具有目的性、精心设计的文字效果。

MANDATORY PREPARATION

【必备准备步骤】

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.

调用 /impeccable 指令——其中包含设计原则、反模式以及上下文收集协议。在进行后续操作前必须遵循该协议——如果尚未建立设计上下文，必须先执行 /impeccable teach 指令。

Assess Current Typography

【评估当前排版】

Analyze what's weak or generic about the current type:

Font choices:
- Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults)
- Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface)
- Are there too many font families? (More than 2-3 is almost always a mess)
Hierarchy:
- Can you tell headings from body from captions at a glance?
- Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy)
- Are weight contrasts strong enough? (Medium vs Regular is barely visible)
Sizing & scale:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- Is the sizing strategy appropriate for the context? (Fixed
```
rem
```
  scales for app UIs; fluid
```
clamp()
```
  for marketing/content page headings)
Readability:
- Are line lengths comfortable? (45-75 characters ideal)
- Is line-height appropriate for the font and context?
- Is there enough contrast between text and background?
Consistency:
- Are the same elements styled the same way throughout?
- Are font weights used consistently? (Not bold in one section, semibold in another for the same role)
- Is letter-spacing intentional or default everywhere?

CRITICAL: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting.

分析当前排版中存在的薄弱或通用化问题：

字体选择:
- 是否使用了无辨识度的默认字体？（如 Inter、Roboto、Arial、Open Sans 或系统默认字体）
- 字体是否符合品牌调性？（活泼的品牌不应使用商务风格字体）
- 是否使用了过多字体族？（超过2-3种几乎都会造成混乱）
层级结构:
- 能否一眼区分标题、正文和说明文字？
- 字号是否过于接近？（14px、15px、16px = 模糊的层级）
- 字重对比是否足够强烈？（Medium 与 Regular 几乎难以区分）
字号与比例:
- 是否有统一的文字比例规范，还是字号随意设置？
- 正文是否达到最低可读性要求？（16px及以上）
- 字号策略是否符合使用场景？（应用UI使用固定
```
rem
```
  比例；营销/内容页面标题使用流式
```
clamp()
```
  ）
可读性:
- 行宽是否舒适？（理想范围为45-75字符）
- 行高是否适配字体和使用场景？
- 文本与背景之间的对比度是否足够？
一致性:
- 相同元素在整个界面中的样式是否统一？
- 字重使用是否一致？（同一角色的元素不应在某部分用粗体，另一部分用半粗体）
- 字间距是有目的性设置还是全为默认值？

关键提示：目标不是让文本“更花哨”——而是让它更清晰、更易读、更具目的性。优秀的排版是“隐形”的；糟糕的排版则会分散注意力。

Plan Typography Improvements

【规划排版优化方案】

Consult the typography reference from the impeccable skill for detailed guidance on scales, pairing, and loading strategies.

Create a systematic plan:

Font selection: Do fonts need replacing? What fits the brand/context?
Type scale: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy
Weight strategy: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits)
Spacing: Line-heights, letter-spacing, and margins between typographic elements

参考 impeccable 技能中的排版参考文档，获取关于比例、字体搭配和加载策略的详细指导。

制定系统化方案：

字体选择：是否需要更换字体？哪些字体符合品牌/场景需求？
文字比例：建立模块化比例（如1.25倍），明确层级结构
字重策略：不同字重对应哪些角色？（如正文用Regular、标签用Semibold、标题用Bold——或其他符合需求的配置）
间距设置：行高、字间距以及排版元素之间的边距

Improve Typography Systematically

【系统化优化排版】

Font Selection

字体选择

If fonts need replacing:

Choose fonts that reflect the brand personality
Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights
Ensure web font loading doesn't cause layout shift (
```
font-display: swap
```
, metric-matched fallbacks)

若需要更换字体：

选择符合品牌调性的字体
搭配具有明显反差的字体（衬线+无衬线、几何风格+人文风格）——或使用同一字体族的不同字重
确保网页字体加载不会导致布局偏移（使用
```
font-display: swap
```
、匹配度量的备选字体）

Establish Hierarchy

建立层级结构

Build a clear type scale:

5 sizes cover most needs: caption, secondary, body, subheading, heading
Use a consistent ratio between levels (1.25, 1.333, or 1.5)
Combine dimensions: Size + weight + color + space for strong hierarchy — don't rely on size alone
App UIs: Use a fixed
```
rem
```
-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need
Marketing / content pages: Use fluid sizing via
```
clamp(min, preferred, max)
```
for headings and display text. Keep body text fixed

构建清晰的文字比例：

5种尺寸可覆盖大多数需求：说明文字、次要文本、正文、副标题、标题
各层级使用统一比例（1.25、1.333或1.5）
结合多种维度：字号+字重+颜色+间距打造清晰层级——不要仅依赖字号
应用UI：使用基于
```
rem
```
的固定文字比例，可根据1-2个断点进行调整。流式字号会破坏密集型容器布局所需的空间可预测性
营销/内容页面：标题和展示文本使用
```
clamp(min, preferred, max)
```
实现流式字号。正文保持固定字号

Fix Readability

优化可读性

Set
```
max-width
```
on text containers using
```
ch
```
units (
```
max-width: 65ch
```
)
Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7)
Increase line-height slightly for light-on-dark text
Ensure body text is at least 16px / 1rem

使用
```
ch
```
单位设置文本容器的
```
max-width
```
（如
```
max-width: 65ch
```
）
根据场景调整行高：标题行高较紧凑（1.1-1.2），正文行高较宽松（1.5-1.7）
浅色文本配深色背景时，适当增大行高
确保正文字号至少为16px / 1rem

Refine Details

优化细节

Use
```
tabular-nums
```
for data tables and numbers that should align
Apply proper
```
letter-spacing
```
: slightly open for small caps and uppercase, default or tight for large display text
Use semantic token names (
```
--text-body
```
,
```
--text-heading
```
), not value names (
```
--font-16
```
)
Set
```
font-kerning: normal
```
and consider OpenType features where appropriate

数据表格和需要对齐的数字使用
```
tabular-nums
```
设置合适的
```
letter-spacing
```
：小型大写字母和大写字母的字间距略宽，大型展示文本使用默认或紧凑字间距
使用语义化令牌名称（如
```
--text-body
```
、
```
--text-heading
```
），而非数值名称（如
```
--font-16
```
）
设置
```
font-kerning: normal
```
，并酌情使用OpenType特性

Weight Consistency

字重一致性

Define clear roles for each weight and stick to them
Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty)
Load only the weights you actually use (each weight adds to page load)

NEVER:

Use more than 2-3 font families
Pick sizes arbitrarily — commit to a scale
Set body text below 16px
Use decorative/display fonts for body text
Disable browser zoom (
```
user-scalable=no
```
)
Use
```
px
```
for font sizes — use
```
rem
```
to respect user settings
Default to Inter/Roboto/Open Sans when personality matters
Pair fonts that are similar but not identical (two geometric sans-serifs)

为每个字重定义明确的角色并严格遵循
字重使用不超过3-4种（Regular、Medium、Semibold、Bold足够使用）
仅加载实际使用的字重（每个字重都会增加页面加载负担）

绝对禁止：

使用超过2-3种字体族
随意设置字号——必须遵循统一比例
正文字号低于16px
正文使用装饰性/展示性字体
禁用浏览器缩放（
```
user-scalable=no
```
）
使用
```
px
```
设置字号——应使用
```
rem
```
以尊重用户设置
在需要体现品牌调性时默认使用Inter/Roboto/Open Sans
搭配风格相似但不完全一致的字体（如两种几何风格无衬线字体）

Verify Typography Improvements

【验证排版优化效果】

Hierarchy: Can you identify heading vs body vs caption instantly?
Readability: Is body text comfortable to read in long passages?
Consistency: Are same-role elements styled identically throughout?
Personality: Does the typography reflect the brand?
Performance: Are web fonts loading efficiently without layout shift?
Accessibility: Does text meet WCAG contrast ratios? Is it zoomable to 200%?

Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make.

层级结构：能否立即区分标题、正文和说明文字？
可读性：长段落正文是否易读舒适？
一致性：同一角色的元素在整个界面中的样式是否统一？
品牌调性：排版是否符合品牌风格？
性能：网页字体是否高效加载且无布局偏移？
可访问性：文本是否符合WCAG对比度标准？能否放大至200%？

记住：排版是界面设计的基础——它承载了大部分信息。做好排版是能带来最高价值的优化措施。