MENU
カテゴリー

CSSでカーニング出来るfont-feature-settings!

CSSでカーニング出来るfont-feature-settings!

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

takato(@n8takato)です!

cssでカーニングの設定をしたい

この記事は上記の課題に向けて作成しています。

カーニングとは「字詰め」のことを指します。

デザイン制作では文字の間隔を詰めることで綺麗見せることが多々あります。

cssでも文字の間隔を詰めることが出来ます。

この記事はcssでカーニングの設定をする方法を紹介します。

この記事を読むメリット

  • cssでカーニングの設定をする方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナー・webディレクターとして勤務
  • webデザイナー3年、webディレクター1年目
  • web制作現場で学んだことを発信している人
目次

cssの「font-feature-settings」で字詰め

早速文字を詰めるcssコードを紹介します。

字詰めできるcssは下記のコードです。

字詰め出来るcssコード

 font-feature-settings: "palt";

例えば下記のような文章があるとします。

彼らはほかけっしてその意味院というのの後を進まんた。まあ事実が安心家は別にその運動ないですまでを安んずるといですには経験計らありたが、ずいぶんには通っますなけれだです。先生に進むたのはもし途中によくでたませ。

「 font-feature-settings: “palt”;」を設定すると字詰めされます。

彼らはほかけっしてその意味院というのの後を進まんた。まあ事実が安心家は別にその運動ないですまでを安んずるといですには経験計らありたが、ずいぶんには通っますなけれだです。先生に進むたのはもし途中によくでたませ。

句読点の後ろの余白などが字詰めされているのがわかります。

このcssコードを追加するだけで字詰めされます。

詰めすぎた場合は「letter-spacing」で調整

「font-feature-settings」で詰めすぎた場合は間隔を調整します。

文字の間隔が調整出来るcssは下記のコードです。

文字間の調整が出来るcss

 letter-spacing:〇〇px;

先ほどの文章に下記のコートを追加するとこのようになります。

 letter-spacing:2px;

彼らはほかけっしてその意味院というのの後を進まんた。まあ事実が安心家は別にその運動ないですまでを安んずるといですには経験計らありたが、ずいぶんには通っますなけれだです。先生に進むたのはもし途中によくでたませ。

字詰めされているけど適度に文字間が調整されています。

字詰めはcssで簡単に実装出来る

最後にまとめです。

cssで字詰めする方法

 font-feature-settings: "palt";

上記のコードで字詰め出来る

cssで文字間を調整する方法

 letter-spacing:〇〇px;

上記のコードで文字間を調整出来る

字詰めすることでデザインが綺麗に見えます。

やったことの無い方は是非実装してみてください。

あわせて読みたい
現役webデザイナーがオススメするスクール3選! webデザインを学ぶのにオススメなスクールを知りたい この記事は上記の課題に向けて作成しています。 webデザインが学べるスクールがいくつか存在します。 その中でオス...
あわせて読みたい
HTMLとCSSで文字をキラッと光らせる方法を紹介! HTMLとCSSで文字をキラッと光らせたい この記事は上記の課題に向けて作成しています。 一定の間隔で文字をキラッと光らせるアニメーションがあります。 難しそうですがH...
あわせて読みたい
【CSS】display:flex;の使い方の全てを紹介します! 「display:flex;」の使い方を知りたい この記事は上記の課題に向けて作成しています。 web制作をしていると必ずと言って良いほど「display:flex;」を使用します。 「dis...
  • URLをコピーしました!
目次