シュウ

今回「【CSS】letter-spacingで文字間について」解説していきます。

こんな方に読んでほしい

• CSSを学び始めた方へ
• letter-spacingの使い方について学びたい方へ
• letter-spacingは数値と単位で指定ができます

文章を読んでいる際に、文字間が狭すぎたり広すぎたりすると読みにくい、見えにくい事はありませんか。
letter-spacing(文字間)を調整する事で読みやすい、見やすいホームページを目指しましょう。

文字間を少し広げた方が読みやすい、見やすい感じはありませんか、
私も最初の頃はあまり文字間の事を気にせずコーディングをしていましたが、
letter-spacingをしり文字間の重要性を知りました。

letter-spacingについて

letter-spacingプロパティは、文字の間隔(文字間)を指定する際に使用します。

文字の間隔(文字間)とは、上の図のように、文字と文字との間隔のことです。
でわ、指定方法についてご説明いたします。

letter-spacing「px」指定について

数値+pxとは「letter-spacing:○○px」と指定します。
「px」は基本的にオススメしません。 理由は絶対値になる為です。

例としてletter-spacing:1pxと指定した場合
「フォントサイズが14px、16px、20px」それぞれに同じ値が指定され、フォントサイズによっては
うまく文字間が広がらない箇所が出てきます。

p.font_14 {
	font-size: 14px;
	letter-spacing:1px;
}

p.font_16 {
	font-size: 16px;
	letter-spacing:1px;
}

p.font_20 {
	font-size: 20px;
	letter-spacing:1px;
}

フォントサイズ14pxと20pxを比べて見た際に、文字間の幅に違いがある事に気づきませんか、
フォントサイズが大きくなるにつれて幅が狭くなってきます。
毎回、フォントサイズごとにletter-spacingを指定するのは手間が掛かってしまいます。

letter-spacing「em」指定について

数値+emとは「letter-spacing:○○em」と指定します。
「em」指定をオススメします オススメ! 理由は相対値になる為です。

例としてletter-spacing:0.1emと指定した場合
「フォントサイズが14px、16px、20px」それぞれ計算した値が指定され、フォントサイズに関係なく
適した文字間で広げてくれます。

p.font_em14 {
	font-size: 14px;
	letter-spacing:0.1em;
}

p.font_em16 {
	font-size: 16px;
	letter-spacing:0.1em;
}

p.font_em20 {
	font-size: 20px;
	letter-spacing:0.1em;
}

1emは「文字の高さ」になります。 0.1emだと「文字の高さの1/10の大きさ」になります。

例として0.1emと指定した場合
フォントサイズが14pxの場合は文字間が1.4pxになります。
フォントサイズが16pxの場合は文字間が1.6pxになります。

フォントサイズが変更されてもletter-spacingの値を変更する事はないので「em」が多く採用される
理由になります。

emで指定した際にオススメの値は

フォントの種類によっては異なることがあるかもしれませんが、
オススメの値は「0.05em〜0.1em」と言われています。

p.font_em0 {
	font-size: 14px;
	letter-spacing:0;
}

p.font_em005 {
	font-size: 14px;
	letter-spacing:0.05em;
}

p.font_em01 {
	font-size: 14px;
	letter-spacing:0.1em;
}

0.05em以下はそこまで変化がありませんが、0.1em以上は逆に広がりすぎて
文章がよみ読みづらくなってしまうので0.1em以下に抑えておきましょう。

CSSプロパティ参考になるかも

line-heightで行間の高さ指定について！

line-heightの基本的な使用方法について解説して
おります。

font-weightでフォントの太さを指定について！

文字も強調させたい、目立たせたい際に使用します。

まとめ

今回はこれで以上です。

< 前の記事

【CSS】line-heightで行間の高さ指定について！初心者向け講座

次の記事 >

【WordPress】Imsanityで簡単に画像をリサイズしてくれるプラグイン