UIデザインにバーティカルリズム（Vertical Rhythm）という考え方がある。その名の通り縦方向のリズムという意味である。

水平方向に対しては多くのデザイナーが4px, 10px, 8px単位などのグリッドに沿ってデザインしているにも関わらず、垂直方向に対してはグリッドに添わせることができてないのである。

そもそもデザインする時に8pxなどのグリッドで考えているなら、すべての要素は水平方向も垂直方向もグリッドに沿うはずである。グリッドにそわない理由はなんなのだろう。

その答えはline-heightである。line-heightをサイト共通で1.4とか1.6といったように相対指定をしてしまうとバーティカルリズム（Vertical Rhythm）は崩れてしまうのである。

たとえば8pxのグリッドに合わせてデザインしようとした時、サイト全体ですべてのフォントに1.5のline-heightを指定していると、大きさ16pxのフォントの1行は24px（16px × 1.5）になり8pxのグリッドに沿うが、大きさ18pxのフォントだと27px（18px × 1.5）となりグリッドからずれるのである。

つまりバーティカルリズム（Vertical Rhythm）を維持しようとするなら、フォントサイズに応じてline-heightを変えなければならないのである。上の例であれば、18pxのフォントで8pxのグリッドに沿わせたいのであれば、line-heightは32pxまたは24px（もしくは4pxを許容して28px）と絶対指定すべきであろう。

バーティカルリズム（Vertical Rhythm）の意識があるかないかはline-heightの指定でわかるのである。