, ,

[HTML & CSS General] rem を利用して Vertical Rhythm を実現する

公開日: 2016/05/02
更新日: 2018/10/15

ちょっと調べたのでまとめておく。

Contents

概要

一貫したベースラインでデザインする。
本文のプロパティ line-height によって決定される。

  1. 要素間の縦の空白を、本文の line-height の倍数にセットする。
  2. 全てのテキスト要素の line-height を、本文の line-height の倍数にセットする。

例

See the Pen CSS Vertical Rhythm by DriftwoodJP (@DriftwoodJP) on CodePen.

補足

font-size には rem を利用すると扱いやすい。

また border-box を指定し、高さを揃えやすくする。

要素に border を利用すると、その分高さがずれるので margin で調整する。
画像にも注意。

Compass の mixin を利用することもできる。
特に IE8 以下に対応する場合に有用。

font-size / line-height については以下も参照。

ツール

Vertical Rhythm の基準を決定するには Gridlover が役立つ。

さらに Bourbon の Modular Scale を使って SASS を組み立てた例。

Modular Scale のツール。

以下の gem で Modular Scale を Compass + Sass で導入可能。

% gem install modular-scale

Modular Scale とあわせて組み立てる

Vertical Rhythm と Modular Scale をあわせて組み立てる考え方に関するエントリー。
とても参考になる。

補遺

関連して。

追記：2017/10/12
CSS Rhythmic Sizing という仕様が提案されている。