フォントファミリーの指定は、初心者が『むむむ』と思うことが多いですよね。もちろん書式自体は難しくないし、簡単に変更できるけれど、参考にした書籍やサイトによって、フォントファミリーの指定内容にバラ付きがあるし、同じ種類、同じバージョンのブラウザを使っていても、OSのバージョンが違っていると、表示される書体が違っていたりする。
固定ページ『WordPressのお勉強』の記事でも、フォントファミリーの設定変更が出てきました。指定の仕方そのものに関わる部分は、固定記事としてアップしますが、フォントに関する予備知識を補足しておきたいと思います。

フォントファミリーの指定は違うのに

下の図を見比べてみると、フォントファミリーの指定が違うのに、同じように表示されているのが分かると思います。
上図では『sans-serif』、下図では『MS Pゴシック』です。

上:sans-serif 下:MS Pゴシック
上:sans-serif 下:MS Pゴシック

 

『sans-serif』は、Webサイトのフォントをゴシック体で表示するときに用いられます。でも、ゴシックと言われる書体はたくさんありますよね。『具体的には、どんな書体を表示するんだ?』と疑問に思う方もいるはずですが、一概には返答できません。なぜなら、その疑問に答えるためには、OSやブラウザの種類やバージョンが関係しているからです。

そもそも、ブラウザをはじめ、アプリケーションは、OSありきのソフトウェア。そのため、とくにフォントを追加する機能を持つソフトウェアを追加インストールしない限り、PC上で使用できるフォントはOSがサポートしているものに限られます。自分のPCがサポートしていない書体は、ブラウザ上でも表示できないということですね。

PCで使えるフォントに違いがあるということがピンと来ない方のために、こんなお話を。
書体って値段が高いですよね~。『書体に値段!?』とビックリする方もおられると思うのですが、たとえば書体が原因でWindows XP HomeエディションのPCが百万の桁を数えるなんて状況もあったんです。『どんな状況だよ?』と失笑する方もいると思いますが、零細企業を舐めてはいけません。たとえば、町の印刷屋さん。
もともと、印刷屋さんには写植機がつきものだったわけですが、時代の流れで個人商店のような印刷屋さんでもPCを導入する時代が到来しました。印刷業に関連した機器機械のメーカーも、古いもののサポートは縮小、打ち切りという流れになっていくのですから、Windows XPが登場したころには、時代に対応した設備を導入したほうが良いという状況も生まれると想像するのは容易いでしょう。
PCが普及する前から、印刷業を営んできたAさんは、写植機が使えても、PCを使ったことがない世代のオッサン。業者にお願いして一式揃えて貰いましたが、町の印刷屋さんの経営は厳しい時代。設備投資だって、金に糸目をつけないなんてことはできない。それで、見積もりを取って予算内で納めるために、PCのOSも、XP Professionalでさえなくなってしまう。まるで見てきたかのようにお話していますがが、私は身内に町の印刷屋さんがいて、本当に見たことがある事実です。
PC自体は、ふつうのPCです。ただ、印刷業は多くの書体が必要になりますから、OSが標準でサポートしている書体では商売になりません。それはあくまで、OSを開発している会社が、PCを特別な環境で使わない一般ユーザーのために用意した書体なんです。商売で使うため、さまざまな書体を導入すれば、ライセンス料を支払うことになります。専門業者が使う書体ですし、特殊なものもありますから、価格もかさんでしまう。

上:MSゴシック 下:MS Pゴシック
上:MSゴシック 下:MS Pゴシック

そんなことを知ると、『MSゴシック』、『MS明朝』といったように、マイクロソフトのゴシック書体、マイクロソフトの明朝体なんてもの存在する理由にも察しがつくと思います。日本語フォントのMSゴシックやMS明朝は、リコーが米国Microsoftとともに開発したもので、Windows3.1ではじめて搭載されました。OSも、巷に存在する、さまざまな種類の書体を、かってに搭載してよいわけではないのです。そのため、フリーライセンスで使用できる書体や、自分たちが開発した書体を利用しています。ちなみに、MSゴシックとMS Pゴシックの違いは、文字の幅が等幅か、P(プロポーショナル)かの違いです。プロポーショナルでない文字は幅が均等なので、語数が同じでもMS Pゴシックよりも表示されるテキストが長くなります。全角、半角、英数字、記号など、さまざまな文字が並ぶ文面ではMS PゴシックやMS P明朝のほうが見やすいので、現在のWindows環境では、MSゴシックやMS明朝よりもMS PゴシックやMS P明朝が使われる場面が多いです。

どんなOSでも、時代の流れとともに新しいフォントが出てくるので、ブラウザ上で標準とされるフォントも、OSやブラウザの種類、バージョンによって変更されることになります。また、現在では、Mac OSにインストールするマイクロソフトOfficeにも、さまざまなフォントがバンドルされています。そのため、Mac OSであっても、Microsoft Officeをインストールしている場合、基本的にWindowsで使われているフォントが使用できる環境になります。

 

 Webサイトの標準フォントは、OSとブラウザのバージョン、双方が関係している

