カラー変更やグラデーションなどのカスタマイズが自由になった「カラーフォント」がGoogle Fontsに追加

「カラーフォント」とは、日常的に使っている絵文字などを含む、カラーを指定されたフォントです。一方でその他の色のないフォントは1色のみを使用した単純なもので、テキストエディタ等の機能で操作することで別の色に変えることができるのみ。絵文字等のカラーフォントのテクノロジーを応用した「高度にカスタマイズ可能な書体」がGoogle Fontsに追加されることを、Googleが発表しました。

First Batch of Color Fonts Arrives on Google Fonts - Material Design
https://material.io/blog/color-fonts-are-here

2022年2月の「Google Chrome」のアップデートで、絵文字などのカラーフォントをきれいに表示できる「COLRv1」のサポートが開始されました。これは、絵文字を画像ではなく色のグラデーションや合成、混合などに対応したフォントに置き換えることで、拡大・縮小時に絵文字がにじんでしまう問題を解決したり、データ量をかなり小さく抑えたりできるもの。

絵文字を小さい容量できれいに表示できるフォント「COLRv1」を追加したGoogle Chrome 98安定版リリース - GIGAZINE

Googleによると、COLRv1を用いることで、絵文字のフォントや色をカスタマイズできるようになります。従来のフォントでは、フォント自体は単色を指定してカラーを変更することのみ可能でしたが、COLRv1では全ての一般的なCSSグラデーションが可能であり、一つの文字を複数のカラーで彩ることができます。

また、従来のカラーフォントは基本的に決まった色で表示されましたが、COLRv1を使うことで、カラーフォントにCSSの「base-palette」を使って複数のカラーパレットオプションを含めることができるようになります。つまり、あらかじめ色セットを用意しておくことで、シーンごとに異なる色パターンを使い分けることができるようになるわけです。

フォントに設定するカラーパレットはCSSの「font-palette-values」で自由にカスタマイズ可能。

さらに、フォントの「厚み」を調整して立体的なフォントを作ることも可能で、さまざまなカスタマイズができるようになっています。

他にも、COLRv1を利用して新しい書体をカスタマイズする方法を示しています。2022年9月時点で3664種の絵文字があるNoto Color Emojiでは、COLRv1の機能を活用することで自由に絵文字のパーツごとに色を変えることができます。以下の画像は、アヒルカラーのデモを用いてアヒルの絵文字をGIGAZINEのロゴ風の配色に変更してみたもの。

また、アラビア文字はコミュニケーションと同じくらい美しさを重視してカラフルに表現されるほか、発音を明確にするため1つの文字に2色を機能的にも使用することがあるなど、ユニークな特徴があるそうです。そのようなアラビア文字を、グラデーションを使用することでインクを用いた書道のように見せたり、文字の一部のカラーを変えたりといった工夫ができる「Reem Kufi Ink」「Reem Kufi Fun」「Aref Ruqaa Ink」「Amiri Quran」「Cairo Play」「Blaka Ink
」といった6種のフォントが新しく追加されました。

なお、Google Fontsに含まれるCOLRv1に対応したフォントは以下の通り。
・Reem Kufi Ink
・Reem Kufi Fun
・Aref Ruqaa Ink
・Amiri Quran
・Cairo Play
・Blaka Ink
・Noto Color Emoji
・Bungee Spice
・Nabla