レスポンシブ・タイポグラフィ: 基本

かつてウェブサイトを作るときは、まず本文を決めるところから始めていた。本文を決めると、メインカラムの幅はほぼ自動的に決まった。少なくとも、昔はそうだった。 最近まで、画面解像度はおおむね均質だった。だが今は、さまざまな画面サイズと解像度に向き合っている。そのせいで、物事はずっと複雑になった。

ia.net を再公開していた熱気の中で、私は レスポンシブ・タイポグラフィ について短いブログ記事を書き、私たちの最新の実験であるレスポンシブ書体だけに焦点を当てた。iA の歴史を知らなければ、再公開したサイトのレスポンシブ・タイポグラフィとデザインの重要な側面を見落としてしまうだろう。そこで私は、ゼロから始めて、レスポンシブ・タイポグラフィを段階的に詳しく説明することにした。これが第 1 歩だ。

可能なあらゆる画面サイズごとに違うレイアウトを設計することを避けるため、多くの web デザイナーは Responsive Web Design という考え方を採用してきた。要するに、レイアウトがデバイスのビューポートに自動で適応するという発想だ。やり方はいくつかある が、私は次のように考えるのが好きだ。

1. アダプティブ・レイアウト: 限られた数のサイズに合わせて段階的にレイアウトを調整する
2. リキッド・レイアウト: あらゆる幅に対して連続的にレイアウトを調整する

どちらにも長所と短所があるが、私たちは、ブレークポイントをできるだけ少なくしたアダプティブな設計のほうがよいと考えている。なぜなら、読書しやすさは、ビューポートいっぱいに広がるレイアウトであることよりも重要だからだ。これはそれ自体かなり複雑な問題に対する議論の余地のある意見だが、最適な可読性にはテキストの measure（カラム幅）をある程度コントロールする必要があり、その点でリキッド・レイアウトは解決する以上の問題を生み出す。そこはまた別の機会に。

注: レスポンシブデザインには、すでに多くのマクロタイポグラフィの問題（文字サイズ、行間、カラム幅）が組み込まれているので、レスポンシブデザインは多くの意味でレスポンシブ・タイポグラフィも含んでいる。ここで私たちがこのレスポンシブ・タイポグラフィの記事で注目したのは、主に ia.net での段階的フォントの使い方だ。次回は grading について話し、今は画面上のレスポンシブなマクロタイポグラフィの基本にまっすぐ入っていきたい。

書体を選ぶ

適切なトーン

やがて、どの書体を使うかを決める必要がある。フォント選びは主にトーンの問題だが、すべての書体にはそれぞれ固有の性質があり、特定の扱いを求めたり禁じたりするので、書体の選択は見た目にも技術的にも多くの影響を持つ。web フォントが普及した今では、選べる書体の数が大きく増えたので、自分のトーンに合うものを見つけることは、また別の課題になった。

2012 年、私たちはこのウェブサイトのために、レスポンシブ・タイポグラフィを試す目的で自前の書体 iABC を設計した。私たちはセリフ書体を選んだ。それは私たちのトーンに合っていて、コンテンツの洗練を映しているように思えたからだ（少なくとも私たちはそう考えた）。iA Writer では等幅書体を選んだ。私たちのプログラムの主な目的は、まず下書きを出すのを助けることだからだ。そこで私たちは Nitti を選んだ。強さと慎重さが同時に感じられる書体だ。等幅書体を使う決定には、初代 iPad の OS がプロポーショナル書体を自動カーニングしなかったことも関係していた。うまく表示されない可能性のあるプロポーショナル書体を使うより、最初から等幅書体を使うことにしたのだ。

それから 3 年後、Nitti への私たちの愛着は、今あなたが読んでいるカスタムのプロポーショナル版（かつ段階化版）につながった。

セリフかサンセリフか？

たいてい選択肢はセリフとサンセリフのあいだにある。これはそれ自体かなり複雑な問題だが、ひとつ役立つ簡単な目安がある。セリフ書体は司祭で、サンセリフはハッカーだ。どちらが優れているということではないが、いくつかの理由で、セリフ書体のほうがより権威的な雰囲気を持ち、サンセリフのほうはより民主的に感じられる。これは 5,000 年のタイポグラフィ史を雑に 2 行に押し込んだものにすぎないので、あまり真に受けないでほしい。

いまでも、多くの人は、スクリーンタイポグラフィでは「セリフかサンセリフか」が自動的に答えを出すと思っている。実際には、そんなに単純ではない。よくある思い込みに反して、本文サイズが 12 ピクセルを超えていれば、セリフもサンセリフも同じくらいうまく機能する。12 ピクセル未満ではセリフ書体は十分鮮明に表示されないが、（そしてこれが次のポイントだが）現代のモニタでは 12 ピクセルはどう見ても小さすぎる。

