CSSでバーティカルリズムを実現しよう!line-height-stepを使ってみる 石井宏治(グーグル) 「バーティカルリズム」(Vertical Rhythm)と呼ばれるデザイン手法があります。最近は関連記事も増えてきたので聞いたことがある、という方もいらっしゃるかもしれません。日本語本来のタイポグラフィでは「行取り」と呼ばれる類似の手法があり、ほぼ全ての印刷物やワープロで使われています。 「行取り」あるいは「バーティカルリズム」とは、要素の配置に一定のリズムを取り入れることで、デザイン上の安定感や、可読性の向上などの効果が見込るデザイン手法です。通常は、本文の行の高さをリズムの単位として、要素間の余白を調整します。ノートの罫線や、原稿用紙をイメージするとわかりやすいと思います。 上の例のように、CSSでline-heightやmarginを適切に設定すれば実現可能ですが、メンテナンス
![CSSでバーティカルリズムを実現しよう!line-height-stepを使ってみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/caed9cfcd559b419cd2180d5561a0e19a2a036f1/height=288;version=1;width=512/https%3A%2F%2Fhtml5experts.jp%2Fwp-content%2Fuploads%2F2017%2F11%2Frhythm-off-1-300x169.png)