【css】line-heightのルールはこれでOK

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ごとに指定しようとすると混乱する。

最初にデザインガイドラインを作成しておくべき

そもそも、コーディングをする前に、文字サイズのパターンがどれだけあるか、ルール化しておくことをおすすめする。

こんな感じの

プロおすすめの関連商品

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です