モバイルのフォントサイズ:本文が12pxではない理由と使うべきサイズ
スマホの本文は iOS で17 pt、Android で16 sp。12はキャプション、11が下限です。Safari にズームさせないよう入力欄は16 pxにして、文字は拡大できるように。iOS の全11サイズ付き。
スマホの本文は12 pxではありません。Apple の標準の本文サイズは17ポイント、Material は16です。12はキャプションのサイズで、キャプションだらけの画面は目を細めて見る画面です。以下に4つのルールと、その根拠になる iOS の全サイズを載せます。
なぜ12 pxが何度も出てくるのか
モックアップは大きなモニターで、画面に合わせてズームして描かれます。その距離では12は整って見え、17はうるさく見えます。つまりサイズは、フレームの中での見た目の整い具合で選ばれてしまうのですが、そのフレームはスマホではありません。
実際のスマホは、腕を伸ばした距離で、日差しの下で、歩きながら持たれます。同じ12 pxが、小さくて、まぶしくて、動いている状態になります。ファイルの中では整っていても、手の中では疲れます。
対策は、サイズを目分量で選ぶのをやめること。どちらのプラットフォームもタイプスケールを公開していて、その数値は実機で実際の読書距離でテストされています。数字はそこから取りましょう。
修正1:本文は17に
12 ptの本文
17 pt、iOS Body
iPhone の標準 Body スタイルは17 ptで、行の高さは22 ptです。Android では Material の Body Large が16 spで、行の高さは24 spです。ウェブではブラウザの標準が16 pxです。3つのプラットフォーム、3つの違う単位、答えは1つ。本文は16から17にあります。
このルールがいちばん効くのは長い文章です。1行のラベルなら小さくても耐えられます。最後まで読んでもらう段落はそうはいきません。画面に段落があるなら本文サイズにします。増える1行は、読まれるための代金です。
修正2:11未満は使わない
12が禁止されているわけではありません。ちゃんと名前があります。Caption 1です。写真の下の注釈やタイムスタンプなど、見逃されてもいい文字のためのものです。本文はそうではありません。
11が下限です。iOS の Caption 2は11 ptで、Apple が出荷している最小のテキストスタイルです。Material の最小スタイル Label Small も11 spです。両プラットフォームが同じ数字で止まっているのに、それより下に行くデザインは、どちらのシステムも書かない文字を書いていることになります。
小さいスタイルは補助情報だけに使います。タイムスタンプ、単位、法的な注記、タブアイコンの下の小さなラベルなど。誰かが行動するために必要な情報なら、それはキャプションではありません。
修正3:入力欄は16に
15 pxの入力欄
16 pxの入力欄
これはウェブのルールで、欄の見た目には何もおかしなところがないので驚かれます。iOS の Safari は、フォントサイズが16 px未満のテキスト入力欄にズームインします。16 px以上ならしません。ズームは自動では戻らないので、フォームの残りを見るにはピンチで戻す必要があります。
直し方は CSS 1行で、viewport タグで「ズームを無効にする」ではありません。ズームを禁止すると、必要とする人から道具を奪います。代わりに入力欄の文字サイズを設定しましょう。
修正4:大きくなれるように
固定の高さ
行が折り返す
あなたの17は出発点であって、約束ではありません。人は設定で文字サイズを上げますし、iOS では標準を大きく超えてアクセシビリティサイズまで行けます。Body は最初の段階で28 pt、最大で53 ptに達します。Android のユーザーもフォントスケールで同じことをします。
出荷前に、最大サイズで画面をテストしましょう。見るのは3つ。省略記号で切れた文字、隣と重なる文字、収まらなくなったボタンのラベル。対処はいつも同じです。行を折り返し、行を伸ばし、高さの固定をやめること。
ウェブで同じ考え方をするなら、文字サイズを px ではなく rem で指定して、ブラウザ自身の文字サイズ設定に従わせます。WCAG は、内容や機能を失わずに文字を200パーセントまで拡大できることを求めています。
iOS の全11のテキストサイズ
| スタイル | サイズ / 行の高さ (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 の標準の Large テキスト設定でのサイズです。11しかないのには理由があります。短いスケールは頭に入れやすく、全画面で一貫させやすいからです。
Android(Material 3)の対応は、Body Large が16 / 24、Label Small が11 / 16です。
開発者に渡すもの
: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 では dp ではなく sp で文字を指定して、フォントスケール設定に従わせます。
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は小さすぎる?
本文には小さすぎます。12は iOS の Caption 1に当たり、小さな注記向けです。読み物は16から17にしましょう。
iPhone で入力欄をタップするとページがズームするのはなぜ?
iOS の Safari は、フォントサイズが16 px未満のテキスト入力欄にズームインします。入力欄を16 px以上にすれば止まります。
システム設定に合わせて文字を拡大させるべき?
はい。人はそれなりの理由があって設定で文字サイズを上げます。文字を切り捨てず、折り返して伸びる行やボタンを設計しましょう。
出典
- Apple Human Interface Guidelines, Typography: 標準の Large サイズでの 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パーセントまで拡大できること。
- このページの見本は、Apple 自身の SF Pro ではなく、Apple のサイズで組んだ Inter です。サンプルのカードと行の文章は、このページ用に作ったものです。
- 最初は 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