では、何サイズにするのか？

本文のサイズは、個人の好みでは決まらない。読む距離で決まる。コンピュータはたいてい本より遠くにあるので、デスクトップの書体サイズは印刷物より大きくなければならない。

下の図は、本文が遠いほど、より大きなサイズが必要なことを示している。黒と赤の A は 2 つずつ、同じ 数値上のサイズ だ。しかし右の組はより遠くに持たれているので、知覚されるサイズ は小さい。右の画像の赤い A は、左の画像の黒い A と同じ知覚サイズだ。

テキストを遠くに持てば持つほど、見た目のサイズは小さくなる。読む距離が遠いほど、その分テキストサイズを大きくして補正する必要がある。では、どれくらい大きくするのか。それ自体がひとつの科学だ。経験が浅いなら、よく組まれた本を心地よい読書距離で手に持ち、ウェブサイトと見比べるのが役に立つ。

web デザインの経験がないグラフィックデザイナーは、ウェブ上の本文が印刷物に比べてどれだけ大きいかに驚く。念のため言っておくが、それは横に並べて比較したときだけ大きく見えるのであって、遠近感のある比較ではそうではない。

本文サイズを合わせるために大きくしたあとで、その新しいサイズが最初はうるさく感じられても心配はいらない。普通のことだ。ただ、慣れてしまえば、もう「標準」の小さなサイズには戻りたくなくなる。

私たちは 2006 年から こうした「遠近法に比例した」フォントサイズを推してきた。当初、Georgia 16px が本文サイズのよい基準だと主張したときは、かなり怒られ、笑われもしたが、今ではほぼ一般的な標準になっている。高解像度化が進むと、その標準はゆっくりと古くなっていく。だが、その話はまた後で。

行間とコントラスト

本文サイズは遠近法のトリックで評価できるが、行間には別の調整が必要だ。読む距離が長くなり、（私たちが呼ぶところの）ピクセルのにじみがある場合、画面テキストには印刷物より少し多めの行間を与えるのが賢明だ。140% はよい基準だが、もちろん使う書体によって変わる。

いまや、コントラストが弱すぎないこと（たとえば薄いグレー地にグレーの文字）も、派手すぎないこと（たとえば黄色地にピンクの文字）も、当たり前だ。画面用書体は黒地に白、または白地に黒で表示されることを前提に設計されたので、暗い背景を使うのも少し難しいが、正しくやれば機能する。現代の高コントラスト画面では、白黒の強いコントラストよりも、文字には暗いグレー、背景には明るいグレーを選ぶほうが望ましいこともある。だが、やはりそれが最重要の問題ではない。

iPhone と iPad

レスポンシブ・タイポグラフィについて私たちが学んだ多くのことは、執筆アプリに最適なタイポグラフィを探したことから得られた。iA Writer for iPad を設計したとき、私たちは適切なタイポグラフィの定義を見つけるのに何週間も投資した。当時、iPad の高解像度画面はまったく新しい課題で、その仕組みを理解するまでにかなり時間がかかった。Apple が iPhone に Retina 画面を導入し、その後 iPad にも導入したとき、すべてがまた変わった。iA Writer の書体の象徴的な見た目にたどり着くまでの経緯だけで本が 1 冊書けるが、一般的な話にもまだまだ言いたいことがあるので、ここでは要点に絞る。

Writer for iPhone の現在のバージョンと iPad 版を比べると、文字サイズが同じではないことに気づくだろう。

なぜ iPhone と iPad で文字サイズが違うのか？ 上の説明を注意深く読んでいれば、もう察しがついたかもしれない。

1. 距離はいつも同じではないが、一般的には iPad のほうを少し遠くに持つ。朝食のテーブルでも、ソファに座って膝の上でも、ベッドで顔のすぐ前でも使うため、iPad にはさまざまな読書距離がある。これはまったく新しい課題だった。デスクトップやノートパソコンでは、読書距離がそこまで変わらないからだ。あらゆる状況で機能させるために、私たちは最も遠い読書距離を基準に文字サイズを決めた。そのため、ベッドで読むと少し大きめに感じるかもしれないが、不快ではないし、そもそも書くアプリをベッドでうつ伏せになって使うことはあまりない。
2. iPhone では画面領域が少ないので、調整を強いられる。

幸い、iPhone は顔に近づけて持つので、小さめの文字サイズを使わざるを得ないことはうまく機能する。平均的な読書距離で見れば、iPhone と iPad はほぼ同じ知覚文字サイズになる。

iPhone はより近くで持たれるので、行間も少し詰めることができる。これも画面が小さいからこそ必要になる。

画面向けにデザインするとき、すべてが自分に有利に働くとは限らない。インタラクションデザインはエンジニアリングだ。完璧なデザインを見つけることではなく、最善の妥協を見つけることだ。 私たちの場合、行間を減らす必要があり、さらにガターと文字間のスペースも調整しなければならなかった。

