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;上記のコードで文字間を調整出来る
字詰めすることでデザインが綺麗に見えます。
やったことの無い方は是非実装してみてください。
