正在加载陈远的个人网站

开源排版速查表：5 条规则统一组件库文字层级

Micka 开源组件库排版系统：5 样式、5 禁令、字重配光学尺寸防回流，可经 shadcn 安装或 Agent 技能落地。

提示词排版速查排版设计组件库开源设计工程

原始内容

Micka@micka_design

My Typography cheat sheet is out. https://t.co/tSXGXHq4fp The secret for how all my components and library has been built. Open sourced. https://t.co/4IBqMWuuUz

在 X 上查看原视频

中文译文

机器翻译，保留原文供核对。

我的排版速查表发布了。 https://t.co/tSXGXHq4fp 我的所有组件和组件库是如何构建的秘密。现已开源。https://t.co/4IBqMWuuUz

深度解析

是什么：这是 @micka_design 为开源组件库 Fluid Functionalism 发布的排版速查表。核心主张是用 5 个文字样式（Display/Title/Subtitle/Body/Caption）、3 种字重、2 种文字色、1 个字体（Inter Variable 4.0）覆盖从页面标题到说明文字的全部场景，并立下 5 条禁令：不用大写、不用字距、不用眉题、Markdown 不特殊化、不用透明度做文字层级。技术栈为 React + Tailwind v4，提供 Radix/Base UI 双版本，经 shadcn CLI 按组件安装，MIT 协议。

核心设计：论点链条是「规则越少越难，但一致性越高」——作者坦言每加一个样式都让系统更臃肿，真正难点是把简单规则落到每一个组件表面。细节工艺包括：每个字重配对光学尺寸（opsz），semibold 不推移邻居；tabular-nums 让变化中的数字不抖动布局；text-box: trim-both 使设定内边距即所见；text-wrap: balance/pretty 分别均衡标题行与消除段落孤词；三档弹簧速度（0.08/0.16/0.24s）统一全库动效。

关键洞察：同一套规则被同时交付给人（文档与示例）和 AI（Copy prompt 安装提示词、npx skills add 的 Coding Agent 技能，让 agent 读取技术栈并修复排版问题）。设计系统的分发方式正从「复制代码」演进为「安装技能」，规则本身成为可执行资产。

边界与风险：体系强依赖 Inter 4.0 的光学尺寸特性，更换字体即失效；单字体、5 样式适合工具型与密集信息界面，品牌表达类页面会显得过于克制；text-box 等较新 CSS 特性需关注浏览器兼容性。

精选追评与案例

  1. Micka@micka_design · 查看追评

    原作者补充了排版系统的设计取舍与核心原则，最有追读价值。

    First, typography is hard. Every style you add makes it clunkier, so building this page was mostly cutting and refactoring until only the essential rules remained. Those rules power every component in the library, and each one is simple. Defining them and applying them on every surface is what makes it hard. Good rules hold every kind of component, and every component holds to them.

    中文译文 · 机器翻译

    首先，排版很难。你每增加一种样式，它就会变得更臃肿，所以构建这个页面主要是在不断删减和重构，直到只剩下最必要的规则。 这些规则支撑着库里的每一个组件，而每一条规则都很简单。真正困难的是定义它们，并把它们应用到每一个界面上。 好的规则能约束每一种组件，而每一个组件也都遵守这些规则。

  2. Dylan_ElevateUX@dylandgtl · 查看追评

    点明共享排版尺度对组件库维护的实际价值。

    @micka_design Typography is where most component libraries quietly fall apart, so a shared scale like this saves a lot of one-off fixes. Saving this one.

    中文译文 · 机器翻译

    排版正是大多数组件库悄然崩坏的地方，所以像这样一套共享的排版尺度能省掉大量零散的修补。收藏了。

  3. MasChoose 🎮🎨@kuswanto · 查看追评

    提供了网站交互问题的具体反馈，属于重要纠错信息。

    @micka_design Scrolling with mouse wheel on your site is not working.

    中文译文 · 机器翻译

    在你的网站上用鼠标滚轮滚动不起作用。

  4. SMAmmar@Ammar110_SM · 查看追评

    提出多字体搭配场景下的关键边界问题，值得读者关注。

    @micka_design How would you make it work if there were more than 1 font pairing?

    中文译文 · 机器翻译

    如果有不止一种字体搭配，你会怎么让它正常工作？