字間（カーニング）の重要性
こんにちは、フロントエンドエンジニアのジャッキーです。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」のカーニングを広くしました。
また、以下のようにカーニングを広くすることで、大人っぽく、高級感のあるデザインが作れます。
まとめ
カーニングはバナーやタイトルなど、文字が大きく見えるデザインにとっては重要です。フォントが同じでも、カーニング調整することによって、違う雰囲気を出すことができます。これからは、カーニングを意識して、デザイン作成していきましょう！
他のメンバーが担当されたのデザトレも以下のリンクから見れますので、興味がある方は見てみて下さい！