はじめに
OSにプリインストールされるフォントも増えてきたこともあり、備忘を兼ねて自分用にまとめてみる。
webデザイナーが使うフォントを検討する際に役にたつと思う。
- 結論は各自出してください
- OSでの出し分けは想定しない
- フォント選択はユーザーに主導権がある、という考え方はしない
- フォント選択によってユーザーの感情に影響があるのなら、より良くすることを諦めない
- 特殊環境（Windowsにヒラギノが入っているなど）は強く考慮しない
経緯とか論点
webフォントについて
ページスピード
少なからずページスピードに影響するので、使用する際には注意すること
フォントに対するユーザーの慣れ
ユーザーは変化を嫌うとか、学習コストだとかは言わないが、ユーザーが慣れているフォントを使用する方が読みやすいため、テキストが重要なサービスの場合はよく考慮すること
日本語webフォント
モリサワ・Adobeなどがwebフォントサービスを提供しているが、下記2点の理由で避ける
- ページスピード
- ページ内で使用しているグリフをダウンロードするので。最近は、ほぼ遅延がないらしいので、もう少し調べたい
- コスト
- 課金体系がページビューの従量課金であることが多い
下記項目に該当する場合は導入を検討してもよい
- 表現の差が他社優位に繋がるサービス・サイト
- ページビューあたりの価値が低いサービス
考慮するOSのバージョン
ローンチしていない場合は下記URLを、ローンチしている場合はアナリティクスを参考にする。
iOS
https://developer.apple.com/support/app-store/
Android
https://developer.android.com/about/dashboards/index.html
デスクトップ
http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=11&qpcustomb=0
プリイストールされているフォント一覧
| フォント名 | OS |
|---|---|
| ヒラギノ角ゴシック | macOS, iOS |
| 游ゴシック | macOS, windows8~ |
| メイリオ | windows |
| モトヤマルベリ | android4,5 |
| Noto Sans CJK | android6.0 |
特殊環境
サービスの特性上、特殊環境を考慮して対応が必要があるか検討する
- Windows+ヒラギノ
- クリエイティブ系の方がターゲットのサービス
- Mac+メイリオ
- Officeを入れている人。社会人が多いサービス
優先順位
游ゴシック vs メイリオ (Windows)
- Windowsでのレンダリングを考慮するならメイリオ
- 可読性の観点で、全年齢対象（特にご高齢）ならメイリオ
- レトロっぽい雰囲気を出すなら游ゴシック
- OS(WindowsとMacOS)で統一するなら游ゴシック（統一する必要があるかは要検討）
- 流行りを意識する(メモ：2017年の流行り レトロ、ギーク、クラシカルなど）なら游ゴシック
游ゴシックを使う際の注意事項
経緯などは下記を参考
http://qiita.com/RinoTsuka/items/4181efd43d072e246519
メモ
- Windows系のフォントにCSSでアンチエイリアスをかける方法を最近知った
-
Can I use(font-smooth)
- ※Works only on Mac OS X platform.