メニューなんかでちょっと変わったフォントを使ったりする場合は、画像で設定することが多かったりするし、やはり文章は見やすさを重視するのでCSSでフォントを指定する場合、同じようなパターンで記述することが多いです。
なのに、定番化された書式を用意していないので、毎回、フォントファミリーの設定がめんどくさかったりしてました。
ここで改めて、フォントの設定を見直し、今後に生かせるよう定番化してみます。
注意点をまとめると、
- 英語フォントから記述する。
- フォントの英語名と日本語名を表記する場合、日本語名を先に記述する。
- フォント名に全角文字、スペースが含まれる場合、クォーテーションで囲む。
- 英語フォントはWebフォントを使うことでデバイスによる問題をほぼ解決できる。
- Windows8.1から採用されている「游ゴシック」「游明朝体」がメイリオよりスマートで美しいらしい。
- Vistaから採用のメイリオのシェアがやっぱり高い。
- マックは定番「ヒラギノ」
- アンドロイドは「Droid Sans」、4以降では「Roboto」
- 游ゴシッ ク、游明朝、メイリオ以外は基本アンチエイリアスが効かずギザギザの細い文字になるらしい。
- 明朝系のフォントはアンドロイド非対応、Windowsは「游明朝」が使用できない環境だと「ＭＳ Ｐ明朝」になってしまう。
以上の点を踏まえて今回は、ゴシック推奨で設定してみます。
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' type='text/css'>
webフォントは、スタンダードで視認性の高いフォントで人気の高い「Open Sans」をセレクトしました。
font-family:"Open Sans" , Arial , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
cssのフォントファミリーの設定で優先度順に記述しておきます。
これで、視認性の高いオススメフォントを定番化出来ました。
コメント