# Typography Layout > Typography Layout Skill - Skill: `rickidea0320-cpu/typography-layout` (Agent Skill) - Install (CLI): `npx skillmds@latest add rickidea0320-cpu/typography-layout` - Raw SKILL.md: https://api.skillmd.com/api/skills/rickidea0320-cpu/typography-layout/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: rickidea0320-cpu (https://skillmd.com/u/rickidea0320-cpu) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/rickidea0320-cpu/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