「レタースペーシング」を2025年03月10日に読んだ。
目次
- メモ
- レタースペーシングとは p4
- レタースペーシングが大切なワケ p4
- 用語辞典 p10
- 1-1 レタースペーシングのプロセス p14
- 文字と文字をつなげるゲシュタルトの法則 p16
- ゲシュタルトの法則とレタースペースの関係 p16
- 狭すぎるラインスペースに注意 p20
- 文字の真ん中はどこにある? p28
- 左右非対称な図形の場合 p28
- 左右非対称な文字への応用 p30
- 誰もが許容できるエリアを知る p40
- 3文字スペーシングのプロセス p42
- 最終判断は感覚に頼る p42
- 効率を上げるために基準を決める p44
- 特殊な字形同士の組み合わせに注意 p44
- 単語を複数グループに分割する p46
- 2-8 客観視のコツ p48
- 左右反転してみる p48
- 平体をかける p48
- カメラ越しに見る p48
- 3-1 文字の形状を知る p52
- 文字の上下を安定させるための工夫 p52
- 組版=テキスタイル p56
- レタースペースとワードスペースの差別化 p56
- 量感とは? p66
- 文字の量感 p66
- 大きい文字と小さい文字の違い p72
- オプティカルサイズ対応のフォント p72
- 黒い文字と白い文字の違い p74
- インキの広がりに注意 p74
- 液晶画面のバックライトに注意 p74
- 03 漢数字の「一」はどこまで詰める? p80
- 地に足のついた欧文と吊るされた和文 p112
- 和文の欧文的な配置方法 p112
- プロポーショナルメトリクス p126
- メトリクス p126
- 各フォントの詰まり具合の違い p128
- 拗音と促音 p140
- 教科書で習う小書き文字と活字の違い p140
- p141
- 助詞の役割 p142
- 和文の構造を活かす p142
- p143
- 6-4 ワードスペースの影響 p154
- 欧文単語の数に依存した見え方の変化 p154
- 欧文と和文が合わさった言葉の場合 p154
- p155
- 6-6 文字の比率調整による効果 p158
- 長体 p158
- 平体 p158
- 感覚を分解する p190
- この数年を振り返って p190
メモ
レタースペーシングとは p4
「レタースペーシング」という言葉をご存知でしょうか。
デザインに携わっている方なら、耳にする言葉かと思います。
簡単に言うと、見出しやロゴタイプなどの文字の間隔を視覚的に均等に見えるように調整する作業のことです。
フォントをただタイピングしたままだと、文字の形や並びによっては均等に見えないことがあるので、それを手作業で補完します。
似た意味として「字詰め」や「カーニング」などとも呼ばれます。
デザインの現場では、レタースペースの調整は初期に学ぶ基礎項目に分類されます。
しかし、そんな基礎スキル的位置づけにもかかわらず、スペーシングの考え方が言葉として説明されることは少なく、感覚的表現で語られがちな分野でもあります。
またその感覚はデザイナーや見る人によって異なるため、スペーシングを学ぼうとしても何を基準にすればいいのか、とても分かりづらいものです。
迷いなく自分が最良と思うスペーシングをできていれば問題ありませんが、もしあなたが手癖でなんとなくスペーシングを行っていて自分の文字組みに自信がない場合、今一度自分のスペーシングに疑いの目を向けてみてもよいかもしれません。
レタースペーシングが大切なワケ p4
デザイナーには、デザインを見る人がスムーズに目的の情報を得られるように掲載内容を理解して、その情報を分かりやすく配列する責任があります。
いわゆるレイアウトの技術です。
それはポスターやチラシ、WEBサイトなど、様々な媒体に共通して求められます。
全体のレイアウト技術が紙面設計の主な骨格に関わることは間違いありません。
しかし、全体に気を使うあまり細部に気が回らず、見出しなどのレタースペーシングは後回しにされがちです。
ポスターの構造をレストランに例えて考えてみましょう。
伝えるべき内容が提供される料理。
内容を読みやすくするためのレイアウトや本文組版が、料理を気持ちよく食べるための清潔なお皿やカトラリー。
その本文へ呼び寄せるためのキャッチコピーや見出しは、店構えや入り口にいるホールスタッフにあたるといえるでしょう。
スペーシングとは見出しの身だしなみを整えるための大切な行程です。
どんなに素敵なもてなしが店内に用意されていても、みすぼらしい店構えや雑な呼び込みでは、その先へ誘導することはできません。
お客さま(読み手)が、最初のタッチポイントからお店を離れるまでの一連の流れを意識して“体験”をつくることが大切です。
用語辞典 p10
フォント
本来は文章を組む上で必要となる共通したデザインの文字セットのこと。
現代ではデジタルフォントを指すことが多い。
タイポグラフィ
活字を適切に配列することで文字の体裁を整え、メッセージを伝達させるための組版技術。
レタリング
タイトルや見出しなどの文字を目的にあわせてデザインすること。
本来は「手で文字を書く」行為のこと。
字体
文字の骨組みの概念。
同じ線でも横線を3本だと漢字の「三」となり、縦に並ぶと「川」となる。
字形
印刷、ディスプレイ、書き文字などにおいて、人間の目が実際に視覚的に捉えることのできる文字の形のこと。
字種
同じ音や意味で形だけが違う文字を異体字という。
異体字は同じ字種。
「亜」「亞」や「吉」「𠮷」は同じ字種。
「未」「末」は異なる字種。
書体
明朝体、楷書体、角ゴシック体などのような文字の抽象的な様式のこと。
また小塚明朝などのように、フォント名を指すこともある。
グリフ
フォントの構成要素。
字形パネルでグリフを見ることができる。
フォント内に含まれる文字や記号すべてをグリフセットとも呼ぶ。
活字
本来は組み替えることのできる文字のこと。
「金属活字」「写植活字」「電子活字(デジタルフォント)」などがある。
骨格
文字の形を構成する芯の部分。
この骨格によってふところの広さや重心が決まる。
同じフォント内ではこれらの統一性が求められる。
エレメント
主に骨格に対して施される起筆、転折、終筆などの形。
エレメントの違いによって雰囲気は大きく変わる。
重心
文字ごとの中心点。
数学的に計った点よりも視覚的中心に見えるものを指すことが多い。
カウンター(ふところ)
文字を構成する画線によって生まれる内側の空間。
和文の場合「ふところ」と呼ばれる。
ボディ(仮想ボディ)
金属活字そのものの大きさを指す。
デジタルフォントや写植では物体がないので「仮想ボディ」と呼ばれる。
字面
和文フォントのボディに対しての文字の部分。
ベタ組みでも文字同士がくっつかないのは、ボディよりも小さく字面が設計されているため。
サイドベアリング
ボディの中に配置された文字の左右にあるスペース。
サイドベアリングの広さによって、実際に文字が並んだときのレタースペースが決まる。
ベースライン
欧文において、「H」や「n」などが乗っている仮想線。
「O」や「V」は視覚補正のためにわざとラインから飛び出させているフォントが多い。
エックスハイト
ベースラインから測った小文字「x」の高さの名称。
小文字の上部の高さを示す線をミーンラインと呼ぶ。
キャップハイト
ベースラインから測った「H」などの大文字の高さの名称。
大文字の上部の高さを示す線をキャップラインと呼ぶ。
アセンダー
エックスハイトから上へ飛び出している、小文字の部分の名称。
アセンダーの上部の高さを示す線をアセンダーラインと呼ぶ。
ディセンダー
ベースラインから下へ飛び出している、小文字の部分の名称。
ディセンダーの下部の高さを示す線をディセンダーラインと呼ぶ。
レタースペース
文字と文字の間にあるスペースのこと。
それぞれの文字は形が異なるため、レタースペースにもムラが発生してしまう。
ワードスペース
単語と単語の間にあるスペースのこと。
レタースペースの広さを考慮した上で調整する必要がある。
ラインスペース(行間)
行と行の間にあるスペースのこと。
広さによって文章の読みやすさに大きな影響を与える。
ウェイト
画線の太細の度合いのこと。
LightやBoldなどの言葉や数値で表す。
同じ名称でもフォントによって太さは異なる。
ファミリー
同一のコンセプトでデザインされた文字のウェイトや字幅などを、段階的に変えてつくられたグループのこと。
スペーシング
見出しやロゴタイプに対して、それらを構成する全体の字間が視覚的均等に見えるように調整する行為。
カーニング
字間の余白の広さを個別に調整する行為。
全体を指すスペーシングに対し、カーニングは特定の字間を指すことが多い。
トラッキング
選択したテキスト全体の文字間隔を調整する機能、または行為。
デジタルフォントでは手軽にできるため、注意が必要。
プロポーショナルメトリクス
和文デジタルフォントにおいて、個々のグリフごとに設定されている文字詰め情報を活用した自動文字詰め機能。
ペアカーニング情報
特定の文字の並びに合わせて自動で字間調整を行うための情報。
タイプデザイナーがひとつずつ設定している。
メトリクス
Adobe In Designなどでペアカーニング情報を作動させるための設定。
和文フォントの場合、プロポーショナルメトリクスと合わせて使う。
合字
複数の文字がつながった形になっているもの。
目的に応じて様々な合字がある。
リガチャーとも呼ぶ。
1-1 レタースペーシングのプロセス p14
まず、レタースペーシングの大まかなプロセスをご紹介します。
この本では、この流れを軸としながらレタースペーシングを様々な視点から考察していきます。
STEP1:文字の形やスペースの観察
文字はどれも個性的な形をしています。
すぐにスペーシングを始めあるのではなく、まずはこれから組む文字やスペースの特徴を観察してみましょう。
これによりスペーシングの質や効率が上がります。
STEP2:3文字ごとの分解と基準決定
文字量の多い単語のスペーシングは混乱の元です。
まずは単語を3文字ずつに分解して考えましょう。
その中から基準となるグループをひとつ選びます(ここでは「ING」を選択)。
「ING」の真ん中の文字である「N」が、左右の文字の中心に見えるように調整します。
ひとつのグループの調整が済んだら、他のグループも同じように調整していきます。
このとき調整する3文字の近くに、基準となる3文字を置いておくと比較しながら調整できるので、レタースペースのゆったり感を揃えることができます。
STEP3:統合とブラッシュアップ
それぞれのグループをひとつにまとめます。
“基準”をつくり“比較”することをまずは体感しましょう。
慣れてくればわざわざ単語をバラバラにしなくとも調整できるようになります。
ひとつの単語に戻したときに違和感がないか検証し、微調整して完成です。
スペーシングの質を高めるのはこの検証であり、スペースを見る視点が多いほど精度が高まります。
この本ではこの様々な視点をご紹介します。
文字と文字をつなげるゲシュタルトの法則 p16
「ゲシュタルトの法則」という言葉をご存知でしょうか?
人間の脳はふと複数のものを見たとき、ひとつずつバラバラに認識すると大変なので、隣接したものをグループ化して理解する特徴があります。
ひとつの見慣れた漢字をまじまじと眺めていると、ふと「こんな形をしていたかな?」と認識が曖昧になる現象を「ゲシュタルト崩壊」と呼びますが、これは細部を見すぎたために全体の形態(ゲシュタルト)を認識できなくなった状態を指します。
ゲシュタルトの法則はデザインの世界でとても活用されています。
例えば複数の要素をいくつかのグループで分けたいときに罫線などで囲ったり、余白のバランスを調整したりして、各要素を任意のグループに分ける手法はゲシュタルトの法則を応用したものです。
この現象を利用して世の中の多くのポスターやWEBサイトはレイアウトされています。
ゲシュタルトの法則とレタースペースの関係 p16
直接つながらずに隙間のあるそれぞれの文字が単語として人間の目にグループとしてまとまって見えるのは、ゲシュタルトの法則が関係しているためと考えます。
文字が2つ以上並ぶと、必ずその間にスペースが生まれます。
そのスペースが周りのスペースよりも狭いことにより、バラバラだった複数の文字が吸い付くようにつながり、ひとつのグループである「単語」として認識されやすくなります。
レタースペースの広さによって、読みやすさやその言葉から受ける雰囲気、ときには言葉の意味までも変化します。
狭すぎるラインスペースに注意 p20
ラインスペースが極端に狭いと人間の脳は読みづらさを感じます。
それはラインスペースを狭くすることで、1行ごとの存在が認識しづらくなるためです。
また、自分が今どの行を読んでいるのか分からなくなってしまう原因にもなります。
また、欧文組版のタブーとして「リバー」と呼ばれるものがあります。
ラインスペースがワードスペースに対して窮屈になることにより、1行1行がきれいな黒いラインに見えなくなることで、近接する上下のワードスペース同士がくっついて白いかたまりのように見える現象です。
この現象は横方向へいくべき目の動きを妨げ、読みづらさを感じさせます。
リバーを防ぐためには、ワードスペースが複数行にわたって白いかたまりになっていないかをその都度確認する視点が必要です。
文字の真ん中はどこにある? p28
まずは簡単な長方形のスペーシングを試してみましょう。
長方形が均等に見える位置というのは、真ん中の長方形の中心が左右の長方形の両端から均等の位置にある状態です。
長方形の中心に補助線を引くと3つの図形の関係が見える化されて分かりやすくなります。
真ん中の対象が、「H」や「O」のような左右対象の文字になった場合も同様です。
同じように補助線を中心に引くことでより、数値的にも視覚的にも均等に並んでいることがよく分かります。
左右非対称な図形の場合 p28
左右非対称の図形になった場合、この理論は通用するでしょうか。
横になった三角形を用意します(右図)。
まずは数値的に中心の位置に補助線を引いてスペーシングしてみましょう。
すると三角形は左へ大きくずれて見えてしまい、視覚的に均一なレタースペースとなりません。
このように目の錯覚によって、数値的に合わせた線がミ角形の中心ではなく、右に寄って見える現象のことを「三角形分割錯視」と呼びます。
次に補助線を数値的なものから視覚的に中心に見えるものに差し替えてスペーシングし直します。
すると先ほどまで左へずれて見えた三角形が、左右の長方形の中心に配置されて見えるようになりました。
このようにレタースペーシングは、数値的な中心ではなく視覚的な中心を基準に考えた方が違和感のない結果となります。
文字には様々な形があり、すべてが左右対象というわけではありません。
それぞれの文字の形の視覚的な中心を見つけることがレタースペーシングの鍵となります。
左右非対称な文字への応用 p30
「D」や「K」などの左右非対称な文字で試してみましょう。
これらの形も「視覚的な中心」と「数値的な中心」の位置に誤差が生じます。
そのため、それぞれの視覚的な中心はどこかを考え、その中心と左右の長方形の端が均等になることで、3つのレタースペースを視覚的均一に整えることができます。
つまり文字の視覚的な中心を見つけることで、その文字の適切な配置位置を見つけることができるようになります。
もし文字の視覚的な中心がどこなのかよく分からない場合は、字形を架空の四角いカードの中に入れてみてください。
文字が左右に揺れることなく、カードの真ん中に見える位置を見つけます。
そのときのカードの中心が、その文字の視覚的な中心です。
何度も練習することで、わざわざ補助線を引かなくとも文字の中心がどのあたりなのかが分かるようになります。
誰もが許容できるエリアを知る p40
人によって感じる文字の中心や端の位置が異なる時点で、万人が納得する100点のスペーシングを行うことは困難です。
しかし、多くの人に許容される平均点のスペーシングならば可能だと思います。
スペーシングに求められるポイントは、自分が感じる文字の中心や端の位置と他人が感じる位置のズレを知ることです。
そのためには、いろいろな人のスペーシングを観察したり自分のスペーシングに意見をもらうことで、他人と自分が持つ感覚の違いを把握してください。
そのズレ幅を理解した上で、自分がよいと思うあなた自身のスペーシングを行うことが大切です。
試行錯誤した回数だけ最適解に近づいていく。
そこにレタースペーシングの魅力があるのだと思います。
3文字スペーシングのプロセス p42
①まず各字形のシルエットの特徴を探します。
「O」は四隅にスペースがあり、「K」は右側に大きなスペースがあります。
「B」の左端は垂直です。
長方形と比べると特徴が分かりやすいです。
②真ん中の文字の視覚的な中心を探します。
「K」は右側のスペースの影響から実際の中心よりも左に重心があるのが特徴です。
③左右にある文字の視覚的な端を見つけます。
「B」の左端は垂直な形のため、実際の端と視覚的な端の位置は同じです。
「O」は四隅のスペースの影響で実際の端よりも内側に視覚的な端があります。
④3本の補助線の位置に目星をつけたら、それらが均等に並ぶように文字を配列します。
⑤補助線を取り除いた状態で、真ん中の文字が視覚的に中心に見えるかを確認します。
もしここで「K」が左右どちらかに寄って見える場合は、3本線のどれかがずれていたことになります。
その場合、②や③に戻って補助線の位置を再調整してみてください。
⑥最後に各々のパーソナルスペースが尊重されているかを確認します。
窮屈だったり空きすぎな箇所がなければ完成です。
最終判断は感覚に頼る p42
ここまでスペーシングについて3本の補助線を使って論理的に見てきました。
この線は、あくまでもスペーシングの感覚をつかむまでの補助輪です。
感覚をつかんだあとは、わざわざ線を引かずとも調整できるようになるでしょう。
効率を上げるために基準を決める p44
P.14でも触れたように、単語が4文字以上になるとスペーシングの難易度が上がるので、単語を3文字ずつに分けて考えるのをおすすめします。
そのとき、単純に前から順に調整して行けばよいわけではありません。
例えば「MOLA」をスペーシングする場合、「L-A」間はどうししても字間が空いてしまう文字の形をしています。
このとき前方にある「MOL」から順に調整してしまうと、後々「LA」の問題に気付き、結果「MOL」を調整し直す手間が生まれます。
そうならないために単語全体をまずは観察して、スペーシングが難しそうな箇所に目星をつけ、そこから着手しましょう。
そこがその単語のスペーシングの基準となります。
特殊な字形同士の組み合わせに注意 p44
単語内に「LA」や「VT」、和文では「日下」や「すつ」などのように、字形に依存してどうしてもスペースが空いてしまう組み合わせがある場合、この箇所が他のスペースと比べて極端に空いて見えないように調整をするのが基本です。
そのぽっかりと空いたスペースを、いかに他の箇所の調整で目立たなくできるかが腕の見せ所となります。
逆に「LT」や「VA」、和文では「千上」や「クノ」などのように、スペースを大きく詰めてもぶつからない組み合わせもあります。
P.36でも触れたように、いくらでも食い込ませていいわけではありません。
他にも「DO」や「のの」のように丸い輪郭同士がぶつかるものや「HO」や「のし」のように片方だけ丸いものなど、組み合わせを難易度ごとに分類することができます。
難しい並びがどんなものなのかを念頭に置きながら調整しましょう。
単語を複数グループに分割する p46
改めて文字数の多い単語のスペーシングプロセスを見てみましょう。
「SEPARATE」という単語の場合、まず「SEP」「EPA」「PAR」「ARA」「RAT」「ATE」に分割します。
そして、それぞれをこれまでのように3文字の単語と仮定して、真ん中の文字が左右の文字の中心に見えるようにスペーシングしていきます。
「A」の左右に空きが生まれやすいので、今回は詰める間隔に最も限界のある「ARA」を基準とします。
他のグループは「ARA」よりも物理的には詰められますが、程よいところで止めて「ARA」とのゆったり感が同じになるように意識します。
このとき、各グループの「EP」「PA」「AR」「RA」「AT」などの重複する箇所は同じパーツを使い回すと効率よく作業を進められます。
最後にすべてをつなぎあわせ、スペースが空きすぎたり詰まりすぎたりしている所がないかを確認して完成です。
このようにすると文字数の多い単語でもスペーシングがある程度均一になります。
この単語を分割する方法は、文字数の多い単語でも混乱せずに落ち着いてスペーシングするためのヒントです。
場数を踏んで自分なりの感覚をつかんだら、わざわざ分割せずに、全体を俯瞰しながら調整して問題ありません。
2-8 客観視のコツ p48
長時間同じものを眺めると目が慣れてしまい、自分のスペーシングを一時的に客観視できなくなります。
そういうときの解決方法をご紹介します。
左右反転してみる p48
単語の左右を反転させることで、文字ではなく記号として認識され、初見に戻った感覚でレタースペースを見ることができます。
ただし最後に本来の形での確認をすることを忘れないでください。
読む人と同じ状態で最終確認を行うことが肝心です。
上下を反転させる方法もありますが、これは正しい向きで見たときとの差異が大きいため、あまり推奨しません(P.64でお話しします)。
平体をかける p48
長い単語だと見るべき範囲が広いため、全体を見渡しづらくなります。
そこでコンピューター上で単語を平体に加工すると見るべき範囲が狭くなるため、レタースペースのムラに気がつきやすくなります。
似た方法で印刷したものを斜めから見る方法もありますが、この方法だと手前は大きく見えてしまい、逆に奥は小さく見えてしまいます。
するとレタースペースやカウンターの広さに意図しない変化が生まれてしまうので、正確な判断がしづらくなります。
カメラ越しに見る p48
スマートフォンなどのカメラのレンズを通して見ることで、擬似的に「初めて見るもの」のように錯覚することができます。
3-1 文字の形状を知る p52
当たり前ですが、タイプデザイナーはフォントをつくるプロです。
品質の高いフォントには、読みやすくするための彼らの工夫が盛り込まれています。
つまり、その工夫を知ることで、どういう組み方が読みやすくてきれいなのかを気付けるヒントとなるのです。
タイプデザイナーの考え方や工夫を知ることは、スペーシングや組版を上達させるための近道です。
ただし、世の中には品質の高くないフォントも存在します。
特にフリーフォントはタイプデザインの教育を十分に受けていないグラフィックデザイナーや、一般の方がつくったものも紛れているので、フォントを選ぶ際は注意が必要です。
文字の上下を安定させるための工夫 p52
「Z」「S」「8」は一見、上下対称に見えますが、実は下半分が上半分よりも少し大きく設計されています。
それは上半分の方が下半分よりも大きく見えるという「上方距離過大の錯視」の影響を考慮しているためです。
既存のフォントを逆さにしてみると、下半身が上半身よりもどのくらい大きく調整してあるかが分かります(中には、あえてこの調整を控えているフォントもあります)。
そのため文字の上半分の脇に生まれるスペースは、下半分のものに比べ、広くなるという特徴があります。
「1」などの垂直な形の文字が隣に来たときはその違いが明白です。
この差はレタースペーシングに大きく影響を与えます。
詳しくはP.64で見ていきます。
組版=テキスタイル p56
欧米では文字列をテキスタイル(織物)のように「模様」として捉える考え方があります。
文字の集合体を面として考え、その面に黒みのムラが生まれないよう気をつけて組む考え方です。
西洋で活版印刷が始まった15世紀頃の組版を見ても、このきれいな模様を確認できます。
組版が黒みの揃ったきれいなテキスタイルのように見えている状態は、その組版のレタースペースが均等なリズムで組まれている証でもあります。
レタースペースとワードスペースの差別化 p56
欧文はレタースペースとワードスペースの広さの差で文章内にあるそれぞれの単語を読み手に認識させる仕組みの言語なので、レタースペースがおろそかになると、ワードスペースとの区別がつきにくくなり読みづらくなります。
極端な例ですが、ここに「I」だけで組まれたセンテンスを2つ用意しました。
前者はワードスペースの位置が明快ですが、後者はどこが単語の切れ目なのか判断がとても難しいです。
ワードスペースの位置が一瞬で分かるように、均一に見えるレタースペースを心がけましょう。
量感とは? p66
私たちの身の回りにある物には「量感」というものが存在します。
量感とは人や物の見た目から感覚的に受ける大きさ・重み・厚みなどの印象のことです。
触らずとも大きな箱を見て重そうに感じたり、大きなビルを下から見上げるときに威圧感を受けたりするのも量感が影響しています。
また電車などで体の大きな人が両脇に座ると、たとえ体が触れ合っていなくても窮屈に感じるのは量感の作用です。
東海道新幹線の3列席では、左右の圧迫感を軽減するために、真ん中の席だけ通路側と窓側の席よりも幅を2cmほど広く設計してあるそうです。
文字の量感 p66
同じように文字を見たときにも量感的なバイアスがあるのではないかと考えます。
文字をあまり狭く近接して配置すると文字の量感が作用し、少し窮屈な印象に感じます。
文字の形状によってこの圧迫感は変化します。
「A」や「O」などの隙間が生まれやすい文字と比べ、「H」や「N」などの四角い文字は圧迫感が生まれやすいです。
広告の見出しや映画のタイトルロゴで、助詞のひらがなを小さくした組み方をよく見かけますが、そのような場合も大きな漢字と小さな仮名との量感差による圧迫感が気になります。
例えば右図の「国語の問題」のような組み方をする場合は、「の」の左右をほんの少しだけ広げるのがおすすめです。
大きい文字と小さい文字の違い p72
文字の表示サイズによってレタースペースの印象は大きく変化します。
同じ設定のスペーシングでも小さく表示するほど狭く感じ、大きくするほどゆったりした印象になります。
そのため、なるべく使用サイズに応じたレタースペーシングが求められます。
企業ロゴタイプは通常のものの他に、小さな箇所で使うために微調整をしたバージョンが用意されているケースもあります。
オプティカルサイズ対応のフォント p72
欧文フォントには「見出し用」「本文用」「キャプション用」などのように、使用サイズに合わせてデザインやサイドベアリングの異なるものがファミリー内に存在するものがあります。
大きい文字は野暮ったくならないように線幅にメリハリをつけ、小さい文字は読みづらくならないように線を太く調整してあります。
サイドベアリングも小さく使うものほど広くしてあります。
このように表示されるサイズに応じて最適化される考え方を「オプティカルサイズ」と呼びます。
最近ではタイププロジェクトの濱明朝のように和文フォントでもオプティカルサイズに対応したものが増えてきました。
黒い文字と白い文字の違い p74
背景の色によって、レタースペースの印象は変化します。
文字は白紙に印刷されることが多いですが、場合によっては写真などの明度の暗い背景に文字を白抜きで配置するケースもあります。
白は膨張色なので、白抜き文字は黒い文字よりも線が比較的太く見えてしまいます。
反対にレタースペースは黒くなるため、収縮色となります。
この違いが明るい背景のときよりもレタースペースを圧迫し、窮屈な印象をあたえます。
黒い背景の上で白い文字を組む場合は、通常よりも広いレタースペーシングを行う必要があります。
インキの広がりに注意 p74
黒いインキを文字以外の箇所に刷って白抜き文字を表現するとき、インキのにじみやすい紙では注意が必要です。
紙色である文字の部分にまでインキが染み込んでしまうと、文字が細くなってしまいます。
特にキャプションなどの小さい文字に影響を与えます。
文字が細くなると、文字のふところやレタースペースが広くなります。
小さい文字の場合は特に影響を受けやすいので、気をつけましょう。
筑紫明朝 LB では、線を少し太らせた処理がされています。
多色オフセット印刷で白抜き印刷する際の、横画のつぶれに対するひとつの解決方法となっています。
液晶画面のバックライトに注意 p74
パソコンやスマートフォンで文字を読む場合、背景のバックライトの強さによっては紙よりも背景が明るく見えるため、レタースペースが広く見えます。
文字も背景の光に負けて細く見えがちなので、注意が必要です。
03 漢数字の「一」はどこまで詰める? p80
漢数字の「一」は他の文字よりもとても細い特殊な形をしています。
縦組みの際に、他の文字と同じくらいのスペースに見えるように調整したのにもかかわらず、「一」の上下だけ窮屈に見える経験をしたことがある人もいるでしょう。
文字にはそれぞれの形に依存したパーソナルスペースが存在します。
「一」は他の文字よりもその領域が広いのだと思います。
人と同じで、文字もその文字ごとに入られたくないスペースの広さはバラバラなのです。
行頭揃えにしても同じで、数値的に揃えた場合でも「一」で始まる行が少し上がって見える気もします。
数値的に揃えたくなるような水平(垂直)的な字形の場合でも、それが本当に読みやすいのかをその都度自問自答することが大切です。
地に足のついた欧文と吊るされた和文 p112
欧文は文字を設置するための字面となるベースラインの上に設置されています。
それにより実際には描かれていなくとも、欧文の下部にはベースラインという地面の存在を感じることができます。
まるで、この地面を利用しながら各文字が自身の自重を支えているようにも見えます。
一方で和文の場合、字形がボディの中心を起点に揃っているため、この地面がありません。
どちらかというと一文字ずつが見えない糸でぴんと空中に吊るされたような状態です。
もしくは空中に浮遊しているようにも見えます。
和文の欧文的な配置方法 p112
本文組みなどの基本ルールとしては和文はボディの中心に揃えて組まれることが多いですが、見出しやタイトルロゴなどでは欧文のように下部に揃えることもあります。
空中に浮遊しているような中心揃えに対し、下部揃えは地に足の着いたような安定感を演出します。
また本文用書体などの文字の下部が揃わないものに対して、見出し用書体には欧文のようにベースラインを感じさせるものもあります(右図参照)。
このようなフォントは仮名特有の情緒的な読みごこちよりも、見出しとしての視認性やグラフィックとしての力強さを感じさせます。
プロポーショナルメトリクス p126
和文のデジタルフォントには、各文字の左右(縦組みの場合は上下)にあるスペースを自動で詰めてくれる機能が入っているものがあります。
正方形にとらわれず、欧文書体のようにそれぞれの文字の幅に合わせて左右のスペースを取り除いてくれる機能です。
これは一文字ずつタイプデザイナーが設定しており、フォントによって詰まり具合も異なるので、どのフォントがどれくらい詰まるのかを比較してみるのもとても勉強になります。
Adobe IllustratorやInDesignのOpenTypeパネルにある「プロポーショナルメトリクス」の箇所にチェックを入れることで、使用できます。
なお、プロポーショナルメトリクス機能は、それぞれの字形にあわせてボディ幅を変化させるものなので、初めから各文字にボディ幅が最適化されている欧文フォントには基本的にありません。
メトリクス p126
欧文・和文フォントともに「ペアカーニング情報」が組み込まれているものがあります。
この情報を使うと和文の場合、プロポーショナルメトリクスだけでは補いきれないような箇所を調整してくれます(「す」など)。
文字パネルから「メトリクス」を選択することで使用できます。
時間のないときでも雑誌の膨大な量の小見出しやリード文などのレタースペースを、ある程度まできれいに整えてくれる強い味方です。
「メトリクス」は「プロポーショナルメトリクス」の精度を高めるための機能です。
予期せぬ組版の崩れの原因となりますので、必ず「プロポーショナルメトリクス」とセットで使用してください。
各フォントの詰まり具合の違い p128
フォントによってプロポーショナルメトリクスやペアカーニング情報の設計は異なります。
右図を見ると凸版文久明朝Rに対してリュウミンRはプロポーショナルメトリクスの段階でだいぶ詰まるようです。
一方でリュウミンRは、メトリクス機能をONにしても変化しません。
リュウミンRと筑紫Aオールド明朝Mの比較はどうでしょう。
行長が近いので一見同じくらいの結果に見えるかもしれませんが、筑紫Aオールド明朝Mの方が字面率が小さく、ふところも小ぶりなため、リュウミンRよりもゆったりと見えます。
もし自動調整機能を利用する上で詰まりすぎると感じた場合は、そこからスペーシング調整をしましょう。
Monotype社のたづがね角ゴシックは、和欧あわせて2万ペア以上の豊富なカーニング情報が入っているので、よりきれいな調整を自動で行うことが可能です。
拗音と促音 p140
拗音(ようおん)とは「きょう」の「きょ」や「ニュース」の「ニュ」などのことで、一音節で発音します。
促音(そくおん)とは、詰まる音のことで「待って」の「っ」や「ブック」の「ッ」のことです。
小書き文字とは「ぁぃぅぇぉ/っ/ゃゅょ/ゎ」「ァィゥェォ/ヵヶ/ッ/ャュョ/ヮ」のようにひとまわり小さい文字のことを指します。
教科書で習う小書き文字と活字の違い p140
小学校では小書き文字を前の文字のすぐ後ろに1/4サイズの枠内に書くように教わりますが、活字では縦組みなら仮想ボディの右・上下中央付近に配置してあります。
横組みなら下・左右中央です。
小書きの活字は縦組みと横組みで表示されるものが異なります。
また文字の大きさも1/4よりも大きいことが多いです。
一般的なフォントによくある中央付近に配置したものは、スペーシングが均一のため単語としてのかたまり感があります。
一方で、教科書のように1/4サイズにしたものは、小書き文字の後ろに大きな空きが生まれてしまいます。
小書き文字は並字よりも余白が生まれやすいので、見出しなどではスペーシングの調整が必要となります。
ただし、拗促音は大きい文字と小書き文字でセットなので、小書き文字が前よりも後ろの文字に寄りすぎないように気をつけましょう。
p141
小書きはベタ組みだとレタースペースがスカスカになりがちなので見出しの場合は調整の検討が必要
助詞の役割 p142
日本語は名詞や動詞を助詞でつなぐような構成をしています(P.114参照)。
そのため、仮に助詞を隠しても文章の内容はなんとなく分かります。
逆に助詞以外を隠すと文章の意味を読み取れません。
この法則から、チラシなどの一瞬で内容を把握させたい見出しでは、重要な品詞と助詞とのサイズに違いをつけることで内容の伝達スピードを上げる方法があります。
助詞を小さくすると視認性が上がり、逆に大きくすると品詞の優先順位が逆転してしまうためか、スッと内容が頭に入ってきません。
助詞は言葉と言葉をつなぐための接着剤のようなものです。
書籍タイトルや広告の見出しなどでより素早く内容を認知させるには、文字サイズ差をより大きくするのが効果的です。
その場合でもP.66のように大きな文字特有の圧迫感に気をつけてスペーシングしましょう。
和文の構造を活かす p142
見出しなどをスペーシングする場合、音読したときのリズムに合わせて、ほんの少しレタースペースを調整する方法があります。
そうすることで読み手も、「私の/職業は/設計士です。」のように自然なリズムで読むことのできる優しい読み心地の組版となります。
またスペーシングは読む人によって個人差があるため、真ん中の文字が意図しない方へ寄って見える可能性があります。
大袈裟な例ですが「私の職」の「の」をど真ん中に狙って配置すると、「私の/職」のリズムで読ませたいのに、人によっては「私/の職」のリズムで読まれてしまいます。
初めから「の」を左に寄せておけば、このようなケースのリスクヘッジにもなります。
ただし過度な調整は逆に読みづらくなるので、注意が必要です。
p143
助詞を隠してもなんとなく意味は通じるが、その逆は困難となる
見出しなどの場合、助詞のサイズを小さくすることで内容の伝達スピードが高まる
逆に大きくすると品詞の優先順位が逆転してしまい、視認性がさがる
品詞間のスペースをほんの少し空けると文章の構造がわかりやすくなり
スッと内容が頭に入るスペーシングとなる
音読したときにできる間の位置をほんの少し空けると
読む人の頭の中の声のリズムに近いスペーシングとなり読みやすくなる
6-4 ワードスペースの影響 p154
和文本文の基本とされるベタ組みは文字と文字が隙間なく並びます。
一方、欧文は単語ごとにスペースを用いる構成となっています。
そんなルールの異なる2つの言語を混ぜて組むと、悩ましいポイントが生まれます。
スペースの変化を分かりやすくするために組版設定を「和文等幅」(欧文のカーニングを「メトリクス」、和文のカーニングを「0」にする設定)にして見てみましょう(なおここでは見出しの詰め組みを前提としており、ベタ組みの本文では推奨される数値が異なります)。
欧文単語の数に依存した見え方の変化 p154
和文に挟まる欧文が1ワードの場合、欧文の左右スペースを四分アキ(右図参照)にすると、スペースが広すぎるために欧文単語が悪目立ちしてしまいます。
ベタか八分くらいがおすすめです。
和文に挟まるのが2ワード以上の場合も見てみましょう。
写植時代の教本「組みNOW」では本文組において、「和・欧間を四分、欧文間を三分」を推奨していましたが、和欧間のスペースが欧文間よりも狭いと欧文2ワードが分離して見えます。
和・欧間と欧文間は同じに見えるのがよいと私は考えるので、右図の内容を推奨します。
これらは文字の形やサイドベアリングによっても見え方が変化しますので、臨機応変に微調整しましょう。
欧文と和文が合わさった言葉の場合 p154
一方、「2964年」などのアラビア数字と漢字が混ざった言葉の場合、「4-年」間が空いてしまうと、読み心地に違和感が生まれます。
スペースを意識しながら声に出して読んでみると、その違和感に気付きやすくなります。
p155
欧文が1ワードの場合、和・欧間を空けすぎると欧文が悪目立ちする
欧文単語間のワードスペースが欧文左右のスペースよりも広いと
欧文の2単語が分離して見えてしまう
「2964年」は1ワードのため「4-年」間に大きな空きがあると読みづらくなる
6-6 文字の比率調整による効果 p158
文字の縦横比率を調整する手法があります。
長体とは左右幅を縮めた形態のことで、平体とは上下に縮めた形態のことです。
比率の違いにより、文字に対する印象や組版全体の雰囲気に影響を与えます。
長体 p158
機能的な面では、正方形のものと比べ場所をとらないので、例えば食品の成分表など、横組みで限られたスペースに多くの情報を入れるときに活躍します。
デザイン的な面では字幅が狭いので、すらっとしたフォルムとなります。
正方形のものと比べると単語全体の密度も高まるので、使い方次第では長体特有のソリッドな緊張感も生まれます。
アニメ作品「魔法少女まどか☆マギカ」の「魔法少女」の文字は、TVシリーズロゴではやさしい雰囲気の正方形ベースに、劇場版ロゴでは緊張感のあるシャープな雰囲気の長体ベースとなっています。
平体 p158
こちらも同じく機能面では、正方形のものよりもコンパクトなため、新聞などの情報量の多い縦組み本文などに用いられます。
デザイン面において、平体文字の効果のひとつは安定感です。
設置面の広い文字が地べたに張り付くように、どっしりとした安定感を与えます。
また斜体と組み合わせることで、列車の残像のようなスピード感も演出できます。
私がデザインした音楽ユニット「アナ」のCD「時間旅行」ロゴタイプではこの効果を利用して、SF的近未来感を狙いました。
文字数の少ないロゴタイプの場合、面積が狭いため弱くなりがちですが、平体にすることでロゴとしての訴求力を持たせました。
感覚を分解する p190
レタースペーシングは人によって感覚が異なるため、共感した項目や逆にあまりピンとこなかった項目もあったかと思います。
その共感の差異こそがあなた自身のスペーシングの感覚をつくります。
大切なのは、「なんとなく」からの卒業です。
自分のスペーシングを他の人に説明できるようになれば、それは自信へと変わります。
そして、もしあなたが他の誰かにスペーシングを教えるときがきたら、あなたのそのスペーシングの感覚をなんとなくではない言葉に分解して伝えてあげてください。
そうすることで教わる人も自分のスペーシングの感覚を早くつかむことができると思います。
この数年を振り返って p190
私が美大生の頃、タイポグラフィについて何も知らなかったがために無鉄砲で好き勝手な文字組みばかりをしていました。
その後、次第に自分の文字組みに自信が持てなくなった私は、様々なタイポグラフィの本を読み漁り、数々の講演会へと足を運びました。
レタースペーシングについては特に自信がありませんでした。
自分がよいと思って調整したスペーシングも、職場の先輩ごとに異なる赤字を入れられてしまい、何が正しいんだろう?と思い悩む日々です。
レタースペーシングの文献も意外と少なく、学び方が分からなくなりました。
そこで自分のスペーシングの感覚を言葉で他人に説明できる力が必要だと思い、今までに残していたスペーシングの経験メモや自分の感覚を言語化したノートを20代が終わる2018年の暮れに、今後の自分のための覚書として冊子にまとめました。
今回の書籍化では、より誰かのためになる本にしたいと思い、スペーシングに頭を抱えていた新人時代の自分を思い出しながら書き直しました。
僭越ながら、本書が当時の自分のようにレタースペーシングで悩んでいる学生やデザイナーの方のお役に立てば幸いです。