你有没有试过蹲在地铁里眯着眼看手机？
那不是你视力退化，是页面字体真不够朋友。太小得凑近盯，太大要不停划屏——用户根本没耐心等你解释“这是设计语言”。
为什么16px成了移动端默认起点？
苹果最早在 iOS Safari 里把未设字号的文本默认渲染成 16px。它不是拍脑袋定的，而是拿手指比划出来的：这个大小，在大多数手机上，点标题、选链接、划文字，手指不会误触。
低于 12px 的字，在普通屏幕上已经开始糊边；在安卓中低端机上，可能直接变成一团灰影。视力稍弱的用户，根本不会多看你第二眼。
有家新闻 App 曾把正文压到 13px，想多塞两条热点标题。结果客服收到一堆“眼睛发酸”“看三行就想关”的反馈，平均停留时间也缩短了不少。后来调回 16px，虽然首页少了一条标题，但用户往下翻的深度反而明显提升。
如何建立层次分明的字体比例系统？
别指望一个字号走天下。得像搭积木一样，让字号有主次、有呼吸感。
先定一个基础值（比如 16px），再按简单倍数推其他层级：
- 主标题：
1.5rem（约24px） - 小标题：
1.25rem（约20px） - 正文：
1rem（16px） - 图注/辅助说明：
0.875rem（约14px）
行高比字号更重要。16px 的字，行高至少给到 24px（也就是 1.5 倍）。太挤的行距，会让阅读像在扫雷——每行都得重新找起点。
不同屏幕密度下，字体如何保持清晰？
你肯定见过：同一段文字，在 iPhone 上清清楚楚，在某款安卓机上却毛毛的。问题出在设备像素比（DPR）和 px 单位的硬绑定。
现在主流做法是用 rem：
html { font-size: 16px; }
p { font-size: 1rem; } /* 实际就是 16px */
h2 { font-size: 1.5rem; } /* 实际就是 24px */
这样只要改一句 html 的 font-size，全站文字就跟着缩放。比如在大屏手机上把根字号改成 18px，所有 rem 字体自动变大，布局也不崩。
怎样为不同内容类型选择最佳字号？
资讯类页面（比如新闻、公众号、长图文），建议正文起步 17px 或 18px，配上 1.6 以上的行高。这不是炫技，是让用户能连续读完三段不眨眼。
工具类或电商页（比如订单确认、商品参数、设置页），信息要密，但底线仍是 16px。价格、按钮文字、关键状态（如“已发货”），必须靠放大或加粗跳出来——比如价格用 24px 加粗，比旁边 16px 的描述大一圈，一眼就落进眼里。
还有不能忽略的一群人：爸妈辈、戴老花镜的用户、色弱朋友。打开手机「设置→显示与文字大小」调大字体，你的页面如果文字被切掉、排版乱套，就是没做适配。用 rem + 关闭 -webkit-text-size-adjust: none，就能接住系统级的放大指令。
避开这些字体设计的常见坑
细字体陷阱
别被设计稿里的纤细英文蒙蔽。Light 或 Thin 字重在 14px 下基本等于隐形。移动端认的是 Regular 和 Medium——笔画够实，小字号下才扛得住。
行长失控
一行塞太多字，眼睛会累。中文建议单行控制在 30–40 字以内（英文 12–15 词）。别靠“视觉居中”撑满整屏，加个 max-width: 640px 更实在。
颜色对比翻车
浅灰字（比如 #999）配白底，在阳光下就是“请自行脑补”。用浏览器自带的无障碍检查工具（Chrome DevTools → Lighthouse → Accessibility）跑一跑，对比度低于 4.5:1 的组合，趁早换掉。
今天下班前就能做的字体检查清单
别等下周复盘。现在就掏出你手边的手机，打开正在迭代的那个 H5 页面或小程序，照着做：
- 找一段密密麻麻的正文（比如商品详情里的规格参数），用食指快速点其中任意一个词。点不准？字号或行高大概率不够。
- 把手机亮度调到中档，在办公室灯光下，盯着读 3 分钟。眼睛有没有发紧、发干？有，就该调大字号或拉开行距。
- 盯着页面静默 3 秒：不用看标签，光凭大小和粗细，你能分清哪是标题、哪是正文、哪是小字备注吗？分不清，比例系统就得重搭。
- 进手机「设置→辅助功能→显示与文字大小」，把系统字体调到最大档，再打开你的页面。文字有没有被截断？布局有没有错位？有，立刻查
rem和text-size-adjust。
做完这四步，最多 15 分钟。改完立刻预览，今晚发版前，就能让第一批用户感觉到：“这字，看着舒服多了。”