【CSS】letter-spacingで文字間を調整する方法とオススメの値【プログラミング】

おはこんばんにちは！ノボルです。

CSSで文字間を調整するのってどうやるんだろ・・・。

「letter-spacing」プロパティを使えば、簡単に文字間を調整できるよ！

ブログやwebサイトなど、文章の多い媒体において、「文字間」は可読性やデザイン性に大きな影響を与えます。

そこで今回は、「letter-spacing」というCSSプロパティを使って文字間を調整する方法とオススメの値をご紹介します！

CSSで文字間を調整する方法
オススメのletter-spacingの値
最後に

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

letter-spacingを指定する方法

CSSでは「letter-spacing」プロパティで文字間を調整します。



{
   line-spacing: 値;
}

{

line-spacing: 値;

}

上の図のように、letter-spacingは、文字と文字の間のスペースを調整するプロパティです。

letter-spacingの値

「letter-spacing」の値の指定方法には、いくつかのパターンがあります。

letter-spacingの値

normal (初期値)

→ ブラウザが自動的に文字間を指定してくれる(大抵は０になる)

〇px

→ 入力されたpxで文字間を指定

〇em

→ 相対的な比率を決めることで、フォントサイズに応じて文字間が決まる

オススメは「em」

letter-spacingを指定するときは、「px」ではなく「em」をオススメします。これは、「em」で指定することで、フォントサイズに応じて相対的に文字間が調整されるからです。

「em」とは？

1em＝文字の高さ。例えば、0.5emだと文字間が「文字の高さの1/2の大きさ」になります。

オススメのletter-spacingの値

デザイン性や可読性を考慮すると、「letter-spacing」は0.05〜0.1emくらいがベストです。0.05以下だと狭く、0.1以上だとブカブカに見えます。

letter-spacingが0.05emの場合

See the Pen vYEqGeL by monkey d ruffy (@ruffy126) on CodePen.

少し違いが分かりづらいですが、0.05のletter-spacingを指定した文の方が、やや見やすくなりました。

letter-spacingが0.1emの場合

See the Pen JjoQXrQ by monkey d ruffy (@ruffy126) on CodePen.

初期値のサンプルと比べて、0.1emのletter-spacingを指定した文の字間がハッキリ広くなっています。これ以上、値を上げると逆に見づらくなるので、0.1以下が好ましいです。

最後に

今回の記事では、「letter-spacing」というCSSプロパティを使って文字間を調整する方法とオススメの値をご紹介しました。

「文字間」は、ブログやwebサイトの可読性やデザイン性を考える上で重要な要素です。

ぜひ、色々な値を指定して自分にあった文字間を見つけてださい！

最後まで読んで頂き、ありがとうございました(o^^o)