標準フォントをメイリオ→游ゴシックに変更

font-family・font-faceの指定、明朝体の定義方法など

利用者の皆様には、ログイン後の管理ページのお知らせ欄でご案内しておりますが、2016/08/24に標準のフォント(字体)を「游ゴシック」に変更しました。
合わせて実装した、ホームページ全体の標準の字体・文字サイズ設定について説明します。

フォント変更の理由

歴代Windows/OS Xと游ゴシック

まずは、歴代Windows、歴代OS X(Mac)のシステムフォントと游ゴシック対応をまとめてみます。

Windowsと游ゴシック
Windowsのバージョンシステムフォント游ゴシックの可否
XPMS ゴシック×
Vistaメイリオ×
7×
Office2016を利用している場合は○
Office2010/2013向けに無償配布中
8Meiryo UI
8.1
(2013年10月18日リリース)
10游ゴシック
Macと游ゴシック
Macのバージョンシステムフォント游ゴシックの可否
Mac OSOsaka×
OS X 10.8 Mountain Lion
以前
ヒラギノ角ゴ×
OS X 10.9 Mavericks
以降
(2013年10月22日リリース)

このように2013年10月に発表されたそれぞれの新バージョン以降、「游ゴシック」が利用できます。

変更の要因

まめわざでは、次の点を考慮して游ゴシックを採用しました。

  • 2013年10月以降のOSで利用できるため、対象者が多く、増え続けている
  • WindowsとMacで見た目が統一できる
  • Windows10の標準フォントのため慣れている人いる、今後も増え続ける
  • 小さい文字でもギザギザにならず(アンチエイリアスが効き)、シェイプも癖が少ないことから、長く使える可能性がある

万人受けするフォントはない

Windowsでは上記のようにシステムフォントが何度か変更になっています。ネット上には、

  • Windows〇〇で旧バージョンのシステムフォントに戻す方法
  • Windows〇〇で新バージョンのシステムフォントを利用する方法

というような情報が見受けられます。
字体の変更に対する捉え方は人それぞれで、慣れてしまえば問題ない人、気に入らないと嫌悪感を覚える人、特定のフォントを使い続けるファン、など様々です。美的センスや視力が人それぞれだからやむを得ません。
万人受けする字体というのは存在しないようなので、個々の意見には目をつぶっての決断となりました。

まめわざで作ったホームページの全体の字体・文字サイズを変える

游ゴシックの採用により、ゴシック体の選択肢はメイリオとの2種類、字体の選択肢は明朝を加えて計3種類となったので、ホームページ全体の字体を変更できるようにシステムの改善を実施しました。
これに合わせて、文字サイズも変更できるようにしました。
明朝をベースにして和風な雰囲気を出したり、大きめの文字サイズを採用して高齢者や弱視者に配慮するなど、様々な使い方が可能です。

全体の字体・文字サイズの変え方

全体の字体・文字サイズは「デザイン」にひも付けされ、デザイン編集ページで設定ができます(デザインを複数使い分ければ、字体の異なるページ、文字サイズの異なるページを簡単に作成できます)。
変更の手順は以下です。

ページ一覧の「デザイン」欄の「編集」ボタンからデザイン編集ページに移動します。

上部の「もっとデザイン」タブをクリックします。

文字設定欄で、文字のサイズと字体を選択します。
最後に最下部の「保存」ボタンをクリックしてデザインを保存します。

特定の字体・文字サイズありき、はやめましょう

「見る人が好きな環境で見れる」ことは、印刷物にないホームページの特徴の1つです。
例えば、スマホ・タブレット・ノートパソコン・デスクトップパソコンなど様々なディスプレイサイズで閲覧ができます。
字体が端末やOSのバージョンによって変わるだけでなく、ユーザーが自分の好みの文字サイズ・字体に変更する設定欄も設けられています。
加えて、未来の端末やOSの登場により、字体がどのように変わるかは予想が出来ません。
字体・文字サイズ・文字の折返し位置に過度に重きを置かず、閲覧環境をユーザーに委ねることは、最良のアクセシビリティ対策につながります。

半数以上のユーザーには影響がない

ホームページ訪問者の半数以上を占めるスマートフォンには「游ゴシック」も「メイリオ」もありません。
Androidに至っては、現最新バージョンの6(2016年9月時点)ですら明朝体が実装されていません。
スマートフォンではそれぞれのシステムフォントが利用されます。
字体変更の影響は、半数以上のユーザーには影響がないことを心に留めておきましょう。

