Typography Layout

Typography Layout Skill

Skill Name

typography-layout

Purpose

用于 typography 和 layout 的专业判断，重点处理阅读路径、字重逻辑、信息节奏、密度控制和栅格秩序。

When to Use

• 文本层级是输出质量关键时。
• 需要设计或审查标题、正文、caption、metadata 的排版关系。
• 需要处理中文 / 英文 / 多语言混排。
• 需要建立版式规则、grid、type scale 或阅读节奏。

When Not to Use

• 任务是完整品牌系统时，使用 brand-design。
• 任务是海报传播策略时，使用 poster-design，再调用本 Skill 处理排版。
• 任务是社媒封面时，使用 social-media-visual，本 Skill 只处理 type logic。
• 不要把字体趋势判断写成本 Skill 主体。

Inputs

• Text content
• Reading context
• Format and dimensions
• Language mix
• Brand typography if available
• Required hierarchy
• Accessibility requirements
• Print / digital / responsive constraints

Outputs

• Reading path
• Type hierarchy
• Font role logic
• Grid and spacing rules
• Density control
• Multilingual notes
• Accessibility checks
• Evaluation score

Core Judgment

先用 typography canonical 和 editorial 案例经验判断阅读路径，再用 grid、type scale 和多语言经验决定字重层级、信息节奏与密度控制；字体选择必须服从 reading behavior。

Decision Logic

• First decision: 确定读者如何进入内容：headline-first、image-first、label-first、scan-first、long-read。
• Second decision: 定义 type roles：display、heading、subheading、body、caption、metadata、CTA。
• Third decision: 建立 rhythm：type scale、weight contrast、line length、leading、spacing、alignment。
• Evidence calibration: readable typography 和 grid systems 支持“先 reading order 后 font personality”。
• Experience rule: editorial cases 显示漂亮字体若没有 role assignment，会导致 reading path 崩坏。
• Experience rule: 多语言案例显示 English-first type scale 在中文场景中经常失效，必须重新校准行高、字重和间距。
• Prioritize: readability、hierarchy stability、grid order、language compatibility、density control。
• Reduce: 多余字级、装饰性字体、重复强调、过长行宽、无意义居中。
• Suppress: 抢标题的 metadata、过度字距、过细字重、低对比灰字、英文优先导致中文失衡。
• What breaks the output: 读者不知道先读哪里；字重层级混乱；信息密度失控；中文和英文不协调；文字像图案但不可读。

Workflow

1. Diagnose: 判断内容类型、阅读时长、语言和媒介。
2. Map Reading Path: 定义用户第一眼、第二眼、细读路径。
3. Assign Roles: 给每类文字分配角色和权重。
4. Build Scale: 设定字号、字重、行高、字距和段距关系。
5. Grid Layout: 确定栏宽、对齐、边距、信息组。
6. Validate: 对照 typography、grid、editorial canonical references 和 studio references。
7. Control Density: 合并、换行、弱化或删除低价值文本。
8. Test: 检查小尺寸、远距离、移动端、多语言。
9. Output: 给出可执行 type / layout spec。

Output Format

• Handoff Target: 交付给 designer / developer / editor / production designer。
• Asset Type: type spec、layout rules、responsive rules、print / screen handoff。
• Content Diagnosis: 文本类型、语言、阅读场景。
• Reading Path: first read / second read / detail read。
• Type Roles: display、heading、body、caption 等角色。
• Type Scale: 字号、字重、行高、字距建议。
• Layout Grid: 栏、边距、对齐、分组、间距。
• Density Plan: 保留、压缩、删除的文本。
• Multilingual Notes: 中文 / 英文 / 数字 / 标点处理。
• Locked Type Rules: 必须保持不变的字级、字重、行高、对齐和最小字号。
• Adaptation Requirements: mobile、desktop、print、deck、social card 的重排规则。
• Validation Binding: canonical / studio / contemporary references。
• Accessibility Notes: contrast、minimum size、line length。
• Evaluation Score: 按本 Skill 评分。

Quality Bar

排版必须让读者自然知道从哪里开始、如何继续、哪些信息最重要，并在目标媒介中保持可读和有节奏。

Anti-Patterns

