第7章　人間は、文字の形から声を聞く

同じ「ようこそ」という言葉でも、細く静かな文字、太く角張った文字、手で書いたような文字では、受ける印象が変わることがあります。文章の意味は同じでも、文字の形、間隔、大きさ、配置は、話し方の調子のようなものを画面へ加えます。

本章の「声を聞く」は比喩です。文字を見ると実際に音声が聞こえる、書体と性格が一対一に対応する、という心理学的定義ではありません。書体から受ける印象を、曖昧な「雰囲気」で終わらせず、どの形と組み方がそう感じさせたのかを観察するための言葉です。

この比喩で書体を人間の性格へ固定しないため、本章では「文字の調子」「表現上の印象」とも言い換えます。声の性別、年齢、階級等を字形へ安易に割り当てません。

タイポグラフィは書体選びだけではありません。字形、サイズ、太さ、行間、行長、揃え、段落、階層、言語、読み込み中の代替表示まで含む、文字を画面で働かせる設計です。

この章の必修は三つです。

1. 文字の印象を、字面、骨格、太さ、空間、端部等の観察へ戻す
2. 文字識別、文章を読み続けること、理解、好みを分ける
3. 意味構造、表示環境、フォント読み込みが変わっても読めるかを確かめる

この章で見るもの

• 同じ言葉に異なる調子を感じるとき、文字のどこが違うか
• 文字の外形、骨格、線幅、内側の空間、端部
• 読めることと、読み続けられること
• 見出しの意味構造と、見た目の階層
• 日本語、欧文、数字、アイコンが共有する線と、共有しない尺度
• Web フォントが届く前、届いた後、届かなかったとき
• 書体の印象を普遍的な性格表へしない方法

7.1 同じ言葉でも、同じ声には見えない

文化祭の入口に「ようこそ、まちの文化祭へ」と書かれています。一方は線が細く、文字間が広く、余白の中へ小さく置かれています。もう一方は太く、字間が詰まり、画面幅いっぱいに置かれています。

言葉は同じでも、前者を静か、後者を力強いと感じる人がいるかもしれません。しかし、「細い書体＝静か」「太い書体＝力強い」という辞書を作るのは早すぎます。Size、面積、配置、周囲の画像、言葉の意味も同時に違えば、書体だけの影響ではありません。

図 F01 では、最初に書体名と用途を隠します。印象語を一つ書いた後、根拠にした形の場所を指します。

比較は二段階です。第 1 段階では同じ CSS のサイズ、ウェイト値、行長で機械的にそろえ、見かけの字面や黒みがそろわないこと自体を観察します。第 2 段階では、見かけの大きさ、黒み、行長を調整し、調整値と理由を公開します。見た目に合わせて調整した結果を「書体だけを変えた実験」とは呼びません。

丸いから親しみやすい。

ここから、さらに観察を進めます。

「よ」と「こ」の曲線が大きく、線端の角が目立たない。文字の内側の空間が広く、隣の文字との間も広い。この形が、私には柔らかい印象と関係して見えた。

後者なら、別の人が検証できます。どの Glyph の、どの部分を見たかが残るからです。

次に同じ書体を、文化祭の歓迎、医療手続の警告、請求書の謝罪へ置きます。用途が変わると印象も変わるかもしれません。書体の印象は形だけから自動的に出るのではなく、読んだ言葉、使われた場面、その書体を過去にどこで見たかとも関係します。

書体へ人格を感じること自体を誤りとはしません。研究でも、書体に異なる人格的印象が評定される例があります。ただし、研究で使った書体、言語、参加者、評定語を越えて普遍化しません。

7.2 字面、骨格、太さ、コントラスト

「このフォントは丸い」と言うとき、何を見ているのでしょう。文字全体の輪郭、線の曲がり方、角、線端、内側の空間は別々に観察できます。

字面

ここでは、フォントの設計領域の中で、文字が実際に占める見かけの大きさを指す実務語として使います。同じ font-size: 16px でも、見える文字の大きさが同じとは限りません。CSS の em Box、フォントメトリクス、実際の文字外形を区別します。

骨格

線の太さをいったん除いて見た、字形の基本的な構造です。同じ文字でも、曲線の張り、払い、交差、開き方が異なります。骨格は画面上に一本の実線として存在するわけではなく、字形を比較するための設計上の見方です。

