【2020年決定版】CSSのfont-familyオススメ設定

3 min
おすすめのfontfamily設定

みんさん、こんにちは!

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

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

また、記事も読みづらくなってしまうかもしれません。
そうならないために、私も使っている今年2020年流行間違い無しの、font-familyの設定をご紹介致します!

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

他サイトのfont-family

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

UX MILK

UX MILK
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」と言いたいところなのですが、個人的に「Noto Sans JP」より勝っていると思う英字フォントがあります。

これです!

Lato

Lato」フォントです。

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

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

設定方法

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

head.php
<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内で反映したいセレクターに対して、

style.css
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;

を記述します。

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

まとめ

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

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

head.php
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

css内に、

style.css
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;

です!

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

では、また会う日まで!

Anyushu

Anyushu

1993年生まれのWEBエンジニア。京都のITベンチャー企業で頑張ってます。趣味はサッカー観戦(ドルトムントファン)・映画鑑賞(年間200本観てます!)・メディアサイト巡回を日々しています。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です