ベースライングリッドとは?文字のベースラインとの違いと使い方

文章を2段に分けて並べたら、隣の段と行の高さが微妙にずれて、なんとなく落ち着かない、と感じたことはありませんか。

そのずれをなくすための考え方が、行の基準線をページ全体でそろえる「ベースライングリッド」です。

この記事では、ベースライングリッドとは何か、文字の「ベースライン」との違い、どんな場面で役立つか、そして間隔の決め方とFigma・CSSでの使い方を、見本を使って初心者向けに解説します。

ベースライングリッドの基本

まずは、もとになる文字の「ベースライン」とは何かを確認し、そのうえでベースライングリッドとの違いを押さえましょう。

文字のベースラインとは

ベースラインとは、文字を横に並べるときに、文字が乗る基準になる見えない水平線のことです。

もともとはアルファベットなどの欧文(英語などのヨーロッパの言語の文字)の書体で使われる言葉で、ほとんどのアルファベットは、文字の底がこの線にそろうように作られています。

ただし、「g」「p」「y」のように下に伸びる部分がある文字は、その部分だけベースラインより下にはみ出します。

MDNの用語集でも、ベースラインは「テキストの個々の文字が配置される」概念上の線であり、ほとんどのアルファベットの字形の底辺はこの線の上に置かれる、と説明されています(MDN: Baseline (ベースライン、組版))。

Baseline gpy

見本A:欧文の文字と、ベースライン(青い線)。多くの文字の底が線にそろい、「g」「p」「y」の下に伸びる部分だけが線より下に出る

文字Type

見本B:和文と欧文を並べた例。多くの和文フォントでは、漢字やかなの下端が欧文のベースライン(青い線)より少し下に出る

見本Bのように、日本語の文字(和文)は欧文とは作り方が違い、ベースラインではなく、文字を収める正方形の枠(仮想ボディ)を基準に設計されています。

W3Cがまとめた「日本語組版処理の要件」でも、漢字・ひらがな・カタカナは同じ大きさの正方形の枠を持つと説明されています(日本語組版処理の要件・W3C)。

かんたんに言うと、欧文は文字の底(ベースライン)をそろえて並べ、和文は1文字ずつ同じ大きさの正方形の箱に収めて、その箱をそろえて並べる、という違いです。

そのため、和文と欧文を混ぜると、同じ行でも文字の高さが少しずれて見えることがあります。

これはフォントの作りの違いによるもので、操作を間違えたわけではありません(目立つ見出しでの直し方は、このあとの「注意点・よくある間違い」で紹介します)。

なお、ベースライングリッドでそろえるのは文字の底ではなく「行の位置」なので、日本語の文章でも同じように使えます。

ベースライングリッドとは

ベースライングリッドとは、ページ全体に一定の間隔で横線を引き、すべての文章の行がその線にそろうように配置するためのグリッドのことです。

ノートの罫線のように、どの段のどの行も同じ高さの線に乗るため、文章を複数の段に分けても、行の位置が横一直線にそろいます。

2つの言葉は似ていますが、指しているものの範囲が違います。

用語	何の言葉か	範囲
ベースライン	書体(文字のデザイン)の言葉	1行の中で、文字が乗る基準線
ベースライングリッド	レイアウトの言葉	ページ全体に一定間隔で引いた、行をそろえるための横線の集まり

たとえるなら、ベースラインは1行の文字が並んで乗る「床」で、ベースライングリッドは、その床をページ全体に同じ間隔で何本も引いた「ノートの罫線」です。

ベースラインは「1行の中で文字の底をそろえる」話、ベースライングリッドは「ページ全体で行の位置をそろえる」話、と分けて考えると混ざりにくくなります。

縦の列で横方向の位置をそろえるのがカラムのグリッドだとすると、横の線で縦方向の位置をそろえるのがベースライングリッドです(カラムのグリッドについてはグリッドと余白の関係とは?、PCでよく使う12カラムのグリッドは12カラムグリッドとは?で解説しています)。

ベースライングリッドの考え方は、雑誌や書籍のような印刷物のレイアウトで古くから使われてきました。

アプリやWebの画面でも、たとえばGoogleのデザインガイドライン「Material Design」の旧版では、文字を4dp間隔の横線にそろえるルールが示されていました(Material Design「Metrics & keylines」(英語))。

dpはAndroidで使われる長さの単位で、Webのpxとほぼ同じ感覚で考えてかまいません。

ベースライングリッドが役立つ場面

