2010年8月31日火曜日

独断。メイリオの困ったところ

スポンサーリンク

メイリオはWindowsでもアンチエイリアスがかかりやすいフォントです。
設定している所はあまり多くはありませんが、少ないという訳でもありません。

良いフォントだと思うのですが、CSSで指定してデザインすると困ってしまう点が1点あります。
CSSで該当の部分を指定しなければ問題は無いのですが...。


メイリオの利点


WindowsにIEの環境下でもアンチエイリアスがかかりやすいフォントだから。
というのが、個人的な理由です。

見た目としては、繊細になりすぎない線の細さで全体的に丸みがあり、やや女性的なイメージがあります。
どのような内容の文章であれ、フォントにメイリオを使うだけで印象が和らぐ可能性が高いはずです。

判読性が高い点も好きです。

フォントの特徴が分かりやすい、良いフォントだと思います。

メイリオの問題点


メイリオの問題点とは、下線の位置です。

具体的には、テキスト部分に対してborder-bottomで下線を引く場合です。
ちなみに<a>の下線(text-decoration:underline;)は普通の位置に表示されます。

実際にメイリオで下線を表示するとこうなります。


このフォントはメイリオです。
メイリオは柔らかくかわいらしいイメージに見えます。


一行だとまだ気になりづらいですが、複数行のテキストに使用すると下により過ぎてしまいます。
結果、まるで下の部分に対してborder-topを指定したように見えます。

次はテキストをアルファベットのみに変えて、違うフォントと比べてみます。
下だけでなく四方の空間が分かり易いようにborderで囲むと...。


メイリオ
abcdefghijklmnopqrstuvwxyz

Georgia(serif)
abcdefghijklmnopqrstuvwxyz


下の空間はやや大きいだけで、上も大きいようです。
左右はそれほど大きな差は無い様に見えます。

メイリオのフォント自体の行間が広いので、vertical-alignやline-heightを変えても直りません。

対策は...


いまのところ調べきれていないのか、対策はわかりません。
もしご存知の方がいましたらコメントいただきたいです。

現状、あきらめるか、フォントを使わないか、テキストに対してborderを指定しないかしか手がありません...。

結び


簡易的な装飾方法としてborderはよく使っています。
線の色を変えたり幅を変えれば、手軽に他の部分との差別化が出来るからです。

しかし、メイリオを使うとこの方法は気軽に使えません。
ここでは良いけどここではダメと気をつけていると、作業効率は悪くなります。

この表示の悪さがなければ、もっと気軽に使えるのですが...。

スポンサーリンク

0 件のコメント :

コメントを投稿