Compass, CSS, Sass

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

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

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

[markdown]
## 概要

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

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

> * [なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | デザイン | POSTD](http://postd.cc/why-vertical-rhythms/)

## 例

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

### 補足

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

> * [いま rem (root em) units を使うべきその理由と使い方 | deadwood](https://www.d-wood.com/blog/2016/04/26_7983.html)
> * [CSS: Responsive Typesetting | deadwood](https://www.d-wood.com/blog/2016/01/13_7749.html)

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

> * [Box model を border-box 指定で扱いやすくする | deadwood](https://www.d-wood.com/blog/2016/04/27_7992.html)

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

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

> * [Compass で Vertical Rhythm をつくる | deadwood](https://www.d-wood.com/blog/2014/11/06_7160.html)

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

> * [理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp](https://html5experts.jp/takazudo/13339/)

## ツール

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

> * [Gridlover](http://www.gridlover.net/try)

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

> * [Vertical Rhythm と Modular Scale | rythgs.co](http://rythgs.co/archives/2015/10/17/vertical-rhythm/)
> * [Bourbon – Documentation](http://bourbon.io/docs/#modular-scale)

Modular Scale のツール。

> * [Modularscale](http://www.modularscale.com/)

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

“`prettyprinted
% gem install modular-scale
“`

> * [modularscale/modularscale-sass: Modular scale calculator built into your Sass](https://github.com/modularscale/modularscale-sass)

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

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

> * [Modular ScaleとVertical Rhythmを使ったタイポグラフィとレイアウト | Webデザイン、フロントエンド系の技術に関する備忘録 – whiskers](http://whiskers.nukos.kitchen/2015/04/05/modular-scale.html)
> * [[Sass/SCSS] Modular Scaleを使ったフォントサイズの指定 | Webデザイン、フロントエンド系の技術に関する備忘録 – whiskers](http://whiskers.nukos.kitchen/2015/05/10/modular-scale-mixin.html)
> * [[Sass/SCSS] remを使ったVertical Rhythm | Webデザイン、フロントエンド系の技術に関する備忘録 – whiskers](http://whiskers.nukos.kitchen/2015/05/26/vertical-rhythm-function.html)

## 補遺