テキストのフォントサイズを指定するプロパティです。px、em、rem、%、vwなど様々な単位で指定可能です。レスポンシブデザインではremやvwの使用が推奨され、アクセシビリティの観点からも重要なプロパティです。
font-size: <absolute-size> | <relative-size> | <length> | <percentage>| text-sm | font-size: 0.875rem(14px) |
| text-base | font-size: 1rem(16px) |
| text-xl | font-size: 1.25rem(20px) |
一般形: text-{size}(xs〜9xl)
任意値: text-[15px]
text-sm/6 のように「サイズ/行の高さ」を同時指定できる。
サンプルテキスト
.element {
font-size: 16px;
}font-size: 16px;16pxのテキストサイズ
絶対値でフォントサイズを指定
font-size: 1.2em;1.2emのテキストサイズ
親要素の1.2倍のサイズ
font-size: 1.2rem;1.2remのテキストサイズ
ルート要素の1.2倍のサイズ
レスポンシブデザインではremやemを使うと柔軟性が高い。
AIはfont-sizeをpxで直書きしがちですが、ユーザーのブラウザ設定やズームを尊重するならremが原則です。「html { font-size: 62.5% }で1rem=10pxにするハック」をAIは今でも出すことがありますが、ユーザー設定の前提を崩すため現在は非推奨とする意見が主流です。
このpx指定だらけのタイポグラフィをremベースの階層(タイプスケール)に再設計して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。