重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
typography-expert by erichowens/some_claude_skills
npx skills add https://github.com/erichowens/some_claude_skills --skill typography-expert精通字体搭配、排版层级、OpenType 特性、可变字体和性能优化的网页排版。
✅ 适用于:
❌ 不适用于:
衬线体 vs 无衬线体决策树:
IF 需要正式/传统/权威 → 衬线体 (Garamond, Minion, Crimson)
IF 需要现代/简洁/技术感 → 无衬线体 (Inter, Helvetica, Roboto)
IF 需要人文主义/友好/平易近人 → 人文主义无衬线体 (Gill Sans, Fira Sans, Source Sans)
IF 需要几何/结构化/技术前沿 → 几何无衬线体 (Futura, Avenir, Poppins)
IF 需要编辑/长篇阅读 → 过渡衬线体 (Georgia, Charter, Lora)
搭配规则(专家知识):
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
模块化比例比率:
| 比率 | 名称 | 使用场景 |
|---|---|---|
| 1.067 | 小全音 | 密集 UI,小屏幕 |
| 1.125 | 大全音 | 通用网页内容 |
| 1.200 | 小三度 | 最常见,平衡的层级 |
| 1.250 | 大三度 | 营销,标题 |
| 1.333 | 纯四度 | 醒目陈述,英雄区域 |
| 1.414 | 增四度 | 编辑,戏剧性层级 |
| 1.618 | 黄金比例 | 经典,谨慎使用(对大多数 UI 来说过大) |
流式排版公式(2024 年最佳实践):
/* 基准:320px 视口下 16px,1200px 视口下 20px */
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
/* 标题:320px 视口下 32px,1200px 视口下 64px */
font-size: clamp(2rem, 1rem + 3.6vw, 4rem);
轴控制(专家知识):
| 轴 | 标签 | 范围 | 使用场景 |
|---|---|---|---|
| 字重 | wght | 100-900 | 调整字重而无需加载多个文件 |
| 字宽 | wdth | 75-125 | 响应容器宽度的自适应文本 |
| 倾斜 | slnt | -12-0 | 无需单独斜体文件的倾斜样式 |
| 光学尺寸 | opsz | 8-144 | 根据尺寸自动调整笔画对比度 |
| 等级 | GRAD | -200-150 | 调整字重而不影响重排(深色模式) |
关键:深色模式补偿
/* 深色背景上文字显得更浅 - 使用等级或字重进行补偿 */
@media (prefers-color-scheme: dark) {
body {
/* 如果可变字体支持等级: */
font-variation-settings: "GRAD" 50;
/* 或者稍微增加字重: */
font-weight: 450; /* 替代 400 */
}
}
字体加载优先级:
<link rel="preload" as="font" crossorigin>预算指南:
| 性能层级 | 总字体预算 | 文件数 |
|---|---|---|
| 快速(核心 Web 指标) | 低于 100KB | 2-3 个 WOFF2 |
| 平衡 | 100-200KB | 4-5 个 WOFF2 |
| 丰富排版 | 200-400KB | 6-8 个 WOFF2 |
系统字体栈(零预算):
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji";
表现: 一个页面上有 4+ 种不同的字体系列 错误原因: 造成视觉混乱,破坏层级,严重影响性能 正确做法: 最多 2 个系列(标题 + 正文),使用字重/样式变体
表现: 正文文本和回退系统字体在相同像素值下可见尺寸不同 错误原因: 网页字体加载时导致 CLS(累积布局偏移) 正确做法: 在 @font-face 中使用 size-adjust 来匹配回退字体的 x 高度
@font-face {
font-family: "Inter";
src: url("inter.woff2") format("woff2");
size-adjust: 107%; /* 匹配 Arial 的 x 高度 */
}
表现: 正文使用 400,标题使用 700(300 点跳跃) 错误原因: 造成生硬的层级,尤其是在大尺寸时 正确做法: 使用更接近的字重:400/600 或 350/500 以实现微妙的层级
表现: 全局应用 line-height: 1.5 错误原因: 标题需要更紧凑的行高 (1.1-1.2),正文需要更宽松的 (1.5-1.7) 正确做法: 为每个字体层级设置行高
表现: 硬编码 font-size: 16px 错误原因: 破坏用户偏好,导致无障碍问题,无法响应式缩放 正确做法: 使用 rem 单位配合 clamp() 实现流式尺寸
表现: 加载包含西里尔字母、希腊字母、越南语等字符的 800KB 字体文件 错误原因: 对于纯英文网站,90%+ 的文件未被使用 正确做法: 子集化为 Latin 或 Latin Extended(约 30KB)
值得启用的特性:
/* 表格数据的正确数字 */
font-feature-settings: "tnum" 1; /* 等宽数字 */
/* 正确分数 */
font-feature-settings: "frac" 1; /* 1/2 → ½ */
/* 缩写的小型大写字母 */
font-feature-settings: "smcp" 1, "c2sc" 1;
/* 品牌的样式替代 */
font-feature-settings: "ss01" 1; /* 检查字体可用的集合 */
现代 CSS 替代方案:
font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-caps: small-caps;
专家方法:
:root {
--baseline: 1.5rem; /* 24px */
}
h1 {
font-size: 2.25rem;
line-height: calc(var(--baseline) * 2); /* 48px */
margin-bottom: var(--baseline);
}
p {
line-height: var(--baseline);
margin-bottom: var(--baseline);
}
决策树:
移动端 (< 640px):
- 基准: 16px
- 比例: 1.125 (大全音)
- 更紧凑的层级
平板 (640-1024px):
- 基准: 17px
- 比例: 1.2 (小三度)
- 标准层级
桌面端 (> 1024px):
- 基准: 18-20px
- 比例: 1.25 (大三度)
- 扩展层级
大显示屏 (> 1440px):
- 考虑正文最大宽度 (65-75ch)
- 不要无限缩放
WCAG 2.1 AA 合规性:
与以下技能配合良好:
仅限于 Arial、Georgia、Times New Roman。"现代"意味着使用 Helvetica。
每个人都使用 Open Sans、Roboto、Montserrat。性能次于多样性。
单一文件,多种字重/字宽。Inter 成为新的默认字体。
核心 Web 指标压力。子集化、font-display、防止 CLS 成为强制要求。零加载时间的系统字体栈日益流行。
LLMs 可能建议已弃用的方法:
@import 加载字体(阻塞渲染)理想行长: 45-75 个字符(65ch 是最佳点)
标题尺寸(小三度比例):
安全的 Google Fonts 搭配:
排版在有效时是隐形的,但在失效时却令人难忘。
每周安装数
84
仓库
GitHub 星标数
78
首次出现
Jan 23, 2026
安全审计
安装于
opencode71
gemini-cli70
codex69
github-copilot67
cursor66
claude-code60
Master typographer specializing in font pairing, typographic hierarchy, OpenType features, variable fonts, and performance-optimized web typography.
✅ Use for:
❌ Do NOT use for:
Serif vs Sans-Serif Decision Tree:
IF formal/traditional/authoritative needed → Serif (Garamond, Minion, Crimson)
IF modern/clean/technical needed → Sans-Serif (Inter, Helvetica, Roboto)
IF humanist/friendly/approachable → Humanist Sans (Gill Sans, Fira Sans, Source Sans)
IF geometric/structured/tech-forward → Geometric Sans (Futura, Avenir, Poppins)
IF editorial/long-form reading → Transitional Serif (Georgia, Charter, Lora)
Pairing Rules (Expert Knowledge):
Modular Scale Ratios:
| Ratio | Name | Use Case |
|---|---|---|
| 1.067 | Minor Second | Dense UIs, small screens |
| 1.125 | Major Second | General web content |
| 1.200 | Minor Third | Most common , balanced hierarchy |
| 1.250 | Major Third | Marketing, headlines |
| 1.333 | Perfect Fourth | Bold statements, hero sections |
| 1.414 | Augmented Fourth | Editorial, dramatic hierarchy |
| 1.618 | Golden Ratio | Classical, use sparingly (too large for most UI) |
Fluid Typography Formula (2024 Best Practice):
/* Base: 16px at 320px viewport, 20px at 1200px viewport */
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
/* Heading: 32px at 320px, 64px at 1200px */
font-size: clamp(2rem, 1rem + 3.6vw, 4rem);
Axis Control (Expert Knowledge):
| Axis | Tag | Range | Use Case |
|---|---|---|---|
| Weight | wght | 100-900 | Adjust weight without loading multiple files |
| Width | wdth | 75-125 | Responsive text that adapts to container |
| Slant | slnt | -12-0 | Oblique without separate italic file |
| Optical Size | opsz | 8-144 | Auto-adjust stroke contrast for size |
| Grade | GRAD | -200-150 | Adjust weight without reflowing (dark mode) |
Critical: Dark Mode Compensation
/* Text appears lighter on dark backgrounds - compensate with grade or weight */
@media (prefers-color-scheme: dark) {
body {
/* If variable font supports grade: */
font-variation-settings: "GRAD" 50;
/* Or bump weight slightly: */
font-weight: 450; /* Instead of 400 */
}
}
Font Loading Priority:
<link rel="preload" as="font" crossorigin>Budget Guidelines:
| Performance Tier | Total Font Budget | Files |
|---|---|---|
| Fast (Core Web Vitals) | Under 100KB | 2-3 WOFF2 |
| Balanced | 100-200KB | 4-5 WOFF2 |
| Rich Typography | 200-400KB | 6-8 WOFF2 |
System Font Stack (Zero Budget):
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji";
What it looks like: 4+ different font families on one page Why it's wrong: Creates visual chaos, destroys hierarchy, massive performance hit What to do instead: Maximum 2 families (heading + body), use weight/style variations
What it looks like: Body text and fallback system font have visibly different sizes at same px Why it's wrong: CLS (Cumulative Layout Shift) when web font loads What to do instead: Use size-adjust in @font-face to match fallback x-height
@font-face {
font-family: "Inter";
src: url("inter.woff2") format("woff2");
size-adjust: 107%; /* Matches Arial x-height */
}
What it looks like: Using 400 for body and 700 for headings (300-point jump) Why it's wrong: Creates harsh hierarchy, especially at large sizes What to do instead: Use closer weights: 400/600 or 350/500 for subtle hierarchy
What it looks like: line-height: 1.5 applied globally Why it's wrong: Headings need tighter line-height (1.1-1.2), body needs looser (1.5-1.7) What to do instead: Set line-height per type level
What it looks like: font-size: 16px hardcoded Why it's wrong: Breaks user preferences, accessibility issues, no responsive scaling What to do instead: Use rem units with clamp() for fluid sizing
What it looks like: Loading 800KB font file with Cyrillic, Greek, Vietnamese Why it's wrong: 90%+ of file unused for English-only sites What to do instead: Subset to Latin or Latin Extended (~30KB)
Features Worth Enabling:
/* Proper numerals for tabular data */
font-feature-settings: "tnum" 1; /* Tabular numerals */
/* Proper fractions */
font-feature-settings: "frac" 1; /* 1/2 → ½ */
/* Small caps for abbreviations */
font-feature-settings: "smcp" 1, "c2sc" 1;
/* Stylistic alternates for brand */
font-feature-settings: "ss01" 1; /* Check font for available sets */
Modern CSS Alternative:
font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-caps: small-caps;
Expert Approach:
:root {
--baseline: 1.5rem; /* 24px */
}
h1 {
font-size: 2.25rem;
line-height: calc(var(--baseline) * 2); /* 48px */
margin-bottom: var(--baseline);
}
p {
line-height: var(--baseline);
margin-bottom: var(--baseline);
}
Decision Tree:
Mobile (< 640px):
- Base: 16px
- Scale: 1.125 (Major Second)
- Tighter hierarchy
Tablet (640-1024px):
- Base: 17px
- Scale: 1.2 (Minor Third)
- Standard hierarchy
Desktop (> 1024px):
- Base: 18-20px
- Scale: 1.25 (Major Third)
- Expanded hierarchy
Large Display (> 1440px):
- Consider max-width on prose (65-75ch)
- Don't keep scaling indefinitely
WCAG 2.1 AA Compliance:
Works well with:
Limited to Arial, Georgia, Times New Roman. "Modern" meant using Helvetica.
Everyone used Open Sans, Roboto, Montserrat. Performance secondary to variety.
Single file, multiple weights/widths. Inter became the new default.
Core Web Vitals pressure. Subsetting, font-display, CLS prevention mandatory. System font stacks gaining popularity for zero-load-time.
LLMs may suggest deprecated approaches:
@import for fonts (blocks rendering)Ideal Line Length: 45-75 characters (65ch is sweet spot)
Heading Sizes (Minor Third Scale):
Safe Google Font Pairings:
Typography is invisible when it works, but unforgettable when it doesn't.
Weekly Installs
84
Repository
GitHub Stars
78
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode71
gemini-cli70
codex69
github-copilot67
cursor66
claude-code60
前端打磨(Polish)终极指南:提升产品细节与用户体验的系统化检查清单
54,900 周安装
Lark Drive API 使用指南:飞书云文档、Wiki、表格 Token 处理与文件管理
44,300 周安装
飞书OpenAPI Explorer:探索和调用未封装的飞书原生API接口
44,400 周安装
find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器
949,000 周安装
Playwright 浏览器自动化框架 - 智能网页测试与爬虫工具
57 周安装
Superhuman UI 设计规范:AI 驱动的界面构建指南与设计系统
57 周安装
Scala 3.4+ 开发专家:函数式编程、Akka、Cats Effect、ZIO、Spark 大数据处理
57 周安装