rxon's miniminimal tech blog

游ゴシックを一瞬でクロスプラットフォームにするたったひとつの方法

これはステマポエムです

時は2013年、かつてないほど美しく汎用性の高いフォントが二大OSにバンドルされることとなった。

その名は、游書体。

いままでMac、Windows両方のOSに同じデフォルトフォントは入っていなかっただけに、フォント指定におけるシルバーブレットになるかと思われた。

しかしMacとWindowsの游書体はPostscript nameと搭載ウェイトが異なり、Web開発者にはMacユーザーが多いためこの事に気づかずWindowsユーザーを中心に「游ゴシック見づらい」というインプレッションが広まった。

その後現在に至るまでこの差異を埋めるためのfont-family@font-face指定を紹介する記事がReact入門記事並みに大量生産された。

モダン日本語フォント指定 // Speaker Deckもその1つである。

游ゴシック用のfont-faceが大量に書かれている

このスライドを見てるうちに「これ、まとめてモジュール化しておいたらもう同じこと毎回書かなくてすむし、読みやすくなってユーザーのUXが向上して世界平和につながるのではないか」という感情が膨れ上がったため、CSSライブラリを作った。

その名も、cross-platform-yu-gothic

cross-platform-yu-gothicはnpmからnpm i -S cross-platform-yu-gothicして、 postcss/postcss-importで読み込むことを想定しているが、GitHubのcross-platform-yu-gothic.cssから直接コピペしても使える。font-family: cross-platform-yu-gothic, sans-serif;と書けばプラットフォーム間の差異をかんたんに埋めることができる。

良きタイポグラフィーライフを!

Share on Twitter