タイポグラフィ7つのルール その❸ あける 息苦しいデザインの回避法は「あける」こと

TYPOGRAPHY RULES

タイポグラフィ7つのルール その❸ 息苦しいデザインの回避法は「あける」こと

タイポグラフィ7つのルール ❸ あける
▼第1回(通算第9回)

この章での「あける」は、主に「行間」と、文字で構成された「ブロック(要素)同士の間隔」の説明に費やしましょう。
私は、後輩を指導するときに「息苦しさ」と「心地よさ」という概念をよく使います。この「空ける」ことは、まさに「心地よさ」を演出するための必須条件です。「詰める」と同様、重要なデザイン要素になります。

新聞の折り込みチラシなどで、すべての「間隔」が同一で、遊びがまったくなく、息苦しいデザインが多々見受けられます。これも、前章で取り上げた「千鳥」同様、デザイン初心者が陥りやすいものです。「空ける」という概念はあるのですが、どう適切に空けたらよいかわからず、同一にせざるを得ないのかも知れません。

(figure3-1)
デザイン初心者の作品によくみられる「千鳥」

(figure3-1)のキャプション

デザイン初心者の作品によくみられる、要素同士の空間がほとんど同じ例が左図である。抑揚がないので「息苦しさ」を感じる。

次項で、「息苦しいデザイン」の解決策を探っていきましょう。

第1回:通算第9回
もくじ
3.1 基本的には空けないほうがいい「文字間」
  3.1.1 ●文字間を空けたほうがいい(かもしれない)書体もある
  3.1.2 ●数字(半角)や英文の、両サイドの空きについて

3.1 基本的には空けないほうがいい「文字間」

文字間は、基本的には空けるべきではありません。もともと書体(特に和文書体)は、本来の字形の幅(高さ)である字面枠に納まっています。その外側、文字の実質的な幅(高さ)である、ボディ(仮想ボディ)がサイドベアリングとしての役割を果たしています。したがって、もうすでに、十分読みやすくする空間が用意されています。
それを、また更に広げるのは理にかなっていません。読みにくくするだけです。

3.1.1 ●文字間を空けたほうがいい(かもしれない)書体もある

ただし、最近の書体の傾向である、ボディに限りなく近い、字面枠を大きくとっている書体(モリサワの新ゴ、フォントワークスのニューロダンなど)は、小さいフォントサイズで組むと、読みにくい印象があるのも確かです。この場合は適切な[トラッキング]処理をしてもいいかなと思います。

(figure3-2)
「新ゴ」や「ニューロダン」などは字間を広げたほうが良い場合もある

(figure3-2)のキャプション

ブラウザによって見えかたに差が出るので、見本にならないと思うが、「7Qから10Qくらい」がこの『トラッキング』処理に該当する文字サイズである。
ベタでも決して問題ないのだが、少し空けたほうが、読みやすく、読者にやさしい。

いずれにしても、明確なデザイン意図なしに文字間をあけることは、デザイン上あまり好ましいことではありません。

前章[トラッキング]でも触れましたが、ウェブページで、文章を letter-spacing で広げている例を見かけます。
芸人さんが、ベタなコントで、のどを叩きながらゆっくりと「わ・れ・わ・れ・は・宇・宙・人・で・あ・る」というのがありますね。頭の中ではこんな感じで響いてしまうのです。響きが強すぎて内容が「頭に」入りません。

結局、読みにくいだけで、トクなことは何もないのでやめたほうがいいでしょう。

(figure3-3)
通常は、文字間は空けるべきではない

(figure3-3)のキャプション

上段は、Webでよく使われるヒラギノ角ゴPro W3である。このブログの本文もこの書体を指定している(Mac上で)。ひらがな、カタカナが大きく、骨格が本来では縦長文字種の横幅が広い。明らかに横組みを意識して作られたことがわかる。

この書体をもってしても字間を広げると、とたんに読みづらくなる。図形が並んでいるようにしか見えなくなるためである。まして、下段のような明朝体では、もっとひどくなる。

