Lancersで現役エンジニアに相談してみよう!

【2020年】font-famiry(フォントファミリー)おすすめ5選

フォントファミリーって種類がたくさんあるけど、おすすめの組み合わせってあるのかな?

↑↑この記事では、こんな疑問に答えます。

font-familyとは?

この記事を読んでいる人は既に知っていると思いますが、念のため。

font-family(フォントファミリー)は文字の書体を指定するために使うプロパティです。

使い方としては、下記のように記述します。

body{
   font-family:〇〇,〇〇,〇〇;
}

↑この例で言うと、「〇〇」の箇所にフォントの種類を指定することで、body全体にそのフォントが適用されます。

font-familyのおすすめ5選

Web業界でも有名なサイト・ブログを5つ選び、それぞれどんなfont-familyを使っているのかを調べてみました。

サルワカ

フォントファミリー おすすめ

引用;サルワカ

図解入りでわかりやすいWebハック系の記事と「力尽きた時のための簡単レシピ」で有名なサルワカ。柔らかみのあるデザインとフォントがマッチしています。

font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'  

株式会社LIG

フォントファミリー おすすめ

引用:株式会社LIG

Webメディア最大手の「LIG」では、白黒メインのデザインに合うように、フォントもカッチリ目な印象。コーポレートサイトにも使えそうです。

font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;

MERY(メリー)

フォントファミリー おすすめ

引用:MERY

女性から圧倒的な支持を得ている「MERY」。サルワカに似た柔らかみのあるフォントが特徴的ですね。フォントとは関係ないですが、タイトルの付け方も女性ウケを狙っている人には勉強になります。

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

バズ部

フォントファミリー おすすめ

引用:バズ部

SEOにおけるコンテンツマーケティングといえば、ほとんどの人は知っているであろう「バズ部」。アルファベット用のフォントが多い点が特徴的です。

font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;

マナブログ

フォントファミリー おすすめ

引用:マナブログ

最後に紹介するのは個人で運営されている「マナブログ」。月間200万PV以上・収益は数百万円クラスのモンスターブログです。上述している4つのサイトと比べて、フォントファミリーはかなりシンプル。

font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;

まとめ

font-family(フォントファミリー)のおすすめについて、有名なサイト・ブログを5つ紹介させて頂きました。

組み合わせは無数にあるので、色々と試して自分に合った型を見つけましょう^^