WordPressや最近流行りのはてなブログでブログ・サイト運営を行っている皆さん、こんにちは。

サイトのデザインを作り込んでいくうちに、やはり一番インパクトが大きいのが「フォント」です。

参考:htmlタグでフォント指定は非推奨!cssで設定する方法まとめ

僕はデザインについて詳しい訳では全くありませんが、フォントだけは見やすいものを常に選んできました。

仕事でWindowsを使っているのですが、Macとは違ってフォントが見にくくて目が疲れやすい気がするので、せめて自分のサイトは読みやすいフォントにしようと考えているというのもあります。(参考:マーケターの僕がやっている目の疲れ(眼精疲労)を溜めない6つの方法)

そこで、僕がこれまで試して見やすいと感じたフォント・webフォントをコピペで導入できるコード付きで紹介します。

スポンサーリンク

WindowsでもMacでも綺麗に見えるフォント2選

※完全に管理人主観です。(以下、フォント画像はフォントカタログ・標準の日本語フォントより引用)

メイリオ

スクリーンショット 2016-03-09 22.20.18

言わずと知れたメイリオ。

Win7から標準搭載されたフォントで、MacでもWindowsでも同一のフォントを表示できます。

パワーポイントやExcelの字体はメイリオにしている人がほとんどでは?

Windowsユーザーはシステムからメニューバーまで大半がメイリオだと思うので、違和感無く読めるフォントです。(Macユーザーから見るとちょっとダサく感じるのが玉に瑕)

さすがに”MS Pゴシック”を使っている人は、今すぐメイリオに変えましょう。

游ゴシック

スクリーンショット 2016-03-09 22.22.05

当サイトで適用しているフォント。

Win10から標準搭載されたフォントで、Macにももちろん入っています。

当初游ゴシック体にはそこまで興味無く、後述のwebフォントを使っていたのですが、webフォントの場合最初にサイトに訪れたユーザーはロードに時間が掛かるというのを目にして、Mac,Windowsともにシステムにプリインストールされているフォントで良いのが無いか探していて見つけました。

細めの主張しすぎないけれども読みやすい字体で好きです。

MacでもWindowsでも同一に表示できるwebフォント3選。ページ表示速度は遅くなるけれど…

Roboto

スクリーンショット 2016-03-09 22.54.39

引用:Lig.inc

web開発会社のLigブログでは、Google Fontsである「Roboto」を使用しています。

独特の英字体が癖になり、僕はこれを当サイトで適用していました。

実装方法はhtmlでのgoogleapiの読み込みと、cssでのフォント指定の2行で実装可能です。

Noto Sans Japanese

スクリーンショット 2016-03-09 22.59.41

引用:Google・AdobeオープンソースのNoto Sans fontがジワジワ凄い

じわじわ僕の中でキテいるwebフォントが「Noto Sans Japanese」。

字体を見ると、柔らかい游ゴシック体といった感じ。

サイトやブログの内容に応じて、こちらもあり。

実装方法はGoogle FontsなのでRobotoと同様。

M+ Fonts

スクリーンショット 2016-03-09 23.03.58

引用:M+ FONTS

フリーの日本語webフォントといえば有名なのが「M+」です。

メイリオに似た書体なんだけれども、メイリオよりは読みやすい落ち着いた字体になっています。

Google Fontsでは無いですが、実装方法は変わりません。

 

実際にwebフォントの表示速度が遅いのかという点については、Web担当者Forumの記事を読んでみましょう。

Google Fontsである「Noto Sans」とTypeSquareで実験しており、Google Fontsは厳しい結果になっています。

僕はしばらく游ゴシックを使いますが、飽きてきたら変えようと思っています。

TechAcademyでWordPressを学ぶ

スポンサーリンク
690f6b21f2aab638d7bd5b8041413b64_s

この記事が役に立ったらいいね!をしよう