sans-serif指定の例
sans-serif指定の例

上図は、WordPressの『TwentyFourteen』というテーマ(テンプレート)のデフォルトのフォントファミリーの指定です。
『Lato』 という東欧のデザイナーが作成し、フリーラインセンスとして利用されることになった書体と、『sans-serif』が指定されています。でも、ブラウザ上で文字を見ると、MS Pゴシックです。
なぜかといえば、Latoは欧州フォントですから、日本語フォントには適用できない。そのため、ブラウザ(OS)が、『sans-serif』と設定している標準フォントで表示されているのです。
このスクリーンショットは、Windows7・Google chromeバージョン36の環境で取りました。この環境での日本語ゴシック体の標準フォントはMS Pゴシックです。だから、日本語フォントは、MS Pゴシックで表示されている。『明朝体』という意味合いの指定には、『serif』が用いられますが、この場合の標準フォントは、『MS P明朝』が指定されています。そのため、指定がゴシック体のsans-serlfではなく、serifだったら、MS P明朝で表示されます。

serif指定の例
serif指定の例

つまり、最低限serifかsans-serifを指定しておけば、サイトの文字を明朝体か、ゴシック体かを指定することはできるわけです。実際に、どんな書体が使われるかは、自分が使用しているOSとブラウザによって標準フォントの設定が違っているということですね。
ならば、serifも、sans-serifも指定していない場合はどうなるかといけば、これもOSとブラウザによって表示される書体が違います。無指定だった場合、この標準フォントで表示するという設定も、OSとブラウザによって、あらかじめ定義されています。
仮に、二人のユーザーがいて、一人はWindowsユーザー、一人はMacユーザーだったとします。両者ともに、同じバージョンのGoogle chromeを使っているユーザーでも、WindowsとMacでは指定されている標準フォントが違う。だから、serif、sans-serifを指定した場合も、無指定だった場合も、ブラウザに表示される書体が違いが生じるのです。

 

OSのバージョン違えば、同じバージョンのブラウザでも表示に違いが出ることもある

先ほども触れたように、sans-selfという指定は『ゴシック体で表示』というファジーな指定です。この指定だけだった場合、Windows7でIEのバージョン11と使えば、標準の日本語フォントはMS Pゴシックになります。一方、Windows 8.1でIEのバージョン11を使えば日本語フォントはメイリオという書体になります。selfだった場合は、両者ともにMS P明朝です。
そういえば、『同じ種類、同じバージョンのブラウザを使っているのに、OSのバージョンによってフォント表示が違うのは納得いかない』という内容のブログを見かけたことがあります。確かに、OSが何なのかということが、今一つわかっていないと、そういう感想も生まれるのかもしれませんね。

『今さら人に訊けないPC基礎』でも、ちらりと書いていますが、ことマルチタスク環境以降のアプリは、OS依存度が大変高いソフトウェアなんです。アプリに対するOSの制御が強くないと、複数のアプリケーションを1台のPCで実行するという環境は実現できません。アプリはOSと連携して動作していますから、OSの影響を多分に受けます。

ユーザーにとっては同一のアプリケーションであっても、OSの内部構造が違えば、アプリに対するOS側の処理が違っても仕方ない。ブラウザといっても何種類もありますし、そのバージョンのOSがサポートしている過去のソフトウェアと、新しいバージョンがサポートしている過去のソフトウェアも異なっている場合もあり、互換性の問題もあります。そのため、新しいOS側の環境にすべて揃えられるとは限りません。同じ種類の同じバージョンのブラウザであっても、実際にアプリが動作する環境を整えているのはOSですから、OSごとに最適と判断された標準フォントが違ってしまうというケースもあるのです。
このように、Webページを製作するとき、製作者が具体的にフォントファミリーを指定していない場合に表示される標準フォントは、OSとブラウザの種類とバージョンの組み合わせ次第で違いが出ます。

 

任意のフォントファミリーの指定例
任意のフォントファミリーの指定例

Webサイトのデザインをするにあたり、いくつものフォントファミリーが指定されているのは、Webサイトを見る側のユーザーのPCが、OSの種類やバージョン、ブラウザの種類やバージョンが異なるからです。表示されたときに、製作者がイメージするデザインにあった書体で表示されるように指定しています。
図の場合、私のPCはWindows7なので、ブラウザがchromeでもIEでも、MacOS用のヒラギノ角ゴ ProN W3までは無視。サイト上のフォントは、メイリオで表示されることになります。

メイリオは、Windows Vista以降のOSに標準搭載された日本語フォントです。メイリオという名称は『明瞭』にちなんでいると言われています。また、このフォントはライセンス販売されているため、メイリオが搭載されていないシステムに組み込んで使うことも可能です。またMicrosoft Officeにもバンドルされているため、Officeの影響で他のOSでも使えるという環境もあります。