14pxをremに変換 — 小さいテキストとサブコンテンツ

14px = 0.875rem

14 / 16 = 0.875rem

14pxは、Webデザインにおけるセカンダリテキストコンテンツで最もよく使用されるサイズの一つです。

14pxが一般的に使用される場面

• ヘルパーテキスト — フォームフィールドの説明やヒント
• キャプション — 画像キャプション、図の説明
• テーブルデータ — スペースが限られた密なデータテーブル
• メタデータ — タイムスタンプ、著者名、タグ
• サイドバーコンテンツ — ナビゲーションラベル、カテゴリリスト
• コードエディタUI — VS Codeなど多くのIDEのデフォルトは14px

アクセシビリティの考慮事項

14pxはほとんどのユーザーにとって読みやすいですが、快適な本文テキストの下限に近づいています。WCAG 2.1は最小フォントサイズを規定していませんが、機能の損失なくテキストを200%まで拡大可能であるべきとしています。14pxの代わりに0.875remを使用すると、ユーザーがブラウザのフォントサイズを調整した際に適切にスケーリングされます。

一般的なデザインシステムトークン

多くのデザインシステムが14pxを特定のトークンにマッピングしています：

フレームワーク	トークン / クラス	値
Tailwind	text-sm	0.875rem (14px)
Material UI	body2	0.875rem
Ant Design	@font-size-sm	14px
Bootstrap	small / .small	0.875em

62.5%ベースでの14px

ルートが10px（62.5%トリック）の場合：

14 / 10 = 1.4rem

実用的なヒント

モバイルデバイスでは本文テキストに14pxを使用しないでください。小さいビューポート幅では14pxは窮屈に感じます。最小本文テキストサイズとして16px（1rem）を使用し、14pxは補足コンテンツにのみ使用することを検討してください。