こんばんわ。taisonです。
皆さん、見出しやキャッチコピーで大きな文字を扱うことってありますよね。
シンプルなデザインにどかーん！と欧文文字が入ってたりすると、それだけでブランドイメージを伝えるのも難しくありません。
（まあ欧文使ったwebサイト作ることって、実際は少ないですけど）
けど、大きな文字をwebで扱うのって意外とむずかしいし度胸がいります。
なんせweb上のフォントはＤＴＰと違って文字詰めが自由気ままにできない！
ですからね。
今日はそんな
「大きな文字をキャッチコピーに使ってインパクト出したい！だけど文字間はキレイに魅せたい！」
という方にうってつけのcssをご紹介します。
文字間を自動で判定して字詰めをしてくれるcss font-kerning
日本語フォントではfont-feature-settingで字詰めする。なんて話題が挙がってましたが、それ以外にも文字詰めするcssはあります。
その名もfont-kerning！名前もそのままで分かりやすいですね。
今回の場合は欧文フォントのみ対象ですが、かなり楽に字詰めができるので、意外と使えるんじゃないかと思います。
このfont-kerning（フォントカーニング）。
指定すると、文字同士の間隔をほぼ同じにしてくれます。
以下のような感じ。（比較用に字詰めされない文字も掲載してます）
See the Pen KXbZaa by taison (@takatsugusuzuki) on CodePen.
こんな感じで、特定の文字並びで発生する字間をうまくカーニングしてくれます。
ブラウザ対応状況も以下のとおり。
けっこうな環境で利用できますね。これなら実践投入もありではないでしょうか。
（相変わらずＩＥまわりの対応の悪さときたら、、、）
実際にfont-kerningを使用してみる
それでは、使える状況が来た時のために予行練習をしておきましょうか。
指定方法も、ものすごい簡単です。
font-kerning: normal;//これだけ
/** 値の説明 **/
auto（初期値） : ブラウザ委任。フォントサイズが小さい時は無効化する
normal : カーニングを適用するように要求する。
none : 適用しない
また値として継承なども使えます。
inherit : 親のスタイル継承
initial : 親のスタイルを受けない
unset : 値が指定されている所は親スタイルを受けない
以上の指定を字詰めしたい要素に指定するだけ。めちゃくちゃ簡単ですね。
大きな文字を使うところはそんなたくさん無いと思いますが、これだけでかなり作業短縮できそうです。
状況によって力を発揮するfont-kerningを上手に使ってみましょう
記事短いな、、、まあそれだけ簡単だったということで！、、、汗
font-kerningは字間が空いてしまう所を調整して字間を均一にするプロパティなので、すべての文字に効くわけではなく完璧な字詰め。という所まではいきません。
（たまに一文字ずつletter-spacingしてる猛者も見受けられるので、足りない方はぜひそちらを）
ただ、簡易的に設定して見栄えを良くしたい。というケースでは十分な威力を発揮するんじゃないでしょうか。
使えるケースがあれば、ぜひ利用してみてください。
それではまた！
