このページの中身

書体の選び方

書体は声です。何を言うかより先に、どんな声で言うかが伝わります。

セリフ・サンセリフ・スラブセリフ・等幅の4分類を、同じ文字で並べて比較した図
図を大きく見る
図の中身を文字で読む
  • セリフ　サンセリフ　スラブセリフ　等幅
  • Rg　Rg　Rg　Rg
  • 線端に飾りがある　飾りがない　飾りが太く角張る　全文字が同じ幅
  • 伝統・格式・文学性　中立・現代性・UI向き　力強さ・見出し向き　コード・データ・技術の記号
  • ウェイトは書体を増やさずに階層を作れる
  • Light 300　書体を1つに保ったまま
  • 見出しの例　本文には細すぎる
  • 3段の階層が作れる。
  • Regular 400　見出しの例　本文の標準　書体を2つ以上使うより、
  • まずウェイトで差をつける。
  • Bold 700　見出しの例　見出し・強調

ひと目で#

書体
文字のデザインそのもの。フォント = それを実装したファイル
セリフ
線の端に飾りがある。和文の明朝体にあたる。伝統、格式
サンセリフ
飾りがない。和文のゴシック体。中立で、今の声。UI の既定
スラブセリフ
飾りが太く角張る。力強い。見出し向き
等幅書体
全部の文字が同じ幅。コードと、技術的な文脈の記号
ウェイト
線の太さ。書体を増やさずに階層が作れる
同じ一文を12書体で組んだ実物の見本
図を大きく見る

使い分け#

こうしたい選ぶもの
信頼と格式を出したい（士業、医療、老舗）セリフ、明朝体
中身を前に出したい。UI のラベルサンセリフ、ゴシック体
見出しに重みが欲しいスラブセリフか、太いウェイト
コード、ID、日付、仕様を見せたい等幅書体
書体を増やさずに階層を作りたい同じ書体のウェイト差。3段まで
読み込みを軽くしたいシステムフォント（system-ui）

間違えやすいところ#

書体が増える事故は、要素ごとに「合う書体」を選ぶと起きます。ページ単位で声を数えると止まります。

1ページに4書体が混在する例と、本文をゴシック1系統に絞り明朝を見出しだけに残した例の比較
図を大きく見る
図の中身を文字で読む
  • ✕ 1ページに4つの声
  • 1要素ずつは悪くないのに、通すと騒がしい
  • Sweets Factory
  • 季節の焼き菓子を毎朝、窯から出しています。
  • 予約する
  • 装飾書体
  • 明朝
  • ゴシック
  • ○ 役割で声を絞る
  • 本文とUIはゴシック1系統。別の声は1か所だけ
  • 季節の焼き菓子を、毎朝。
  • 窯から出したてを、店頭とオンラインで販売しています。
  • 予約する
  • 明朝は h1 だけ
  • 本文ゴシック
  • UIも同じ系統
  • 価格は書体でなく
  • ¥3,240　等幅　¥3,240　太さと級数で立てる
  • 書体を足す前に、同じ書体のウェイトと級数で差が作れないかを試す。増えた書体は、読み込みも増やす。

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

洋菓子店のLPの初稿です。ヒーローは筆記体風の装飾書体、本文は細い明朝、ボタンはゴシック、価格は等幅と、1ページに4つの声が重なっています。1つずつ見れば悪くないのに、通して見ると騒がしい。原因は要素の作りではなく、書体の数そのものです。

本文とUIを端末のゴシック1系統に戻し、明朝は h1 の1行にだけ残します。価格は書体を変えず、太いウェイトと級数で立たせます。声が「本文の1系統＋要所の明朝」まで減った時点で、ばらつきの印象はほぼ消えます。

確認する#

使えるパターン#

このページで扱う語#

このページで扱う語を並べる本文では太字6 語

語の名前から引くなら用語索引へ。

タイポグラフィ
文字を読みやすく、意図どおりの印象で伝わるように配置・調整する技術と、その成果物。
フォント
書体を特定の大きさ・太さ・幅で実際に使える形にした一揃い。現在はフォントファイルを指す。
ディスプレイ書体
大きな級数で使うことを前提に設計された書体。本文用より線の強弱や字間が詰まっている。
フォントファミリー
同じ書体設計に基づく、ウェイト・幅・イタリックなどのバリエーションをまとめた集合。
イタリック
傾きを持つ字形。イタリックは手書きに近い別設計の字形、オブリークは直立体を傾けただけのもの。
線幅対比
1つの文字の中で、太い線と細い線の差がどれだけあるか。

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

明朝とゴシックのどちらを使うか

長文を静かに読ませるなら明朝、画面のUIとして操作させるならゴシック。混ぜるなら役割で分ける。

このコードで動いている見本です

太字がぼやける、細字が読めない

合成太字になっている。太字のファイルを読み込み、font-weight で実在するウェイトを指定する。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は文字を読ませるにまとめてある。逆引きには全188件。

書体で組み比べる#

同じ見本文を、候補の書体で組み比べます。見本文は案件の実テキストに差し替えられ、選んだ候補がそのまま font-family スタックになります。

実際の書体名から選ぶならWebフォントを試すへ。Google Fonts の日本語書体を全件並べています。

/* 端末の書体で賄う。読み込みゼロ */
body { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif; }

この道具は JavaScript で動きます。無効の場合は、上の表と既定値のコードを使ってください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。