太さとウェイト

CSS の font-weight: 700 は、すべてのフォントで同じ物理線幅を意味しません。フォントファミリー内の書体、可変フォントの軸、フォント選択、合成によって結果が変わります。見た目の太さを比べるなら、CSS 値だけでなく、文字のどの線が何 px に描画されたかを拡大して見ます。

線幅のコントラスト

一つの文字内で、太い線と細い線にどれほど差があるかです。太さの平均とは別です。高いコントラストが必ず上品、低いコントラストが必ず読みやすい、という性格表にはしません。

Counter と開口部

「あ」「e」「8」等の内側にできる空間や、外へ開いている部分を見ます。小 Size、低解像度、太い Weight では空間が狭く見え、似た文字の識別に関わる可能性があります。

Terminal

線の端部です。水平、斜め、丸い、切り落としたような端等があります。セリフの有無だけでなく、どの線がどの形で終わるかを指します。

用語は書体を格付けするためではなく、差の場所を共有するために使います。

書体は歴史と技術から切り離された形ではない

活字、写植、写真植字、デジタルフォント、可変フォントでは、作られ方と使用条件が異なります。セリフ／サンセリフ等の分類も、形を説明する入口の一つであり、時代や地域を越えた性能順位ではありません。本章では通史を扱いませんが、書体名、デザイナー、制作年、対象文字体系、想定用途、技術形式を図版台帳へ残します。

日本語の形を見るときは、欧文用語だけでなく、漢字の点・横画・縦画・払い・はね、仮名の連続性、ふところ、重心、字面、約物のアキ等、対象に合う観察語を使います。定義が揺れる語は、図で指す場所を示します。

7.3 読めることと、読み続けられること

一文字の「8」と「B」を見分けられることと、400 字の案内を読み終え、開催時刻を答えられることは同じ課題ではありません。

本章では作業上、次のように分けます。

• 識別しやすさ: 文字や語を識別できるか
• 読み進めやすさ: まとまった文章を読み進められる条件か
• 理解: 内容を理解できたか
• 好み: 好ましい、読みやすそうと感じたか

これらの語の範囲は、研究分野や著者によって揺れます。英語名を付ければ測定対象が自動的に明確になるわけではありません。本書では、何をどう測ったかを併記します。

この区別は本書の操作的な整理です。Legibility 研究でも、単一文字、文字列、読書速度等の異なる課題が使われます。Legge and Bigelow のレビューは文字サイズと読書パフォーマンスを扱いますが、その結果を本章の日本語画面へ無条件に移しません。

一つの「読みやすい」へまとめない

大きな文字で一文字を識別しやすくなっても、行長が短くなりすぎ、改行が増えて読み位置を追いにくくなる場合があります。行間を広げれば常に改善するとも限りません。行と行のまとまり、段落の分離、画面内に残る文脈が変わります。

セリフ体とサンセリフ体のどちらが常に読みやすいか、という二択にも還元しません。同じ分類内にも、字面、線幅のコントラスト、字幅、開口部、間隔の異なる多くの書体があります。サイズ、表示装置、言語、読者の経験、課題を記録します。

Size、行間、行長を一軸ずつ比べる

Font Size の影響を見たいなら、Family、Weight、行長、Line Height 等を固定します。ただし、Size を変えると一行に入る文字数が変わります。同じ Box 幅のままなら、改行も連動します。何を固定し、何が連動したかを書きます。

図 F03 では、次を別に測ります。

1. 似た文字の誤読数
2. 指定情報を見つける時間
3. 文章の読了時間
4. 内容質問の正答
5. 読み位置を失った回数
6. 主観的な好みと負担

「読み位置を失った回数」は、参加者が申告して戻った箇所、または観察者が再読を確認した箇所として事前に定義します。読了時間は正答を伴う試行だけも別集計し、速さと理解のトレードオフを隠しません。視線計測がなくても取れる観察と、推定に留まるものを分けます。

対象者の言語、読字経験、視力補正、年齢範囲、利用する支援、表示距離、照明、画面サイズ、DPR、ズームを記録します。少人数の結果を人口全体へ一般化せず、個人データを公開する場合は同意と匿名化を行います。

