こんばんわ!macのOSアップデートで游ゴシック体が使えて嬉しいbehomaです。
アップデートでフォントが追加されるって本当に嬉しいですよね。

今回はブログの話です。ブログを始めると色々カスタマイズしたくなります。文字が違うだけでもブログの印象はぐっと変わるものです。今回は是非設定しておきたいフォントファミリーの指定をお伝えしたいと思います。

 
スポンサーリンク

 
 

 


・游ゴシック体を入れる


 
この游ゴシック体

最近良く見るブログでフォント指定されていることが多いです。
なんだか綺麗なフォントだなと思ったら大体が游ゴシック体が使われております。今までのフォントファミリーの標準な記述といえば


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

 
なのですが、最近の流行りは


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

 
となっていることが多いです。もちろんこの游ゴシック体のフォントがパソコンに入っていないと表示はされませんが、macはOSX El Capitanからwin10は標準で游ゴシック体が入っております。※win7もダウンロードすると使えます。

という僕ももちろん。。と思って調べてみたら全然游ゴシック体じゃなかった!!めっちゃくちゃメイリオだったのでたった今変更を行いました。
 
これからブログを始める人は游ゴシック体にすることをおすすめします。
 
 


・フォントを綺麗にする為のfont-smoothing


 
この游ゴシック体とは別に流行っているのが

font-smoothing: antialiased;

 
これを使用するだけであら不思議、フォントがシャープになって綺麗になります。
対応ブラウザがグーグルクロームとfirefoxとすべてのブラウザではありませんが、拝見する機会が最近増えてきました。
 
グーグルクロームで使用するなら

-webkit-font-smoothing: antialiased;

 
firefoxで使用するなら

-moz-osx-font-smoothing: grayscale;

 
と記載するとフォントが綺麗に表示されます。これはフォントにアンチエイリアスというギザギザを目立たなくする処理が行われています。
 
 


・グーグルウェブフォントを使って欧文を綺麗にしよう


 

最近の流行りは英字や数字はウェブフォントを使用しているということ。ウェブフォントを使用すると異なるブラウザでも同じように表示されます。このおかげで文章にアクセントを加えることが出来ます。

そのウェブフォントの中でも良くみるのが

Quicksand

例:
2016/04/27 これがQuicksand。
 
結構いろんなブログで指定されております。使い方は非常に簡単でスタイルシートを読み込んでフォントファミリーで指定してあげるだけですぐに表示されます。

グーグルフォントの導入に関しては以下のサイトが詳しいので是非参考にして下さい。

 
 


・コピペでbodyタグに貼り付けよう


 
以上の内容をまとめると今流行のフォント指定は

@import url(https://fonts.googleapis.com/css?family=Quicksand);

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

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

これをbodyに貼ってあげるだけで文章が綺麗になります。ぜひ一度試してみて下さい。
 
 

まとめ

フォントが変わるだけで世界が変わる。

みなさまも一度試してはいかがでしょうか?