本記事は北欧のデザインメディア DeMagSign の翻訳記事です。

元記事はこちら：Will Color Fonts unlock a new level of expression for web typography?

カラーフォントとは、新しいフォントフォーマットです。SVGなどのベクターデータやビットマップデータを組み合わせ、多彩な色や形の表現ができるようになりました。カラーフォントはブラウザによってサポートしているフォントがバラバラだったため、これまで見過ごされてきましたが、近年よりグラフィカルな表現が可能なフォントが新たに開発されてきており、活躍する場が増えています。カラーフォントの導入がもっと進めば、間違いなくWebのアクセシビリティが向上するでしょう。

・・・

Dalton Maagはロンドンのタイプデザインスタジオです。このスタジオは世界中のデザイナーやブランディングの専門家との仕事をとおして、クライアントが最高の書体表現（ロゴの刷新、フォントのライセンスによる保護、フォントの修正、カスタマイズしたフォントの作成）を見つけだす手助けをしています。あらゆる規模、あらゆる業界のクライアントを手がけるDalton Maagのチームには20の国からメンバーが集まり、12の言語を駆使してすべてのプロジェクトにデザインの専門知識を届けています。彼らのもっとも有名な作品は、Airbnb、BBC、 Amazon、2016年リオデジャネイロオリンピックなどです。Dalton MaagのWebサイトでは、インスピレーションに溢れた数多くのケーススタディと、フォントライブラリをみることができます。

こちらの記事を執筆したBianca Berning氏はDalton Maagのクリエイティブディレクターで、タイポグラフィ、タイプデザイン、そしてテクノロジーなど複数の分野が交差する領域で活躍しています。

すべては絵文字から始まった

私たちは日常生活の中でカラーフォントを使っているわけですが、おそらくほとんどの人はそのことに気づいていないでしょう。

絵文字は2000年代半ばから日本を飛びだして世界でどんどんポピュラーになりました。2007年に絵文字はUnicode基準に追加されています。Unicodeは、ユーザーがほぼすべての言語で文字をキーボード入力しても、エンコード後の文字に一貫性が保たれるように設定された技術基準です。絵文字がUnicode基準に追加されたということは、他の文字と同様に絵文字もデバイスやプラットフォームに左右されることなく一貫性をもって表示されるようになったということです。

あなたがヨットの絵文字⛵️（Unicode U+26F5）を自分のAndroid端末から友人のiPadに送ったとしても、細かい違いはあるかもしれませんがしっかりとヨットが表示されます。なぜ文字のデザインを生業としている人たちが、絵文字の登場に興味をもっているかわかりますか？ それは、カラフルな絵文字を作り出すのに用いられているテクノロジーと同じテクノロジーが、Web上で使われる華やかなタイポグラフィの世界を切り開いているからです。

タイプデザイナーとしての世界は、黒と白の空間、そして図形と図形が作る空間の組み合わせばかりです。私の仕事は常に、デザイナーが画面や紙に新たな命を吹き込むために役立つような文字を提供することでした。ですからおよそ10年前に初めてカラーフォントのことを知ったときは、突然、常識が覆されました。

書体をデザインするだけではなく、色やレイヤー、傾き、透明度、パターン、さらにはビットマップといったプロパティまで決めてしまうなんて、馬鹿げているとさえ思えたのです。色やその他の効果を決定する役割をグラフィックデザイナーからタイプデザイナーに移してしまうと、創作活動の柔軟性が低下してしまうのではないかと懸念していました。ですが、Web上によくあるフォントにただ色を塗るくらいならともかく、多様な効果を書体に適用することの難しさを知ったことでその考えは変わりました。

カラーフォントは、まさにこの問題を解決するために設計されました。たとえば、Webサイトのビジュアル表現をより魅力的にするために、文字を含んだ画像を使うというような回りくどい方法を使う必要はありません。カラーフォントを使うことで文字そのものにフィルターなどの効果をもたせることが簡単にできるようになりました。

カラーフォントによるソリューションの始まり

私の興味は俄然高まり、どうすればカラーフォントを自分の仕事であるタイプデザインに取り入れられるのかを知りたいと考えました。当時、絵文字の普及拡大とUnicode基準への追加を背景に、Adobeや Apple、Google、そしてMicrosoftといったテック企業がカラーフォントの可能性を模索し始めていました。

その結果、次のような提案が生まれました。

