[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline

Post on:2015年6月3日

sponsors

見出しや文章など、テキストの読みやすさを重視して設計されたレスポンシブ対応のグリッドを実装するスタイルシートを紹介します。

Sasslineはテキストが読みやすく、美しいタイポグラフィを実現するために開発されたもので、ブログでも企業サイトでも開発中のプロトタイプでも利用できます。単位には「rem」を使っており、ベースラインのグリッドからタイポグラフィのスタイルが機能するように設計されています。

テキストをデザインする際に、気を付けるべきことは「縦のリズム」。
Sasslineでは、ベースラインのグリッドに基づいて正確な縦方向のリズムを使うことができます。

レスポンシブ用に各サイズでの表示には、モジュール式のスケールを採用しています。これはブレイクポイントごとにテキストのサイズを簡単に設定でき、そのままベースラインのグリッドと連動して、美しく機能します。

Sasslineは、ルートのフォントサイズを文章で使うテキストのline-heightの半分にすることで、効果があります。

ルートのフォントサイズ = ½ line-height

ベースラインのグリッドの高さはそれを元に「2rem」で、1rem単位で増加します。ベースラインから相対的にremが整数値で機能するシンプルな設計で、印刷のテクニックをベースにしたものです。

デモでは、縦方向のリズムが美しいグリッドとテキストベースのコンテンツを楽しめます。

右上の「Toggle Grid」をチェックするとグリッドが表示されるので、縦の正確なリズムを見てみてください。

デモページ：見出しとリスト（グリッド表示）

レスポンシブ対応なので、表示サイズを変えるとそれに合わせて、フォントやグリッドが最適化されます。