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

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

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

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

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

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

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

ブログ一覧へ戻る
松下 正平のプロフィール写真
            

この記事の著者

松下 正平

2002年より大阪を拠点に活動。仕様の行間を読み「よきにはからう」実装力をモットーとするWeb制作・WordPress開発のフリーランス。
2019年に大阪市内から枚方市に移転。
近年はLooker Studioを活用したアクセス解析にも力を入れています。

趣味

趣味は息子とのサッカー、及びサッカー観戦。ガンバ大阪好き。
好きなアイドルはBABYMETALとsora tob sokana。
現在はまっているゲームは「スプラトゥーンレイダース」
無限食堂554階をあたりを探索中。

コーディングのご依頼お待ちしております

Wordpressの構築やレスポンシブ化など人手が欲しい時はぜひお声がけください。

このブロックが表示されている時は条件が合えば即日作業が開始できます。お気軽に条件をお送りください。

制作会社様向け詳細はこちら
両手いっぱいに広げ、コーディング案件を待っているメタラー