• AdobeはMozillaと共同で、Open Typeフォントにスケーラブルベクターグラフィック（SVG）を含める可能性を探求しました。OpenTypeは一般的なフォント形式です。
• Appleが独自に開発したsbixテーブル や Googleが提案したいCBDT/CBLCテーブルは、標準的なグラフィックフォーマット（PNG、JPEG、TIFFなど）の使用を提案しています。一方で、これはリサイズすると、コンテンツが歪んだりピクセル化したりするという明らかな制約があります。
• Microsoftは、各基本グリフを、COLRテーブルによってグリフのリストと関連付け、それぞれが結合可能なレイヤーに対応することを提案しました。COLRテーブルは、カラーレイヤーが使用するカラーパレットを保持する別のテーブル（CPAL）と連動しています。

2015年3月、Adobe、Google、Microsoftの提案がOpenTypeの仕様に追加され、これがもっとも現代的なフォントのあり方を決めることになりました。ですが、同じひとつの問題を４つの巨大な企業がそれぞれ別々のアプローチで解決しようとしたらどうなるでしょうか。結局、すべてのブラウザにサポートされるような唯一のソリューションは生まれないことになるでしょう。たったひとつでもあなたが採用したフォントをサポートしていないブラウザがあれば、せっかくのカラーフォントが白黒に変わってしまったり、まったく効果を表示できなかったりすることになります。

絵文字以外のカラーフォントをレパートリーに加えたいと思っていたフォント作成者たちは、この事態にがっかりしました。世の中にあるほとんどのブラウザ上で思ったとおりにフォントが表示させるためには、フォントファイル内に色のプロパティを複数の方法で書かなければなりません。この方法だとフォントファイルのサイズが大きくなってしまいますし、仮にそのような余分なデータを追加したとしても、必ずうまく表示されるという保証はありません。

過去10年間においてカラーフォントテクノロジーは絵文字を進化させるために上手く使われてきたかもしれません。それでも、ブラウザによってサポートがバラバラだったために、Webサイトのパフォーマンスを気にする人にとってはファイルサイズの増大は敬遠されていました。そのため、Web上の文字のタイポグラフィとしてはあまり取り上げられず、豊かな表現を持つ絵文字が使われるケースは限定的だと思われました。

それから時は流れ、2021年まで早送りすると、色彩に乏しかったフォントの世界にムーブメントが起きているようです。５年ほど前、Adobe、Apple、Google、Microsoft、そして２社の独立系タイプデザインスタジオが協力し、OpenType仕様に可変フォントとして知られているFont Variationsを追加しました。このころ、Adobeの提案が今後の業界標準として採用されるかと思われましたが、最も人気のあるブラウザであるChromeがこれをサポートしませんでした。代わりに、MicrosoftのCOLRテーブルが順調にその知名度をあげていました。

そのような状況の中で、Googleのチームは最近、MicrosoftのCOLRテーブルを基にした新しいフォーマットのコンセプトを開発しました。これが、フォントファイルのサイズを抑えつつ絵文字の描画クオリティを押し上げる一助となりました。

この提案は、オリジナルのCOLRv0テーブルで提供されている図形、ベタ塗り、レイヤーといった機能に加え、グラデーション、変形、構文やモードの組み合わせなどの新たな描画機能を提供するものです。要するに、COLRv1はSVGと同等の表現力をもちながら、実際のSVGを含むフォントと比べて非常に小さい容量で済むことになるのです。

この先なにが起こるのか？

カラーフォントの困難な歴史を考えると、この新しい提案が待望のゲームチェンジャーになると考えるのは時期尚早かもしれません。ですが、実際にCOLRはほとんどの主要なブラウザにサポートされるようになっているので、私はこのテクノロジーの今後の動きに注目したいと思います。ここからCOLRv1へアップグレードすることは、そこまで大変な道のりではないでしょう。

個人的には、Webにおけるタイポグラフィが新たな段階に進むことになれば素晴らしいと思います。カラーフォントのテクノロジーがもっと広く使われるようになれば、文字を含む画像の数も劇的に減るのではないでしょうか。スクリーンリーダーなどの技術では、画像内のテキストを読むことができないため、これによってWeb上のアクセシビリティは大きく前進するはずです。 私にとって理想的な世界とは、表現力が豊かでカラフルなタイポグラフィを用いりながらも、Webサイトのロード時間を犠牲にすることのないような環境です。カラーフォントはデザインにぴったりで、使いやすく、味気ないフォントのファイルよりもずっと軽いファイルで実現できるものになるでしょう。

Written by Bianca Berning (Design Matters)
Translation brought to you by Spectrum Tokyo

カバーイメージ: Paul Fleury（出典: Letterform Archive）