私は最近、優れた垂直リズムの重要性に関するいくつかの記事を読んだり、Webデザインのタイポグラフィにベースライングリッドを使用したりしています。私が現在取り組んでいるWebデザイン/ WordPressテーマの背景画像として、下の写真の960グリッドのようなベースライングリッドを使用してみることにしました。
グリッド内にすべてを適切に配置するのは非常に困難です。垂直グリッド内のすべてをデフォルトのtext-size（16px）で取得できましたが、見出しのサイズをいじったり、画像を追加したりすると、アイテムがグリッドに正しく配置されないことがあります。
垂直リズムを使ってタイポグラフィを改善する方法を知りたいです。誰かが私が使うべきヒントやテクニックを持っていますか？
回答:
Webデザインのベースライングリッドは必要な学術的なパズルですが、ハードコードされた数学的な観点からはほとんど非現実的です。CSSにはタイプのベースラインの概念がないため、ベースラインを一致させることは技術的に不可能です。
間隔を空けることに近づくこともできますが、最終的には数値を見るときに意味をなす可能性がありますが、視覚的には外れている可能性が高く、結果が正しいことを確認するために数式から迷っています。
したがって、要約すると、視覚的なリズムは重要ですが、ウェブ上で適切に実装するためのいくつかの方程式ではなく、腸から構築します。
余談ですが、ベースライングリッドの概念は印刷デザインの世界から来ていることに注意してください。具体的には、新聞などのように、列ごとにタイプを揃えたい複数列レイアウトです。この種のパブリケーションのタイプセットを簡単にするために、ベースライングリッドは理にかなっており、DTPアプリケーションの世界では比較的簡単に実装できます。
特にCSSリセットから始める場合は、垂直リズムを実装するのは難しくありません。私はこのリンクhttp://24ways.org/2006/compose-to-a-vertical-rhythmに偶然出会いました。それ以来、すべてのデザインでこのテクニックを使用しています。
私が見つけたのは、CSSファイルで「定義済み」の一連の型宣言（h1-h6、pなど、具体的にはサイズ、行の高さ、下余白）を操作した後、非常に簡単に展開できることです。
これは、物事を少し明確にするのに役立つ背景画像です。特に、最初にVertリズムを使用していたときです。
見づらいかもしれませんが、背景画像として繰り返されると、20x20のグリッドが表示されます。
HTH
注：このテクニックを使用したサイトのタイポグラフィは、使用していないサイトよりも気に入っています。ただし、どちらの場合でも、「システムをだまして」「正しく」見えるようにするための要素が1つまたは2つあるように見えます。また、全体の行の高さ（12pxフォントベースの場合は18pxなど）に注意を払うと、マージンや画像、グラフィックヘッダーなどの周囲のパディングがかなり単純になる（18px）こともわかりました。また、すべてを計算するという衝動はなくなります...レイアウトに関する「垂直方向のリズム」に気づき始め、非常に短い値のリストから適切なパディング/マージン/行の高さを引き出すことができるようになりますあなたの頭の中で。
ベースラインと垂直方向のリズムに関するSmashing Magazineに関するこの非常に優れた記事は、ウェブデザインにおけるベースラインの重要性と、CSSにそれらを実装する方法の両方に対する洞察を提供します。デフォルトのhtml要素のfont-size、line-height、padding、およびmarginを使用して、すべての行をベースライングリッドに合わせます。
すべてをグリッドに一致させるために、ドーソンが示唆するように、背景画像は非常に便利です。
私は最近のいくつかのデザインでこのテクニックを使用してきましたが、本当に効果があると思います。