数字を最適値にしない

WCAG の文字間隔達成基準は、利用者が一定の間隔へ上書きしても内容や機能が失われないことを求めます。そこで示される値は「この行間が全員に最も読みやすい」という推奨値ではありません。

同様に、視覚表現の達成基準にある行長や行間の値は、調整可能性を含む AAA の条件です。日本語本文を必ず 40 字にし、行間を必ず 1.5 倍にするという美的規則ではありません。読者が文字を拡大し、間隔を変えても、切れ、重なり、機能喪失が起きないことを確認します。

7.4 文字の階層が読む順序を支える

文化祭のプログラムページに、催し名、日時、会場、説明、注意、申込ボタンがあります。すべて同じサイズと太さで等間隔なら、どこから読むかを見た目から予測しにくいかもしれません。

文字の階層には、複数の手がかりがあります。

• サイズの差
• 太さの差
• 明度や色の差
• 前後の間隔
• 位置と揃い
• 書体の差
• 大文字、小型大文字、約物等の表記

文字組みは個々の字形だけでなく、段落面の形としても見ます。改行位置、行末の凹凸、段落間のアキ、見出しから本文への距離、行が作る密度と輪郭を観察します。広告的な大見出しの表現価値と、日時を探す課題の両方を目的として明記します。

全部を同時に変える必要はありません。見出しを大きくし、太くし、色を変え、枠で囲み、余白も広げると、ほかの階層との差が過剰になることがあります。一つの差で足りるか、二つの差が補い合うかを比べます。

視覚的階層は重要度そのものではない

大きく目立つ文字は、組織にとって重要でも、利用者の現在の課題には不要かもしれません。広告見出しが開催日時より大きいとき、造形上の主役と、課題上の最重要情報が異なります。

「最初に見えたもの」を重要度の証明にしません。初見の報告、探索課題、理解を分けます。

HTML の見出し構造とは別の層

大きな文字が自動的に h1 になるわけではありません。反対に、h1 を必ず画面最大にする規則もありません。HTML の Heading は文書の意味構造を表し、CSS は視覚表現を作ります。

両者が無関係でよいわけでもありません。視覚的には見出しなのにマークアップが単なる div、意味上は下位見出しなのに視覚上は本文と区別できない、といった不一致を確認します。見た目だけの順序と、見出しをたどった順序を別の重ね合わせで比べます。

7.5 ベースラインと、文字が作る見えない線

日本語、欧文、時刻の数字、アイコンを一列に置くと、CSS では中央揃えでも、文字が上下にずれて見えることがあります。第3章で扱った整列を、フォント指標まで掘り下げます。

箱の中央と字形の中央

インラインボックスの高さ、em ボックス、上へ伸びる部分、下へ伸びる部分、実際の字形を囲む箱は同じではありません。align-items: center は箱を揃えても、字形の黒い部分の重心を揃える機能ではありません。

ベースラインは一本だけではない

欧文でよく見るアルファベット用のベースラインに加え、書字体系やレイアウトには複数のベースライン概念があります。日本語を欧文の小文字の高さ、大文字の高さだけで説明しきれません。ブラウザが実際にどのフォント指標を使い、代替字形がどのベースラインへ置かれたかを確認します。

和欧混植と数字

「午後 6:30」の日本語、空白、数字、コロンが同じフォントファイルから出るとは限りません。数字だけ別フォント、記号だけ代替フォントになることもあります。フォントファミリーの指定ではなく、実際に描画された字形単位で見ます。

アイコンを文字として混ぜる場合も、見かけの中央、ベースライン、意味、読み上げを別に確認します。位置を 1px 動かす視覚補正が必要な場合、その値を普遍化せず、フォント、サイズ、アイコン、DPR の条件を残します。

7.6 日本語と欧文を同じ物差しで見ない

タイポグラフィの解説には、小文字の高さ、大文字の高さ、上へ伸びる部分、下へ伸びる部分等、ラテン文字を中心にした語彙が多くあります。重要な言葉ですが、それだけで漢字、ひらがな、カタカナ、約物、縦組みを説明できません。

文字種が同じ面積を使うとは限らない

