このサイト、パソコンで表示される時は、すべての文字を画像で表示させています。 なぜそんな大変なことをしているのかというと、Windowsの文字レンダリングが綺麗とは言えず、デザインとはかけ離れた見た目になるためです。 ずっと前から気になっていたことなので、今回全部画像にしました。


こんな特殊なことは自分のサイトじゃないとできないですし、力技で解決するしかありませんでしたが、長年向き合ってきた課題だったのでとりあえずは満足しています。 「でも、すべてを保つことができるの?」 — "Real Thing" by Turnstile


日本語の場合は22px以上で表示させれば、Windowsでも書体の形を保った状態で表示することができますが、それより小さい文字のサイトは、頑張ってデザインしても、Windowsではデザイナーが意図した見た目になることはありません。


23
Macの文字レンダリングは、書体らしさを表現できるように設計されていますが、Windowsの場合は、線がピクセルに吸着するように設計されています。 これにより、22px以下で表示される文字は壊れたメイリオのように表示されます。


通常、画像を文字にすると選択できなくなりますが、それは嫌だったので画像の上に、同じように書かれたウェブフォントを透明で置いて選択機能も残すようにしました。 書き出しやHTMLも最適化されています。


Microsoftは、対応する予定はないようなので、改善するのを待ってもダメなようです。 このようなレンダリングの設計により、Windowsだとメイリオが一番相性が良く表示されます。
「すべて保つことができるか。 本当のものを待ちながら!」
— "Real Thing" by Turnstile

