無料で使えるサブピクセルレンダリング風カラーフォント「珊瑚」

たぬきフォントが作成したフォント「珊瑚(サンゴ)」は、液晶や有機ELモニター上のピクセル描画技術であるサブピクセルレンダリングをイメージして、特有のピクセル感や色のにじみを再現したフォントです。かなや英数のほか、JIS第2水準の漢字もたっぷり収録されているとのことなので、実際にダウンロードして使ってみました。

珊瑚（フリーフォント） たぬきフォント
https://tanukifont.com/sango/

珊瑚フォントは、ページ下部の「ダウンロードリンク」からダウンロードできます。「『珊瑚』(v1.01)(フリーフォント)をダウンロード」をクリック。珊瑚は個人利用、商用利用に関わらず、使用用途を問わず無料で利用可能です。

ダウンロードした「Sango_1_01.zip」ファイルを、Explzhなどで解凍します。

解凍したファイルの中身は以下のような感じ。「JA」フォルダをクリック。

珊瑚フォントには、OpenType-SVG形式のカラーフォントと、COLR/CPAL形式のカラーフォントのファイルが含まれています。今回はSVG形式を使用するため、「SVG」フォルダをクリック。

珊瑚フォントの配布ページではSVG形式およびCOLR/CPAL形式のソフトごとの対応表が記載されています。

フォルダ内の「Sango-JA-SVG.ttf」をクリックしてフォントファイルを開きます。

「インストール」をクリックしてフォントの導入が完了。

Adobe Photoshopでフォント一覧を確認してみたところ、「珊瑚 JA-SVG」が追加されていました。

実際に珊瑚フォントを使ってみます。以下は、「勇者で社畜の兼業ライフ」というマンガで、異世界からゲーム会社に迷い込んだ勇者の元に、仲間が迎えにくるシーン。

「勇者様！」というセリフを珊瑚フォントに変更してみました。これだと、少しぼやけたような文字に変わっただけで、あまり特徴はわかりません。

拡大すると、サブピクセルレンダリング特有のモザイク状の文字やカラーのブレがよくわかります。珊瑚フォントは大きな文字を表示させるときに使ったり、デジタル風デザインの一部に使ったりするのが合いそう。

また、以下の珊瑚フォントで書いている2行の文字は、左は「青」、右は「赤」とPhotoshop上で設定していますが、文字の見た目に変化はありませんでした。

Photoshopの場合、珊瑚フォントの見た目を維持しつつカラー変更する方法があります。カラーを変えたいテキストを選んで、レイヤーパネルから塗りつぶしレイヤーのメニューをクリック。

「べた塗り」を選択。

べた塗りのレイヤーが追加されるので「OK」。

追加されたべた塗りレイヤーを右クリックしたら、「クリッピングマスクを作成」をクリック。

珊瑚フォントのカラーを変えることができました。この方法だと、サブピクセルレンダリング特有のカラーのブレは表現できませんが、モザイク調のフォントの形を維持したままカラーを変更できます。

また、Adobe Illustratorの場合は、オブジェクトの見た目だけ変更するアピアランスの変更をすることで、珊瑚フォントの特徴的なカラーを維持したままさまざまな表現をすることも可能です。

珊瑚フォントは「SIL Open Font License Version 1.1」で公開されており、個人利用、商用利用に関わらず、使用用途を問わず無料で利用することができます。また、フォントファイルを内包したゲーム・アプリやPDF、Webフォントの作成や、フォントを独自に調整したり改変して派生フォントを作成することもできます。フォントを配布しているたぬき侍氏は「『珊瑚』は、使い方やアレンジによって印象が大きく変わるユニークなカラーフォントです。いろいろなデザインを楽しんでいただけると嬉しいです！」と述べています。