3.1.2 ●数字(半角)や英文の、両サイドの空きについて

Illustrator では、和文に半角数字や英文(アルファベット)を混在させると、両サイドがデフォルトで1/4角(全角の4分の1幅)自動的に空きます。これは組版ルールで決まっているのですが、この「空き」は入れるべきか入れざるべきか、大いに悩ましい問題です。

たしかに、1桁の数字、1文字の英文の場合は、入れたほうが断然読みやすいし入れるべきだと思います(この場合は全角を使うほうがきれい)が、2桁以上の数字や英単語の混入頻度が多くなると、この両サイドの空きは、何とも間が抜けて見えてしまいます。

これも、個人の好みや、クライアントの意向があるでしょうが、すべてのシチュエーションで入れなければならないというのは、私は違うように思います。しかし、「全部取っちゃおう」というのは極論過ぎます。ではどうすべきか。[段落]パレットの[文字組み]を操作して何とかすることになります。
(お断りしておきますが、ここでの説明やカスタマイズは、ほんの一例を述べたもので、すべてのかたや、場面・状況に適用できるものではありません)

ウィンドウ>書式>段落>文字組み

一般的な「ベタ組み」文章の場合は、デフォルトの[行末約物半角]を使用します。Illustrator の[文字組み]は[なし]も含めると5種類あります。状況に応じてこのいずれかの[文字組み]を設定します。

いずれの設定項目も[行末設定][行頭設定][行中設定][欧文の前後]という4項目に細かい設定がされています。これは、[文字組み]パレットの一番下[文字組みアキ量設定…]を開くと確認できます。
(figure3-4-1)参照。

このコーナーでの話題、「数字(半角)や英文の、両サイドの空き」は[欧文の前後]で設定されています。デフォルトでは[約物半角][行末約物半角][行末約物全角][約物全角]の4種類いずれも[最小]12.5%、[最適]25%、[最大]50%となっています。この設定が「くせもの」なのです。正直いって、デフォルトの設定では、きれいな組版は望めません。

では[最小][最適][最大]とは、いったい何なのでしょうか?
Adobeのユーザーガイド、日本語の書式設定 には、このようにあります。

文字組みセットの作成
❺「最小」値は、禁則処理によって行を詰めるときに使用されます。「最適」値より小さい値を指定します。「最大」値は、両端揃えで行を広げるときに使用されます。「最適」値より大きい値を指定します。
Adobe ユーザーガイド:日本語の書式設定より引用)

わかりづらい説明ですが、先にいきますね。この部分の詳細は “6.4.3 ●組版ルールを設定する[文字組み]” でお話しします。とりあえず、現象面を見てみましょう。(figure3-4-1)をご覧ください。

(figure3-4-1)
ベタ組み用[行末約物半角]のカスタマイズ

デフォルトで組んだ見本の1行目・7行目は、いずれも洋数字の両サイドが異様に広く空いています。[最大]が適用されているためです。
5行目。英文の両サイドのアキが広いですね。ここも[最大]が適用されています。

[文字組み]のデフォルト設定では[最大]が[最適]より2倍も大きい値になっています。このことが、見本の現象を生みだす原因になっています。また、[最適]の25%(1/4角:全角の4分の1幅)も、私は広すぎると思っています。

そこで、[ベタ組み用行末約物半角]なる、カスタマイズをしてみました。
その組み見本が下段です。ちなみに[最小]0%、[最適]12.5%、[最大]12.5%に設定し直しています。
どうですか、少なくとも、デフォルトで組んだものより異様さはなくなっていませんか?

欲をいうと、英文の両サイドはもう少し(16.5%くらい)広げたいのですが、数字と英文がわけられておらず、一緒の設定項目になっているため、設定することができませんでした。

なお、[自動(メトリクス)]による詰め組みの見本も添えておきます。

(figure3-4-2)
詰め組み用[約物半角]のカスタマイズ

