2015年新春のブログのフォント指定 “font-family” はWindowsもMacもこれで決まり!

 突然これで決まり!というタイトルに突っ込みますが、私のこのブログではこれで行こうというだけで、多分「それはおかしい!」とか「その指定だとこれが!」とか言われそうですが、「家電のいろは」は2015年初めはこれで行きたいと宣言しておきます。何でこの記事を書いたかというと、WordPressで利用して運営しているのですがテーマが更新されるとCSSも全部元に戻るので、備忘録として書いています。何かお勧めなものがある方はコメント欄に書いていただけると嬉しいです。
 さて、ブログ運営している方が見に来ることが多いと思いますのでフォントの小話も交えて指定していきたいと思います。

[pmad]

Twenty Fourteenの初期

k
 当ブログはWordPressのTwenty Fourteenテーマを使用しています。このテーマはカッコイイのですが、日本語として使うには少々めんどくさい部分もあり、今回のフォントもその一つでした。初期のフォント設定が「font-family: Lato , sans-serif ;」で、Latoって!?Latoって何?そんな状態でした。もちろん英字だけのブログならカッコイイのでしょうが、日本語が多い当ブログではlatoとブラウザ指定の合成フォントとなり、見事にアンバランスになったので変更しなければいけない状態でした。アップデートしてから何週間たったか…。
 では早速、この無駄な状態を変更していきましょう!

Windowsも!Macも!強い新人現る

yuugothic
 今までWindowsはMSゴシックやメイリオ、Mac OSではOsakaやヒラギノでしたが両者揃って導入してきたのが「游ゴシック」。この新人は凄いことにWindows 8.1とOS X Maverricksの両方に標準で入っている。ただしWindowsとMacでフォント名が違う…。
 「font-family: YuGothic , '游ゴシック', sans-serif ;」これだけでいいんじゃないですかね?古いOS使ってる方が悪いんですよ。これで最新OSには対応しました。Windowsには日本語で書いた「游ゴシック」で対応してくれますし、Mac用には「YuGothic」で指定されてます。
 字游工房の書体はかなりこだわりのある作りで、凝ったデザイナーさんが使うのが主だと思っていたらいつの間にか電子書籍にも使われて見やすいフォントとして一般にも人気が出てきているので2014年はヒラギノが先でしたが、2015年からはこちらを格上にしました。

根強い人気ヒラギノ

HIRAGINO
 私の中では根強い人気ということになっている字游工房のヒラギノ。Mac OSXから導入されiOSのフォントにもなっているのでこいつを頭に持ってきました。Windows環境でもヒラギノを入れている方もいるので日本語フォントとしても指定すること。
 「font-family: YuGothic , '游ゴシック' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ ProN' , sans-serif ;」こうしておけば、OS X古いバージョン使ってる方とWindows 8以下にヒラギノ入れてる人の環境に合わせられます。ちなみに「Hiragino Kaku Gothic Pro」ではなく「Hiragino Kaku Gothic ProN」ですiOSはProNしか入っていないので間違えると…間違えてもヒラギノで開きそうですけどね。
 一部のブラウザの為にW3と書いていた時期がありますが、最新版には必要ないので削って平気です。
 高速道路公団の方が必要な文字だけ作成していた高速道路のあの緑色の看板も民営化の流れなのか一般的なフォントであるヒラギノを採用された。

メイリオって人気あるの?

MEIRIO
 Windows Vistaからメインとなったフォント「メイリオ」ですが、個人的にはあまり好きではないんですよね。まだ、現役OSに入っているので指定しておきましょう。
 「font-family: YuGothic , '游ゴシック' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ ProN' , Meiryo , メイリオ , sans-serif ;」これが私の中での完成形です。足し算も引き算もできないくらい完璧…。だとは思うんですが、普通に他の方もこれに落ち着いてるような気がします。

アイツが居ない!こいつが居ない!

NO_FONT
 数年前にフォントファミリーを気にしてた人が久しぶりに見直しのために来たら「Osakaは!」「MS ゴシックは!」と騒ぎそうですが、Osakaが入っているMacなんて化石なので買い替えてください。同様にMS ゴシックもWindows XP以下の世代なのでサポート切れてますのでネットワークに接続しないでいただきたい。なのでこの2つは「 sans-serif 」に任せておけば大丈夫です。
 WindowsにAppleのブラウザインストールしたりすると入ってくる迷惑フォント「Lucida Grande」は消えていただきましょう。これを先頭に入れてあると全角系の文字で文字化けを起こす原因になりますので指定はしないのが無難です。
 あと合成フォントがあまり好きではないので、IEの英字合成に使われる「Arial」とsafariの英字合成に使われる「Helvetica」も指定する必要は無いですね。

まとめ

・最新OSだけしか気にしないなら
 「font-family: YuGothic , '游ゴシック' , sans-serif ;」

・サポート継続中の古いOSにも対応させて
 「font-family: YuGothic , '游ゴシック' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ ProN' , Meiryo , メイリオ , sans-serif ;」

・メーカーサポートが無い、遺産「Osaka」「MS ゴシック」は要らないし、日本語ブログなので英字フォントも切ってしまいましょう。


[pmad]

Author: paseri

コメントを残す

メールアドレスが公開されることはありません。