なんと言おうとスマートなCSSのfont-familyはこれ

CSSのfont-familyは細かいことを覚えずにこれで。

以前にも似たような記事を書きましたが、今回は「2016年〜版」ということで、最近僕がコーディングをするときは、だいたいこれ！というフォントファミリー指定をメモします。

はい、好みやカンプの都合もありますが、特に問題がなければ上記で良いでしょう。

Webデザイナーは、游ゴシックには注意。

游ゴシックといえば、windowsなら8から収録されているフォントで、Macにも収録されているため、フォントのレンダリングでいえば共通の見た目が実現できる、というものでした。

ですが、割といろんな記事で話題になっていた、「windows8での游ゴシックがかすれて見えねー！」問題について。

正確には、windows8だけが原因というか、windows8のGoogle Chromeのレンダリングの仕様が関係しているとのことです。

そもそもwindows8には游ゴシックのLight, Regular, Boldが収録されています。その「Regular」が、解像度の都合でかすれてしまうのですね。
じゃあMacは？というところですが、MacにはMediumとBoldが標準で収録されています。
そりゃもちろんRegularよりもMediumのほうが視認性が高いよね…ということになります。

そこをカバーするために、

を指定するわけです。これによりwindows8上で、「Regular」の太さが増し、Macでいう「Medium」ぐらいの見た目になるのですが、そこにも問題があり、windows8のGoogle Chromeのみこの方法が効かないのです。

ただここにも落とし穴があり、「windows8のGoogle Chromeのみ」と書きましたが実はCSSの指定に対するレンダリング的にはこちらが正しく、Macでのレンダリングが特殊らしいです。
ちなみにwindows10ではこのような差異はないので、対処としては、「windows10へアップグレードしてくれ」というところです。

Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web

源真ゴシックをWebフォントとして使ってはいかがだろうか

僕の場合ですが、手が空いたり気が向いたら「源真ゴシック」を使用します。

源真ゴシックは、GoogleとAdobeが共同開発した「Noto Sans」を拡張したフォントで、Noto Sans自体が非常に多くの文字をサポートしていて、かつスマートな見た目なのです。
しかも、Extra Light〜Heavyまで7つのウェイトを収録しており、winとmacの游ゴシック問題のような面倒なことが起こりません。（Lightを使用すると、解像度によりますがwindowsでかすれます。MacのRetinaでは美しくシャープなのですが…

これは標準で収録されていないのでWebフォントとして読み込む必要がありますが商用利用可のライセンスであるため問題なく使用できます。
ちなみに当ブログのフォントは源真ゴシックLightを使用しています（2016年8月現在のデザイン。

見出しやリード文にも柔軟に対応できるので、デザインの段階から使えますね！
フォントのダウンロードは以下から。また、Woffコンバータを使用してWebフォント化したファイルをサンプルで載せておきますので、参考にダウンロードしてみてください！
ちなみにフォントによるトラブルにおいては一切責任を負いませんので、ご了承ください。

源真ゴシック (げんしんゴシック) | 自家製フォント工房 Webフォント化サンプルファイル

メイリオなんかよりも100倍おすすめです！（個人的に
意外と知らない方も多いので、事前に共有はしっかりしましょうね。せっかくの源真が小塚とかヒラギノに変えられたら、たまったもんじゃないですから。。

でわ！