タイポグラフィを最適化するためのカーニングの基礎知識 | アドビ UX 道場 #UXDojo

タイポグラフィをデザインするとき、文字と文字のスペースが正しく見えるように調整するにはカーニングの知識が役に立ちます。この記事は、カーニングをデザインに適用する際に必要な基礎知識を紹介します。

タイポグラフィは 、UI スタイルガイドに含めるべき重要な要素のひとつです。スタイルの一部として、Web ページやモバイルアプリケーションに文字をどのように表示するかを指定する必要があるからです。デザインチームが初めてタイポグラフィについて話し合う場面では、既存のフォントを使用するか、ブランド独自に新しいフォントを選ぶかといったことを議論するかもしれません。しかし、検討内容がより詳細に及ぶと、最終的にはカーニングについて議論をしなければならなくなるでしょう。

カーニングと言う言葉を始めて聞いた人は安心してください。この記事は、カーニングを利用してデザインを向上させる方法の理解が目的ですが、まずは、カーニングとは何かという話から始めます。

カーニングとは何か？

カーニングは、2 つの文字の間に存在するスペースの調整です。文字と文字の間隔が正しく見えるようにするカーニングは、印刷機の時代から使われているタイポグラフィデザインの手法です。カーニングを適切に行うと、タイポグラフィを読みやすくしたり、文字から受ける威圧感をなくす効果があり、認知負荷の軽減にも役立ちます。

最新の UI デザインでも、カーニングのベストプラクティスを理解していることは重要です。そこで、まずカーニングの目的を確認してから、どのようにカーニングをデザインプロセスに取り入れられるのかを見ていきましょう。

カーニングの目的

カーニングの目的は、タイポグラフィの間隔を制御して、各文字に適切な空間を確保することです。たとえば小文字の「l」と「i」を並べて配置する場合はフォントのカーニングは問題にならないかもしれませんが、大文字の「V」と「A」のように開いた形状の文字を並べると、文字間のスペースが広くなるため調整の余地が生じます。

デザインシステムを使って UI の基本ルールを構築するときは、段落、コンポーネントなどの間隔や、マージン、パディングのルールを文書化するのが一般的です。こうした要素間の間隔に対する配慮は、タイポグラフィデザインのアプローチにも向けられるべきです。

デジタルタイポグラフィにおけるカーニング

最近のデジタルデザインツールには、自動的にタイポグラフィのスペース調整を行う機能があります。それでも、デザインへのタイポグラフィの組み込み方次第では、カーニングを検討する必要が出てきます。ここでは、デジタルツールがカーニングに使用する 2 つの要素について説明します。

カーニング値

カーニングの作業では、文字間の距離を指定するためにプラスまたはマイナスの値が使われます。プラスの値は文字間隔を広げ、マイナスの値は間隔を狭くします。文字の形や大きさはそれぞれ異なるため、すべての文字間に同じ値を適用しても、望ましい見た目になるとは限りません。

カーニングテーブル

カーニングテーブルは作業を行うデザイナーのガイド役としてつくられたものです。カーニングテーブルには文字の組み合わせの一覧が含まれており、それぞれの組み合わせに対する最適なカーニング値が記載されています。カーニングテーブルはタイポグラフィデザインを効率化するために利用できますが、フォントの選択により影響を受けることがあります。

カーニングの種類

タイポグラフィのカーニングに使用される方法はいくつか存在します。ここでは 4 つの手法の動きを、それぞれ簡単に解説します。

1. メトリクスカーニング

メトリクスカーニングは、自動的に文字をカーニングするオプションのひとつで、文字の組み合わせごとのカーニング値が保存されているカーニングテーブルを使用します。この方法では、多くの時間を割くことなく簡単に文字間のスペースを調整できます。

2. オプティカルカーニング

オプティカルカーニングは、各文字の輪郭を自動的に検出する高度な機能で、アルゴリズムを用いてそれぞれの文字間隔の最適値を計算します。最小限のカーニングテーブルしか定義されていないフォントを使用する場合によく使用されます。

3. 手動カーニング

手動カーニングは、その名の通りに各文字の間隔を自分で調整することです。非常に面倒に感じられる作業かもしれませんが、手動カーニングでは自動カーニングではできないレベルのコントロールが可能になります。特にグラフィックデザインのタイポグラフィを調節するデザイナーに好んで使われる方法です。

4. コンテクスチュアルカーニング

コンテクスチュアルカーニングは、2 つの文字の組み合わせだけを見るのではなく、単語全体のように複数の文字を見て最適な間隔を決定します。OpenType 等の一部のフォントでサポートされています。

カーニングのベストプラクティス

利用可能なカーニングの種類を紹介したところで、次は実際にカーニングを行う際のヒントを紹介します。

• 文字の組み合わせ: 文字にはさまざまな形があります。そのため隣りに並べると不格好に見えるものがあります。斜めの文字（A、K、V、W、Y）、線が突き出ている文字（F、L、T）を探し、「W または V と A」「T または F と A」などの組み合わせには注意しましょう。
• フォントサイズの変更: フォントサイズを大きくしたり小さくしたりすると、文字間のスペースが変化して、タイポグラフィの外観が意図したものから変わってしまうことがあります。タイポグラフィの間隔を決める際は、デザインの他の要素と同じように視覚的階層のルールを適用しましょう。
• 過度な調整: 手動でカーニングする場合は、特別な目的がない限り、文字間を広げすぎたり詰めすぎないよう注意します。これは、単語の読みやすさを低下させ、ユーザーの全体的な体験を損なう可能性があるためで、特に、モーションまたはアニメーションに使用するタイポグラフィにおいて重要です。

カーニングに適したフォント

文字と文字の間隔が十分に確保されているフォントはカーニングに最適です。編集に費やす時間を大幅に削減できるからです。また、形状が簡素で判別が容易なフォントを選ぶと、読みやすいように調整する行為が容易になります。まだカーニングを学んでいる段階のデザイナーには、こうしたフォントの選択が特にお勧めです。

カーニングを始めよう

カーニングは、多くの時間をかけるほど価値のない、些細な調整に見えるかもしれませんが、実際にはタイポグラフィを目にした人の行動や評価に大きな影響を与えます。たとえば、Web サイトのトップページに大きな文字が表示されていて、その文字と文字の間隔に一貫性が無い場合は、サイトの可読性を損ない、ユーザー体験を妨げる可能性があります。

カーニングをこれから始める人は、さまざまな Web サイトを訪問して、気に入ったタイポグラフィをサンプルとしてムードボードに保存してみましょう。実際にタイポグラフィのカーニングに関する新しい課題に出会ったら、集めたタイポグラフィを見てインスピレーションを得ることにより解決できるかもしれません。

この記事は What Is Kerning Typography? Design Definition（著者:Dan Silveira）の抄訳です