行間とボックス間の余白について

post on 2016/06/21

カテゴリー:ウェブデザイン

ホームページのデザインはハードに依存します。

DTP系のデザインとWEBデザインの決定的な違いはWEBデザインが表示する機械に依存する点です。
年々画面サイズが大きく、解像度が細かくなっているため、文字サイズはどんどん大きくなる傾向にあります。

文字サイズが大きくなると行間を調整する必要があります。

一昔前まで行間(line-height)は1.4em~1.5emくらいで設定していましたがこのサイトの本文の場合2~2.5emで設定しています。
よくありがちな変なデザインの典型は文字サイズだけ上げて行間を調整しないとか、文字サイズ・行間は調整したけどボックス間の余白は調整していないというものですね。
行間が広くなると段落と段落の間の広さが従来の設定だと相対的に狭く感じます。そのためメリハリをつけて広めに設定することをおすすめします。

あまりに文字サイスが大きすぎると改行が多発するので注意

特にスマホでは、文字サイズを大きくし過ぎたために改行が増えて文字が読みにくくなるというケースがあります。
PSD上でデザインしているだけではなかなかこのあたりの調整が難しいので、実際にコーディングした後に実機確認して調整しましょう。

トップページに戻る