ベースライングリッドが特に役立つのは、文章を2段・3段のように横に並べる「段組み」のレイアウトです。

段が1つだけなら行のずれに気づきにくいものの、段が横に並ぶと、隣の段の行と見比べられるため、わずかなずれでも目に入ってしまうからです。

次の見本は、2段に組んだ文章の片方の段に見出しを入れた例で、薄い黄色の線は24pxごとに引いた目安の線です。

段が分かれていても、行の高さがそろっていると、隣の段と見比べたときに文字の並びが横一直線に通ります。読む人は段をまたいでも迷いません。

見出しの前の文章です。

見出し

見出しのあとの行が、隣の段の行とずれています。

NG:見出しの高さと下の空きの合計が36pxで、24pxの倍数になっていない。見出しのあとの行が、隣の段の行と半行分ずれている

見出しの前の文章です。

見出し

見出しのあとの行も、隣の段の行とそろっています。

OK:見出しの高さ32pxと下の空き16pxの合計を48px(2行分)にした。見出しのあとの行も、目安の線にそろったまま

NGの見本では、見出しを入れた段だけ、その後の行が目安の線のあいだに来てしまい、隣の段と行の高さが食い違っています。

OKの見本では、見出しが「2行分」の高さにぴったり収まっているので、見出しのあとも両方の段の行が同じ線の上に並びます。

ほかにも、カードを横に並べてそれぞれに説明文を入れるときや、写真の横に文章を置くときなど、文章が横に並ぶ場面ではベースライングリッドが行の高さをそろえる助けになります。

ベースライングリッドの使い方

ここからは、ベースライングリッドの間隔の決め方と、Figma・CSSでの使い方を見ていきます。

本文の行送りをグリッドの間隔にする

ベースライングリッドの間隔は、本文の「行送り」に合わせて決めるのが基本です。

行送りとは、ある行の基準の位置から次の行の基準の位置までの距離のことで、CSSやFigmaでは「line-height(1行の高さ)」として指定します。

ページの中でいちばん行数が多いのは本文なので、本文の行送りをそのままグリッドの間隔にすれば、本文の行は自然にグリッドにそろいます(行送りと行間の違い、本文の行間の目安は読みやすい行間と行長の目安で解説しています)。

そのうえで、見出しや余白は「本文の何行分か」で決めていきます。

本文16px・行送り24pxにした場合の例を見てみましょう。

要素	設定の例	合計の高さ
本文	文字16px・行送り24px(1.5倍)	1行=24px(1行分)
段落と段落の間	24px	24px(1行分)
見出し	文字24px・行送り32px+下の空き16px	48px(2行分)
セクションの区切り	48px	48px(2行分)

見出しの行送り32pxは24pxの倍数ではないので、そのままでは1行分(24px)より8px多く、2行分(48px)には16px足りません。

そこで、足りない16pxを見出しの下の空きとして足し、32+16=48pxで、ちょうど2行分の高さにしています。

見出しのブロックが2行分にぴったり収まるので、見出しの次の本文はまたグリッドの線に戻ります。

このように、一つひとつの数値ではなく、ブロックの合計の高さを本文の行送りの倍数にするのがポイントです。

ここで使った数値は、どれも8の倍数でもあるので、余白を8の倍数でそろえるルールとも両立できます(8の倍数で余白を決める考え方は8pxグリッドとは?で解説しています)。

細かい単位でそろえる方法もある

アプリやWebの画面では、本文の行送りより細かい4pxや8pxの単位で横線を引き、文字の位置をその単位でそろえる方法もよく使われます。

画面にはボタンや入力欄、アイコンなど文章以外の要素が多く、すべてを本文の行送りの倍数にそろえるのは難しいためです。

前の節で紹介したMaterial Designの旧版の「文字は4dp間隔にそろえる」というルールも、この細かい単位の考え方です。

細かい単位では、段をまたいで行が一直線にそろうとは限りませんが、文字の位置や行の高さが4や8の倍数にそろうので、画面全体の縦方向の位置に規則が生まれます。

長い文章を段組みで見せるなら本文の行送り、部品の多いアプリやWebの画面なら4pxや8pxの単位、と使い分けると考えやすいでしょう。

Figmaで横線のガイドを表示する

Figmaでは、フレームに「行」のレイアウトガイドを追加すると、一定の間隔の横線を表示して、ベースライングリッドの代わりに使えます。

