日本語フォント / 長文比較
日本語フォントを雰囲気だけで選ばない:長文の読みやすさを比較
見出しの印象だけで決めにくいときは、本文の長さと表示条件をそろえて比べます。候補の優劣を点数で決めるのではなく、自分が使う文章を複数の組み合わせで読み、確認点を記録するための手順です。
比較する文章と条件を決める
短い見出しだけでは、句読点が続く段落、数字、英字、長い文が折り返す様子まで見えません。まず実際に載せる文章から、画面上で確認してよい範囲を選びます。公開前の原稿や個人情報は入力せず、架空文か公開可能な文章を使ってください。
例文を自作するなら、操作手順や機能説明など、見出しと数段落が続く形にします。日本語の句読点、数字、英字が実際に含まれる原稿であれば、その箇所の字形や混植の様子も確認できます。長い本文は最大1,200字まで入力できます。
最初の比較では、見出しの太さ600、本文の太さ400、行間1.8、字間0.02em、折返し幅32chのように各項目を固定します。どれか一つだけ調整したい場合も、先に基準値をメモし、フォントの組み合わせと文字設定を同時に動かさないようにします。
4枚のカードを同じ長文で比べる
- 「比較ツール」を開き、見出しと本文へ同じ文章を入力します。短い見出しと複数文の本文を分けて指定します。
- 文字設定を決めたら、まず3つの既定カードと「私の組み合わせ」を並べて見ます。4枚には共通の本文・見出しと、共通の太さ・行間・字間・幅が反映されます。
- 本文の始めだけでなく、中ほどと末尾まで読みます。折り返し、句読点、数字や英字が並ぶ箇所、見出しと本文のつながりを確認します。
- 気になる箇所があれば、使った文章と設定値を変えずに、まず見出しまたは本文の書体だけを入れ替えます。その後、行間や幅を一項目ずつ変えて、どの変更で見え方が動いたかを記録します。
手元のメモ(紙など)に「行末で単語が不自然に分かれて見えないか」「数字や英字の大きさが急に変わらないか」「長い段落で行間が窮屈に感じないか」など、自分が気づいた内容を書きます。ツール内に比較メモを入力する欄はありません。これは比較のメモであり、読みやすさを測定したり、利用者全体の好みを代表したりする評価ではありません。
書体名が同じでも、表示は端末で変わる
日々の書見台はフォントデータを配布せず、候補名を優先順に並べたCSSをカードへ適用します。候補の検出表示は、その端末のブラウザがローカル書体を試せたかを示す手掛かりです。CSSへ書かれた最初の候補が実際のすべての文字に使われるとは限らず、字形がない文字は後続フォントへ進むことがあります。
幅の「32ch」は日本語32文字分と同じ幅を保証する指定ではありません。CSSの ch は書体の数字「0」の送り幅を基準にする単位です。行の折り返しはフォントと表示環境で変わるため、幅の異なる画面でも確認してください(W3C CSS Values and Unitsのch単位)。
候補を決めた後は、実際に掲載する端末・ブラウザ・画面幅で確認します。端末に未導入の書体を使う場合は、提供方法とライセンス条件を確認し、コピーしたCSSが掲載先のクラス名に合うよう調整してください。
比較メモを残す
記録する項目:見出しと本文の候補名、使った文章の版、太さ・行間・字間・折返し幅、確認した端末とブラウザ、気になった箇所。
ひとつの候補がすべての画面や文章に合うとは限りません。紙面の見栄えだけでなく、実際に使う段落、フォールバック、ライセンスを合わせて確認します。
すでに候補を4組で並べる短い読書会例は架空の読書会案内の記事、書体が変わらない場合の切り分けはフォント表示の確認記事で扱っています。ここでは短い案内の見比べから一歩進め、長い本文を同じ条件にそろえる方法に焦点を当てました。