Web字体排版终极指南：skills之better-typography从字体配对、字号刻度到断行截断全解

Web字体排版终极指南skills之better-typography从字体配对、字号刻度到断行截断全解【免费下载链接】skillsA collection of agent skills that help you build a great interface.项目地址: https://gitcode.com/gh_mirrors/skills50/skillsbetter-typography 是开源项目 skills一套帮你构建优秀界面的 AI 智能体技能集中专门负责Web 字体排版的技能覆盖字体选择与配对、字号刻度Type Scale、行高字距、断行与文本截断等实战主题。无论你是前端新手还是想提升页面观感的开发者读完本文就能掌握一套可直接落地、拿来即用的排版规则。 快速上手如何获得 better-typographyskills 项目把每个技能做成一组结构化的规则文档AI 智能体如 Claude Code、Codex在处理你的界面代码时会照着这些规则检查与修改排版。better-typography 的核心入口文件是 SKILL.md围绕它还配套了 6 个专题文档choosing-fonts.md字体选择、配对规则与文件格式spacing-and-sizing.md字号刻度、行高、字距wrapping-and-punctuation.md行宽、换行与截断variable-fonts-and-opentype.md可变字体与 OpenType 特性details-and-accessibility.md下划线、选中态、表单与移动端细节css-cheat-sheet.md所有排版 CSS 声明与 Tailwind 等价写法速查表获取仓库有两种方式git clone https://gitcode.com/gh_mirrors/skills50/skills或者用官方推荐的一键安装在 Claude Code、Codex 等智能体环境中npx skills add jakubkrehel/skills两种安装方式内容相同详见 README.md。 字体配对为什么少即是多better-typography 的第一原则是克制字体、字号、字重用得过快就会伤害可读性。核心配对规则如下类别特征适用场景衬线体 Serif笔画末端有小衬线引导视线沿行阅读长文阅读、编辑类内容无衬线 Sans-serif字形干净均匀小尺寸下依然清晰大多数界面的默认选择等宽体 Monospace每个字符等宽列天然对齐代码、表格、数据展示体 Display为大号标题设计营销页大标题、Hero 区域手写体 Script模仿手写少见的装饰性时刻三条黄金配对法则最多 3 种字体。字号和字重定义层级滥用它们会迅速拉低可读性。为对比而配对而非为相似。衬线标题 无衬线正文是刻意的展示/阅读分工两款几乎一样的无衬线体则像犯错了。细字重只用于大标题。小于18px的文字保持400及以上字重300以下的细体在正文尺寸下会消失仅限28px的展示性文字使用。另外Web 端字体文件统一用.woff2Brotli 压缩、兼容性最好.ttf/.otf只属于桌面端。完整依据见 choosing-fonts.md。 字号刻度建立你的 Type Scale不要随手写死字号。技能建议定义一组少量尺寸并尽可能少地偏离它——没有体系的硬编码尺寸规模一大就会失控。按角色命名的刻度是最推荐的做法。text-sm只告诉你尺寸而text-body-sm同时说明了用途团队协作时规则才不会失传。技能给出的产品界面起步参考角色字号行高字重Display 展示36px1.1600Title 标题24px1.2600Heading 小节标题18px1.3600Body 正文16px1.5400Caption 说明文字13px1.4400标题层级必须逐级递减把 h1/h2/h3 映射到刻度上从高到低的台阶如2xl → xl → lg任何子标题都不应视觉上压过父标题同角色内的强调用升一档字重400 → 500而不是改字号。行高与字距也有明确分工详见 spacing-and-sizing.md行高标题约1.1正文1.5–1.6优先用无单位数值让行高随字号缩放凡换行超过 3 行的文本行高至少1.4。字距大标题用轻微负值如-0.02em更紧凑小号全大写字母标签用正值如0.05em避免拥挤正文阅读尺寸则两者都不需要。✂️ 断行与截断文字不溢出的四个声明换行行为是这个技能最有手感的部分。四条声明四个职责声明作用text-wrap: balance让多行文字均匀分布用在标题上text-wrap: pretty避免最后一个词孤零零掉到末行用在描述文字上overflow-wrap: break-word长词、长链接、ID 在溢出容器前先断开white-space: nowrap标签、徽章等换行会看起来像坏掉的地方两个易错点长文long-form里不要用 balance/pretty浏览器超过几行也会忽略 balance还要给长文封顶行宽在每行 60–75 个字符用max-w-xl或65ch都行否则眼睛很难找到下一行的开头。截断不等于丢失内容。单行用text-overflow: ellipsis需搭配overflow: hiddenwhite-space: nowrap多行用line-clamp被藏起来的文字如果重要要通过 tooltip 或展开视图让用户拿回完整值。更多断行细节见 wrapping-and-punctuation.md。️ 进阶细节等宽数字、下划线与移动端输入框几个高频翻车点技能里都给出了标准解法会变化的数字用等宽数字。计时器、计数器、价格默认每个数字宽度不同数值更新时布局会抖动加font-variant-numeric: tabular-nums即可稳住。下划线交给字体自己。用text-underline-position: from-font和text-decoration-thickness: from-font从字体度量取值避免下划线切到字母下延部点状下划线是该词有额外信息的通用暗示。iOS 输入框保持 16px。小于 16px 的输入框文字会让 Safari 自动放大整个页面两种修复思路移动端放大字号 / 16px transform 缩放都收录在 details-and-accessibility.md。可变字体优先用标准属性。font-weight: 650优于裸写font-variation-settings: wght 650——标准属性在回退字体下依然生效裸写 axis 标签则静默失效可变字体与 OpenType 特性全解见 variable-fonts-and-opentype.md。字体平滑只写在根节点。macOS 上文字会比预期显得更粗在根布局统一加-webkit-font-smoothing: antialiased绝不要逐组件设置。所有声明与 Tailwind 等价类名的一行速查都在 css-cheat-sheet.md 里按字体 / 间距布局 / 换行溢出 / 装饰交互四组整理改样式时对照着查即可。✅ 收尾清单交付前的排版自查技能在 SKILL.md 末尾附了一张常见错误 → 修复对照表挑几条最高频的作为交付前自查项段落末行孤字 →text-wrap: pretty两行标题左右失衡 →text-wrap: balance细字重用在 14px 的 UI 文字上 → 小于 18px 一律 400下划线切到字母 →text-decoration-skip-ink: auto界面里出现两端对齐 → 改回text-align: startjustify 只留给特定编辑排版最后一条经验值得记住审阅排版时看渲染后的页面而不是扫代码——坏掉的换行、孤字和截断只有在真实内容长度下才会现形。这套技能与项目中 better-colors色彩与对比度、better-layout布局与对齐、better-accessibility无障碍与标题语义边界清晰、互为补充配合 better-interface 的跨领域总评审可以构成完整的一套界面打磨流程。【免费下载链接】skillsA collection of agent skills that help you build a great interface.项目地址: https://gitcode.com/gh_mirrors/skills50/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考