CSS辞書

font-size

テキスト・フォント

テキストのフォントサイズを指定するプロパティです。px、em、rem、%、vwなど様々な単位で指定可能です。レスポンシブデザインではremやvwの使用が推奨され、アクセシビリティの観点からも重要なプロパティです。

構文

Syntax
font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Tailwindでは

text-smfont-size: 0.875rem(14px)
text-basefont-size: 1rem(16px)
text-xlfont-size: 1.25rem(20px)

一般形: text-{size}(xs〜9xl)

任意値: text-[15px]

text-sm/6 のように「サイズ/行の高さ」を同時指定できる。

インタラクティブデモ

Try it

コントロール

16px
8px72px

プレビュー

サンプルテキスト

生成されたCSS

.element { font-size: 16px; }

コード例

1

font-size: 16px;
実行結果

16pxのテキストサイズ

絶対値でフォントサイズを指定

2

font-size: 1.2em;
実行結果

1.2emのテキストサイズ

親要素の1.2倍のサイズ

3

font-size: 1.2rem;
実行結果

1.2remのテキストサイズ

ルート要素の1.2倍のサイズ

💡 TIPS

レスポンシブデザインではremやemを使うと柔軟性が高い。

🤖 AIがよく間違えるポイント

AIはfont-sizeをpxで直書きしがちですが、ユーザーのブラウザ設定やズームを尊重するならremが原則です。「html { font-size: 62.5% }で1rem=10pxにするハック」をAIは今でも出すことがありますが、ユーザー設定の前提を崩すため現在は非推奨とする意見が主流です。

💬 AIへの頼み方

このpx指定だらけのタイポグラフィをremベースの階層(タイプスケール)に再設計して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
1+
Firefox
1+
Safari
1+
Edge
12+