line-heightのルール付け
px基準に条件付けせずに、クラス基準にしていくとシンプルに分岐できる。
考え方
- 見出し用の共通クラスと文章用のクラス設計を分ける
- フォントサイズに関わらず見出しは line-height: 2、文章は line-height: 1.5 を基準とする
- 基準を持ちながら個別に拡張スタイリングしていく
良い例
// 見出し用共通クラス（h1とかでもいい）
.head {
line-height: 2;
margin-bottom: 24px;
}
// 文章用共通クラス（というかpでいい）
p {
line-height: 1.5;
margin-bottom: 24px;
}
// バリエーションを作成する
.text-xs {
font-size: 0.7rem;
line-height: 1.75; // 例えば
}
marginは適当。
悪い例
font-size: 20px 以下は line-height: 1.5
font-size: 20px 以上は line-height: 2
font-sizeごとに指定しようとすると混乱する。
最初にデザインガイドラインを作成しておくべき
そもそも、コーディングをする前に、文字サイズのパターンがどれだけあるか、ルール化しておくことをおすすめする。
あわせて読みたい
プロおすすめの関連商品
コメントを残す