Webタイポグラフィの解放 ―
10種類のフォントから、バリアブルフォントまで

Verdanaしか選べなかった時代を覚えていますか

「フォントは自由に選べるもの」だと思っていませんか。いまのWebでは、Google Fontsを貼るだけで数千種類の書体が使えます。Adobe Fontsを契約すれば、さらに膨大なライブラリが手に入る。フォント選びに困ることはあっても、「選択肢がない」と嘆くことはまずないでしょう。

しかし、ほんの15年前まで、Webデザイナーが安心して使えるフォントは10種類程度しかありませんでした。Arial、Verdana、Georgia、Times New Roman、Trebuchet MS、Courier New……。この名前に見覚えがある方は少なくないはずです。私がHTMLを書き始めたころ、CSSのfont-familyに指定できるのは事実上これらだけでした。

なぜ「10種類」だったのか。理由は単純です。Webのフォントは、閲覧者のパソコンにインストールされている書体しか表示できなかったからです。Windows、Mac、Linuxでインストール済みのフォントは異なる。すべてのOSに共通して入っている書体——いわゆる「Webセーフフォント」——だけが、デザイナーにとっての確実な選択肢だったのです。

印刷の世界では、グラフィックデザイナーが何百種類もの書体の中から最適なものを選ぶのが当たり前でした。活版印刷の時代から数百年かけて築かれたタイポグラフィの文化が、Webという新しいメディアに移ったとたん、リセットされてしまった。文字は読めるが、「語れない」。見出しのインパクトも、本文の品格も、すべてがArialとTimes New Romanの間に押し込められていたのです。

Webセーフフォントが生まれた背景

1996年、Microsoftは「Core fonts for the Web」というプロジェクトを立ち上げます。目的は、Webでの文字表示を改善するための高品質な無料フォントを配布すること。このプロジェクトで生まれたのが、VerdanaとGeorgiaです。

設計を担当したのは、書体デザイン界の巨匠マシュー・カーター（Matthew Carter）。カーターは「画面上の小さなサイズで読みやすいこと」を最優先に、ピクセルグリッドを意識した設計を行いました。Verdanaは広めの字間と大きなエックスハイトを持ち、低解像度のモニターでも潰れにくい。Georgiaはスクリーン上で美しく見えるセリフ体として、丁寧にヒンティング（画面表示用の補正情報）が施されました。手がけたのはTom Ricknerです。

しかし、VerdanaとGeorgiaを加えても「全プラットフォームで確実に表示できるフォント」はせいぜい10種類程度。デザイナーたちは、この制約の中で工夫を重ねるしかありませんでした。見出しに個性を出したければ、Photoshopで文字を画像にして貼る。いわゆる「画像文字」の時代です。検索エンジンにも読めず、拡大するとぼやけ、修正のたびに画像を書き出す——それでも、当時はそれが唯一の方法でした。

10年の空白——なぜ誰もWebフォントを使わなかったのか

技術は1998年の時点で存在していました。@font-faceというCSS規則を使えば、サーバー上のフォントファイルをブラウザにダウンロードさせ、表示に使うことができた。IE4はすでに対応していたのです。それなのに、なぜ10年もの間、Webフォントは普及しなかったのか。

最大の障壁は技術ではなく、ライセンスでした。@font-faceのsrc属性にフォントファイルのURLを指定すると、そのファイルは誰でもダウンロードできてしまいます。つまり、商用フォントをWebサイトに埋め込んだ瞬間、世界中の誰もがそのフォントファイルを無断で入手できる状態になる。フォントファウンドリ（書体メーカー）にとって、これは到底受け入れられない事態でした。

Adobeをはじめとする大手ファウンドリは、Web上でのフォント配布に強く反対しました。MicrosoftのEOT形式は暗号化による保護を備えていましたが、プロプライエタリ（独自仕様）であり、他のブラウザは採用しませんでした。MicrosoftがEOTをW3C標準にしようとした提案も却下されています。

一方で、Netscape NavigatorがオープンソースのFirefoxに生まれ変わる際、クローズドソースのTrueDoc形式への対応は外されました。結果として、IE以外のブラウザではWebフォントを使う手段がほぼ消滅した。「技術はあるのに使えない」という、奇妙な停滞期が続いたのです。

画像置換とFlash——苦肉の策たち

デザイナーたちは諦めませんでした。この10年の空白期間に生まれたのが、sIFR（Scalable Inman Flash Replacement）やCufónといったテクニックです。sIFRはFlashを利用してHTMLの見出しテキストを任意のフォントで置き換える手法で、2004年頃から広く使われました。CufónはJavaScriptとVML/Canvasで同様のことを実現しようとした2009年頃の技術です。

どちらもハックでした。テキスト選択ができない、アクセシビリティに問題がある、パフォーマンスが悪い——制約は山のようにあった。しかし、「見出しだけでもオリジナルの書体を使いたい」というデザイナーの情熱が、これらの裏技を生み出し、支えていたのです。CSS生みの親であるホーコン・ウィウム・リー（Håkon Wium Lie）は、2008年の講演でこう指摘しています。「デザイナーたちは画像置換で既にカスタムフォントを使っている。アクセシブルでもなく、将来性もない方法で。ならば正しい手段を用意すべきだ」と。

