typographyNovember 5, 20268 min read

移动端字号:为什么正文不是 12px,以及该用哪些字号

手机上的正文,iOS 是 17 pt,Android 是 16 sp。12 是说明文字,11 是底线。输入框设为 16 px,Safari 才不会缩放页面,同时让文字能放大。附 iOS 全部 11 种字号。

By Boone

X LinkedIn

Mobile Font Size: Why Body Text Is Not 12px and the Sizes to Use

手机上的正文不是 12 px。Apple 默认的正文字号是 17 点,Material 是 16。12 是说明文字,整屏都用说明文字的界面,只会让人眯着眼看。下面是四条规则,以及可供参考的 iOS 完整字号表。

为什么 12 px 总是出现

设计稿是在大显示器上画的,画面还被缩放到适配窗口。在那个距离下,12 看起来整洁,17 看起来太吵。于是字号是按画框里好不好看来选的,可画框不是手机。

而真正的手机,是被人伸直手臂拿着,在阳光下,边走边看。同样的 12 px 现在又小、又反光、还在晃。文件里很整洁,拿在手里很累眼。

解决办法是别再凭眼睛选字号。两个平台都公布了字阶,里面的尺寸都在真实设备、真实阅读距离下测试过。数字就从那里取。

修正 1:正文用 17

在 iPhone 上,默认的 Body 样式是 17 pt,行高 22 pt。在 Android 上,Material 的 Body Large 是 16 sp,行高 24 sp。在网页上,浏览器默认是 16 px。三个平台,三种单位,答案只有一个:正文就该在 16 到 17 之间。

长文本最考验这条规则。一行标签可以小一点,也撑得住。但一段需要读到底的文字不行。屏幕上只要有段落,就该用正文字号,多出来的那一行,就是被人读完的代价。

修正 2:不低于 11

一份列表,展示 iOS Body 17 pt、Footnote 13 pt、Caption 1 12 pt 和 Caption 2 11 pt,每一项都按自己的字号显示

12 并没有被禁用。它有自己的名字:Caption 1。它用于照片下方的小字或时间戳,这类文字允许被忽略。正文不是这种东西。

11 是底线。iOS 的 Caption 2 是 11 pt,这是 Apple 提供的最小文字样式。Material 最小的样式 Label Small 也是 11 sp。两个平台停在同一个数字上,低于它的设计,写出的是任何一个系统都不会写的文字。

小样式只用于次要信息:时间戳、单位、法律声明、标签栏图标下的小标签。如果是用户需要据此行动的信息,它就不是说明文字。

修正 3:输入框用 16

这是一条网页规则,而且让人意外,因为输入框本身看起来毫无问题。当字号小于 16 px 时,iOS Safari 会放大文本输入框;16 px 或更大就不会。这种缩放不会自动恢复,用户得先捏合缩回去,才能看到表单的其余部分。

修复只需一行 CSS,而且不该是在 viewport 标签里“禁用缩放”。禁止缩放会夺走需要它的人手里的工具。改为设置输入框的字号。

修正 4:让它能长大

在较大文字尺寸下的列表行,标题“Morning run by the river”被省略号截断

你的 17 只是起点,不是承诺。人们会在设置里调大文字,iOS 允许他们远超默认值,进入辅助功能字号,Body 第一档就到 28 pt,最大档达 53 pt。Android 用户则通过字体缩放做同样的事。

上线前,用最大的字号测试你的界面。留意三件事:被省略号截断的文字、与相邻元素重叠的文字,以及放不下的按钮标签。每次的解药都一样:让行换行,让行变高,别再固定高度。

在网页上,同样的思路意味着用 rem 而不是 px 设置文字大小,这样它会跟随浏览器自己的文字大小设置。WCAG 要求文字可以放大到 200%,而不丢失内容或功能。

iOS 全部 11 种文字尺寸

iOS 的 11 种文字样式,从 34 / 41 的 Large Title 到 11 / 13 的 Caption 2,每一种都按自己的字号显示

样式	字号 / 行高 (pt)	用途
Large Title	34 / 41	主屏幕顶部
Title 1	28 / 34	各栏目屏幕
Title 2	22 / 28	子栏目
Title 3	20 / 25	卡片和分组标题
Headline	17 / 22	行标题,半粗体
Body	17 / 22	段落和阅读文本
Callout	16 / 21	辅助文字
Subhead	15 / 20	标题下的次要行
Footnote	13 / 18	注释和元数据
Caption 1	12 / 16	小字
Caption 2	11 / 13	底线

这些是 iOS 默认“大”文字设置下的尺寸。只有 11 种是有原因的:短字阶容易记在脑子里,也容易在每个屏幕上保持一致。

Android 在 Material 3 中的对应项是 Body Large 16 / 24 和 Label Small 11 / 16。

把这个交给你的开发者

css

:root {
  --text-body: 1.0625rem;   /* 17 px, iOS Body */
  --text-callout: 1rem;
  --text-footnote: 0.8125rem;
  --text-floor: 0.6875rem;  /* 11 px, never lower */
}

body { font-size: var(--text-body); line-height: 1.3; }

/* 16 px or more stops iPhone Safari zooming into the field */
input, select, textarea { font-size: 1rem; }

在 iOS 上,使用系统文字样式(.body、.footnote),这样 Dynamic Type 自动生效。在 Android 上,用 sp 而不是 dp 设置文字,这样它会跟随字体缩放设置。

FAQ

移动应用的最小字号是多少?

两个平台都是 11。iOS 的 Caption 2 是 11 pt,Material 3 的 Label Small 是 11 sp。任何需要用户读懂才能行动的内容,都应该大得多。

iPhone 上的正文应该用多大字号?

17 pt。这是 iOS Body 样式的默认值,行高 22 pt,用户调大文字尺寸时会随之放大。

Android 上的正文应该用多大字号?

16 sp。这是 Material 3 的 Body Large,行高 24 sp。

正文用 12px 是不是太小了?

对正文来说,是的。它属于 iOS 的 Caption 1 样式,用于小字。阅读文本应该是 16 到 17。

为什么在 iPhone 上点一下输入框,页面就放大了?

当字号小于 16 px 时,iOS Safari 会放大文本输入框。把输入框设为 16 px 或更大,就不会了。

我应该让文字跟随系统设置缩放吗?

应该。人们在设置里调大文字是有充分理由的,所以请设计会换行、会变高的行和按钮,而不是把文字截断。

来源

Apple Human Interface Guidelines, Typography:iOS 默认“大”字号下的文字样式,单位为点。Body 17/22,Callout 16/21,Subhead 15/20,Footnote 13/18,Caption 1 12/16,Caption 2 11/13,Large Title 34/41,Title 1 28/34,Title 2 22/28,Title 3 20/25,Headline 17/22。Body 在第一档辅助功能字号是 28/34,最大档是 53/62。
Material Design 3, Typography:Body Large 16/24 sp,Label Small 11/16 sp 为最小样式。
CSS-Tricks,16px or Larger Text Prevents iOS Form Zoom(Chris Coyier,2021):iOS Safari 会放大设为 15 px 或更小的输入框,16 px 或更大则不会。
WCAG 2, 1.4.4 Resize Text:文字可放大至 200%,而不丢失内容或功能。
本页的字体样张使用 Inter,按 Apple 的字号设置,而不是 Apple 自己的 SF Pro。示例卡片和行中的文字是为本页虚构的。
最初作为轮播图发布于 UX Brainy。

Want type that stays readable on every phone and every text size setting? Our team designs and builds mobile UI with the type scale decided once.

Get Started