个人网站排版：字号、字重与窄屏阅读的实际取舍
产品设计
这个首页原本是 12px 的栏目名配 16px 的介绍，读者先看到介绍，才找到栏目。把正文缩小能改善层级，但“小”并不自动意味着精致。真正要解决的是：短时间扫读时能否辨认结构，认真阅读时会不会因为密度和换行吃力。下面用本站当前布局解释这些取舍，而不是给所有网站开一张字号处方。
先分清页面职责，再决定谁该更醒目
首页是分发入口：关于、商店、文章是一级栏目，栏目里的介绍帮助判断要不要继续看。文章页则承载完整阅读：文章标题、章节、论据和图注有另一套层级。如果照搬同一种字号，首页会变成长文，长文又会变成入口列表。
本站首页目前采用 16px / 600 的栏目标题，14px 的介绍，12px 的日期与辅助信息。文章页主标题是 20px，章节标题 16px，正文 14px、行高 1.9。这里的 14px 是为了在窄栏与当前字体中保持密度；它不应成为以后长篇文章不得放大的限制。
大小差距只有 2px 时，字重、颜色和段落间距也在承担结构。语义仍然用 h1 / h2 区分，不能为了视觉小一点就把章节改成普通 span。搜索与辅助技术读取的是结构，肉眼看到的是样式，两者需要一致。
| 位置 | 当前样式 | 承担的任务 |
|---|---|---|
| 首页栏目标题 | 16px，600 | 扫描时认出栏目 |
| 首页介绍 / 文章正文 | 14px，正文常规字重 | 阅读具体信息 |
| 文章主标题 | 20px，600 | 识别这篇文章 |
| 日期 / 图注 | 12px | 提供时间与来源线索 |
字号之外，先算可用宽度与行高
本站容器 max-w-xl 为 36rem；在默认 16px 根字号下是 576px。左右各 24px 内边距，桌面可用正文宽度为 528px。390px 窄屏时变成 342px；320px 时只有 272px。字号不变，阅读密度却已经变了。
以一个汉字约占 1em 粗估，14px 正文在 342px 宽度能容纳约 24 个汉字，在 272px 宽度约 19 个。真实结果还受标点、字体与词组影响；这个估算只用于预测换行压力，不代替浏览器检查。等宽英文字体的拉丁字宽与汉字也不同，所以中文的“每行字数”不能直接换成英文行长。
文章正文的行高 1.9 对应 26.6px，给中文、数字和链接留出纵向间隔。若觉得长文难读，应该一起比较正文大小、行长与段落长度；单独提高行高可能只是让页面变长，单独缩字则会压缩字形。建议用同一段中英混排分别在 14px 和 16px 下阅读，再决定是否需要更宽的文章容器。
字重写了 600，不代表加载了正确的字形
Maple Mono CN 的 CDN 字体包把 Medium 与 SemiBold 发布为独立字族。如果只指定普通字族再写 font-weight: 600，浏览器不一定能选到那份 SemiBold 文件，可能出现合成字重或回退。这样看似只调了一个数字，实际字形已经不可控。
本站在工具层为 font-semibold 补上 SemiBold 字族，再回退到普通 Maple Mono 与系统等宽字体。下面是实际使用的字族声明，字重本身由工具类设置。调排版时，要在字体加载成功和网络失败两种情况下检查；回退字体更宽时，标题与右侧操作最容易挤在一起。
字体未加载的瞬间也是页面的一部分。标题可以自然换行，按钮保留自己的点击区域，比给整行设置固定高度更稳妥。不要为了维持一张漂亮截图，让较长的英文标题溢出或被截掉。
.font-semibold {
font-family: "Maple Mono CN SemiBold", "Maple Mono CN",
ui-monospace, SFMono-Regular, Menlo, monospace;
}双语界面测试，要用最长的真实内容
中英文标题不应为了同样长而机械直译。中文可以短而密，英文通常需要更多连接词；把英文强行压进一行，会让窄屏损失信息。本站保留文章标题全文，允许换行，并把“更多”作为独立导航入口。
语言按钮只显示目标语言：中文页面显示 EN，英文页面显示中。重复摆一个翻译图标和目标标签，会增加窄栏里的视觉噪声。按钮文字减少以后，仍要保留可读的无障碍名称，说明它会切换到哪种语言。
验证时用完整的英文长标题、中英混排产品名、日期，以及字体回退状态。检查换行后是否仍能辨认标题对应的入口，是否挤压操作按钮。仅用“Hello”或几句短中文来验收，会漏掉真正会出现在页面上的问题。
能看清，还要能放大与用键盘阅读
可访问性不能靠“正文至少 16px”这句口号完成。WCAG 的文字缩放要求关注放大到 200% 后，内容和功能有没有丢失。对本站而言，需要检查长标题、语言按钮、图注与购买入口，不能用禁止页面缩放来掩盖溢出。
窄屏重排也不只是把字体缩小。以 320 CSS px 检查普通正文是否仍能单方向阅读；表格和代码需要时可在自身区域横向滚动，不能把整页撑宽。页面上的图片可另行预览，但预览里的图片缩放与网站文字缩放应分别工作。
一个可复用的验收顺序是：先不看颜色，确认标题与段落边界；再切换语言、字体加载状态、深浅主题；最后用键盘和放大阅读检查内容与操作。漂亮的默认截图证明不了这些状态都可用。
内容变多，限制首页的信息量比继续缩字有效
本站首页保留最新三篇，归档按十篇分页。这些数字是目前的内容组织选择，不是 SEO 优势。首页需要让读者知道“这里有文章”，归档负责找文章，正文负责讲明白问题。把三种职责放进同一页，最后往往只能用更小的字去容纳越来越多的内容。
如果后续主题与数量增长，先增加能帮助寻找内容的分类与检索，再评估分页大小。只有几篇文章时堆一套复杂筛选，也会让界面先于内容变重。排版的目标应是让人少费力，而不是让页面看起来装得更多。