ハイクオリティな画像や動画クリエイティブをお届けするKenToのデザイナーチームがお届けする、デザイン基礎の極意をお届けするクリエイティブ講座コーナー。前回の記事でフォントの太さや与えるイメージについて勉強しましたが、今回はその知識を備えた上で、さらに文字列を組む上で知っておいた方がいい文字・文章の構造の設計についてお伝えします！
文字組みとは
文字組みとは、字間・行間・サイズを調整することで視認性・可読性を高くし、文章の内容を分かりやすく伝えるためにする作業です。
それではなぜ文字組みをする必要があるのか、文字・文章に関する構造と設計について知っていきましょう。
和文書体の設計
「和文書体」は、ボディという原稿用紙のマス目のような正方形の枠の中に収まる形で作られています。漢字・ひらがな・カタカナの全てが、この枠の中に入るようにデザインされています。
活版印刷では、活字という金属などで作られた印鑑のような「ボディ」が存在しました。現在はデジタル印刷が主流となり、デジタルフォントでは活字のボディの考えを引き継いだ仮想ボディが生まれ、さらに文字は仮想ボディいっぱいに収まるわけではなく、その内側にもう少し小さく設定された枠の中で設計されています。
その文字の形の部分を「字面」、字面の枠を「字面枠（レターフェイス）」と言います。
欧文書体の設計
アルファベットは書体構成がシンプルなため、エレメントの形状やルールが厳密に決められています。
「欧文書体」構造は5本の水平な仮想ラインとxハイトを基本に設計されており、仮想ボディが一定の和文書体に対して、欧文書体は文字の幅が字面に合わせて変化します。
ラインの種類
欧文書体の仮想ラインは下記のように12種類で設計されています。
1.アセンダーライン（ascender line）：小文字の中で「xハイト」より上の「アセンダー」と呼ばれる、文字の天井を揃えるライン
2.キャップライン（capital line）：キャピタル（大文字）の天井を揃えるライン
3.ミーンライン（mean line）：アゼンダーラインの部分を持たない小文字の天井を揃えるライン
4 ベースライン（base line）：欧文書体の基準となるライン
5.ディセンダーライン（descender line）：小文字の中でベースラインより下に突き出ている部分を「ディセンダー」と言い、一番下を揃えるライン
6.xハイト（x height）：フォントの基準となる高さの一種。アゼンダーラインを持たない小文字のベースラインからミーンラインまでの高さ
7.キャップハイト（cap height）：フォントの基準となる高さの一種。大文字のベースラインからキャプラインまでの高さ
8.サイドベアリング（side bearing）：仮想ボディの字面の左右の余白
9.ショートレター（short letter）：ベースラインからミーンラインまでの高さに収まる文字「amo」など
10.アセンダーレター（ascender letter）：ベースラインからアセンダーラインまでの高さに収まる文字「bfk」など
11.ディセンダーレター（descender letter）：ディセンダーラインからミーンラインまでの高さに収まる文字「gpqy」
12.ロングレター（long letter）：ディセンダーラインからアセンダーラインまでの高さに収まる文字「j」
「字間・字送り」と「行間・行送り」
文字と文字の間にできる空間のことを「字間」、前行と次行の間にできる空間を「行間」と呼びます。
字間：文字の左右の枠（仮想ボディ）の間隔をさします。
行間：文字の上下の枠（仮想ボディ）の間隔をさします。
字送り：文字の左右の枠（仮想ボディ）それぞれの中心から中心までの間隔をさします。（文字サイズ＋字間）
行送り：文字の上下の枠（仮想ボディ）それぞれの中心から中心までの間隔をさします。（文字サイズ＋行間）
文章をパソコン上でレイアウトをする際は、文字情報は自動的に表示されます。その時、形の異なる文字が並ぶと間隔がバラバラになり、非常に読みづらい状態になってしまいます。
これらは、和文書体の仮想ボディに対して字面枠が漢字・ひらがな・カタカナそれぞれで異なっていたり、欧文書体では仮想ボディの設計が和文書体と異なるため発生する現象です。
デザインをする上で、このバラツキを文字組みで調整する必要があります。
まとめ
- 文字組みとは、字間・行間・サイズを調整することで視認性・可読性を高くし、さらに文章の内容を分かりやすく伝えるためにする作業
- 和文書体の仮想ボディに対して字面枠が漢字・ひらがな・カタカナそれぞれで異なっていたり、欧文書体では仮想ボディの設計が和文書体と異なるためバラツキが発生する
- デザインをする上で、このバラツキを文字組みで調整する必要がある
いかがでしたか？前回の文字のデザインや太さだけでなく、文字の組み方を意識することが大切です。文字と文字の間がぎゅっと狭かったり、逆に広すぎたりすると、読みづらいだけでなく読み手に伝えたい情報が伝わりにくくなってしまうので、和文・欧文書体の特徴を意識した上でバラツキなどを調整しながら、文字組みをしていきましょう。
次回は、本記事の続きとして「文字組みの基礎」について解説していきますので、お楽しみに！
KenToでは、様々なジャンルのバナー・動画クリエイティブ、ランディングページ制作などを承っております。こちら以外にもご希望があれば臨機応変に対応いたしますので、是非お気軽にお問合せください。