Webメディアやブログを始めとする文章コンテンツにおいて、読みやすい文章のデザインは結構むずかしい。

その中でも僕が重要だと思っているのがバーティカルリズムで、これはノートの罫線のように同一のテンポで要素を配置する手法のこと。

とはいってもただ単にテンポを揃えるだけではきれいにはいかない。例えばこうなる。

ずれたバーティカルリズム

これは2016年3月現在の僕のブログのデザイン。 line-heightを意識しているのでブロック自体はバーティカルリズムから外れていない。

が、文章のベースラインが思いっきりずれてしまっている。 前から薄々気付いてはいたけど、やはり僕のバーティカルリズムは間違っていた。

ベースラインを揃えたバーティカルリズムの実装

以下の記事がこの実装方法について完璧に説明している。

擬似要素を利用したベースライン・グリッド · terkel.jp

この記事では、CSSのbeforeafter擬似要素を使って、ブロックを押し広げてベースラインを揃えてしまうという方法で実現している。

これを適用するとこなる。

正しいバーティカルリズム

わかりやすさのために擬似要素に背景色をつけている。 なかなかコストの高い実装になるけど、ベースラインを綺麗に揃えることが出来た。

しかし、画像などの高さの予測できないコンテンツが入り込むと現状崩れてしまう。 これはもうJavaScriptなどでなんとかするしかないと思う。

グリッドを表示するChrome Extension

この改修をするにあたって以下のChrome Extensionを利用した。

The Grids - Chrome ウェブストア

絶対グリッド感を持っている人でも、こういうツールはあって損はしないと思う。

参考にさせていただきました