Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。
1年以上前のSugamo.cssで出したネタ。もうちょい纏めてから出そうと思ってたけど、いつまでたっても手を付けられないうちに風化しだしてきたから、えいやっと張るだけ張ってみることにした。（サンプル）
何をやっているかというと、まあつまり、本文組の行間サイズで全部揃えてみたら心地良いリズムになるんじゃね？という実験。当然、毎回手動で各要素をpx調整するのはクールじゃないから、あらかじめ<p>とか<pre>とか<blockquote>とかにルールを設定しといて、テキスト流し込むだけで良い感じにならないかなー、と。
まあ結論としては、「こんなのWebじゃねぇ」といった感じですがね！ 仕事なら、こういったことはデザイナさんが考えるべきだろうし、そこまで決められるなら自分でやった方が速いだろうし、そもそもそんな余裕のあるプロジェクトなんて稀じゃね？ そこまで詰める時間があれば、もっと面白いコンテンツで埋めろよ、というのがWebだよなあ。
個人ブログとか、フルスクラッチでコーディングから作れる実験サイトみたいなんなら活かせるかなー、といったところ。
さて、内容の説明をすると... 魔法の言葉「14px * 1.5 = 21px」で事足りる。要するに「本文文字サイズ * line-height」が「行の高さ」に一致するから、この行をグリッドとして全て収めてしまえば良い。なんだったら以下みたいなコメントをソースにのっけとけば一目瞭然。
/* vertical grids
--------------------------------------------------------------
*
* Basic 14px Rule
* - 14px * 1.5 = 21px
* - 12px * 1.75 = 21px
* - 24px * 1.75 = 42px
* - 1.75 * 2 = 3.5 = 0.875 + 2.625
*
* font-size: 72px; line-height: 1;
* font-size: 24px; line-height: 1.75; margin-bottom: 0.875em; margin-top: 2.625em;
* font-size: 21px; line-height: 1; margin-bottom: 1em; margin-top: 2em;
* font-size: 14px; line-height: 1.5; margin-bottom: 1.5em;
* font-size: 12px; line-height: 1.75; margin-bottom: 1.75em;
*
-------------------------------------------------------------- */行グリッドより大きな見出しなどは、2–3行取ってその中で上下に動かしてmargin調節とする。逆に注釈やコードブロックなど、本文より小さな文字の場合はline-heightを広めにとって行グリッドと同じにする。どーせ小さい文字は行間広めに取らないと読みにくいから、ちょうど良い。高さの調節がしづらい画像などは、適当な倍数分の行グリッドで高さを決めて、軽く縮小してやると簡単。
...とまあ簡単そうに聞こえるけど、実際には<li>みたいな単純にline-heightだけでは制御できない要素とか、上下にborder取るとその分ずらしてやらないといけなかったり、そもそもフォントが変わると行間変わっちゃったりもすることもあったり(mono-spaceだと大きくなったり、Operaでは総称ファミリ指定のみじゃないと揃わないなど)して、細々詰めると悩ましい。
まあそこまで詰めなくても大枠だけ決めちゃったほうが幸せになれるかな。最後にサイズ調節用に簡単なツールを投下してしめることにする。しょーもないけど！
Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。