さまざまな画面サイズと新世代のウェブブラウザの混沌のなかで、レイアウトとタイポグラフィのデザイン原則は、静的なレイアウトとシステムフォントから、動的なレイアウトとカスタム web フォントへと移り変わった。画面はサイズだけでなく、ピクセル密度も変化している。今や必要なのはレスポンシブなレイアウトだけではない。レスポンシブな書体も必要だ。この仮説を確かめるために、私たちはレスポンシブ・タイポグラフィと独自開発のレスポンシブ書体を使って、ウェブサイトを再公開した。
最近まで、選べるシステムフォントはほんの数種類しかなく、選択肢はあまりなかった。セリフ書体は主に 1 つ（Georgia）、サンセリフは 2、3 種類（主に Arial と Verdana）だった。これらの書体は、いま私たちが低解像度画面とみなすもの向けに 1990 年代初頭に設計された。その条件ではよく機能する。残念ながら、高密度画面では機能しない。なぜだろう？
さようなら Georgia？
Georgia は、16 ピクセルまでは本文として完璧に機能する。それを超えると、急に奇妙に見え始める。これは書体の設計上の欠陥ではない。大きな本文サイズや高密度画面向けに設計されていなかっただけだ。
だからこそ、私たちは異なる解像度に適応するカスタム書体を設計した。それを iABC と呼んでいる（かなりの形状が 同名の小さなサイドプロジェクト に触発されている）。現時点では、モバイルデバイスと OSX でしか見られない。iABC が適切にヒンティングされるまでは、PC ユーザーには Georgia が表示される。
今振り返れば、カスタム書体を作るなんて完全に狂気の沙汰だったし、マイクロタイポグラフィの結果も決して素晴らしくはない。TypoBerlin のプロの書体デザイナーたちは、多くの段差や文字間のミスに眉をひそめていた。
私たちの新しい書体も、概念的にはかなり退屈だし、条件ごとに段階的なフォントを使うというアイデア自体も新しくはない。新聞は、紙質ごとに異なる段階のフォントを長年使ってきた。だが私たちの目的は、最高の書体を作ることでも、最高の書体デザイナーに私たちができると納得してもらうことでもなかった。レスポンシブ・タイポグラフィという概念を試したかったのだ。そして、その機能を備えたスクリーンフォントはほとんどないので、自分たちで作るしかなかった。
カスタム書体を作ったことで、サイトのすべてのグラフィック要素をその書体に埋め込む自由も得られた。実際の写真を除けば、ウェブサイト全体は文字で構成されている。
どのフォントがどこで、なぜ使えるのか？
ここからややこしくなる。画面サイズ、ピクセル解像度、レンダリング処理があまりにも多様なので、次の経験則を覚えておくと役立つ。
- PC: システムフォントはたいていの場合まずまず見える。カスタムフォントは、ヒンティングされていなければ悪夢だ。
- OSX: システムフォントは低解像度画面（たとえば昔の PowerBook G4）ではよく見え、高解像度画面（MacBook Air）では太すぎ、Retina ディスプレイではまあまあ見える。細めのフォントは高解像度画面では非常によく見えるが、Retina には細すぎる。
- iOS: システムフォントは高解像度画面（iPhone 1-3、iPad 1-2）では太すぎ、Retina 画面（iPad 3）ではまあまあ見える。Retina 画面で HTML を完璧に表示するには、縦向きでは少し太め、横向きでは標準の太さが必要だ。高解像度画面で完璧に見せるには、もっと細い書体が必要だ。
このリストは、おそらく分かりやすくなるどころか、かえって混乱させるだろう。もっと単純に言えば、低解像度を超えた最適な表示のためには、そして（システムフォントがまだ十分に機能する）PC の世界の外では、3 段階の書体グレードが必要だ。
- 細め（高解像度画面向け）
- 標準（Retina の横向き HTML モード向け）
- 太め（Retina の縦向き HTML モード向け）
見せて！
ここで見せることもできる。いや、実際にはできない。1 台のデバイスだけでは、レスポンシブ・タイポグラフィは見えない。そして、うまくやれば、デバイスを比較してもそれは見えない。レスポンシブ書体の考え方は、書体が常に同じように見え、同じように感じられることだ。 2 つの例を見てみよう。
私たちの執筆アプリ iA Writer の例だ。目を細めると A と C が同じに見えるだろう。だが、実際に同じ書体なのは A と B だ。つまり、iPad 2 と iPad 3 で同じように見せるには、低解像度向けのフォントを少しだけ細く設計する必要がある。
このウェブサイトでは 3 段階を使っている。高解像度画面向けの細め（上）、Retina の横向きモード向けの標準（中）、Retina の縦向きモード向けの太め（下）だ。もう一度目を細めると、同じ見た目を得るには 3 つの異なるグレードが必要だと分かる。（実際には、完全な均質性のためには太めのグレードをここより少し太くする必要がある。）
それで何がそんなに大事なの？
この種のたわごとは、どんな状況でも可能なわけではない。Mac と PC の画面を同じに見せるのは文字通り不可能だが、それは大きなニュースではない。だが、レスポンシブなレイアウトとレスポンシブな書体は、よりよいデジタル読書体験を作る。 書体が読みやすいほど、サイトの読書パフォーマンスはよくなる。ほとんどの人は、良いタイポグラフィと悪いタイポグラフィの違いを見分けられないが、誰もがそれを感じる。今のところ、私たちは暫定版の書体があなたを不快にさせないことを願っている。
この話をもっと聞きたいなら、私たちはちょうど、Responsive Typography をゼロから解説するシリーズを始めたところだ。Part 1 は Responsive Typography: The Basics。
