css font-kerningを使ってwebで欧文の文字詰めをする

  • 2017.10.18
  • css
css font-kerningを使ってwebで欧文の文字詰めをする

こんばんわ。taisonです。
皆さん、見出しやキャッチコピーで大きな文字を扱うことってありますよね。

シンプルなデザインにどかーん!と欧文文字が入ってたりすると、それだけでブランドイメージを伝えるのも難しくありません。
(まあ欧文使ったwebサイト作ることって、実際は少ないですけど)

けど、大きな文字をwebで扱うのって意外とむずかしいし度胸がいります。
なんせweb上のフォントはDTPと違って文字詰めが自由気ままにできない!
ですからね。

今日はそんな

大きな文字をキャッチコピーに使ってインパクト出したい!だけど文字間はキレイに魅せたい!

という方にうってつけのcssをご紹介します。

文字間を自動で判定して字詰めをしてくれるcss font-kerning

日本語フォントではfont-feature-settingで字詰めする。なんて話題が挙がってましたが、それ以外にも文字詰めするcssはあります。

その名もfont-kerning!名前もそのままで分かりやすいですね。

今回の場合は欧文フォントのみ対象ですが、かなり楽に字詰めができるので、意外と使えるんじゃないかと思います。

このfont-kerning(フォントカーニング)。
指定すると、文字同士の間隔をほぼ同じにしてくれます。

以下のような感じ。(比較用に字詰めされない文字も掲載してます)

See the Pen KXbZaa by taison (@takatsugusuzuki) on CodePen.

こんな感じで、特定の文字並びで発生する字間をうまくカーニングしてくれます。

ブラウザ対応状況も以下のとおり。

fontkerningブラウザ対応状況

けっこうな環境で利用できますね。これなら実践投入もありではないでしょうか。
(相変わらずIEまわりの対応の悪さときたら、、、)

実際にfont-kerningを使用してみる

それでは、使える状況が来た時のために予行練習をしておきましょうか。

指定方法も、ものすごい簡単です。


font-kerning: normal;//これだけ

/** 値の説明 **/
auto(初期値) : ブラウザ委任。フォントサイズが小さい時は無効化する
normal : カーニングを適用するように要求する。
none : 適用しない

また値として継承なども使えます。
inherit : 親のスタイル継承
initial : 親のスタイルを受けない
unset : 値が指定されている所は親スタイルを受けない

以上の指定を字詰めしたい要素に指定するだけ。めちゃくちゃ簡単ですね。
大きな文字を使うところはそんなたくさん無いと思いますが、これだけでかなり作業短縮できそうです。

状況によって力を発揮するfont-kerningを上手に使ってみましょう

記事短いな、、、まあそれだけ簡単だったということで!、、、汗

font-kerningは字間が空いてしまう所を調整して字間を均一にするプロパティなので、すべての文字に効くわけではなく完璧な字詰め。という所まではいきません。
(たまに一文字ずつletter-spacingしてる猛者も見受けられるので、足りない方はぜひそちらを)

ただ、簡易的に設定して見栄えを良くしたい。というケースでは十分な威力を発揮するんじゃないでしょうか。
使えるケースがあれば、ぜひ利用してみてください。

それではまた!

こちらの記事も読まれています

WordPressでcssを追加・修正したけど反映しない!cssが効かない時に確認するコト... こんばんわtaisonです。 最近ウチのウサギが1歳の誕生日を迎えまして、 嫁がお祝いということでリンゴとにんじんで作ったケーキを目の前に置いたんですが、、、 全く食べず 笑 食べてる写真を収めたくて奮闘してたんですけど、目の前に置いても口元に置いてもウンともスンとも言わず、、、...
mix-blend-mode exclusionを使っておしゃれなデザインを実現してみる... こんばんは!taisonです。 ここのところ構成考える仕事が多く、あまりcssに手をつけていませんでした 汗 気を取り直して更新していきたいと思います! さて、今回はおしゃれなサイト制作にはうってつけな、あるcssをご紹介したいと思います。 photoshopやillustratorでお...
web制作にsass(scss)を使う場合の注意点 こんばんは、taisonです。 先日の記事で、sass(scss)(以下sassといいます。) という言語について触れました。 今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾! 今回は、 sassってそもそもどういう時に使うの?どんな使い方がいいの? エラーが...
今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾!... こんばんは。9月病(あるのか知らんけど)に陥り、頭がフワフワしているtaisonです。 もぉ秋ですねぇ、、、 さて、Twitterで人知れず宣言していたのですが、 10月はcss強化月間! という事で、本日第1弾の開幕でございます。 css強化月間第1弾sassを活用するコーディングを担当す...

cssカテゴリの最新記事