Macだから、Windowsだから、Androidだから…
端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。
とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか?
基本
font-family: sans-serif;
sans-serif、つまりゴシック体であることを指定しています。
ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。
Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。
しかし、Macの場合はヒラギノを優先させたいですよね。。
Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。
つまり、“メイリオ”は読み込まれず、“Meiryo”とする必要があるということです。
この点を考慮して、
font-family: "メイリオ", sans-serif;
とかしているといいかんじですかね。
Windowsはヒラギノが入っていないのでメイリオが選択され、
Macではヒラギノが優先される。
また、
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
でもいいでしょう。
この場合Macだとヒラギノが優先されるので、メイリオを日本語表記させておく理由は特に無いです。
有名ドコロはどんな感じか見てみよう
font-family: arial, sans-serif;
Yahoo!Japan
font-family: "MS PGothic", "Osaka", Arial, sans-serif;
font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
楽天
【楽天市場】Shopping is Entertainment! : インターネット最大級の通信販売、通販オンラインショッピングコミュニティ
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
クックパッド
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
首相官邸
※特に指定なし
という感じです。
首相官邸は置いといて、クックパッドなどの日本向サービスとは海外サービスだとまた色が違う感じがありますね。
最近良く見る游ゴシックは?
最近では游ゴシックというものも流行っています。
ユニトピでも游ゴシックが優先されています。
といった具合です。
ゴシックでありながらも、柔らかい印象がありますね。
まだ環境によっては表示されない状況もあるのですが、ユニトピはWeb制作者の方向けブログなのであまり不具合はないかと思います。
結局どうするの
スタンダード日本Webサイトなら
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
今流行の感じを出していく(かつ文字コンテンツがメインなら)
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
といったところでしょうか。
また英語のみ用意されているフォントを先頭に指定することで、合成フォントとよばれる(半角アルファベット&数字と、全角文字のフォントを分ける)設定も可能です。
まとめ
なにが正解ってわけでもないのですが、真似をしておけば間違いなさそうな部分ですね。
あまり流行り廃りがあるわけでもなく、Webフォント等を活用しない限り特にカスタマイズする必要もないので、「これでOK」というのをひとつ作っておけばよさそうです!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事