用途別の実例 / 架空のイベント案内
読書会の案内文を、4つの組み合わせで見比べる
告知ページを作る前に、見出しは目に留まり、日時や定員は探しやすいかを同じ文章で比べる例です。ここで使うイベント・場所・日程・料金はすべて架空です。
目的と入力例
目的は、架空の読書会案内に合う見出しと本文の書体の組を選ぶこと。参加者の実測や読みやすさの証明ではなく、制作前に候補を並べて選ぶための試し刷りです。
見出し
秋の読書会｜三冊と、一つの問い
本文
架空の港町にある読書室で、小さな読書会を開きます。日時は2026年10月18日 14:00〜15:30。参加費は500円、定員は8名です。申込みは10月11日 18:00まで。短編小説、詩、エッセイから一冊ずつ持ち寄り、英語タイトル「The Little Book」と数字123も紙面に入る想定です。
架空例の扱い：地名、開催、日時、料金、定員、締切、英語タイトルは紙面比較用に作った設定です。実在イベントへの案内や実施結果ではありません。
手順
- 比較ツールを開き、見出しと本文を上の例に置き換えます。
- 最初は既定値を保ちます。見出しの太さ600、本文の太さ400、行間1.8、字間0.02em、折返し幅32chです。
- 3つの既定カードと「私の組み合わせ」を並べます。カードごとの見出し・本文フォントの対応は次の通りです。
- 書体の組だけを先に見比べます。その後に全カード共通の太さ、字間、行間、折返し幅を調整し、変更前と同じ案内文で再確認します。
- 採用候補を決めたら、実際に載せる端末・ブラウザ・画面幅でもう一度見ます。CSSを使う場合は書体提供元と利用環境のライセンス条件を確認します。
| カード | 見出し | 本文 | 比較の観点 |
|---|---|---|---|
| 文芸 | ヒラギノ明朝 ProN | 游明朝 | 見出しと本文が明朝系で続くときの調子 |
| 端正 | 游明朝 | ヒラギノ角ゴ ProN | 明朝とゴシックの役割差が案内に合うか |
| 現代 | ヒラギノ角ゴ ProN | 游ゴシック | 同系統の中で見出しと本文の強弱が出るか |
| 私の組み合わせ | 候補から選択 | 候補から選択 | 自分の端末で試したい組を追加 |
表はツールのカード定義を写したものです。端末にフォントがない場合はCSSの次候補へ進むため、画面上の字形が表の書体名どおりになるとは限りません。
期待する結果と確認用のメモ
4枚のカードすべてに、同じ見出し・本文が表示されます。カード間では指定する書体の組が違い、太さや行間などのつまみは4枚に共通で反映されます。自動で「最適な組」を決める機能や、読者評価の点数は出ません。
候補を選ぶメモ：次の項目を、各カードを読みながら自分で確認します。
□ 見出しだけを見ても、読書会の告知だと分かるか
□ 日時・参加費・定員を本文から探しやすいか
□ 「The Little Book」、123、句読点が日本語と一緒に並んでも違和感がないか
□ 本文の改行位置と行間が、想定する画面で読み進めやすいか
このメモは比較の観点をそろえるための独自チェック項目です。回答者調査や可読性試験の結果ではありません。選択は媒体の幅、本文の長さ、採用先のフォント環境で変わるため、実際の掲載面でも確認してください。
制約とツールへの導線
このツールはフォントファイルを取得・配布せず、候補名とフォールバック名をCSSに出力します。候補の検出表示は端末とブラウザに依存し、出力CSSを別のサイトへ貼るときは、そのページのHTML要素に合うセレクターへ調整が必要です。
折返し幅の「32ch」は日本語32文字を固定幅で並べる指定ではありません。CSSのchは要素のフォントにおける数字「0」の送り幅を基準にするため、選んだ書体や環境によって行の長さが変わります（W3C「CSS Values and Units Module Level 4」）。
同じ入力で比較を始めるには、日々の書見台の入力欄へ戻ってください。書体を選ぶ順番はトップの三つの目印、コピーしたCSSが効かない場合はフォント表示とCSSの切り分けを参照できます。
この入力例で比較する