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

必备准备工作

Use the frontend-design skill — 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 teach-impeccable first.

使用frontend-design技能——其中包含设计原则、反模式以及上下文收集协议。在开始操作前请遵循该协议——如果尚无设计上下文，你必须先运行teach-impeccable。

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 fluid sizing used, or do sizes jump at breakpoints?
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及以上）
- 是否使用了流式尺寸，还是在断点处尺寸突变？
可读性:
- 行宽是否舒适？（理想范围为45-75个字符）
- 行高是否适配字体及使用场景？
- 文本与背景的对比度是否足够？
一致性:
- 相同元素在整个页面中的样式是否统一？
- 字重的使用是否一致？（同一角色的元素不应在某部分用粗体，另一部分用半粗体）
- 字间距是有目的性的设置，还是全程使用默认值？

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

Plan Typography Improvements

制定排版改进方案

Consult the typography reference from the frontend-design 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

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

制定系统化的改进方案：

字体选择：是否需要更换字体？哪些字体契合品牌/场景？
字体比例：建立模块化比例（如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)

若需要更换字体：

选择契合品牌调性的字体
搭配时体现真实对比（衬线+无衬线、几何风+人文风）——或使用同一字体家族的不同字重
确保Web字体加载不会导致布局偏移（使用
```
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
Use fluid sizing:
```
clamp(min, preferred, max)
```
for smooth scaling

构建明确的字体比例体系：

5种尺寸可覆盖大多数需求：说明文字、次要文本、正文、子标题、标题
各层级使用统一比例（1.25、1.333或1.5倍）
结合多种维度：通过尺寸+字重+颜色+间距强化层级——不要仅依赖尺寸
使用流式尺寸：通过
```
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.

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

请记住：排版是界面设计的基础——它承载了绝大多数信息。做好排版是你能实现的最高价值的优化改进。