利用者の皆様には、ログイン後の管理ページのお知らせ欄でご案内しておりますが、2016/08/24に標準のフォント(字体)を「游ゴシック」に変更しました。
合わせて実装した、ホームページ全体の標準の字体・文字サイズ設定について説明します。
まずは、歴代Windows、歴代OS X(Mac)のシステムフォントと游ゴシック対応をまとめてみます。
Windowsのバージョン | システムフォント | 游ゴシックの可否 |
---|---|---|
XP | MS ゴシック | × |
Vista | メイリオ | × |
7 | × Office2016を利用している場合は○ Office2010/2013向けに無償配布中 | |
8 | Meiryo UI | |
8.1 (2013年10月18日リリース) | ○ | |
10 | 游ゴシック | ○ |
Macのバージョン | システムフォント | 游ゴシックの可否 |
---|---|---|
Mac OS | Osaka | × |
OS X 10.8 Mountain Lion 以前 | ヒラギノ角ゴ | × |
OS X 10.9 Mavericks 以降 (2013年10月22日リリース) | ○ |
このように2013年10月に発表されたそれぞれの新バージョン以降、「游ゴシック」が利用できます。
まめわざでは、次の点を考慮して游ゴシックを採用しました。
Windowsでは上記のようにシステムフォントが何度か変更になっています。ネット上には、
というような情報が見受けられます。
字体の変更に対する捉え方は人それぞれで、慣れてしまえば問題ない人、気に入らないと嫌悪感を覚える人、特定のフォントを使い続けるファン、など様々です。美的センスや視力が人それぞれだからやむを得ません。
万人受けする字体というのは存在しないようなので、個々の意見には目をつぶっての決断となりました。
游ゴシックの採用により、ゴシック体の選択肢はメイリオとの2種類、字体の選択肢は明朝を加えて計3種類となったので、ホームページ全体の字体を変更できるようにシステムの改善を実施しました。
これに合わせて、文字サイズも変更できるようにしました。
明朝をベースにして和風な雰囲気を出したり、大きめの文字サイズを採用して高齢者や弱視者に配慮するなど、様々な使い方が可能です。
全体の字体・文字サイズは「デザイン」にひも付けされ、デザイン編集ページで設定ができます(デザインを複数使い分ければ、字体の異なるページ、文字サイズの異なるページを簡単に作成できます)。
変更の手順は以下です。
ページ一覧の「デザイン」欄の「編集」ボタンからデザイン編集ページに移動します。
上部の「もっとデザイン」タブをクリックします。
文字設定欄で、文字のサイズと字体を選択します。
最後に最下部の「保存」ボタンをクリックしてデザインを保存します。
「見る人が好きな環境で見れる」ことは、印刷物にないホームページの特徴の1つです。
例えば、スマホ・タブレット・ノートパソコン・デスクトップパソコンなど様々なディスプレイサイズで閲覧ができます。
字体が端末やOSのバージョンによって変わるだけでなく、ユーザーが自分の好みの文字サイズ・字体に変更する設定欄も設けられています。
加えて、未来の端末やOSの登場により、字体がどのように変わるかは予想が出来ません。
字体・文字サイズ・文字の折返し位置に過度に重きを置かず、閲覧環境をユーザーに委ねることは、最良のアクセシビリティ対策につながります。
ホームページ訪問者の半数以上を占めるスマートフォンには「游ゴシック」も「メイリオ」もありません。
Androidに至っては、現最新バージョンの6(2016年9月時点)ですら明朝体が実装されていません。
スマートフォンではそれぞれのシステムフォントが利用されます。
字体変更の影響は、半数以上のユーザーには影響がないことを心に留めておきましょう。
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-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では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 | OS X | Office |
---|---|---|---|
游明朝 | 8.1以上 | 10.9 Mavericks以上 | Office2016 (2010/2013でも無償配布) |
ヒラギノ明朝 | -- | 10.0(OS X)以降 | -- |
HGS明朝E | -- | -- | Office2007以降 |
このように、游明朝・ヒラギノ明朝・HGS明朝Eを指定することで、
のいずれかの条件を満たすパソコンで、ギザギザしない明朝体が表示できます。
これに、「MS明朝」と明朝を意味する「serif」を合わせて以下のように設定するのが適当でしょう。
font-family: "fontello", "游明朝", "ヒラギノ明朝 Pro W3","HGS明朝E","MS P明朝",serif;