font-familyの指定(技術者向け情報)

font-familyの複数指定では継承(inherit)が使いづらい

bodyタグに明朝体のfont-familyを設定した例を考えます。

body { font-family:"游明朝",serif; }

日本語と英数が混在したpタグ内の文章で、日本語は明朝、英数はTimes New Romanにしたい場合、どのように指定すれば良いでしょうか。

pタグに指定するfont-family出力結果
日本語英数
font-family:"Times New Roman";システムフォントTimes New Roman
font-family:"Times New Roman",inherit;游明朝游明朝
font-family:"Times New Roman","游明朝",serif;游明朝Times New Roman

意図した表示が出来たのは3番めの全てのフォントを指定した場合でした。
1番目や2番目でも出来そうですが、残念ながら思い通りの表示にはなりません。
この仕様の問題点は、様々な端末・OSに対応するために複数のフォントを指定した場合に顕著になります。

p {
font-family: "Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HGS明朝E","MS P明朝","MS 明朝",serif;
}

例えば、このような長たらしい記述を都度しなければならず、管理の負担となります。

font-faceを使う

冗長的な記述を避ける方法として、次のようにfont-faceを使う方法があります。

@font-face {
font-family: mymincho;
src: local("游明朝 Regular"),local("Yu Mincho Regular"),local("游明朝"),local("Yu Mincho"),local("YuMincho"),local("ヒラギノ明朝 ProN W3"),local("Hiragino Mincho ProN"),local("HGS明朝E"),local("HGSMinchoE"),local("MS P明朝"),local("MS 明朝");
}

CSSの先頭で、明朝体を表示するためのmyminchoというfont-familyを新たに定義し、関連付けるフォントを指定します。
src: local()で端末にインストールした同名のフォントと関連付けされます。同一フォントでも端末やブラウザによって名称が異なるため、この部分がfont-familyによる直接指定よりも冗長になります。
これにより、上記の例でpタグに「日本語は明朝、英数はTimes」としたい場合、

p {
font-family: "Times New Roman",mymincho,serif;
}

とすれば済みます。
複数回記述しなければならない場合に労力と記述ミスを減らせたり、メンテナンスが楽だったりとメリットがあります。

Chromeで游ゴシックが見づらい

Chromeではfont-familyで「游ゴシック」や「Yu Gothic」を指定した場合に、「游ゴシック Light」を表示しているため、線が細い読みづらくなってしまいます。
そこで、同じfont-faceを利用して太さを「游ゴシック Medium」と明示することで、Chromeでも標準的な太さの游ゴシックを表示できます。

@font-face {
font-family: mygothic;
src: local("游ゴシック Medium"),local("Yu Gothic Medium"),local("游ゴシック"),local("Yu Gothic"),local("YuGothic"), local("ヒラギノ角ゴ ProN W3"),local("Hiragino Kaku Gothic ProN"),local("メイリオ"),local("Meiryo");
}
@font-face {
font-family: mygothic;
src: local("游ゴシック Bold"),local("Yu Gothic Bold"),local("YuGothic Bold"),local("ヒラギノ角ゴ ProN W6"),local("Hiragino Kaku Gothic ProN"),local("メイリオ"),local("Meiryo");
font-weight: bold;
}

本件は、こちらの「Chromeでも読みやすい游ゴシックを指定するCSS - Qiita」をさんこうにさせていただきました。

Windows VistaやWindows7でもアンチエイリアスが効く明朝体

インストール率が高いと思われるギザギザしない明朝体をまとめてみました。

ギザギザしない(アンチエイリアスの効く)明朝体
フォントWindowsOS XOffice
游明朝8.1以上10.9 Mavericks以上Office2016
(2010/2013でも無償配布)
ヒラギノ明朝--10.0(OS X)以降--
HGS明朝E----Office2007以降

このように、游明朝・ヒラギノ明朝・HGS明朝Eを指定することで、

  • 8.1以降のWindows
  • OS X以降のMac
  • Office2007以降をインストール

のいずれかの条件を満たすパソコンで、ギザギザしない明朝体が表示できます。
これに、「MS明朝」と明朝を意味する「serif」を合わせて以下のように設定するのが適当でしょう。

font-family: "fontello", "游明朝", "ヒラギノ明朝 Pro W3","HGS明朝E","MS P明朝",serif;

2016/9/5