たのしい文字組み 字間を調整してみよう | デジマースブログ
こんにちは！
みなさんお花見はしましたか？会社の近くの桜はもうほとんど葉桜になってしまいました。
桜が満開になってくると、大抵大雨が降ってすぐ散ってしまうので、毎年気が気ではありません…
さて、今回のテーマは「文字組み」についてです！
前回は文字組みの「字間と行間」について基礎的な部分のお話をしましたが、そのレベルアップ版で「字間」についてもう少し掘り下げていきたいと思います。
これから新入社員やデザイナーになる方に向けて、字間の調整方法や、漢字や記号などそれぞれの特徴に合わせた字間の空け方を書いていきます。
文字組みに気を配ることで、読んでもらう人にスムーズに内容を理解してもらうことが出来ます。デザイン作りはもちろん、日頃のプレゼン資料作りにも役立ちますので是非ご一読ください！
“字間を調整する”とは？
字間とは、文字通り「字と字の間」を指す言葉です。
字間の調整方法には、「字送り(トラッキング)」「カーニング」「文字ツメ」があります。
トラッキング(字送り)
テキスト全体の文字間隔を一定に整えるのに適しています。テキスト全体の中から一部を選択して任意の部分だけ間隔を調整する、と言う使い方も出来ます。
トラッキングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。
カーニング
2文字(文字とそれに隣接する文字)の間隔を調整するのに適しています。調整方法として、自分で数値を選択・入力して整えることが出来る他、Adobeソフトなどでは自動で文字組みを調整してくれる機能「和文等幅」「オプティカル」「メトクリス」があります。
カーニングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。
文字ツメ
そのままですが、文字を詰めるのに適しています。0％から100％の値を選択して文字と文字の間を詰めます。設定の値が100％に近づくと、組み合わせによっては隣り合う文字がくっついてしまいますので注意が必要です。
文字詰めの設定の値をプラスにすると間隔が縮まります。
そもそも字間を調整したい時はどこで編集すればいいの？と言う方は下記を参考にしてみて下さい。
よく使用される代表的なソフト2つ、「Adobe Photoshop」と「Microsoft PowerPoint」の字間の設定画面です。
文字の特徴に合わせて字間を調整しよう！
文字には、漢字、ひらがな、カタカナ、英語、記号など様々な種類があります。更に同じひらがなの括りの中でも、丸っこい字、四角い字、細い字など形も様々です。
種類や形の組み合わせによって、字間が広かったり狭かったりと変わることがあります。
まずは全体の字間はどれくらい広げようかな？と目的を定めます。「ゆったり読めるようにしたいから広げよう」「既定のサイズに収めたいから縮めないと」など、ざっくりでいいのでいいので決めます。
それでは早速、下記の例文のバランスを見てみて下さい。また、この例文を調整する目的は「デフォルトの設定を元に、バランスを均一になるように調整する事」です。
デフォルトの設定で文字を打ち込んだままだとこのようになります。
まず「、」と「家」の間が開きすぎているなと思った方も多いのではないでしょうか。
、。「」などの記号は、デフォルトの設定だと字間が広いくなってしまいますので、調整が必要な事が多い部分です。
特にタイトルや短い文章で記号を使う際は、記号の前後の間隔が広いと不格好さが目立ってしまいます。その為、全体のバランスを見ながら調整してあげましょう。
では、実際に字間を調整してみます。
今回は「、と家の字間が広すぎる」ので、カーニングで調整します。
そもそもテキスト全体のバランスをまず変えたい…と言う方は、カーニングを弄る前に、トラッキング設定を行いましょう。全体を整えてから、細かい微調整を行うイメージです。
例えばもう少しテキスト全体の字間にゆとりを持たせたいと言う方は、トラッキングの値をプラスすることで選択した全ての文字の間隔を広げることができます。
話を戻しまして、今回使用している「小塚ゴシック Pr6N 36px」のカーニング設定を変更して文字を詰めたいと思います。
「、」と「家」の間のカーニングの値を、0pxから-400pxにしました。ここだけ飛び抜けて字間が広かったのが、周りと均衡が取れるようになりました。
私はカーニングをよく使うのですが、詰めるだけなら文字ツメの値を変更するやり方でも大丈夫です。むしろ文字ツメの方が早くて使いやすい！と言う方もいるかもしれないので、自分の使いやすい方で調整してみて下さい。
次に「W」と「は」、英文と和文の字間です。細かい部分ではありますがここも若干広くなっていますので、カーニングで調整を行います。「W」と「は」の間のカーニングの値を、0pxから-150pxにしました。
余談として応用編にはなってしまいますが、どうしても綺麗に組めない、納得いかない時は、フォントから調整する必要があります。英文には欧文フォントを使用した方が綺麗に組むことが出来ます。また、和文がゴシック体なら英文にはサンセリフ体を使用する、線の太さや雰囲気が似ている物と組み合わせるなど、フォントから気を配ることが望ましいです。
例えば「HGSゴシックE」は、デフォルト設定では下記の図のように英文が半角で表示されてしまいます。比率が縦長の文字と正方形の文字が並んでいてバランスが悪く、見る時に違和感を感じてしまいますね…
そんな時こそ欧文フォントに変えてみて下さい。和文で使用しているゴシック体に合うように、欧文フォントはサンセリフ体の「Myriad Pro(フォントの太さ：Semibold)」を使用します。
文字のバランスが統一されて、自然で読みやすい文字の並びになったのではないでしょうか。
もちろん、和文フォントをそのまま使用する事も間違いではありませんよ！あくまで見易さの観点からバランスを考える時、こだわりのデザインを表現したい時に考慮してみて下さい。
また和文フォントと欧文フォントを組み合わせる際の注意点ですが、同じフォントサイズでも欧文フォントの方が小さく見えることがあります。
その為、欧文フォントは少し大きめに設定してあげると綺麗に見えます。今回は「GW」の部分だけ、「小塚ゴシック Pr6N 36px」から「小塚ゴシック Pr6N 38px」にちょっと大きくします。
微妙な変化ではありますが、バランスが良くなったのではないでしょうか。特に英文と漢字の大きさを比べるとバランスが改善されたのがわかるかと思います。
他にも字間の特徴は様々で、デフォルトだと漢字は少し詰まり気味、ひらがなは開き気味などもあります。隙間のバランスをどこに合わせるのかを決めて、広げたり縮めたりしてみましょう。
上記を踏まえて、最後に例文の微調整をしてみたいと思います。
これで目的達成です！
まったく字間を調整しなかった場合より、調整してあげた方が全体のバランスが統一されて見やすくなったのではないでしょうか。
ちなみに字間の調整を行った箇所は全部で6ヵ所になります。
もしここまで来て「やっぱり全体の字間を広げたい…」「縮めたい…」と思ったら、トラッキングの値を変えてイメージに近づけて下さいね。
おわりに
いかがでしたでしょうか？
バランスは文字や文章によって様々ですし、美的感覚も人それぞれなので具体的な数字で正解を出すことが難しくもあります。だからこそ、まずはやってみることが大切でもあります。
A4の紙の中で組むのか、幅640pxのバナーで組むのかなど、様々な条件や目的に応じてやってみることで、適切なバランスに作っていくことが出来ます。
興味を持って頂けた方は、今回の例文などを参考にぜひ試してみてください！
↓↓前回のおさらいがしたいなという方は、ぜひこちらもご覧ください！↓↓
それではまた！デジマースのコンでした。
他の記事をさがす ⇒ 記事一覧へ