Figmaのレイアウトガイドには「均等グリッド」「列」「行」の3種類があり、「行」はフレームの幅いっぱいに伸びる水平のガイドです(Figmaヘルプ「レイアウトガイドを作成」)。

フレームを選択し、右サイドバーの「レイアウトガイド」の欄で追加ボタンを押す
追加したガイドの設定を開き、種類を「行」に切り替える
配置の種類を「上」にし、行の「高さ」に本文の行送り(例:24)を入れる
「数」は、フレームの高さを覆えるくらい多めにする

ガイドが表示されたら、本文のテキストの行送りをガイドの高さと同じ数値にし、テキストの上端をガイドの線に合わせて置きます。

カラムのレイアウトガイドと同じフレームに重ねて追加できるので、縦の列と横の線を両方表示しながら配置できます。

CSSでベースライングリッドに近づける

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る人は、「本文の行送りを基準にして、見出しや余白をその倍数にする」という考え方だけ押さえておけば十分です。

現在のCSSには、文章の行を自動でベースライングリッドに吸い付ける、主要なブラウザで共通して使える機能はありません。

そのため、line-height(1行の高さ)とmargin(外側の余白)の数値を、本文の行送りの倍数になるように指定して近づけます。

body {
  font-size: 16px;
  line-height: 1.5;      /* 16px × 1.5 = 24px(グリッドの間隔) */
}
p {
  margin: 0 0 24px;      /* 段落の間は1行分 */
}
h2 {
  font-size: 24px;
  line-height: 32px;     /* 見出し自体の行の高さ */
  margin: 48px 0 16px;   /* 上は2行分、下は32+16=48pxで2行分にそろえる */
}

見出しのline-heightは、見出しの要素そのものに指定しているので、本文の設定を引き継いで行が重なることはありません(MDN: line-height)。

ただし、見出しが2行に折り返すと高さが64pxになり、そこから下はグリッドから半行分ずれてしまいます。

Webでは画面の幅によって折り返しが変わるので、すべての行を完璧にそろえようとせず、段組みや横並びの部分で大きなずれがないかを確かめる程度に考えるのが現実的です。

1段だけのブログ記事なら、見出しや段落の間隔を本文の行送りの倍数で決めておくだけで、十分に整って見えます。

行の位置まで気にするのは、段組みや、説明文の入ったカードを横に並べる部分だけで大丈夫です。

実践のポイント

ベースライングリッドを使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

本文の行はグリッドにそろえたのに、見出しや画像の高さを感覚で決めてしまい、その下からずれていくことがあります。
見出しや画像も、上下の余白と合わせた高さが本文の行送りの倍数になっているかを確かめましょう。
グリッドに合わせることを優先して、見出しの行送りを極端に狭くしたり広くしたりしてしまうことがあります。
読みやすさを損なうなら本末転倒なので、見出しの下の空きで調整しましょう。
和文と欧文を混ぜた行で、欧文のベースラインに合わせても、和文の文字と高さがずれて見えることがあります。
和文と欧文は設計の基準が違うためで、目立つ見出しなどでは、欧文や数字だけ位置を少し上下させて見た目をそろえることがあります。
Webのページで、すべての行を1pxの狂いもなくそろえようとして、作業が進まなくなることがあります。
文字の位置はフォントやブラウザによっても少し変わるので、段組みなど行が横に並ぶ部分を優先してそろえましょう。

よくある質問

Q. 1段だけのブログ記事にもベースライングリッドは必要?
A. 必須ではありません。
行が横に並ばないので、ずれが目に入りにくいためです。
ただし、段落や見出しの間隔を本文の行送りの倍数で決めておくと、縦方向の間隔に規則が生まれ、ページ全体が整って見えます(縦方向の間隔の規則については余白のリズムとは?で解説しています)。
Q. 8pxグリッドとは何が違う?
A. 8pxグリッドは、余白や要素の大きさを8の倍数でそろえるための仕組みです。
ベースライングリッドは、文章の行の位置をそろえるための仕組みです。
本文の行送りを24pxのような8の倍数にしておくと、2つを無理なく組み合わせられます。
Q. 「ベースラインシフト」とは何?
A. 選んだ文字だけを、ベースラインから上や下へずらす機能のことです。
アドビの解説では、Illustrator・Photoshop・InDesignの文字パネルにある機能として、和文の中の数字や記号の高さを整える使い方が紹介されています(ベースライン調整のセンスを磨いておこう・アドビ)。
ページ全体の行をそろえるベースライングリッドとは別のもので、1行の中の文字の位置を微調整するためのものです。