日本語フォントでも、漢字、仮名、ラテン文字、数字、約物の見かけの大きさや空間は異なります。全角の設計枠が同じでも、黒い部分の面積は同じではありません。

横組みと縦組み

横組みを 90 度回転すれば縦組みになるわけではありません。文字の向き、約物、括弧、長音、禁則、行の進む方向が関わります。CSS の writing-mode と text-orientation は実装の入口ですが、内容と書体が縦組みに適しているかまで自動で決めません。

和欧混植

日本語と英単語のサイズを CSS 上で同じにしても、見かけの高さや密度が合わない場合があります。機械的に倍率を決めず、本文、見出し、数字、コード等の用途ごとに比べます。

「日本語はこう組む」を固定しない

Japanese Text Layout の要件は重要な参照ですが、日本語タイポグラフィが一つだけあるわけではありません。時代、媒体、縦横、書体、出版／UI／広告の目的で選択が変わります。規範を知り、どこを意図して変えたかを説明できるようにします。

7.7 Web フォントは読み込み中にも画面を変える

デザインツールでは一枚の完成画面を見ます。Web では、フォントファイルがまだ届いていない時間、取得に失敗した状態、利用者の端末に別フォントしかない状態があります。

font-family は一つの見た目を保証しない

ブラウザは指定されたフォントファミリーのリスト、利用可能な書体、ウェイト、スタイル、言語、文字の収録範囲等からフォントを選びます。一つの文章内でも、含まれない文字だけ別フォントになることがあります。必要なウェイトやイタリック体がなければ、合成される場合もあります。

開発者向け機能で、指定値だけでなく実際に使用されたフォントを文字単位で確認します。

読み込み中の三つの状態

1. テキストが一時的に見えない
2. 代替フォントで読め、後から Web フォントへ置き換わる
3. Web フォントが届かず代替フォントのままになる

実装では状態遷移を固定します。

未要求 → 読み込み中 → 利用可能 → 適用済み

未要求 → 読み込み中 → 失敗／タイムアウト → 代替フォントを維持

再試行、キャッシュ済み、オフライン、フォントの一部だけ成功、ページ遷移中の取消も記録します。フォント適用の完了を、画面全体の準備完了や内容取得完了と同一視しません。

FOIT、FOUT という実務語で呼ばれることがありますが、仕様の正式な状態名と同一視しません。font-display は表示方針へ関わりますが、一つの値で全問題が解決するわけではありません。

代替フォントと Web フォントの字幅が違えば、改行、カードの高さ、ボタンラベルの幅が変わります。置換時に読み位置がずれ、押そうとしたボタンが動く可能性もあります。フォントリクエストの時間、描画、レイアウトシフト、実際の改行を記録します。

速さ、安定、表現のトレードオフ

Web フォントを使わなければ常に正解でも、すべて読み込むのが正解でもありません。必要な文字体系とウェイト、サブセット、可変フォント、キャッシュ、先読み、代替フォント、メトリクス上書き等を検討します。ただし、性能施策をフォントの見た目だけから決めません。

利用者の変更へ耐える

200% 文字拡大、文字間・語間・行間・段落間隔の利用者スタイル、最小フォントサイズ、ハイコントラスト等で確認します。コンテナの固定高さ、文字を画像化したボタン、overflow: hidden による切れを探します。

CSS の値を守ることではなく、利用者が文字を自分に合わせても内容と機能が残ることが目的です。

発展――ブラウザで答え合わせする

開発者向け機能で、実際に描画されたフォント、ネットワークリクエスト、計算済みスタイル、パフォーマンス上のレイアウトシフトを確認します。機能名はブラウザと版で変わります。利用できない場合は、フォントファイルを意図的にブロックしたスクリーンショット、document.fonts の状態ログ、改行数と要素矩形の記録で代替します。値を見る前に、どの文字が代替フォントか、どの行が変わるかを予想します。

7.8 書体の印象は普遍的ではない

書体見本に「誠実」「未来的」「女性的」「高級」と書かれていることがあります。選択の入口にはなりますが、書体の本質的な性格として暗記しません。

印象評定には、次が関わり得ます。

