Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

CSSのfont-familyを決める際の考慮項目まとめ

More than 3 years have passed since last update.

はじめに

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

メモ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away