カーニング
文字と文字の「特定の間隔」を個別に細かく調整するタイポグラフィの技法です。アルファベットの「AV」「Ta」や、日本語の「と」「っ」といった特定の文字が並んだときに発生する不自然な隙間を詰めたり、逆に詰まりすぎている箇所を広げたりして、視覚的な美しさと読みやすさを整えます。
混同しやすい「文字間隔」の 2 つの専門用語
デザイナーやエンジニアと会話する際、以下の違いを理解しておくと指示がスムーズになります。
- ① トラッキング(CSS の
letter-spacing)：文章全体の文字間隔を「一律で均等に」広げたり狭めたりする調整。 - ② カーニング(CSS の
font-feature-settingsなど)：文字の形に合わせて「特定の文字ペアごとに個別に」間隔を詰める調整。
Web担当者の実務における役割
細かな調整そのものはデザイナーの領域ですが、サイトの「顔」となるメインビジュアル、ロゴ、大型バナーなどのデザインレビュー(デザインカンプ(カンプ / デザインカンプ)の確認)で役立ちます。
また、コーディング時にも「見出しの日本語がバラバラして見えるので、CSS のプロポーショナルメトリクス(自動詰め機能)を有効にしてください」とエンジニアへ的確に実装指示が出せるようになると一流です。
よくある落とし穴(注意点)
- デザインカンプ(見本)ではきれいにカーニングされていたのに、Web サイトとして実装(コーディング)されたら文字がバラバラの隙間だらけに戻っているのを見落とす(コーディング側で自動カーニングの設定が必要です)。
- 小さな本文テキストにまで無理に細かなカーニングを要求し、開発の工数を無駄に膨らませてしまう(カーニングは「大きな文字」でこそ効果を発揮します)。
- 「カーニング」という言葉を知らないため、デザイナーからの「ロゴのカーニングを調整しました」という報告に対して、どこのクオリティが上がったのか理解できない。
言葉をよく利用する人
- デザイナー
- Web 担当者(発注側)
- コーダー / フロントエンドエンジニア
会話上での使用例
ロゴの文字間調整についてデザイナーから報告を受ける場面
-
デザイナー
ロゴの文字間、気になっていた箇所を調整しておきました。
-
Web 担当者
カーニングのおかげで文字のバランスがだいぶ良くなりましたね。それでロゴ用の画像を書き出して、各ページに反映します。
見出しが読みにくいというプロデューサーの指摘に応える場面
-
プロデューサー
この大きな見出し、なんだか読みにくく感じるんだよね。
-
Web 担当者
文字のカーニングが詰まりすぎているのかもしれません。letter-spacing で間隔を整えるか、見栄えを優先するなら画像にしてデザイナーさんに細かく調整してもらいましょう。