2017年のfont-familyはこれで決まり!~フォントでサイトを彩る~

2017年のfont-familyはこれで決まり!~フォントでサイトを彩る~

さて、本日はサイト運営者の方や、デザイナーの方にサイトのイメージを大きく変える「フォントの指定」についてご紹介したいと考えています。

様々なブラウザに対応させるためにCSSを使って、font-familyを用いるのが一般ですが、このfont-familyはどうすればいいのかわからない。
ということがよくあると思います。

今日は僕がおススメのfont-familyをご紹介致します。
英語のフォントはあまりに多いので、日本語を中心としたfont-familyをご紹介致します。

font-familyのご紹介!

フォントを自分のサイトで確認する方法

自分のサイトでフォントを確かめたいときは、

サイト上で[右クリック]→[要素を検証]→[CSSを変えてみる]→[しっくりくるかを確認]

このやり方がおススメです。(GoogleChromeの場合)

1.安定のメイリオ

日本語のフォントで1番人気なのがメイリオです。
この記事もメイリオで書かれています。

見やすさ・綺麗さ・デザイン性を踏まえてもメイリオを取り入れることを強くお勧めします。

メイリオ込みで僕がおススメのfont-familyはこちら↓

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;

コピペして自分のサイトに反映させてみてください!

2.お洒落な游書体

今僕がはまっているfont-familyがあります。
それが游書体を用いたfont-familyです。

見た目がきれいで、boldにしてもお洒落です。
2015年流行るのではないかと思います。

ただWindows7に対応していないので、メイリオも入れておいた方がいいです。

以上のことを踏まえ、おススメのfont-familyはこちら↓
ついでに数字がお洒落になるQuicksandも入れておきました!

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

ちなみにドレスクリエイトのホームページのfont-familyもこちらを用いています。
是非コピペして自分のサイトに反映させてみてください!

3.有名サイトのfont-family

666666BLOGさんで面白い内容があったので、合わせてご紹介させていただきます。

こちらの記事も有益なfont-family情報が書かれていますので、是非ご覧ください。

まとめ

以上フォントの指定はWebデザインにとって命といっても過言ではないと思います。
英語のフォントのみにこだわると日本語のフォントが不格好になりますし、サイトの価値が下がってしまいます。

WordPressはデフォルトが英語のフォントしか入っていないため、何もしなければ非常に不格好です。

一歩先のWebサイトを実現するため、是非上記のfont-familyを用いて、デザイン性が高く、見やすいフォントにしてみてはいかがでしょうか?

それではまた明日。

この記事のライター

鈴木 駿也