日々の仕事の中でWeb上でもっときれいに文字を見せたい、もっと読みやすくしたい、と思うことが多くなりました。そこで、文字を少しでもきれいに見せたいときに役立ちそうなfont-smoothingの備忘録兼紹介記事です。文字がきれいだなと思って調べていた所発見したのが「-webkit-font-smoothing」です。下記3つの値を持っています。Default値さらに調べてみたところ、Firefox用の「-moz-」でも似たようなレンダリング指定方法はあるようです。その1上記各値をそれぞれ実験してみました。-webkit-font-smoothingを使用したもののサンプルです。次に、-moz-osx-font-smoothingを使用したもののサンプルです。ブラウザ上からは、こちらからサンプルを見ることができます。その2さらに、-webkit-font-smoothingで見ているときを拡大して見てみました。左から順に、antialiased、subpixel-antialiased、noneです。次に、-moz-osx-font-smoothingで見ている時を拡大してみました。左がnone、右がgrayscaleです。日本語を含むテキストの場合には、細くなりすぎて読みづらくなってしまう可能性もありそうです。-moz-の方に関しては、-webkit-にantialiasedと指定した時のみgrayscaleを指定すると、ブラウザ間での見え方の差が小さくすみそうだなと思いました。none;という設定にしています。参考にさせていただきました:http://qiita.com/htomine/items/3086f30ca09adea2f8e0本文など、これまで「環境依存だから」といって、デバイスフォントが関わってくる部分をおざなりにしているWebサイトが数多くあると思います。技術の進化により仕様も10年前と比べてだいぶ制御しやすくなってきている以上、Webが持つ本来の「情報伝達」という意味を最大限引き出すためには、Webデザイナーと名乗る人は、もっと文字の「見え方」「読みやすさ」に気を配るべきなのではないでしょうか。(という自分への戒めでもあります)おまけ他にも、私が美しいと思ったTIPSを紹介します。混植スタイルhttp://qiita.com/Tadaki/items/b7e1f337ddeeb1d8f115このあたりについては、また次回以降に詳しく記事を書こうと思います。追記font-smoothingの切り替えに使えそうな@mixinがありました。コメントをキャンセルメールアドレスが公開されることはありません。