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

准备工作

Users start this workflow with

/typeset

. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.

用户通过

/typeset

开始此工作流。此 skill 激活后，加载 $frontend-design——其中包含设计原则、反模式以及 上下文收集协议。继续之前必须遵循该协议；如果尚不存在设计上下文，则必须先加载 $setup。

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?
- Are italics, underlines, and all-caps being used deliberately rather than as decoration?
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?
- Is capitalization consistent by role? (titles, buttons, labels, toasts, metadata)

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+）
- 尺寸策略是否符合使用场景？（App UI 使用固定的
```
rem
```
  比例；营销页和内容页标题使用流体式
```
clamp()
```
  ）
可读性：
- 行长是否舒适？（理想范围为 45-75 个字符）
- 行高是否适合字体和使用场景？
- 文字与背景是否有足够的对比度？
- 斜体、下划线和全大写是否经过有意识的运用，而不是仅用于装饰？
一致性：
- 相同元素是否始终采用相同样式？
- 字重使用是否一致？（同一角色不应在一个区域使用 Bold、另一个区域使用 Semibold）
- 字间距是有意设置，还是所有地方都使用默认值？
- 大小写规则是否按角色保持一致？（标题、按钮、标签、Toast、元数据）

关键点：目标不是让文字更“花哨”，而是让它更清晰、更易读、更有明确意图。好的排版应让人无感；糟糕的排版则会分散注意力。

Plan Typography Improvements

规划排版改进方案

Consult the typography reference from the frontend-design skill for detailed guidance on scales, pairing, loading strategies, and font-selection heuristics. Consult the text hierarchy and readability for line length, line-height, alignment, baseline, label/value handling, semantic-vs-visual hierarchy, link emphasis, and numeric alignment. Consult the hierarchy checklist when typography problems are really hierarchy problems in disguise.

Treat the shared text hierarchy/readability reference as the common source for reading comfort and text-structure rules, then apply the typography-specific changes here.

Create a systematic plan:

Font selection: Do fonts need replacing? What fits the brand/context?
Type scale: Establish a constrained UI scale; use modular scales as inspiration, then hand-craft the actual steps you need
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
Schema: Are the typography roles documented clearly enough that future screens can stay consistent?

查阅 frontend-design skill 中的排版参考，了解字号比例、字体搭配、加载策略和字体选择启发式规则的详细指南。查阅文本层级与可读性，了解行长、行高、对齐方式、基线、标签与值处理、语义层级与视觉层级的区别、链接强调以及数字对齐。当排版问题实质上是层级问题时，查阅层级检查清单。

将共享的文本层级与可读性参考作为阅读舒适度和文本结构规则的统一依据，然后在此基础上应用排版专项调整。

制定系统化方案：

字体选择：是否需要更换字体？哪种字体适合品牌和使用场景？
字号体系：建立受约束的 UI 字号比例；以模块化比例作为灵感来源，再根据实际需要手工调整具体级数
字重策略：不同角色分别使用哪些字重？（正文使用 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
Prefer families with a healthy range of weights; families with more weights are usually more carefully built
Optimize for legibility in UI text — avoid condensed display faces with short x-heights for body copy
Ensure web font loading doesn't cause layout shift (
```
font-display: swap
```
, metric-matched fallbacks)

如果需要更换字体：

选择能够体现品牌个性的字体
通过真正具有差异的搭配形成对比（衬线 + 无衬线、几何 + 人文），或者使用同一字体的多个字重
优先选择字重范围完整的字体家族；字重越丰富，通常说明字体的设计越严谨
优化 UI 文字的可辨识度——正文应避免使用 x-height 较小的窄体展示字体
确保 Web 字体加载不会引起布局偏移（
```
font-display: swap
```
、度量匹配的备用字体）

Establish Hierarchy

建立层级

Build a clear type scale:

5-7 sizes cover most needs: caption, secondary, body, subheading, heading, display, optional eyebrow
Use ratios to explore, then commit to real values that feel right in the interface
Combine dimensions: Size + weight + color + space for strong hierarchy — don't rely on size alone
Use dramatic enough weight contrast that the hierarchy is obvious; medium vs regular is often too subtle
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-7 种字号可满足大多数需求：说明文字、次级正文、正文、小标题、标题、展示标题，可选眉题
使用比例进行探索，然后确定真正合适的固定值，使其在界面中呈现良好效果
组合多个维度：通过字号 + 字重 + 颜色 + 空间建立强烈层级，不要只依赖字号
使用足够鲜明的字重对比，确保层级一目了然；Medium 与 Regular 之间通常过于微妙
App UI：采用基于
```
rem
```
的固定字号体系，可在 1-2 个断点进行调整。流体式尺寸会破坏密集型容器布局所需的空间可预测性
营销页和内容页：标题和展示文字使用
```
clamp(min, preferred, max)
```
进行流体式缩放，同时保持正文字号固定

