# font-size

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

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/font-size/

## 構文

```css
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
```

## Tailwindでは

- `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 のように「サイズ/行の高さ」を同時指定できる。

## ブラウザ対応

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

## コード例

### 例1: 絶対値でフォントサイズを指定

```css
font-size: 16px;
```

### 例2: 親要素の1.2倍のサイズ

```css
font-size: 1.2em;
```

### 例3: ルート要素の1.2倍のサイズ

```css
font-size: 1.2rem;
```

## TIPS

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

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

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

## AIへの依頼文例

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

## 関連プロパティ

- [font-weight](https://www.css-dictionary.com/property/font-weight.md)
- [line-height](https://www.css-dictionary.com/property/line-height.md)