Webフォントアイコンは最小サイズを意識しよう

goto_jp 554views 更新:2014年6月24日

まず下記サンプルを見てください。

See the Pen JkdEL by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

標準サイズに比べ、少し小さくしても少し大きくしても、中途半端なサイズにするとアイコンは歪んで見えます。
サンプルの「+」アイコンなどは縦棒と横棒の比率が変わったり顕著に分かると思います。

Webフォントの種類に数値は異なりますが、どのWebフォントアイコンにも必ず推奨最小サイズが存在します。
サンプルにも使っている「FontAwesome」の場合は14pxです。

Webフォントアイコンは本質的にはフォントですが、普通のテキストフォントとは別物と考えて適当にサイズを設定するのは避け、「em」指定を使うか、歪みのないサイズを見極めて使うことが重要です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません