ブラウザにまつわるフォントの注意点について

こんにちは。

今日は「ブラウザにまつわるフォントの注意点について」書きます。

仕事の一貫としてスライスやブラウザチェックをしていますが、フォントって重要だな〜と感じています。

それこそ明朝体とゴシック体だとそのサイトの雰囲気がまるで変わりますしね！

しかし、機種や閲覧環境によって使えないフォントがあったり不具合が起こるということに少しづつ気づいてきました。

なので他サイトを参考にしつつ書きながら私自身勉強しようと思います！

Androidにはデフォルトで明朝体がない

これはブラウザチェックをしていて気づいたのですが、Androidにはデフォルトで明朝体が入っていないです。

なので游明朝などを設定していてもAndroidではゴシック体になります^^;

なのでデザイン上どうしても使いたいときはwebフォントを導入するか、画像として埋め込むかの2択になりそうですね。

ちなみに、webフォントだとGoogleFontsの「Noto Serif CJK（源ノ明朝）」がおすすめみたいです！

実際スライスしているとこのフォントはよく見かけます＾＾

ただ、webフォントを使う際の注意点として日本語フォントは重いのでデザインと相談しながら実装する必要がありそうですね(＞＜)

今までスライスした中で10px未満のフォントサイズでデザインされたカンプに出会ったことがあります。

なぜ10px未満のフォントは避けるべきか書きますね。

まず、ブラウザでは表示できる最小フォントサイズというのがあります。そしてその中でシェア率が一番高いGoogle Chromeでは10pxなのでそれに合わせるというのが理由の1つ。

あとはシンプルに10px未満だと見えにくいからですね(＞＜)

transformプロパティでtransform:scale(0.6);など設定することによって最小フォントサイズより小さく見せることもできるようですがやはり読みにくいとは思います・・・^^;

これは知りませんでした！

ヒラギノフォントといえば「ヒラギノ角ゴシック」というフォントでデザイン上よく見かけます。

Windowsではないんですね〜〜。

代替案として、游ゴシック、メイリオ、Noto Sans JPなどが挙げられます。

ただ、游ゴシックはWindowsだと、かすれて見えて汚くなる可能性があるみたいです。（その対応策はあるらしいですが）

あと、IEだと游フォント（ゴシック・明朝含め）は文字が少し上に浮き上がる？不具合が起きます。

これはブラウザチェックしているとよく見かけますね(^^;

ちゃんと意識してなかったけど游フォントが原因だったのか・・・（游ゴシックはよく見かける）

いかがだったでしょうか？

自分がわかる範囲で調べながら書いてみました！

実装者としてこれらの知識もちゃんと身につけていかないとな〜と思いました(^^;

では今日はここまで〜〜