調整はとても繊細だったので、知らなければガターがどれほど小さいか気づかないだろう。なぜガターをなくさなかったのか？ ガターは見た目の問題ではない。テキストに呼吸の余地を与え、目が行から行へ飛ぶのを助ける。
これがすべて難解に聞こえるなら、そのとおりだ。だが、ここまでがまだ基本編にすぎない。

ではデスクトップは？

Writer for Mac の大きなフォントサイズについて不満を言う人がいる。iPad の文字サイズを決めるときに、私たちが最大の最小サイズを選ばざるを得なかったのと同じように（iPad はさまざまな読書距離で使われるからだ）、Mac でも最大の最小フォントサイズを選んだ。当時の基準は 24 インチの高解像度 iMac で、知覚サイズはほかのすべてのデバイスとほぼ同じだった。

iA Writer を動かす Mac は種類が限られているので、ありうる解像度をすべて特定できた。どの構成も見て、ほとんどの機種にとって文字サイズが最善の妥協になるよう確認した。

「じゃあ、ユーザーに文字サイズを選ばせればいいのでは？」と思うかもしれない。だが、文字サイズの調整は好みの問題ではなく、読書距離の問題だ。多くのウェブサイトやアプリの文字サイズは小さすぎるので、新規ユーザーはまず自分が慣れているサイズ、つまり小さすぎるサイズを選び、私たちの執筆アプリの本当の快適さを体験しないまま終わってしまう。主な理由は、すべてのユーザーに特定の見た目を押しつけたいからではない。私たちが望むのは、iA Writer が設定なしでも、もたつきなしでも動き、できることが書くことだけであることだ。これが成功の秘訣であり、それを変えるのは核をいじるようなものだ。（改善すべきは、視力の弱い人向けのアクセシビリティ統合だ。）

では、なぜデバイスの解像度に自動で合わせないのか？ それこそ本当のレスポンシブ・タイポグラフィではないのか？ その通りで、私たちは似たようなことに取り組んでいる。だが解像度に合わせるなら、書体が各サイズと各解像度で本当に意図どおりに働くよう、正しい見た目のウェイトも選ばなければならない。文字サイズと解像度に合わせて、フォントの光学特性も変わるのだ。だから、iA Writer for Mac、iPad 1/2、iPad 3 では、それぞれ違うグレードを使っている。デジタルフォントの grading の背後にある完全なロジックと、新しいウェブサイトの背後にある考え方を説明するには、もう少し時間とスペースが必要だ。続きは Part II をお楽しみに！

ここまでの反応

ソーシャルメディアボタンがないにもかかわらず、この記事は大量のリツイートを集め、批判はごくわずかだった。主に、リキッドレイアウトとアダプティブレイアウトの違いについてで、これは後で扱いたいテーマだ。Joshua Porter にこう言われたとき、私は驚いた。

@iA 「インタラクションデザインはエンジニアリングだ」の一文までは納得していたんですが。どういう意味なんですか？ —@Joshua Porter

他にも気になった人がいたかもしれないので…… 完全な引用はこうだ。「画面向けにデザインするとき、すべてが自分に有利に働くとは限らない。インタラクションデザインはエンジニアリングだ。完璧なデザインを見つけることではなく、最善の妥協を見つけることだ。」 ふだん私は「Web design is engineering: it’s not about finding perfection, it’s finding the best compromise.」と言う。Web design という語を使うと、技術的な含意がより明白なので、文が少し分かりやすくなる。ここでインタラクションデザインと言ったのは、例として挙げたのがアプリだったからだ。

つまり、グラフィックデザインではかなり高いレベルでグラフィックを制御できるのに対し、Web design では、最初の段階から視覚デザインと技術のあいだの妥協を考えなければならない。最適な結果を得るには、長所と短所がそれぞれ違う多くの解決策を探り、そのすべてが中途半端な選択肢である中から最善の妥協を見つける必要がある。

この時点で、グラフィックデザイナーはよく口を挟み、自分たちも技術にはかなり関わっているのだ、と言いたがる。もちろん、その通りだ。あらゆる制作物、あらゆるデザインには技術的知識が必要だ。だが、自動車エンジンのエンジニアリングとウェブサイトのエンジニアリングが違うのと同じように、ウェブサイトと雑誌をデザインすることにも違いがある。そしてその違いは、関わるエンジニアリングの度合いだ。

結論として、ウェブサイトやアプリを設計する過程では、私たちがやっていることの多くは妥協を考え、欠点が多すぎない解を探すことだということになる。これは多くのグラフィックデザイナーを遠ざける。彼らはコントロールに慣れているからだ。screen と graphic design の違いについて Khoi Vinh が行った 素晴らしいプレゼンテーション で、そのあたりはさらに詳しい。