Web VRやCSSグリッドなど、Webの世界を大きく変えるかもしれない新技術はたくさんあります。しかし、最も注目すべき新技術の1つは、カラーフォントと言っても過言ではありません。

別名クロマティックフォントとも呼ばれるカラーフォントは、その名のとおり複数のカラーや陰、テクスチャーや透明度を持ちます。従来のフォントでは、モノクロかつCSSでも1色でしか着色できないのに対して、非常に多彩でリッチな表現を付け加えることができるのです。

そして今回、デザイン済みのカラーフォントが公開されましたので、最新カラーフォント7つを一挙ご紹介いたします。

様々な色味を持つ複雑なデザインのフォントを、これを機にダウンロードして使ってみるのはいかがでしょうか。
  

まるでPhotoshopいらずな「カラーフォント」とは?

colorfont.jpg

カラーフォントは、ベクターデータやビットマップデータを組み合わせて、複雑な色味のデザインを施したフォントデータのことです。
*「すでに色が付いている?」*と、従来の常識からすれば考えられないようなアイデアですが、実際にすでに複数の色で着色されているので、色を付ける必要がありません。

意外なことに、Internet Explorer時代はほとんどの新機能のサポートが遅れていたMicrosoftですが、Edgeでは4つの主要なフォーマットをすべてサポートしています。
次第にほかのブラウザもサポート範囲を広げています。
  

見逃し厳禁!注目のカラーフォント7つが堂々登場

今回、様々なバリエーションを持つカラーフォントが、Adobe Typekitなどのフォントベンダーから登場しました。

ここでは、新しく登場した7つの注目カラーフォントをご紹介させていただきます。
  

1. Trajan Color Concept

1.png

Trajan Color Conceptは、ローマ皇帝のトラヤヌス帝の碑文に彫られているフォントフェイスを加工したものとして知られている「Trajan」を、Adobe主導でカラーフォントとして改良したものです。

なんと19種類ものカラーバリエーション(さらには白バージョン・黒バージョン)があるので、雰囲気にあったものを選ぶことができます。

Trajan Color Conceptをダウンロード
  

2. EmojiOne

2.png

EmojiOneはAdobeのデザイナー2名によって作成された、オープンソースのカラーフォントです。これまでもフォントアイコンとしてFontAwesomeなどを使っている方もいたかもしれませんが、EmojiOneはすでに綺麗に着色がされているので、特別な設定なしにすぐに使うことができます。

EmojiOneをダウンロード
  

3. Popsky

5.png

Popskyは、ドイツ・ベルリン在住のイゴール・ペトロヴィック氏によって作られたカラーフォントです。1913年からロシアで始まった構成主義運動(社会主義活動を体系化した前衛的アート運動)をモチーフに作られていますが、名前にPopを冠しているようにポップアートの影響を受けた、若々しい色合いになっています。

  

4. Abelone

6.png

Abeloneは英語のAbalone(甲殻類の「アワビ」の意味)をもじった、アクアティックで幻想的なカラーフォントです。エレクトリックブルー・パープル・ターコイズで表現された丸みのあるフォントは、近未来的で、次世代のデザインにぴったりです。

  

5. Playbox

7.png

Playboxはおもちゃ箱の意味で、その名が体現するように、スケッチ、ドローイング、なぐりがきがモチーフになっている、子どもの世界観が満載の可愛らしいカラーフォントです。

子どもが落書きをしたような「気まぐれ」な形が逆に趣深いにもかかわらず、どの文字もしっかりそれと認識できる、可読性も高いデザインフォントです。

  

6. Megazero

3.png

Megazeroはビデオのグリッチエフェクトを想像させるような、白と黒、原色が組み合わせられたテレビを想起させるカラーフォントです。パステルカラーなどの「曖昧」な色ではなく、はっきりとした「原色」を採用しているあたりがかえって「今風」に感じさせるので、デジタル分野での利用シーンが多くなりそうです。

  

7. Aires

4.png

Airesは可愛らしい「ハネ」とイエロー・ピンク・ブルーを基調としたフェミニッシュなカラーフォントです。色が付いていることでどの文字にも1つひとつに個性があり、とても小さな部分、ディティールまで凝られています。

インスピレーショナルなデコレーティブフォントをお探しの方は、このフォントを使ってみてはいかがでしょうか。

  

まとめ

カラーフォントはすでに着色がなされていますが、その配色も含めてタイプフェイスデザイナーが選んだものであるため、作者の意図がより伝わりやすいものになっています。

カラーフォントはまだ浸透しつつある途中段階のため、まだ使ったことがないという人もいるかもしれませんが、対応ブラウザでは簡単に確認することができます

この機会に、ぜひ一度使ってみてはいかがでしょうか。