このページの中身
タイポグラフィ
画面の中身は、ほとんどが文字です。その読ませ方を決めます。
図の中身を文字で読む
- タイポグラフィで決めること 文字をどう読ませるか
- 先に決まっていること 基礎
- 書体を選ぶ 書体の選び方 文字の骨格
- 組む 大きさの体系 字間と行間 和文組版
- 届ける Webフォントの実装
- ここが効く先 レイアウト UI部品 アクセシビリティ
このページから降りる#
書体の選び方セリフ・サンセリフ・等幅の使い分け
文字の骨格同じ級数でも大きさが違う理由
字間と行間読みやすさの大半はここで決まる
大きさの体系級数を毎回決めない
和文組版欧文の常識が通じないところ和文の組み実例集
Webフォントの実装重さと表示のちらつき和文フォントを軽くする
この分野が答えになる場面#
全15件。ほかの分野もまとめて引くなら逆引きへ。
この分野が答えになる場面困り事から引く15 件
| こういうとき | 答え | いますぐ | 詳しくは |
|---|---|---|---|
| 文字が読みにくい、詰まって見える | 行間を1.7〜1.9にする。字間は本文では触らない。詰めるのは見出しだけ。 | コードを開く | 字間と行間 |
| 行間をいくつにすればいいか | 和文本文は1.7〜1.9、見出しは1.3〜1.5。行が長いほど広げる。 | コードを開く | 字間と行間 |
| 本文を何ピクセルにすればいいか | 16pxを下限にする。指定はpxではなくremで、利用者のブラウザ設定に追従させる。 | コードを開く | 大きさの体系 |
| 見出しの大きさが決まらない | 比1.2〜1.25の階段を作り、その中から選ぶ。1ページで使うのは4段まで。 | コードを開く | 大きさの体系 |
| 明朝とゴシックのどちらを使うか | 長文を静かに読ませるなら明朝、画面のUIとして操作させるならゴシック。混ぜるなら役割で分ける。 | コードを開く | 書体の選び方 |
| 和文と欧文が混ざると欧文だけ沈んで見える | 欧文側のx-heightが低い。和文に合う書体に替えるか、欧文だけ級数を上げる。 | コードを開く | 和文組版 |
| 英数字が和文の中で窮屈に見える | 和文と欧文のあいだに四分アキ（全角の1/4）を入れる。CSSだけでは自動で入らないので、原稿側で半角の空きを入れるか、欧文を要素で包んで margin を付ける。 | .code, .num { margin-inline: 0.25em; } /* 原稿に半角スペースを入れる */ | 和文組版 |
| 約物（括弧や句読点）のアキが気持ち悪い | 全角の約物は前後に余白を持っている。連続する箇所と行頭の始め括弧だけを詰める。 | コードを開く | 和文組版 |
| Webフォントを使うと表示が遅い | 1書体に絞る。preload と font-display: swap を付け、数百KBを超えるならサブセット化する。 | コードを開く | Webフォントの実装 |
| 読み込み中に文字が出ない時間がある | font-display が block になっている。swap にすると代替書体で先に出る。 | コードを開く | Webフォントの実装 |
| 書体が入れ替わるときガタつく | size-adjust と ascent-override で代替書体の見た目を本番に寄せる。 | コードを開く | Webフォントの実装 |
| 太字がぼやける、細字が読めない | 合成太字になっている。太字のファイルを読み込み、font-weight で実在するウェイトを指定する。 | コードを開く | 書体の選び方 |
| 同じ級数なのに、書体を変えたら大きさが変わって見える | x-heightが違う。字面の大きさは font-size と一致しない。書体を替えたら級数も測り直す。 | コードを開く | 文字の骨格 |
| 文字の高さを揃えたのに揃って見えない | ボックスの上端で揃えている。ベースラインで揃える。 | コードを開く | 文字の骨格 |
| キャッチコピーの改行位置を決めたい | 見出しは text-wrap: balance で行の長さが揃う。ここで折りたいと決まっているなら、折りたくない語を要素で包んで display: inline-block にする。 | コードを開く | 和文組版 |
他の分野へ#
基礎 ／ 色彩 ／ レイアウト ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ アクセシビリティ ／ モーション ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索