• Font shopping: 只讨论字体好不好看，不建立阅读路径；typography evidence 不支持 font-first 判断。
• Weight chaos: 粗体、细体、斜体、大小写混用但没有层级。
• Center-everything layout: 默认居中造成阅读路径不稳定。
• Decorative tracking: 为了“高级”拉大字距，导致可读性下降。
• Multilingual mismatch: 英文漂亮，中文比例、行高、标点和字重全失衡。
• Dense without rhythm: 信息很多但没有 grid、grouping 或段落节奏。
• Display abuse: display font 被用于长文本，造成疲劳和不可读。
• Case-backed evidence: Bringhurst / editorial principles 支持行长、行高和节奏优先于字体个性。
• Case-backed evidence: Pentagram editorial work 显示复杂内容也需要 stable type roles。
• Case-backed evidence: Base Design systems 显示 restrained type 可以建立品牌识别。
• Case-backed evidence: Studio Dumbar typography 显示实验字体必须由系统限制。
• Case-backed evidence: mobile social patterns 显示小尺寸阅读会放大字距和对比错误。

Evaluation Criteria

1-5 分：

• Reading path: 读者是否知道先读哪里。
• Hierarchy stability: 字级和字重是否稳定。
• Rhythm control: 行高、间距、段落和留白是否有节奏。
• Density management: 信息是否密而不挤。
• Grid order: 对齐、栏宽、边距是否有秩序。
• Multilingual quality: 中文 / 英文 / 数字是否协调。
• Source grounding: 字体和排版判断是否被 typography / grid references 支持。
• Real-world performance: 移动端、印刷、演示屏中同一层级是否保持可读。
• Real-world performance: 中文 / 英文混排在实际字号下是否出现节奏断裂。
• Rollout stability: 同一 type system 在多页面、多组件、多媒介中是否保持一致。
• Adaptation fidelity: 响应式、印刷、PPT、社媒卡片中阅读路径是否保留。
• Production survivability: 字体加载失败、fallback、文本扩展后是否仍可读。
• Handoff integrity: 开发、印刷或运营团队是否能按规则复现。
• Accessibility: 小尺寸和对比是否可用。

Production Notes

必须作为 production handoff 记录：字体授权、fallback fonts、font loading、最小字号、line length、line height、responsive behavior、print resolution、deck 投影字号、多语言排版风险、文本扩展规则、CSS / design token 建议和可访问性要求。

Canonical References

• Typography: 支持 reading behavior、type hierarchy、typesetting discipline。
• Grid & Layout: 支持栏宽、边距、对齐、比例。
• Editorial Design: 支持信息节奏和图文阅读路径。

Studio References

• Pentagram: 可验证 typographic and editorial discipline。
• Base Design: 可验证 restrained typographic brand systems。
• Studio Dumbar: 可验证 experimental typography with system control。

Validation Notes

• Production validation conclusion: type system 进入生产后，最先损耗的是 line height、spacing 和 fallback 字体气质。
• Production validation conclusion: multilingual deployment 必须提前定义中文、英文、数字和标点的真实组合。
• Production validation conclusion: responsive typography 不能只缩放，必须重排 reading path。
• Contemporary Validation Sources: BP&O、The Brand Identity、D&AD 可作为 typography and identity system validation。

Evidence Gaps

• 缺长期 deployment proof：同一 type system 在 web、print、deck、social 长期执行后的漂移。
• 缺 multilingual production proof：真实中文 / 英文 / 数字混排内容扩展后的断裂点。
• 缺 fallback proof：授权字体不可用、webfont 加载失败、PPT 替代字体后的损耗。

Production Proof

First production proof focus: screen / print / multilingual / responsive degradation.

本 Skill 的生产验证目标是判断 type system 从设计稿进入 web、print、deck、social card 和多语言内容后，reading path、hierarchy、rhythm 和 accessibility 是否稳定保留。

Real-world Stress Conditions

• Webfont failure: 授权字体或 webfont 加载失败，fallback 改变比例。
• Responsive collapse: mobile breakpoint 下行长、字号和层级失衡。
• Text expansion: 中文、英文、数字长度变化导致换行和密度失控。
• Presentation projection: 投影降低小字和细字重可读性。
• Print rendering: 纸张、墨量和分辨率影响细字和行距。
• CMS input drift: 运营手动输入标题和正文，破坏预设层级。
• Accessibility requirements: 对比、字号、行高需要满足可访问性。

Production Constraints

• Minimum font sizes must be specified per medium.
• Fallback fonts must include adjusted metrics and spacing.
• Type scale must include long-copy and short-copy variants.
• Responsive rules must define line length and reflow behavior.
• Print and screen require different contrast and weight checks.
• Multilingual punctuation and numerals need explicit rules.
• Editable templates must lock critical type styles.

Output Loss Layer