詰め組みは、一部の漢字(書体にもよる)と両仮名すべてが詰まりますが、[行末約物半角]では行中の約物、句読点までは詰まらず整合性が取れません。ですので、[約物半角]にしました。ところが、これにすると、句読点まで詰まってしまい、文節がわかりづらく、読みにくくなってしまいます。

そこで、[行中設定]を細かく数値設定し直しています。もちろん[欧文の前後]も直しました。

[文字組み]の設定は、極端にいうと、1つの仕事に1つの[文字組み]が必要なほど微妙なものです。したがって、「正解」などはありません。まして、Illustrator では、それを望むのは無理があるのです。

なお、カスタマイズは簡単にできますが、数値の設定はなかなか難儀かも知れません。試行錯誤しながらやってみてください。

(figure3-4-3)
[文字組みアキ量設定]のカスタマイズ方法

このブログは、コラムの中を除いて、英文のみ両サイドに半角スペースを挿入しています。読みやすさはどうでしょうか?

● ● ●

次回(第2回:通算第10回)は、「行間」「行長」「ブロック(要素)同士の間隔」についてお話しします。予告下ページャ[2]のをクリックを。

第2回:通算第10回
予告
3.2 「行間」と[行送り]と「行長」のお話し
3.3 ブロック(要素)同士の間隔
ページ:

1

2 3

関連記事

  1. タイポグラフィ7つのルール その❶ 美しさの基本は「そろえる」にある

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❶ 美しさの基本は「そろえる」にある

    ▼第1回デザインの基本は「そろえる」ことにあります。出発点…

  2. タイポグラフィ7つのルール その❻-3 文字組みを見やすくする[行頭・行末・分離禁則]、しかし…
  3. タイポグラフィ7つのルール その❺ 「ひく」ことは、すべてがマイナスではない

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❺ 「ひく」ことは、すべてがマイナスではない

    ▼第1回(通算第16回)前章 “タイポグラフィ7つのルール…

  4. タイポグラフィ7つのルール その❻-5 和文組版美しさの原点・縦組みで起きるさまざまなこと
  5. タイポグラフィ7つのルール その❻ 細心の注意を払うべき大切な「くむ」こと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❻-1 細心の注意を払うべき大切な「くむ」こと

    ▼第1回(通算第18回)前章 “タイポグラフィ7つのルール…

  6. タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目と心への思いやり

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目と心への思いやり

    ▼1回完結(通算第24回)前回までは、タイポグラフィに関す…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

  1. タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目と心への思いやり
  2. タイポグラフィ7つのルール その❻-6 書体には「性格」や「表情」、そして「適性」がある
  3. タイポグラフィ7つのルール その❻-5 和文組版美しさの原点・縦組みで起きるさまざまなこと
  4. タイポグラフィ7つのルール その❻-4 和文・英文が混在することで起きるさまざまな厄介なこと
  5. タイポグラフィ7つのルール その❻-3 文字組みを見やすくする[行頭・行末・分離禁則]、しかし…

最近の記事

  1. タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目…
  2. タイポグラフィ7つのルール その❻-6 書体には「性格」や「…
  3. タイポグラフィ7つのルール その❻-5 和文組版美しさの原点…
  4. タイポグラフィ7つのルール その❻-4 和文・英文が混在する…
  5. タイポグラフィ7つのルール その❻-3 文字組みを見やすくす…

アーカイブ

  1. タイポスとの出会い

    MOJI ESSAY

    タイポスとの出会い
  2. タイポグラフィ7つのルール その❻-4 和文・英文が混在することで起きるさまざまな厄介なこと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❻-4 和文・英文が混在することで起きるさまざま…
  3. フォントフォーマットを知るための4つの視点と4つのフォーマット

    FONT

    フォントフォーマットを知るための4つの視点と4つの代表的フォーマット
  4. タイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」こと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」こと
  5. もうひとつのかな文字

    MOJI ESSAY

    もうひとつのかな文字
PAGE TOP