タイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。まずは見出しと本文を組み合わせて「箱組み」を組んでみます！ポイントは「行長」「行間」「ジャンプ率」です。
【目次】
箱組み
箱組み（はこぐみ）とはなにか。箱型に文字を組むから箱組み。長い文章（本文）を四角いブロックの中に流し込んで画面にレイアウトすることです。
HTMLでいうと段落pタグで囲った文章のことです。この段落pタグと見出しhxタグのセットをsectionタグで囲ってセクショニングします。
<!--セクショニング--> <section class="hakogumi"> <h2>箱組み</h2> <p>祇園精舎の鐘の声、諸行無常の響あり。娑羅双樹の花の色、盛者必衰の理を顕す。奢れる人も久しからず。ただ春の夜の夢の如し。猛き者もつひには滅びぬ、偏に風の前の塵に同じ。</p> </section>
行長
「行長」とはなにか。「ゆきなが」ではありませんw「ぎょうちょう」と読みます。
文字通り「行」の長さですね。1行あたりの文字数で表します。こちらをご覧ください。
同じ文章でも行長によって読みやすさが変わりますよね！10文字はせわしく、50文字は長い、と感じませんか？
行の折り返しの部分が一呼吸の役割を担っています。あまりに折り返しが多すぎると目が疲れるし、少なすぎると頭が疲れますね。
一般的には「35文字〜45文字」ほどが適度な行長と言われています。
CSS設定の例でいうと、例えば一文字が15pxサイズ*1の場合は35文字だと段落p要素の幅widthは525pxになります。
p { width: 525px; /*行長35文字*/ font-size: 15px; }
スマホの場合はもう少し幅が狭くなりますね。折り返しは20文字ちょっとくらいでしょうか。
行間
次は「行間」です。「ぎょうかん」と読みます。本文の行と行の間隔のことです。こちらをご覧ください。
行間の数値にはいくつかの表記の仕方があります。今回は文字サイズに対して1行の長さが何倍かで著します。
1倍はキツキツで「無いな」と感じませんか？下手すると縦書きか横書きかもわからないくらいw 1.25倍でもまだキツイです。*2
一般的には「1.5倍〜2倍」ほどが適度な行間と言われています。
2倍を超えるとかなりゆったりした見た目になりますね。余白が多めのデザインのコピーなどに使われます。
これはCSSでいうところのline-heightの相対値にあたります。本記事では1.5〜2倍の中間の1.75倍を採用して次に進みます。
p { width: 525px; font-size: 15px; line-height: 1.75; /*行間1.75倍*/ }
ジャンプ率
最後にジャンプ率です。ジャンプ率とは、「本文」と「見出し」のサイズ差のことです。元気のいい名前ですね。こちらをご覧ください。
ジャンプ率が100%だと文字サイズの差が等倍で、一見すると見出しとわかりません。フォントの太さを変えているのでかろうじで識別できます。
125%でもまだ明確ではない感じがしますね。150%以上になるとわかりやすくなってきますね。
一般的なWebページでは「150%〜200%」ほどがよく使われるサイズです。
h2 { font-weight: bold; font-size: 1.5em; /*ジャンプ率150%*/ }
ただし、サイトのメインビジュアルやバナー広告などではもっとメリハリをつけてコピーを立たせるために300%以上などもありえます。
ちなみに本記事の図の中で色文字になっている「行長」「行間」「ジャンプ率」の箇所は400%のジャンプ率です。
ジャンプ率ジェネレーター作成
（2021/04/06追記→5/5リンク修正→8/16リンク追記）
ジャンプ率ジェネレーターを作りました！
※参考：ジャンプ率ジェネレーター
使い方
ソースコード
※参考：GitHub - ryo-i/jump-rate-generator-2
ソースの詳細まとめ
※参考：【React】ジャンプ率ジェネレーターをNext.jsで作り直した（Next.js + TypeScript + CSS in JS） - クモのようにコツコツと
最後に
「行長」「行間」「ジャンプ率」をまとめると…
- 行長：1行あたりの長さ（「35文字〜45文字」ほどが適度）
- 行間：本文の行と行の間の間隔（「1.5倍〜2倍」ほどが適度）
- ジャンプ率：本文と見出しのサイズ差（「150%〜200%」ほどがよく使われる）
ひとまずこの感覚がつかめれば画面上にテキストをレイアウトすることができるかと思います！
Webブラウザのフォントはシステムフォントの場合、ゴシック体になります。太さ（font-weight）もnormalかboldの2種類くらいです。
最初はとにかくゴシック体のテキストを画面にガンガン配置してみましょう！それではまた。
※参考：「デザインの基本」記事まとめ
qiita.com