• What degrades first: line height、letter spacing、caption size、fallback type personality。
• What collapses under pressure: reading path、density rhythm、multi-language alignment。
• What survives: explicit type roles、locked scale、strong contrast、clear grouping。
• What becomes noise: too many emphasis styles、manual bolding、random line breaks。
• What loses brand signal: ungoverned fallback fonts、template overrides、PPT substitutions。

Failure Under Execution

• 设计稿排版稳定，但开发 fallback 字体后行高和断行全部变化。
• mobile breakpoint 只缩小字号，导致正文不可读、标题占满屏幕。
• 中文文案增加后所有字级缩小，阅读路径消失。
• PPT 替代字体导致品牌气质和比例崩坏。
• CMS 运营手动加粗、换行，破坏 type system。
• 印刷细字重过轻，实际纸张上灰掉或断线。

Production Recovery Rules

• If fallback changes rhythm, adjust fallback-specific size, line height and tracking.
• If mobile hierarchy collapses, reflow layout before shrinking all type.
• If text expands, use approved long-copy variant and remove low-value metadata.
• If projection weakens type, increase weight and contrast before enlarging all elements.
• If CMS drift appears, lock styles and reduce editable typography options.
• If print thin strokes fail, increase weight or switch to print-safe cut.
• If multilingual alignment breaks, define language-specific type metrics.

Injected Cases

• Case Name: Bringhurst / typographic rhythm principles Type: canonical Why It Matters: 支持行长、行高、节奏和阅读舒适度。 What It Validates: reading behavior first。 What It Corrects: 纠正 font shopping。 What It Adds: rhythm discipline。
• Case Name: Ruder / Swiss typography discipline Type: canonical Why It Matters: 支持 grid、role、clarity。 What It Validates: type as structure。 What It Corrects: 纠正装饰性排版。 What It Adds: structural type。
• Case Name: Tschichold / typographic order principles Type: canonical Why It Matters: 支持版面秩序和阅读效率。 What It Validates: asymmetric order and clarity。 What It Corrects: 纠正默认居中。 What It Adds: ordered contrast。
• Case Name: Pentagram editorial typography Type: studio Why It Matters: 展示复杂内容的层级控制。 What It Validates: stable type roles。 What It Corrects: 纠正层级漂移。 What It Adds: editorial discipline。
• Case Name: Base Design typographic identity Type: studio Why It Matters: 展示字体系统作为品牌资产。 What It Validates: type can carry identity。 What It Corrects: 纠正只靠 logo 的识别。 What It Adds: typographic branding。
• Case Name: Studio Dumbar experimental typography Type: studio Why It Matters: 展示实验字形如何被系统约束。 What It Validates: experiment needs rules。 What It Corrects: 纠正任意扭曲。 What It Adds: controlled experimentation。
• Case Name: BP&O / The Brand Identity typography features Type: contemporary Why It Matters: 提供当代品牌排版 benchmark。 What It Validates: type system needs application proof。 What It Corrects: 纠正展示页式字体选择。 What It Adds: contemporary application。
• Case Name: Mobile card / social typography patterns Type: contemporary Why It Matters: 提醒小屏幕放大排版错误。 What It Validates: minimum size and contrast。 What It Corrects: 纠正 desktop-first 排版。 What It Adds: platform readability。

Extracted Heuristics

• Learn: reading path precedes font choice；Strengthens: core judgment；Apply: all text-heavy work。
• Learn: type roles must be named before type scale；Strengthens: hierarchy；Apply: layouts and systems。
• Learn: density requires rhythm；Strengthens: dense vs crowded；Apply: editorial and social。
• Learn: experimental type needs a fallback readability layer；Strengthens: risk control；Apply: posters and campaigns。
• Learn: multilingual type needs separate calibration；Strengthens: localization；Apply: Chinese / English work。
• Learn: mobile type must be tested at actual size；Strengthens: production readiness；Apply: social and web。
• Learn: restrained type can carry identity；Strengthens: brand fit；Apply: brand systems。
• Learn: line length and leading are content decisions；Strengthens: reading behavior；Apply: long-form and decks。

Case-backed Refinements

• Reinforced: reading path must precede font personality.
• Corrected: English type scale cannot be directly reused for Chinese-heavy layouts.
• Narrowed: experimental typography is valid only with explicit readability boundary.

Inherits

• Canonical System: typography fundamentals、grid、contrast。
• Trend Overlay: 只用于 type personality，不覆盖 readability。
• Taste System: proportion、precision、dense vs crowded。
• Anti-Pattern System: unreadable type、generic template layout。
• Critique System: typography-specific findings。
• Evaluation System: scorecard with type criteria。

Version

• Version: V1.0 (production-proven)
• Status: production-proven
• Last updated: 2026-05-02