2020年05月12日 08時00分デザイン

Windows 2000っぽいギザギザフォントを2020年のウェブブラウザで再現するまでの道のり

絵文字もCSSの対応も不十分で、ウェブページの色彩も豊かではなかった1990年代風のホームページを作りたいと考えた2人のウェブエンジニアが、「簡単に実現できるだろう」とフォントの再現に取りかかったところ、思わぬ技術の壁にぶつかってしまいました。

Convincing-looking 90s fonts in modern browsers – Vistaserv.net
https://vistaserv.net/blog/90s-fonts-modern-browsers

1990年代風のウェブサイト・Vistaservを趣味で運営しているケイトリン氏とポール氏は、当初「グレーの背景に黒のTimes New Romanのフォントを合わせれば1990年代風のデザインを再現できるだろう」と考えていたそうです。しかし、実際に作成したウェブページをGoogle Chromeで確認したところ、以下のようにフォントが予想よりも滑らかに表示されてしまい、思い通りのデザインにはなりませんでした。

原因を調査するため、仮想マシン上のWindows 2000でInternet Explorer 5を使って同じウェブページを開いてみると、以下のように2人が思い描いた通りの表示になっていました。つまり、Google ChromeとInternet Explorer 5では同じフォントを使っているのに表示が全く違っていたのです。

テキストの表示が違って見えた理由は、フォントや画像がギザギザに見えないよう輪郭を滑らかに表現するアンチエイリアシングの差にありました。アンチエイリアシングは1990年代ではあまり発達しておらず、2000年代に入って多くのOSで取り入れられるようになった技術です。

Google Chromeで表示されたフォントは、アンチエイリアシングにより黒だけでなくグレーのドットで輪郭が滑らかに見えるよう加工されています。

一方、Windows 2000のInternet Explorer 5では1色でフォントが表現されており、Google Chromeよりもギザギザした印象です。

2人はWindows 2000風のギザギザしたフォントを、2020年に使用されている全てのブラウザで再現できないかと試行錯誤しました。2人は1990年代に使われていたビットマップフォントのファイルをそのまま使用するアイデアを思いつきましたが、古いフォントファイルをそのまま使用するとCSSが正しく動作しないエラーが発生することが判明しました。

エラー原因を取り除くため、フォントのギザギザ感を残しつつ、CSSに対応したフォントファイルに変換できるツールを探したところ、無料のオープンソースのフォントエディタ、FontForgeを発見。FontForgeで16ピクセルのTimes New Romanを変換したところ、Internet Explorer 5で表示されたものとほぼ同じフォントを再現できました。

作成されたフォントはラスター形式であったため、実際にウェブページで使用できるようベクター形式に変換する必要があります。Potraceというソフトでフォントを変換したところ、Potraceがギザギザした輪郭を滑らかな曲線に変換してしまい、以下のようなぼやけて丸みをおびたフォントに変化してしまいました。