font-size

テキスト・フォント

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

構文

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

インタラクティブデモ

コントロール

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を使うと柔軟性が高い。

関連プロパティ

ブラウザサポート

全ブラウザ対応