ウェブ組版は行間が基準なのではという話

以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。
＞ remの基準となる値を行の高さにする | yoshihiko com-blog

行間 ≠ line-height という罠

よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。

行送り= line-height、行間= line-gap

で、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっているので少々ややこしい。

日本語組版では文字の下に行間がつく、つまり、いちばん初めの行の上にはスペースは空かない。一方CSSでは文字の上下に line-gap の半分がそれぞれつくので、初めの行の上と、最終行の下にスペースがうまれる。これがデザイナーを悩ませる。なぜかというと、通常デザインをつくるためのアプリケーションでは、見ためとレイアウトの正確性を重要視するため、この文章の上下のアキがオブジェクトとして存在しない場合が多い。そこでカンプと実装後の見栄えに座標的なズレが生じる。しかも、視線誘導に重要な最初行と最終行の前後にアキができるという仕様。悩ましい。すべては、仮想ボディではなくベースラインのみを基準にしたまま、CJK言語圏への対応が進んでいないCSSの設計思想のおかげなわけだけど（なぜその違いが生まれるかは割愛。こちらのNat McCully氏の資料が詳しい）。

バーティカルリズムというかベースライングリッドについて

要はタイポグラフィの話

近頃？ バーティカルリズムという言葉が聞かれるけど、これは要するに古典タイポグラフィにおけるベースライングリッドの効果についての話とおなじだと思う。つまりは、ウェブの話というよりは、デザインの基本要素であるタイポグラフィをどう媒体最適化させるかという話に過ぎない。

最小構成要素=本文の基本単位を使って規則性をつくる

和文の組版では、仮想ボディ＝つまり本文サイズの正方形をすべての基準として、ページを設計する。そのための専用の単位として「級数（Q数）」がある。1文字10Q、１行が20文字で、段間が2文字、3段組みの場合、コンテンツ幅は640Q ＝ 160mm ということになる。つまり和文前提の場合、カラム幅は、文字サイズ×文字数が最適になる、ということだ（厳密にはいろいろあるけど、これも割愛する）。したがって、 タイポグラフィの基準は文字サイズであるということだ。

その基準の反復による規則性をタイポグラフィに利用して、デフォルトの流れをつくり、安定した読みやすさや、反転、要点を把握しやすい起伏をつくったりする手がかりにする。

タイポグラフィの基準

では、欧文基準のCSS＝ウェブ組版ではどうなるんだろうか。
和文のように原稿用紙が敷き詰められたベタ組みではなく、プロポーショナル的な左寄せラギッド組みが基準の組版がベースになるから、カラム幅などのタイポグラフィの基準は文字サイズを参考にしてもいいが、完全にピッタリになるわけではない。

ウェブでの文脈方向は基本的に上から下の横組、かつHTMLは上から下にどんどんタテ積みになる仕様だから、ここで行送り＝line-height が登場する。結論から言うと、タイポグラフィの基準は font-size ではなく line-height なんじゃないかということ。

（ここからは、理論は希薄で予想にちかいのだけど…）

基準値は何になるか

上下方向は 「line-gapの半分＋本文サイズ＋line-gapのもう半分 ＝ line-height の整数倍」、左右方向は「line-height を整数倍」したガターで割り切れるカラム設計（日本語サイトの場合、左右方向は本文サイズの整数倍を基本にしてもいいかも）となる。タテ積みになる以上、margin や padding もこれに揃えていく必要があるので、ここでも line-height を基準として使っていく。これなら、行取りもすごく素直に書けそう。

remの値に font-size ではなく line-height をつかう

ここまでの話をまとめると、タイポグラフィの基準値を line-height にするとよいのでは、ということを書いてきた。そこで出てくるのが rem だ。
Sassとかで実装してもいいのだけど、たとえば大規模案件で作業者が多数になるとか、フローを鑑みなければならない場合など、現場あるあるを考えていくと、できるだけCSS上の表現をシンプルにするべきじゃないかな、というところから、これはいいんじゃない？ と思っている次第。

1rem ＝ 本文の line-height を基準にすることで、line-heightの整数倍でデザインを管理する、というのが飛躍的に単純化されるのでは？ という考え。（厳密には、画像まわりどうするのとか、いろいろあるとは思うのだけど…。）

よくウェブまわりの文字組み関連では「文字詰め大事！ 画像文字！ スクリプト！」と言われることが多いと感じているのだけど、個人的な感覚として、ツメ組み（プロポーショナル）よりもベタ組み（モノスペース or フィクスド）のほうがよっぽど大事で、地味だけど難しいのではないかなと思う次第です。

半角英数やカナが多いであろうウェブ言語圏では、ツメ組みがいい！ という場合も往々にしてあるかなとは思うのだけど、それはベタがあってこそのツメなのかなあと。

なんにせよ、メディアが固定枠でなくなり、コンテンツが多面露出する流れが決定的になってきているので、文字 ── というよりテキストデータそのもの ── をどう扱うか、という根源的な問題は、デザインにおいてより大事になるんではないかなという所感でした。

※この記事では、「仮想ボディ」「プロポーショナル」「ベタ」…などの用語の定義は「比較的業界内で一般的な認識、と私が考えている意味合い」です。この記事ではあくまでもCSSでよりよい文字組を（現場で）実現するためのアイデアのひとつを例にあげているものですので、ここでそれら用語を厳密にしようとするものではありません。ご了承ください。