Fix Readability

修复可读性

Set
```
max-width
```
on text containers using
```
ch
```
units (
```
max-width: 65ch
```
)
Keep most paragraphs in the 45-75 character range
Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7)
Increase line-height as line length increases; reduce it as font size gets larger
Increase line-height slightly for light-on-dark text
Ensure body text is at least 16px / 1rem

使用
```
ch
```
单位设置文本容器的
```
max-width
```
（
```
max-width: 65ch
```
）
让大多数段落保持在 45-75 个字符的范围内
根据场景调整行高：标题更紧凑（1.1-1.2），正文更宽松（1.5-1.7）
行长增加时提高行高，字号增大时降低行高
深色背景上的浅色文字应略微增加行高
确保正文至少为 16px / 1rem

Refine Details

优化细节

Use
```
tabular-nums
```
for data tables and numbers that should align
Right-align numeric columns when comparison matters
Align mixed-size text by the baseline when it appears on the same line
Apply proper
```
letter-spacing
```
: slightly open for small caps and uppercase, default or slightly tighter for large display text
Tighten headings selectively when the typeface is naturally loose at larger sizes
Use italics sparingly: short emphasis, quotes, and testimonials are fine; long UI copy and controls are not
Underline links and short key emphasis deliberately; do not blanket-underline dense text
Keep capitalization consistent by role, and add tracking when using all-caps labels or metadata
Don’t make every link bright blue by default; match link emphasis to its importance in the reading flow
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
```
：小型大写字母和全大写文字略微增加字间距，大型展示文字使用默认值或略微收紧
仅在字体本身于大字号下显得松散时，有选择地收紧标题字间距
谨慎使用斜体：短句强调、引文和用户评价适合使用，长篇 UI 文案和控件文案则不适合
有意识地为链接和简短重点添加下划线，不要对密集文本统一添加下划线
按角色保持大小写一致，并在使用全大写标签或元数据时增加字间距
不要默认将所有链接设置为明亮的蓝色；应根据链接在阅读流程中的重要性设置强调程度
使用语义化 Token 名称（
```
--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)
Prefer larger jumps between roles over lots of barely different weights
Load only the weights you actually use (each weight adds to page load)

为每种字重定义清晰角色并始终遵循
不要使用超过 3-4 种字重（Regular、Medium、Semibold、Bold 已经足够）
相比大量难以区分的字重，更推荐角色之间采用明显的级差
只加载实际使用的字重（每增加一个字重都会增加页面加载成本）

Scale Integrity

比例完整性

Use
```
rem
```
or
```
px
```
as source values for the scale, then prefer
```
rem
```
in implementation to respect user settings
Avoid
```
em
```
-based type scales in nested UI — descendants quickly drift off-system
If a scale needs lots of fractional sizes to work, the scale is probably too mathematical and not practical enough

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
```
em
```
to define your type scale in nested UI
Use tiny font sizes just to create hierarchy — use weight or color first
Center-align long-form text
Assume a perfect mathematical ratio is better than a hand-crafted scale
Use
```
px
```
for font sizes in implementation — 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)

使用
```
rem
```
或
```
px
```
作为字号体系的源值，然后优先在实现中使用
```
rem
```
，以尊重用户设置
避免在嵌套 UI 中使用基于
```
em
```
的字号体系——子元素的尺寸会迅速偏离整体体系
如果一套字号体系需要大量小数字号才能成立，通常说明它过于数学化，不够实用

绝不执行：

使用超过 2-3 个字体家族
随意选择字号——应确定并遵循统一比例
将正文设置为低于 16px
使用装饰性或展示型字体呈现正文
禁用浏览器缩放（
```
user-scalable=no
```
）
在嵌套 UI 中使用
```
em
```
定义字号体系
仅靠极小字号创建层级——应优先使用字重或颜色
对长篇文本进行居中对齐
假设完美的数学比例一定优于手工调整的字号体系
在实现中使用
```
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%？

请记住：排版是界面设计的基础——承载了界面中的大部分信息。做好排版，是能够带来最高杠杆效应的改进。