Yuki Tomioka Webサイトにはなぜ明朝が少なく、ゴシックが多いのか
ブラウザにはアンチエイリアスという機能があり、画面に表示された文字を滑らかに表示しているが、ブラウザやOSによって差があります。
特にWindosはアンチエイリアスが弱く、明朝体のように線に強弱があるフォントはアンチエイリアスが弱い環境で見るとどうしてもギザギザになってしまい読みにくく感じてしまいます。
そのため、Webで使用されるテキストは一定の太さでデザインされているゴシック体が多くなっているのです。
環境により使えるfontが違う
例えばMacにはヒラギノというフォントがデフォルトで入っていますが、Windowsは入っていません。
また、Androidにはゴシック体のフォントは入っていますが、明朝体のフォントは入っておらず、どうしても明朝体で表示させたい場合は画像にすることで再現性を保つこともできますが、SEOの観点やRetinaディスプレイでは読みにくさを感じるので、本文テキストには使わず、見出しのみなどにするのが賢明です。
各デバイスに標準で設定されているフォントをデバイスフォントと呼びます。
font-familyでフォントが指定されていない場合はデバイスフォントでテキストが表示されます。
CSSでfont-failyを指定する場合は表示してほしい順に記載します。
また、Webフォントを利用すればすべてのデバイスで同じフォントで表示できますが、日本語は英語をはじめとする欧文に比べて文字数が多いためそまま使うとデータ量が重く、表示速度に悪影響を与えてしまいます
font-sizeは10pxまでしか表示されない!?
Googleが提供しているブラウザであるChromeでは最小文字サイズが10pxまでとなっています。
そのため、基本的には10px以下の文字がないようにデザインするのがいいです。
また、font-sizeの指定をvwなどの相対値で行っているときは注意が必要です。
Chromeの検証モードで作成していて、iPhoneのSafariでみたら文字が小さくて読めない・・・なんてこともあります。