【図解】CSSで文字のバランスを調整する方法まとめ


webページやブログにおいて、文字のバランス・デザインはとても重要な要素です。

もしも文字が読みにくかったり、認識しにくい場合、無意識にストレスを感じてしまいます。

快適にページを読んでもらえるように、最適な文字バランスに調整しましょう。

Bloggerで文字の調整をする方法はこちらをご覧ください。

>>Bloggerで行間と文字の間隔を調整する方法

CSSで行間を調整(line-height)

CSSで行間を調整するには、line-heightというプロパティを使います。

line-heightの値は、フォントサイズとその上下の余白を足した値となります。
line-heightの値は、大きく分けて３つの方法から指定できます。

『normal(初期値)』
『px』の指定
『数値のみ』、『em』、『%』の相対指定

それぞれについて解説していきます。

normal(初期値)


normalを指定すると、ブラウザが自動的に判断するようになります。

pxの指定


pxで指定すると、決まった行間にすることができます。

例えば、フォントサイズが16pxでline-heightが24pxの場合、上下の余白はそれぞれ4pxずつになります。

しかし、pxは定まった値なので、画面の大きさに応じてフォントサイズを変える場合、px指定のline-heightも一緒に変えなければいけません。

例えば、スマホ表示でフォントサイズを12pxにする場合、line-heightが24pxのままだと上下の余白が6pxに増えてしまいます。

数値のみ、em、%の相対指定


数値のみ、em、%などを指定すると、相対的に値を指定することができます。

例えば、フォントサイズが16pxの時、line-heightに1.5emを指定すると、上下の余白はそれぞれ4pxずつになります。

%、数値のみの指定も相対的な指定のため、『1.5em』は『150%』、『1.5』と指定する場合と同じ結果になります。

また、相対的な値のため、画面の大きさに応じてフォントサイズを変える場合に、line-heightをふたたび指定する必要がありません。

なので、line-heightを指定する場合は、相対的な指定を使った方が良いでしょう。

em、%で指定する場合、その要素の子要素まで指定したline-heightが適用されてしまいます。

特にこだわりがない場合は、子要素に影響を及ぼさない『数値のみの指定』がおすすめです。

CSSで文字間を調整(letter-spacing)

CSSで文字どうしの間隔を調整するには、『letter-spacing』というプロパティを使います。

letter-spacingの値は、次の画像の斜線部分です。
letter-spacingの指定方法は、次の通りです。

『normal(初期値)』
『px』の指定
『em』の相対指定

それぞれについて解説していきます。

normal(初期値)


normalを指定すると、ブラウザが自動的に判断するようになります。

letter-spacingの場合は、ほとんどのブラウザで『0』が設定されます。

pxの指定


pxで指定すると、決まった文字の間隔にすることができます。

emの相対指定にしても大丈夫ですが、letter-spacingの場合は文字のバランスをみながら調整するため、pxで指定する場合もあります。

また、letter-spacingに対しては、フォントサイズの高さ基準で考える『em』より『px』の方が直感的にわかりやすいです。

emの相対指定


emを使って指定すると、フォントサイズの高さを基準にして、相対的に設定できます。

しかし、先ほども説明しましたが、フォントサイズの高さが基準なので少しわかりにくいです。

そのため、わかりやすい方で設定しましょう。

『em』の場合は、だいたい『0.05em~0.1em』くらいがおすすめです。

まとめ

『line-height』や『letter-spacing』は好みの問題もあるので、調整するのは難しい部分でもあります。

特におかしい部分を感じない場合は、そのままの設定で大丈夫です。

逆にいじりすぎてしまうと客観的にみておかしな表示になってしまうので、ちょうど良いところに設定しましょう。

フェードインをつけるCSSのパターンもまとめているので、よろしければご覧ください。

>>ブログにフェードインをつけよう！【CSSのパターンまとめ】

コメント