WordPressや最近流行りのはてなブログでブログ・サイト運営を行っている皆さん、こんにちは。
サイトのデザインを作り込んでいくうちに、やはり一番インパクトが大きいのが「フォント」です。
htmlタグでフォント指定は非推奨！cssで設定する方法まとめ
僕はデザインについて詳しい訳では全くありませんが、フォントだけは見やすいものを常に選んできました。
仕事でWindowsを使っているのですが、Macとは違ってフォントが見にくくて目が疲れやすい気がするので、せめて自分のサイトは読みやすいフォントにしようと考えているというのもあります。
デスクワークの辛い目の疲れ(眼精疲労)を溜めないための６つの方法
そこで、僕がこれまで試して見やすいと感じたフォント・webフォントをコピペで導入できるコード付きで紹介します。
WindowsでもMacでも綺麗に見えるフォント２選
※完全に管理人主観です。(以下、フォント画像はフォントカタログ・標準の日本語フォントより引用)
メイリオ
body {
font-family: "メイリオ", "Meiryo";
}
言わずと知れたメイリオ。
Win7から標準搭載されたフォントで、MacでもWindowsでも同一のフォントを表示できます。
パワーポイントやExcelの字体はメイリオにしている人がほとんどでは？
Windowsユーザーはシステムからメニューバーまで大半がメイリオだと思うので、違和感無く読めるフォントです。(Macユーザーから見るとちょっとダサく感じるのが玉に瑕)
さすがに”MS Pゴシック”を使っている人は、今すぐメイリオに変えましょう。
游ゴシック
body {
font-family: "游ゴシック","Yu Gothic";
}
当サイトで適用しているフォント。
Win10から標準搭載されたフォントで、Macにももちろん入っています。
当初游ゴシック体にはそこまで興味無く、後述のwebフォントを使っていたのですが、webフォントの場合最初にサイトに訪れたユーザーはロードに時間が掛かるというのを目にして、Mac,Windowsともにシステムにプリインストールされているフォントで良いのが無いか探していて見つけました。
細めの主張しすぎないけれども読みやすい字体で好きです。
MacでもWindowsでも同一に表示できるwebフォント３選。ページ表示速度は遅くなるけれど…
Roboto
引用：Lig.inc
web開発会社のLigブログでは、Google Fontsである「Roboto」を使用しています。
独特の英字体が癖になり、僕はこれを当サイトで適用していました。
実装方法はhtmlでのgoogleapiの読み込みと、cssでのフォント指定の２行で実装可能です。
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> //header内のどこかに置いておけばOK
body {
font-family: 'Roboto', sans-serif;
}
Noto Sans Japanese
引用：Google・AdobeオープンソースのNoto Sans fontがジワジワ凄い
じわじわ僕の中でキテいるwebフォントが「Noto Sans Japanese」。
字体を見ると、柔らかい游ゴシック体といった感じ。
サイトやブログの内容に応じて、こちらもあり。
実装方法はGoogle FontsなのでRobotoと同様。
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
body {
font-family: 'Noto Sans Japanese', serif;
}
M+ Fonts
引用：M+ FONTS
フリーの日本語webフォントといえば有名なのが「M+」です。
メイリオに似た書体なんだけれども、メイリオよりは読みやすい落ち着いた字体になっています。
Google Fontsでは無いですが、実装方法は変わりません。
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/basic_latin/mplus_webfonts.css">
body {
font-family: 'M+ P Type-1 (basic latin) Black';
}
実際にwebフォントの表示速度が遅いのかという点については、Web担当者Forumの記事を読んでみましょう。
Google Fontsである「Noto Sans」とTypeSquareで実験しており、Google Fontsは厳しい結果になっています。
僕はしばらく游ゴシックを使いますが、飽きてきたら変えようと思っています。
