文字を美しく見せる”カーニング”について

  • このエントリーをはてなブックマークに追加

文字の隙間を整えて美しく見せる

文字を入力した時に、なんだか見た目がおかしいと思ったことはありませんか?
文字と文字の間が空き過ぎていたり詰まって見えることはありませんか?
それはカーニング(Kerning)に問題があるからです。

カーニングとは文字と文字の”隙間”を調整する作業のこと

そもそもカーニングとはなんでしょう?初めて聞いた方もいるのではないでしょうか?
カーニングとは、数字や句読点なども含む2つの文字の間に出来る隙間、字間を調整して見やすく、見た目上も美しく整える作業のことを言います。

実際にカーニング(字詰め)を行うとこんな感じです。

間隔が均一だと読み易そうだと思ってしまいますが、実はそうではありません。
文字の形はそれぞれ異なります。丸かったり、縦長だったり様々です。そんな形がまばらな図形を並べた時、「数値的には揃っていても、人の目で見ると揃って見えない」ということがほとんどなんです。

なぜカーニングが必要なのか

多少読みにくくても、文字が全く読めないというわけではないので、カーニングはしなくてもいい事のように思ってしまいます。
ですが文字もデザインの一部です。
ホームページや紙面の色や絵、写真が美しくても文字が汚くては台無しです。
特にロゴや見出しに使われる文字は目につきます。「目につく」という事はデザインを左右するだけのパワーがあるんです。
カーニングはデザインを洗練させるための最後のワンステップですので、必ずチェックしてほしいポイントです。

カーニングはむずかしくない

カーニングは決してむずかしい物ではありません。
字間をしっかり眺めて、違和感がどこにあるのかを目で見て、自分の感覚で判断する事が一番大切です。
数値や理論上では正しいとか法則とか言われることも中にはありますが、見るのは人間です。機械ではありません。
なので見る人の感覚を大事にして、どう見えるかを意識して調整すれば誰にでもできる作業です。

とは言っても初めてカーニングをする人にとって、どうしたら綺麗にそろえられるのか、カーニングができるのかがぼんやりしていますよね。カーニングをする時に意識して欲しいいくつかのポイントを紹介します。

ポイント1:特定の文字の組み合わせに注意する

・「A・K・V・W・Y・P」などの傾斜のある文字
・「F・L・T」などの交差している文字

この文字たちは並べるときに隙間が気になります。なのでこの文字たちが出てきた時には意識してカーニングをしましょう。

ポイント2:文字の形について注意する

「iやlなどの線でできた文字」と「cやoなどの丸みのある文字」は違和感が起こりやすい組み合わせです。

具体的なカーニングについて少し解説すると、
2つの文字がどちらも直線の形をしている場合、字間が多く必要となります。
直線と丸みのある文字の組み合わせの場合、すこしだけスペースを縮めます。
どちらも丸みのある文字の場合、字間をより狭くします。

具体的にはこんな感じです。

ポイント3:最後にカーニングをする

文字の入力やサイズなど、全の作業が終わった後の最後の調整としてカーニングをするようにしましょう。
もしも最初にカーニングをして、その後に文字を入れ替えたりフォントのサイズを変えてしまうと、その都度カーニングをやり直さなければならないので、非常に大変です。

やりすぎには注意

どんなものにも「丁度いい加減」があります。
詰め過ぎても、離し過ぎても読みにくくなってしまいます。
グラフィックの一部としてあえて字間を詰めたデザインを狙って作る場合は別ですが、基本的には読みにくくなるのであまりおすすめはできません。
文字(タイポグラフィ)の大事な要素は読みやすさ「可読性」です。
このことを忘れずに字間を調整して読みやすく、間違いのないものを目指してください。

日本語でも基本は同じ

これまでアルファベットを中心にお話してきましたが、日本語でも基本は同じです。
縦の形をしている書体なのか、丸みを帯びているのかによって詰め方を変えてみてください。

ひらがな・カタカナは詰める

漢字はあまり詰める必要が無いように思いますが、ひらがな・カタカナは必ずと言っていいほどカーニングが必要です。
また「◯◯の」や「△△が」といった言い回しの助詞、「の・が」については少しサイズを小さくするときれいに見えるようになります。
また小さくした文字は、左揃えの場合は下寄せにして、中央揃えの場合は中央寄せにするほうがより良くなる傾向にあります。

鍵括弧(「」)、句点(。)、読点(、)などの記号は要調整

日本語を使っていると出てくる、鍵括弧(「」)、句点(。)、読点(、)は注意が必要です。
鍵括弧を文頭に持ってくると、どうしても左側が揃いません。
句点は右端も揃えた文字デザインをする時には調整が必要でしょう。
読点も左右のバランスがまちまちです。

Web業界はカーニングが甘い?

何となくですがWeb業界はカーニングをしない傾向があるように思います。
それはホームページ上の文字を、様々な環境で見ることができるようにする必要がある事に要因があるように思います。
文字のサイズを変えずに、様々な画面幅で見た時に可変できる形で表示させる必要があるので、カーニングする事がとても難しいんですね。
画像や写真に入れる文字の場合、その制限がないのでカーニングをする事ができますが、カーニングの習慣が印刷業界と比べると薄いので、カーニングの甘いページが多くあるのかもしれません。

冒頭でもお話しましたが、カーニングはデザインをより洗練させるための最後のワンステップです。
字間の調整のあるなしは検索結果に全く影響しませんが、見る人には影響があります。
デザインされた物を見る・扱うのは検索ロボットではなく人間ですので、最後の詰めとしてのカーニングを忘れずにしましょう。

まとめ

・文字と文字の間、字間を調整する作業をカーニングと呼ぶ
・程よくカーニングを施すことで、デザインがより洗練される
・カーニングはデザインの最後に行う
・やりすぎには要注意
・読みやすさ「可読性」を最優先して考える様にする
・理想的な数値ではなく、人の目で見て整ってみえるかという感覚を大事にする

  • このエントリーをはてなブックマークに追加