i-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、系统默认字体）
- 字体是否匹配品牌调性？（走 playful 风格的品牌不应该使用偏商务的字体）
- 是不是用了过多字体系列？（超过2-3种基本都会导致排版混乱）
层级：
- 你能不能一眼区分标题、正文和说明文字？
- 字号是不是差距太小？（14px、15px、16px 会让层级非常模糊）
- 字重对比度够不够？（Medium 和 Regular 几乎看不出差别）
字号与缩放比例：
- 有没有统一的字号缩放体系，还是字号是随意设置的？
- 正文有没有达到最低可读性要求？（16px以上）
- 字号策略是否适配使用场景？（应用UI用固定
```
rem
```
  比例；营销/内容页面标题用自适应
```
clamp()
```
  ）
可读性：
- 行宽是不是舒适？（45-75个字符是理想值）
- 行高是否适配字体和使用场景？
- 文本和背景的对比度够不够？
一致性：
- 相同元素在全页面的样式是不是统一的？
- 字重使用是不是一致？（不要相同作用的内容在一个板块用bold，另一个板块用semibold）
- 字间距是专门设置的还是全用默认值？

重要提示：目标不是让文本变得「更花哨」，而是让它更清晰、可读性更强、更有设计感。好的排版是润物细无声的，糟糕的排版则会分散注意力。

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
```
、使用尺寸匹配的 fallback 字体）

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%正常显示？

请记住：排版是界面设计的基础，承载了绝大多数的信息。做好排版是你能做的投入产出比最高的优化。