• Glyph の形と組版
• 表示された語と文章の意味
• 過去にその書体を見た媒体や Brand
• 書体名や作者についての知識
• 言語、地域、世代、専門経験
• 選択肢として与えられた評定語
• サイズ、色、画像、余白等の文脈

図 F08 では、平均値だけで「この書体は親しみやすさ 8 点」と結論しません。個人ごとの Dot を残し、書体名を見せる前後、用途を変えた前後を比べます。

教材の模範値を作るために架空の調査結果を載せません。読者自身の回答を置く空の Template と、観察の書き方を示します。

私は書体 A を「静か」と評定した。線幅のコントラストがあり、見かけの字面が小さく、広い文字間と余白の中へ置かれていたことが関係した可能性がある。ただし、文化施設で見慣れた経験と、書体以外の間隔も代替説明になる。

印象を否定するのではなく、形、文脈、経験へ分解して疑います。

7.9 問い――この文字組みは、何をどう読ませているか

文化祭の出演者詳細画面を見ます。出演者名、日時、会場、400 字の紹介、注意、申込ボタン、日本語と英語のグループ名があります。Web フォントは通信条件によって遅れて表示されます。

基準条件

390px 幅、日本語横組み、100% ズーム、Web フォント取得成功から始めます。次に一軸ずつ、1280px、200% 文字拡大、間隔上書き、フォント遅延、フォント失敗、縦組みへ変えます。内容と意味構造は固定します。

操作と記録の順序

1. 注釈なしで 30 秒見て、最初に気づいた文字と読んだ順序を記録する
2. 開催時刻を探し、見つけるまでの操作と戻りを記録する
3. 紹介文を読み、内容質問へ答える
4. 造形の重ね表示で、印象の根拠となる形を指す
5. 意味構造の重ね表示で見出し順を確認する
6. フォント遅延、失敗、200% 文字拡大、間隔上書きを一つずつ再現する

記録表は「条件／観察／解釈／代替仮説／変更する一軸／確認指標」の 6 列にします。最初の 6 問について、空欄のまま終わらない回答観点を次の例で示します。

問い

1. 最初に目へ入った文字は何か。最初に読んだ情報は何か
2. 文字のどの形と組み方が、どんな印象に関係したか
3. 一文字の識別、情報探索、文章読了、理解のどこに問題仮説があるか
4. 視覚的階層と HTML の見出し構造はどう対応するか
5. 代替フォントへ変わると、文字、改行、位置、読み続け方の何が変わるか
6. 200% 文字拡大と間隔上書きでも、内容と操作が残るか

答えの例

以下は六つの問いへ対応する回答観点です。文章を一致させる模範解答ではなく、観察と解釈を分けるための Rubric です。

1. 最初に見たもの: 要素名、Size、Weight、位置を記し、「重要だから見た」とはまだ結論しない。
2. 印象と形: 印象語に加え、具体的な文字、線、ふところ、字面、間隔を指す。文脈や経験を代替仮説にする。
3. 読む課題: 誤読、探索時間、読了、内容正答、位置喪失、好みのどれかを選び、測定法を書く。
4. 二つの階層: 視覚上の読む順序と、Heading をたどる意味順序を別々に記録する。
5. 代替フォント: 実際に使用されたフォント、改行数、要素矩形、置換時刻を Before／After で比べる。
6. 変更耐性: 文字拡大と間隔上書きを別試行にし、切れ、重なり、横スクロール、操作不能の有無を記録する。

出演者名が 32px、700 ウェイトで最も大きく、日時は 14px、400 ウェイトで本文と同じ明度に見える。私は出演者名を先に読み、開催時刻を探す課題では本文を二度往復した。問題があるなら「メリハリ不足」ではなく、課題上必要な日時と本文の視覚差がサイズ、ウェイト、間隔のいずれにもほぼ表れていないことが候補になる。

紹介文は一文字ずつ識別できるが、幅 390px で一行約 19 字、行高 1.1、段落間隔 0 のため、改行が密集している。読み位置を失ったという観察があれば、行高だけを 1.1／1.5 で変え、読了時間、位置喪失、内容質問を比べる。ただし、1.5 を全員の最適値とは結論しない。