2009年——すべてが動いた年

2009年は、Webタイポグラフィの歴史における転換点です。この一年の間に、長年の停滞を打ち破る出来事が立て続けに起こりました。

まず、SafariとFirefoxが@font-faceをTrueType／OpenType形式で正式にサポートしました。MicrosoftのEOTではなく、より広く使われているフォント形式が採用されたことで、実質的に「全主要ブラウザ対応」への道が開けたのです。

次に、2009年5月、Jeffrey Veenが率いるSmall Batch社がTypekitを発表しました。Typekitはフォントファウンドリとデザイナーを繋ぐクラウドサービスで、サブスクリプション形式のライセンスと、JavaScriptによるフォント配信を組み合わせたものでした。フォントファイルはサブセット化・分割され、簡単には再利用できない形で配信される。これが、ファウンドリの懸念だった「ライセンス問題」を緩和するひとつの答えになりました。

さらに同年、W3CのCSS3 Web Fontsモジュールが正式なワーキングドラフトとして公開されます。そして、Erik van Blokland、Tal Leming、Jonathan KewらによってWOFF（Web Open Font Format）が開発されました。WOFFは、Microsoft、Mozilla、Operaと複数のタイプデザイナーが協力して作った「Webのためのフォント形式」で、ファイルサイズを軽くしつつ、Webでの使用に限定するエンコーディングを備えていました。

2010年にはGoogleがGoogle Web Fonts（現Google Fonts）をローンチ。オープンソースライセンスの書体を無料で配信するこのサービスは、Webタイポグラフィの民主化を一気に推し進めました。個人のブログから大企業のコーポレートサイトまで、誰もがプロフェッショナルな書体を自由に使えるようになったのです。

WOFF2、そしてバリアブルフォントへ

Webフォントが普及すると、次の課題が浮かび上がりました。パフォーマンスです。フォントファイルは画像ほどではないにせよ、ネットワーク帯域を消費します。とくに日本語のように文字数が膨大な言語では、フォントファイルが数MBに達することも珍しくありません。

2014年、WOFFの後継としてWOFF2が登場します。最大の特徴は、Googleが開発した圧縮アルゴリズム「Brotli」の採用です。WOFF2はWOFF1.0と比較して約30%のファイルサイズ削減を実現しました。2018年にはW3C勧告となり、現在ではほぼすべてのブラウザがWOFF2を標準でサポートしています。

そして2016年9月、タイポグラフィの世界にさらに大きな変革が訪れます。ポーランドのワルシャワで開催された第60回ATypI（国際タイポグラフィ協会）の年次カンファレンスで、Apple、Google、Microsoft、Adobeの4社が共同で「OpenType 1.8」を発表しました。その目玉機能が、バリアブルフォント（Variable Fonts）です。

従来、フォントのウェイトを変えるには「Light」「Regular」「Bold」「Black」と、それぞれ別のファイルが必要でした。4ウェイト使えば4つのファイルをダウンロードしなければならない。バリアブルフォントは、これをひとつのファイルに統合します。しかも、400や700といった固定値だけでなく、423や651のような中間値も自由に指定できる。CSSのfont-variation-settingsプロパティで、ウェイト・幅・傾きなどの軸を連続的にコントロールできるのです。

/* ひとつのフォントファイルから、任意のウェイトを指定 */
h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 823;  /* 100〜900の間の任意の値 */
  font-variation-settings: 'wght' 823, 'slnt' -5;
}

パフォーマンスの面でもメリットは大きい。5ウェイトのフォントファミリーを個別にダウンロードするより、ひとつのバリアブルフォントを読み込む方が、トータルのファイルサイズは小さくなることが多いのです。デザインの自由度とパフォーマンスの両方が向上する——バリアブルフォントは、その両立を初めて実現しました。

文字が自由になった先に見えるもの

Webタイポグラフィの歴史を振り返ると、そこには一貫したテーマが見えます。「制約の解放」です。10種類のシステムフォントから始まり、画像置換という力技を経て、@font-face、WOFF、Google Fonts、そしてバリアブルフォントへ。四半世紀をかけて、Webの文字は少しずつ自由を獲得してきました。

しかし、自由になったからこそ生まれる課題もあります。Google Fontsの手軽さは、書体選びの安易さにも繋がりかねません。Roboto、Open Sans、Noto Sans——数千種類の選択肢がありながら、人気ランキング上位の数書体に集中する傾向は、皮肉にも「Webセーフフォント時代」の均質さを別の形で再現しています。

日本語のWebフォントにも独自の課題があります。漢字・ひらがな・カタカナを含む日本語フォントは、欧文フォントと比べてグリフ数が桁違いに多く、ファイルサイズが大きくなりがちです。サブセット化やunicode-rangeによる分割読み込みなどの最適化技術が発達してきましたが、それでも欧文フォントほど気軽には使えません。日本語のWebタイポグラフィは、まだ解放の途上にあるといえるでしょう。

それでも、変化は確実に起きています。Noto Sans JPやBIZ UDゴシックのようなオープンソースの日本語フォントが登場し、Google Fontsで配信されるようになりました。バリアブルフォントの日本語対応も進んでいます。Webの文字は、かつて印刷の世界が何百年もかけて築いたタイポグラフィの豊かさに、数十年で追いつこうとしています。