デザイン

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がギザギザした輪郭を滑らかな曲線に変換してしまい、以下のようなぼやけて丸みをおびたフォントに変化してしまいました。


問題を解決するため、変換前にビットマップフォントを拡大して、Potraceに高解像度の入力を与えたところ、80ピクセルのTimes New Romanを変換することで16ピクセルとして使えるTimes New Romanを作成することに成功しました。


実際にケイトリン氏とポール氏によって作成されたフォントは、2人が運営する以下のサイトで使用されています。

Vistaserv.net
https://vistaserv.net/

この記事のタイトルとURLをコピーする

・関連記事
アーケードゲームのフォントデザインをプロのフォントデザイナーが解説するムービーが公開中 - GIGAZINE

50万円超のものもある「世界で最も高価なフォント・書体」 - GIGAZINE

Mac OS XからmacOSまでの歴代デフォルト壁紙を振り返るとこんな感じ - GIGAZINE

無料でフォントをダウンロードできるGoogle Fontsで人気のフォントTOP10 - GIGAZINE

Canvas要素やWebGLでアニメーションが楽しめるコード製フォント「Leon Sans」 - GIGAZINE

in ソフトウェア,   ウェブアプリ,   デザイン, Posted by log1m_mn

You can read the machine translated English article here.