Web フォント遅延時、代替フォントでは英語グループ名が一行に収まり、置換後に二行になって CTA を下へ押した。フォントが美しいかではなく、字幅差と置換時のレイアウトシフトを観察した。メトリクスの近い代替フォント、表示方針、レイアウトの耐性を別々に試す。

別の答え方

日時の発見が遅い理由はタイポグラフィだけでなく、出演者画像の近くに置かれたバッジ、日時ラベルの文言、情報順序かもしれません。文字の階層を変えても改善しなければ、位置、まとまり、タスク理解を調べます。

書体を「親しみやすい」と感じた理由も、丸い端部ではなく、文化祭という語、暖色の写真、過去のブランド経験かもしれません。文字だけの条件、文脈付き条件を比べます。

ここで章題の「声」を観察へ戻します。「優しい声に見える」で止めず、「仮名のふところ、線端、字面、文字間を私は柔らかい印象と結びつけた。用途と経験による別の説明がある」と書ければ、他者と比べ、次の画面で疑えます。

よくある考え方

Sans Serif だから Web で読みやすい。見出しは太く大きくすればよい。

注意点

分類名だけで、個々の字形、Size、表示条件、言語、課題を説明できていません。大きく太い見出しが増えれば、階層同士が競合する可能性もあります。何を識別し、何を探し、何を読み続けるのかを決めます。

必須セルフチェック

• 印象語を、Glyph の形と組版上の観察へ書き換えられる
• 文字識別、文章読了、理解、好みを別々に確かめられる
• 意味構造、代替フォント、ズーム、間隔変更後にも読めるか確認できる

発展セルフチェック

• CSS 値と実際に使用された Font／Glyph を区別できる
• 日本語と欧文の尺度、横組みと縦組みの条件を記録できる
• 書体の印象を文化や用途を越えた性格表にしていない

参考

• W3C, CSS Fonts Module Level 4. Font Matching、Synthesis、font-display 等を確認する仕様です。https://www.w3.org/TR/css-fonts-4/
• W3C, CSS Font Loading Module Level 3. Font の Load 状態と API を確認する仕様です。https://www.w3.org/TR/css-font-loading-3/
• W3C, Requirements for Japanese Text Layout. 日本語組版の要件を調べる詳細資料です。必要な節から読む資料です。https://www.w3.org/TR/jlreq/
• W3C, CSS Writing Modes Level 3. 横書き、縦書き、文字方向の実装上の定義を確認できます。https://www.w3.org/TR/css-writing-modes-3/
• W3C WAI, Understanding SC 1.4.12: Text Spacing. 利用者による Spacing 変更への耐性を確認する公式解説です。https://www.w3.org/WAI/WCAG22/Understanding/text-spacing
• W3C WAI, Understanding SC 1.4.4: Resize Text. Text 拡大の達成条件を確認する公式解説です。https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• W3C WAI, Understanding SC 1.4.8: Visual Presentation. 調整可能な本文表示を扱う AAA の解説です。数値を最適値として読まないでください。https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html
• Legge, G. E. and Bigelow, C. A. (2011), “Does print size matter for reading?” 文字 Size と読書 Performance の研究を整理した Review です。日本語 Web 画面の固定 px 規則としては読まないでください。https://pubmed.ncbi.nlm.nih.gov/21828237/
• Jordan, T. R. et al. (2017), “A Further Look at Print Personalities: The Perception of Personality in Typeface.” 書体への人格評定を扱う研究です。結果を他言語へ一般化せず、方法と条件を確認します。https://doi.org/10.3389/fpsyg.2017.01229
• Sheen, M. et al. (2025), “A Further Look at Perception of Personalities in Typefaces: Evidence From Turkish.” 別言語での書体印象研究です。専門的です。https://doi.org/10.1177/00332941241310125
• WHATWG, HTML Standard: Headings and Sections. 視覚表現とは別に、見出しの意味構造を確認する仕様です。https://html.spec.whatwg.org/multipage/sections.html#headings-and-outlines
• OpenType Specification. Glyph、Metrics、Variation 等の Font 技術を確認する仕様です。書体史そのものの資料ではありません。https://learn.microsoft.com/en-us/typography/opentype/spec/

検索キーワード: typeface personality perception、legibility readability typography measurement、Japanese typography JLREQ、font fallback metrics layout shift、WCAG text spacing、variable font optical size