フォントサイズテスターとは？
任意のテキストを入力すると、8pxから96pxまで全サイズで同時にプレビューできます。px・rem・ptの単位切り替え、行間や文字間隔の調整で、タイポグラフィを仕上げましょう。
任意の文章を貼り付けると、8 px のキャプションから 96 px のヒーロー級まで、14段階の文字サイズで同時に表示されます。単位は px・rem・pt の間で切り替え可能で、行間や字間もその場で微調整できます。どのサイズから読みづらくなるか、ボタン文字を 14 px と 16 px のどちらにすべきかなどを、CSS を書く前にきちんと比較できます。
使い方
- ステップ1 — テストしたいテキストを入力またはペーストします。
- ステップ2 — サイズ範囲と単位（px、rem、pt）を調整してプレビューします。
- ステップ3 — すべてのサイズを並べて比較し、デザインに最適なサイズを選びます。
使用するタイミング
- ナビゲーションラベルのサイズ選定。読みやすく、かつバーを詰まらせない大きさにする場面。
- 本文を14pxと16pxで並べて比較し、デザインチーム内の意見を一本化したいとき。
- デザイナー指定の px をユーザーのフォント設定を尊重する rem に置き換える作業。
結果
ナビゲーションラベルのテスト：「Dashboard」と入力し、12px・14px・16pxで比較して、スペースを無駄にせず最も読みやすいサイズを見つけます。
よくある質問
- Webのフォントサイズは px・rem・pt のどれを使うべきですか?
- 本文やコンポーネントには rem が向いています。ユーザーが設定したルートフォントサイズに合わせて拡縮するため、アクセシビリティ上重要です。px は境界線や精密さが必要な小さなアイコン用に残し、pt は印刷由来の単位なので画面では避けてください。
- 本文の妥当なフォントサイズは?
- Webの段落では 16 px(1 rem)が事実上の基準です。キャプションやラベルなど二次的なテキストに限り 14 px に下げる程度に留めましょう。主要テキストを 14 px 未満にしている場合、アクセシビリティ監査で減点され、スマートフォン利用者の負担にもなります。
- 行間(line-height)は読みやすさにどれくらい影響しますか?
- 本文は 1.4〜1.6 が目安です。これより詰めると窮屈に、緩めすぎると段落間のリズムが崩れます。見出しは行自体が短くなりやすいので、1.1〜1.2 程度にやや詰めた方がまとまります。
- 字間(letter-spacing / tracking)はいつ調整すべきですか?
- 全大文字のラベルはデフォルトのカーニングが詰まって見えるので、0.05 em ほど開けると読みやすくなります。超大型の見出しは –0.01〜–0.02 em ほど詰めると引き締まります。本文は字体設計者が最適化済みなので、原則そのままで構いません。
- WCAG は本当に最小フォントサイズを 16 px と定めていますか?
- WCAG は明確な最小値こそ定めていませんが、レイアウトを崩さずに 200% まで拡大できることを要求しています。実務的には本文を 16 px から始め、相対単位を使えば自然に満たせます。最初から小さいサイズだと、ほとんどの利用者は拡大しないまま読み終えてしまいます。