タイポグラフィ
ベースライングリッド
Baseline Grid
ベースライングリッドとは、画面全体に等間隔の見えない水平線を敷き、すべての行をその線に乗せて縦のリズムを整える方法です。
グリッドに合わせる
定義
ベースライングリッドは、画面全体に等間隔の見えない水平線を敷いておき、すべてのテキストの行が その線の上に乗るようにそろえる方法です。文字は下辺を基準に置かれますが、この下辺のことを ベースラインと呼びます。行の高さを4pxや8pxといった基準間隔の倍数だけで決めると、別々の カラムやカードにある行同士が同じ水平線の上に並びます。楽譜の五線譜の上に音符がきれいに 並ぶ様子に似ています。もともと印刷編集から来た考え方なので、画面で厳密に守るのは難しい ですが、縦方向に整ったリズムを作るうえで大きな助けになります。
なぜ重要か
画面に複数のテキストブロックが並んで置かれるとき、それぞれの行がばらばらに配置されると、 互いに微妙にずれて雑然とした印象を与えます。ベースライングリッドを守れば、複数のカラムや カードの行が同じ線の上にそろい、目に見えないルールが画面全体をしっかりと支えてくれます。 こうして縦のリズムがそろうと、ユーザーは理由をはっきり言葉にできなくても、画面が整っていて 信頼できると感じます。逆に行間がばらばらの値で混ざっていると、個々の要素は問題なく見えても、 全体をまとめて見たときにどこか落ち着きません。余白と行の高さが一つの基準グリッドを共有して はじめて、画面が一つのまとまったシステムのように見えてきます。
よくある間違い
- 行の高さと余白を、それぞれ別々の基準で決めてしまうケースです。余白は8の倍数なのに行の 高さはばらばら、という状態だと二つのリズムがずれてグリッドが崩れます。テキストと間隔が 同じ基準グリッドを共有してこそ、縦のそろいが生きてきます。
- 最初からピクセル単位で完璧にそろえようとして、疲れて途中であきらめてしまうケースです。 画面は要素が多く、厳密なグリッドを100%守るのは難しいものです。完璧を目標にするより、 大きな流れをそろえるほうが現実的です。
- グリッドの間隔を、基準なしに適当な値で決めてしまうケースです。5pxや7pxのような中途半端な 値でグリッドを作ると、余白やアイコンのサイズとうまくかみ合わず、かえってそろえるのが 難しくなります。4や8のように割りやすい値を基準にしましょう。
実務のヒント
- 厳密なグリッドが負担に感じるなら、行の高さを8の倍数だけにそろえるだけでも縦のリズムが 目に見えて整います。印刷のように完璧にそろえるより、基準グリッドを決めておいておおむね 守るだけでも十分に効果があります。
- 基準となる間隔を一つ決めて、余白と行の高さがその値を一緒に共有するようにしましょう。 テキストと間隔が同じ倍数を使えば縦のそろいが自然に決まり、画面がぐっとまとまって見えます。 この基準値はチームの中で一度決めておき、繰り返し再利用するのがおすすめです。
- 見出しのように行の高さが大きい要素は、基準グリッドの複数のマスを占めるように倍数で そろえましょう。大きな要素も同じグリッドの上に乗せておけば本文とずれず、縦の流れが 途切れません。画像やアイコンの高さも同じ基準にそろえると、画面全体のリズムがいっそう しっかりします。