テキストとフォントを制御するプロパティは何ですか？

Question

Accepted Answer

タイポグラフィは `font-*` と `text-*` プロパティのファミリーによって制御されます。これらを正しく設定することは、ページをポーランド風で読みやすくするための大部分です。

```css
.text {
  font-family: "Inter", system-ui, sans-serif; /* with fallbacks */
  font-size: 1rem;       /* size (use rem for accessibility) */
  font-weight: 600;      /* 100–900; 400 normal, 700 bold */
  font-style: italic;    /* normal | italic */
  line-height: 1.5;      /* spacing between lines — unitless is best */
  letter-spacing: 0.02em;/* tracking between characters */
}
```

## なぜ重要なのか

```css
font-family: "Inter", system-ui, -apple-system, sans-serif;
```

ブラウザは利用可能なものが見つかるまで順番に各フォントを試します。カスタムフォントが失敗した場合でもテキストがレンダリングされるように、常に**汎用ファミリー**（`sans-serif`、`serif`、`monospace`）で終了してください。`system-ui` はオペレーティングシステムのネイティブフォントを使用します（高速、ダウンロードなし）。

## テキストレイアウトプロパティ

```css
.text {
  text-align: center;        /* left | right | center | justify */
  text-decoration: underline;/* underline | line-through | none */
  text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
  white-space: nowrap;       /* prevent wrapping */
  word-break: break-word;    /* break long words/URLs */
}
```

## line-height: 単位のない値を使用する

```css
line-height: 1.5;    /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px;   /* ⚠️ fixed — doesn't adapt if font-size changes */
```

**単位のない** `line-height` は各要素の独自の font-size を乗算するため、ネストされた要素が異なるサイズを持つ場合でも比例したままになります — 推奨されるアプローチです。

## テキストの切り詰め（一般的なニーズ）

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows "..." when text is cut off */
}
```

## なぜ重要なのか

テキストプロパティは可読性と視覚的階層を駆動します — 強調のための `font-size`/`weight`、快適な読み取りのための `line-height`（~1.5）、信頼性のためのフォールバックスタック、およびクリーンな切り詰めのための `text-overflow`。

良いタイポグラフィは見栄えの良いUIの大部分です。