字間（カーニング）の重要性

こんにちは、フロントエンドエンジニアのジャッキーです。2021年12月から弊社のデザイン部に所属し、今年の目標はデザインエンジニアになることです。

弊社のデザイン部では、毎週「デザトレ」というデザインに関しての勉強会が行われています。
そして今週、私が担当したテーマをご紹介させていただければと思います。

今回は字間（カーニング）について話して行きたいと思います。

字間とは？

字間（じかん）とは、文字通り、文字と文字の間の間隔です。英語ではKerning（カーニング）です。

カーニングを調整することによって、違和感がなくなり、重要な部分をより目立たせることもできます。

カーニングを調整して、違和感を無くす

日本語や中国語は、「」。、などの記号を含む、文字が正方形の中にあるように作られています。よって、記号と文字の間の間隔が大きく見える場合が多くあります。

その間隔を調整することによって、違和感がなくなります。

カーニングを活用し、重要な部分を強調

こちらの例をご覧ください。フォントは両方同じですが、調整前のものでは、重要な部分がなく、「Goalist Design Team」をそのまま表現するものとなります。

その一方で、調整後のものは「Goalist」の文字のカーニングを大きくすることによって、「Goalist」を強調しています。

このように、場合によって、カーニングを調整し、重要な部分を見分けることもできます。

カーニングとフォントの関係性

カーニングが同じでも、フォントによって、文字と文字の間隔の差が違く見えることもあります。

Serif、 Sans serif、Script、Decorative、4種類のフォントをそれぞれ使用して、カーニングの差を書き出してみました。

調整前のカーニングはどれも0ですが、Script体のカーニングが他のフォントより狭く見え、Sans serif体のが一番広く見えます。

また、4つのフォントとも、「Design」の「n」と「Team」の「T」の間のスペースが他の文字よりも大きく見えるという共通点があります。

カーニングでデザインを作る

一番長い「Goalist」の文字の両辺を合わせるように、統一感を出すために、下の「Design」と「Team」のカーニングを広くしました。

また、以下のようにカーニングを広くすることで、大人っぽく、高級感のあるデザインが作れます。

まとめ

カーニングはバナーやタイトルなど、文字が大きく見えるデザインにとっては重要です。フォントが同じでも、カーニング調整することによって、違う雰囲気を出すことができます。これからは、カーニングを意識して、デザイン作成していきましょう！

他のメンバーが担当されたのデザトレも以下のリンクから見れますので、興味がある方は見てみて下さい！

「#ゴーリストデザトレ」の新着タグ記事一覧｜note ——つくる、つながる、とどける。