Google Fonts の収録状況をヒートマップで可視化
1. はじめに
フォントの生成の研究をしていると,しばしばとある困りごとにぶつかります.それは,なぜフォントの生成をしたいのかというモチベーションを簡潔に伝えることが意外とむずかしいということです.そこで,Google Fonts における文字の収録状況を可視化し,いかに世の中のフォントの対応している文字が偏っているのかということを可視化してみることにしました.
2. 方法
データセットの偏りを可視化する方法について検討しました.データセットはよく以下に示すような Long-Tail な分布を取ることが知られています.これをフォントにも適用することを考えました.
出典 https://liuziwei7.github.io/projects/LongTail.html
フォントには,フォントの種類と文字コードという 2 つのラベル・軸が存在します.単純に文字コードのみにもとづいて分布を可視化するのも悪くはないですが,せっかくなのでフォントのドメインに合わせて工夫することにしました.
具体的には,フォントの種類と文字コードでマトリックスを作り,それを各軸でソートすることにしました.また,seaborn
の jointplot
を利用し,フォントごとと文字コードごとで周辺化した分布も棒グラフで表示することにしました.これにより,フォントの種類と文字コードの 2 つのラベルについて,Long-Tail な分布になっている様子を同時に可視化することができます.
3. 実行結果
実際に作成したヒートマップが以下のとおりです.
Google Fonts の収録文字のヒートマップ
縦軸はフォントの種類,横軸は文字コードを表しています.フォントは対応文字数の多い順,文字コードは対応フォント数の多い順にソートしてあります.また,明るい部分はあるフォントと文字コードの組み合わせにグリフが存在することを表しています.
フォントは Adobe Blank というフォント以外のすべてのフォントを使っています.だいたい 4000 種類くらいでした.Adobe Blank はフォントのフォールバックを検証するためのフォントで,今回のヒートマップの作成においては邪魔でしかなかったので省いています.
文字コードについては,対応しているフォント数の多い順に上位から 5000 個取り出しています.個数については CJK の領域が目視で確認できる程度を目安に設定しました.ソートせずに文字コード全体を見せる方法も考えたのですが,スパースすぎてわかりにくいことと CJK の領域まで表示しようとすると一辺の大きさが膨大になり seaborn
の jointplot
がエラーを吐いてどうにもならなかったことがあり不採用となりました.
4. 考察
ヒートマップを見ると,明るい部分が左下に偏っている様子が見て取れます.したがって,フォントの種類についても文字コードについてもきれいな Long-Tail な分布になっているということが言えます.このヒートマップの偏りは,経済的な不平等を反映しているとも解釈することができます.したがって,フォントの生成の研究のモチベーションのひとつの根拠となるでしょう.
5. 後日談
論文を探していたら,まさに同じような図が見つかりました.やはりなにごとにも先駆者はいるものですね.ただ,見た目はこっちのほうがきれいにできたんじゃないかと思います.
コードの公開状況
ソースコードは以下のリポジトリで公開しています.実際に作成したヒートマップもこちらからダウンロードできます.
Discussion