什么是字号测试工具？
输入任意文本，从8px到96px每个字号都能同时预览。支持px、rem、pt单位切换，还能调整行高和字间距来打磨排版细节。
把任意一段文字填进来,工具会在 14 种字号上同时渲染,从 8 px 的小注解到 96 px 的大标题都覆盖。可以在 px、rem、pt 之间切换单位,并即时调整行高和字母间距。当你想看清楚字号到哪一档开始难读,或者按钮文字到底用 14 px 还是 16 px 之前,这里能让你直接看到答案,再回去改 CSS。
使用方法
- 第一步——输入或粘贴您想测试的文本内容。
- 第二步——调整字号范围和单位（px、rem或pt）进行预览。
- 第三步——并排对比所有字号，为您的设计挑选最佳选项。
何时使用
- 选导航栏文字的尺寸:既要看得清,又不能把横栏挤满。
- 对比 14 px 与 16 px 正文,解决设计团队内部的口味之争。
- 把设计稿里的 px 标注换算成 rem,让页面尊重用户的字号偏好。
结果
测试导航标签：输入仪表板，在12px、14px和16px下对比，找到最易读又不浪费空间的字号。
常见问题
- 网页字号该用 px、rem 还是 pt?
- 正文和组件建议用 rem:它会跟随用户根字号缩放,对无障碍很重要。边框或极小的图标可以继续用 px,以保留精确像素。pt 主要是印刷时代的单位,屏幕上不建议用。
- 正文字号选多大合适?
- 网页正文的事实基准是 16 px(1 rem)。注释、辅助标签之类的次要文字可以降到 14 px。主要内容低于 14 px 的网站通常会在无障碍审核里失分,小屏用户也会觉得吃力。
- 行高对可读性影响有多大?
- 正文行高一般控制在 1.4 到 1.6。再紧会觉得拥挤,再松又会打断段落间的视觉节奏。标题因为本身行短,可以收得更紧,大约 1.1 到 1.2 比较合适。
- 什么时候要调字母间距(tracking)?
- 全大写标签因为默认字距偏紧,适当放宽到 0.05 em 左右会舒服很多。超大展示标题可以稍微收紧,大概 –0.01 到 –0.02 em。正文不用动,字体设计师已经做好了。
- WCAG 真的规定最小字号是 16 px 吗?
- WCAG 并没有规定一个硬性下限,但要求文字必须能放大到 200% 而布局不破坏。实践中,正文从 16 px 起步、单位使用相对值,就很容易满足。默认就用极小字号,等于逼用户主动放大,而大多数人不会去做。