2020年流行？font-familyのオススメ設定はこれ！【CSS】

2017.06.25 2020.01.18

Web開発

みんさん、こんにちは！

今回はこのブログサイトでも使っているfont-familyの設定をご紹介します。

font-familyの設定を怠っていませんか？

font-familyの設定次第ではデザインがいくら良くてもバランスが崩れてしまいます。

また、記事も読みづらくなってしまうかもしれません。

そうならないために、私も使っている今年2020年流行間違い無しの、font-familyの設定をご紹介致します！

※飽くまで個人の観点からの見解です（笑）

またプログラミングに最適なフォントもまとめましたので気になる方は下記からどうぞ！

実際に使ってみて本当にオススメできるプログラミングフォントまとめ

他サイトのfont-family

ご紹介に入る前に、おしゃれで有名なサイトがどんなcssのfont-familyを設定しているか見てみましょう。

MERY [メリー]

女性から絶大な支持を得るキューレーションメディアサイトです。

こちらのサイトでは、

font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

「ヒラギノ角ゴシック」を採用しています。

ちなみにMERYは文字色がグレーっぽくフォントというよりも色味で女性に馴染みやすい感じを表現しているのかも・・・

RETRIP[リトリップ]

こちらは旅行者向けのキュレーションメディアサイトです。

最近のキュレーション型メディアの中では1番の支持を得ていると言っても過言ではないサイトです。

さて肝心のfont-familyですが、

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

「ヒラギノ角ゴ」を採用しています。

株式会社LIG

Web制作やメディアサイト運営で有名な株式会社LIGさんのホームページです。

こちらのサイトのfont-familyは…

font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

出てきました。

游ゴシック体です！

ロゴと游ゴシック体がマッチしていてとてもおしゃれだと思います。

MERYとリトリップは女性をターゲットにしているので「ヒラギノ角ゴ」のような可愛いフォントを採用してるのかもしれません。

他にも沢山のサイトを調べましたが「遊ゴシック」「ヒラギノ角ゴ」の2強でした。

どちらかというと、おしゃれ志向の強いサイトは「遊ゴシック」を採用していました。

現在流行中は「遊ゴシック」と言えるでしょう。

思わず見入ってしまう！おしゃれすぎるWebサイトまとめ【10選】

2020年流行間違い無し?のfont-familyのおすすめ設定

上記での他サイトfont-family紹介のように、font-familyの設定で「游ゴシック」を設定しているサイトをよく見かけます。

確かに見やすいしおしゃれ感もあるので好きです。

ですが設定を少し間違えるととても残念な感じになります。

実際Window環境では「游ゴシック」は少し残念なことに……

これはWindow環境で「游ゴシック」が細字が標準になっているからです。

つまりcssのfont-familyの設定で「游ゴシック」のミディアムをどの環境でも標準にする設定をしなければいけません。

また、font-familyに「遊ゴシック」と記述すると、ある環境では正しく反映されません。

「遊ゴシック体」「遊ゴシック medium」のように遊ゴシックの属性を指定したりとややこしいです。

私はこれが面倒なので「游ゴシック」をfont-familyの設定から除外しました！断腸の思いで。

では何をfont-familyで設定するのか。

font-familyで設定するべきフォント

これからの流行は間違いなく「Noto Sans JP」だと私は思っています。

このフォントの親である「Noto Sans」はGoogleとAdobeが共同開発したフォントです。

Adobeからは「源ノ角ゴシック」という名前で公開されています。

「Noto Sans」を元に日本語利用出来るようになったWEBフォントが「Noto Sans JP」です。

この「Noto Sans JP」はとにかく美しいです！

どうですか？とても見やすくないですか？

しかもおしゃれ！

では、英字はどんなフォントがいいのか。

話の流れからすると「Noto Sans」と言いたいところなのですが、個人的に「Noto Sans」より勝っていると思う英字フォントがあります。

これです！

「Lato」フォントです。

シンプルかつ、でもおしゃれで見やすくないですか？

この2つのフォントにより、2020年流行間違いなし？のフォントになります！

設定方法

こちらの「Noto Sans JP」と「Lato」をfont-familyとして設定する方法は

<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">

この<link>タグを<head>内で読み込みます。

GoogleFontsで探す

次にcss内で反映したいセレクターに対して、

font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

を記述します。

また、読み込まれなかった場合のことも考え、他のフォントも指定してあります。

まとめ

2020年に流行すること間違い無しのfont-familyの設定をご紹介しましたが、気に入って頂けましたでしょうか？

もう一度おさらい、<head>内に、

<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">

css内に、

font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

です！

これであなたのサイトも美しいフォントになること間違いなしです。

では、また会う日まで！