CSSでの文字詰めの仕方

CSSでの文字詰めの仕方

こんにちは、ちゃんけいです!
今週は寒波が来てかなり寒くなるみたいですね、しっかりと暖かくして過ごしましょう!

さて今回の内容は、「CSSでの文字詰めの仕方」についてです。それでは行ってみましょう!

※2017年6月のリニューアルよりこちらの指定はしていません。

letter-spacing

この「letter-spacing」プロパティを指定するときは

 letter-spacing : 1em;

上のように、数値と単位を指定することができます。
このとき「px」などの単位よりも「em」などの単位にすると使い勝手が良いのでおすすめです。

「.1em」や「.01em」などの指定もできるので文字間の調整してあるデザインのときは細かく使えます。

font-feature-settings

昨年年末にバズったこの設定方法。デザインソフトで言う「オプティカル」のような文字詰めをすることができます。設定するときはこんな感じ

font-feature-settings: “palt”;

他にも指定方法があるので、ググってみてください!

どのブラウザも対応しているのですが、小さなバグが多いので注意が必要です。
まだ明確になっていない情報が多いのです。

font-feature-settingsが効かない、うまくいかないときは、フォント自体が効かない場合があるので一度確認してみてください。

最近私も案件で、ヒラギノ明朝に効かない場面があったのですが原因不明のまま letter-spacing で対応しました。。。

どちらを使ったら良いの?

結果としてどちらがベストプラクティスなのか迷うとおもいますが、デザインによりけりだと思います。。。

しかし、 font-feature-settings だと記号のあとの詰めがきついのが気になりますね、当サイトでは以下のように指定しています。

See the Pen RKrPaY by Chankei (@Chankei) on CodePen.0

どちらも指定して調整していました!

まとめ

特にまとめることはないですね、、、それではまた次回の記事でお会いしましょう!ちゃんけいでした!