みんさん、こんにちは！
今回はこのブログサイトでも使っているfont-familyの設定をご紹介します。
font-familyの設定を怠っていませんか？
font-familyの設定次第ではデザインがいくら良くてもバランスが崩れてしまいます。
また、記事も読みづらくなってしまうかもしれません。
そうならないために、私も使っている今年2020年流行間違い無しの、font-familyの設定をご紹介致します！
またプログラミングに最適なフォントもまとめましたので気になる方は下記からどうぞ！
この記事の目次
他サイトのfont-family
ご紹介に入る前に、おしゃれで有名なサイトがどんなcssのfont-familyを設定しているか見てみましょう。
UX MILK
デザイナーさんがよく見るサイトの一つUX MILKです。
非常にシンプルかつ読みやすいメディアサイトで私もよく見させてもらっています。
こちらのサイトのfont-familyは下記です。
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;メインのフォントは「ヒラギノ角ゴ Pro」と次の優先フォントは「游ゴシック」なっております。「ヒラギノ角ゴ Pro」といえばメジャーなフォントなのでよく目にしますよね。
ただmacOS Catalinaでは「ヒラギノ角ゴ Pro」がシステムフォントから外れてしまい、Macユーザーはきれいに表示されないなんてことも、しばしばあります。
サルワカ
Webについて調べ物をする際にいつも上位表示されている「サルワカ」さんです。
非常に見やすい記事一覧ページ、わかりやすいイラストが特長のメディアサイトです。
こちらのサイトのfont-familyは下記です。
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;メインのフォントは「Helvetica Neue」、次の優先フォントは「Arial」となっております。
Windows10には「Helvetica Neue」はなかったはずなので「Arial」が表示されているはずですが、
どちらもシステムフォントなので、表示のスピードも早くブラウザにかなり優しい設定になっていますね。
ただ少し物足りないと感じる方もいるかもしれません。
2020年流行間違い無し?のfont-familyのオススメ設定
これからの流行は間違いなく「Noto Sans JP」だと私は思っています。
このフォントの親である「Noto Sans」はGoogleとAdobeが共同開発したフォントです。
Adobeからは「源ノ角ゴシック」という名前で公開されています。
「Noto Sans」を元に日本語利用出来るようになったWEBフォントが「Noto Sans JP」です。
この「Noto Sans JP」はとにかく美しいです！
どうですか？とても見やすくないですか？しかもおしゃれ！
では、英字はどんなフォントがいいのか。
話の流れからすると「Noto Sans JP」と言いたいところなのですが、個人的に「Noto Sans JP」より勝っていると思う英字フォントがあります。
これです！
「Lato」フォントです。
シンプルかつ、でもおしゃれで見やすくないですか？
この2つのフォントにより、2020年流行間違いなし？のフォントになります！
設定方法
こちらの「Noto Sans JP」と「Lato」をfont-familyとして設定する方法は
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">この<link>タグを<head>内で読み込みます。
次にcss内で反映したいセレクターに対して、
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;を記述します。
また、読み込まれなかった場合のことも考え、他のフォントも指定してあります。
まとめ
2020年に流行すること間違い無しのfont-familyの設定をご紹介しましたが、気に入って頂けましたでしょうか？
もう一度おさらい、<head>内に、
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">css内に、
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;です！
これであなたのサイトも美しいフォントになること間違いなしです。
では、また会う日まで！
